techlify-inventory-common 18.43.0 → 18.45.0

package/fesm2022/{techlify-inventory-common-techlify-inventory-common-EM-86Ss5.mjs → techlify-inventory-common-techlify-inventory-common-dhFANY2r.mjs}

@@ -1623,14 +1623,14 @@ let StockReceiptProductsListComponent = class StockReceiptProductsListComponent
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptProductsListComponent, deps: [{ token: StockReceiptProductService }, { token: i2$1.FormBuilder }, { token: i1.TechlifyFeatureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, isProductView: { classPropertyName: "isProductView", publicName: "isProductView", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Receipts</mat-card-title>\n    <app-techlify-form-button [component]=\"stockReceiptSingleProductForm()\" [data]=\"{product: product()}\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true);\"></app-techlify-form-button>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipt Products\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.stock_receipt_id, 'view']\">\n            {{ element?.stock_receipt_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.purchase_price | currency }}</td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.amount | currency }}</td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_receipt?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_receipt?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.stock_receipt_id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-product-form-button [stockReceiptId]=\"element?.stock_receipt_id\"\n              [stockReceiptProduct]=\"element\" (saved)=\"reload(); listUpdated.emit(true)\">\n            </app-stock-receipt-product-form-button>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.product?.name, type: 'Stock Receipt Product' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\">\n            </app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: StockReceiptProductFormButtonComponent, selector: "app-stock-receipt-product-form-button", inputs: ["stockReceiptProduct", "stockReceiptId"], outputs: ["saved"] }, { kind: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, isProductView: { classPropertyName: "isProductView", publicName: "isProductView", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Receipts</mat-card-title>\n    <app-techlify-form-button [component]=\"stockReceiptSingleProductForm()\" [data]=\"{product: product()}\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true);\"></app-techlify-form-button>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipt Products\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.stock_receipt_id, 'view']\">\n            {{ element?.stock_receipt_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.purchase_price | currency }}</td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.amount | currency }}</td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_receipt?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_receipt?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n\n          @if (element?.stock_receipt?.stock_transfer) {\n          <span class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n          } @else {\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.stock_receipt_id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-product-form-button [stockReceiptId]=\"element?.stock_receipt_id\"\n              [stockReceiptProduct]=\"element\" (saved)=\"reload(); listUpdated.emit(true)\">\n            </app-stock-receipt-product-form-button>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.product?.name, type: 'Stock Receipt Product' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\">\n            </app-techlify-delete-button>\n          </div>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: StockReceiptProductFormButtonComponent, selector: "app-stock-receipt-product-form-button", inputs: ["stockReceiptProduct", "stockReceiptId"], outputs: ["saved"] }, { kind: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 StockReceiptProductsListComponent = __decorate([
     UntilDestroy()
 ], StockReceiptProductsListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptProductsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipt-product-list', template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Receipts</mat-card-title>\n    <app-techlify-form-button [component]=\"stockReceiptSingleProductForm()\" [data]=\"{product: product()}\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true);\"></app-techlify-form-button>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipt Products\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.stock_receipt_id, 'view']\">\n            {{ element?.stock_receipt_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.purchase_price | currency }}</td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.amount | currency }}</td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_receipt?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_receipt?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.stock_receipt_id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-product-form-button [stockReceiptId]=\"element?.stock_receipt_id\"\n              [stockReceiptProduct]=\"element\" (saved)=\"reload(); listUpdated.emit(true)\">\n            </app-stock-receipt-product-form-button>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.product?.name, type: 'Stock Receipt Product' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\">\n            </app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"] }]
+            args: [{ selector: 'app-stock-receipt-product-list', template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Receipts</mat-card-title>\n    <app-techlify-form-button [component]=\"stockReceiptSingleProductForm()\" [data]=\"{product: product()}\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true);\"></app-techlify-form-button>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipt Products\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.stock_receipt_id, 'view']\">\n            {{ element?.stock_receipt_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.purchase_price | currency }}</td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.amount | currency }}</td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_receipt?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_receipt?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n\n          @if (element?.stock_receipt?.stock_transfer) {\n          <span class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n          } @else {\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.stock_receipt_id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-product-form-button [stockReceiptId]=\"element?.stock_receipt_id\"\n              [stockReceiptProduct]=\"element\" (saved)=\"reload(); listUpdated.emit(true)\">\n            </app-stock-receipt-product-form-button>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.product?.name, type: 'Stock Receipt Product' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\">\n            </app-techlify-delete-button>\n          </div>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"] }]
         }], ctorParameters: () => [{ type: StockReceiptProductService }, { type: i2$1.FormBuilder }, { type: i1.TechlifyFeatureService }] });
 
 class StockIssueProductService extends TechlifyService {
@@ -1808,16 +1808,16 @@ class StockIssueSingleProductFormComponent extends TechlifyFormComponent {
             this.patchFormProducts(this.stockIssue);
         }
         else {
-            if (this.product?.last_stock_issuance) {
-                const { quantity, location_id } = this.product.last_stock_issuance;
+            if (this.product?.last_stock_issue) {
+                const { quantity, location_id } = this.product.last_stock_issue;
                 this.form.patchValue({ quantity, location_id });
             }
         }
     }
-    patchFormProducts(stockIssuance) {
-        if (stockIssuance.stock_issue_products?.length > 0) {
-            this.updateFormWithProductArray(stockIssuance.stock_issue_products[0]);
-            this.product = stockIssuance.stock_issue_products[0].product;
+    patchFormProducts(stockIssue) {
+        if (stockIssue.stock_issue_products?.length > 0) {
+            this.updateFormWithProductArray(stockIssue.stock_issue_products[0]);
+            this.product = stockIssue.stock_issue_products[0].product;
         }
     }
     updateFormWithProductArray(stockIssueProduct) {
@@ -1851,7 +1851,7 @@ class StockIssueSingleProductFormComponent extends TechlifyFormComponent {
             next: (response) => {
                 this.isWorking = false;
                 this.dialogRef.close(response?.item.stock_issue_products);
-                this.alertService.addAlert('Stock Issuance Saved Successfully!', 'success');
+                this.alertService.addAlert('Stock Issue Saved Successfully!', 'success');
             },
             error: () => (this.isWorking = false),
         });
@@ -2038,14 +2038,14 @@ let StockIssueProductListComponent = class StockIssueProductListComponent extend
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueProductListComponent, deps: [{ token: StockIssueProductService }, { token: i2$1.FormBuilder }, { token: i1.TechlifyFeatureService }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, isProductView: { classPropertyName: "isProductView", publicName: "isProductView", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null }, issuableData: { classPropertyName: "issuableData", publicName: "issuableData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedColumns: "selectedColumnsChange", listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Issues</mat-card-title>\n    <app-techlify-form-button [component]=\"stockIssueSingleProductForm()\" [data]=\"{ product: product() }\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true)\"></app-techlify-form-button>\n    <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n      [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issue Products\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-issues', element?.stock_issue_id, 'view']\">\n            {{ element?.stock_issue_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Average Price Column -->\n      <ng-container matColumnDef=\"average_cost\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Average Cost</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.average_cost | currency: 'USD'}}\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Total Column -->\n      <ng-container matColumnDef=\"total\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.total | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.stock_issue?.issuable\"\n            [routerLink]=\"['/maintenances', element?.stock_issue?.issuable_id, 'view']\">\n            Maintenance for {{ element?.stock_issue?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_issue?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_issue?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.stock_issue_id, 'view']\"></app-techlify-icon>\n            <app-techlify-form-button [component]=\"stockIssueProductForm()\" [model]=\"element\"\n              [data]=\"{ stockIssueId: element?.stock_issue_id, product: element?.product }\" width=\"500px\"\n              (saved)=\"modelsUpdatedById($event);listUpdated.emit(true)\">\n            </app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload();listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-average_cost\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-total\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ grandTotal | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns", "isExportWorking"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, isProductView: { classPropertyName: "isProductView", publicName: "isProductView", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null }, issuableData: { classPropertyName: "issuableData", publicName: "issuableData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedColumns: "selectedColumnsChange", listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Issues</mat-card-title>\n    <app-techlify-form-button [component]=\"stockIssueSingleProductForm()\" [data]=\"{ product: product() }\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true)\"></app-techlify-form-button>\n    <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n      [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issue Products\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-issues', element?.stock_issue_id, 'view']\">\n            {{ element?.stock_issue_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Average Price Column -->\n      <ng-container matColumnDef=\"average_cost\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Average Cost</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.average_cost | currency: 'USD'}}\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Total Column -->\n      <ng-container matColumnDef=\"total\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.total | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.stock_issue?.issuable\"\n            [routerLink]=\"['/maintenances', element?.stock_issue?.issuable_id, 'view']\">\n            Maintenance for {{ element?.stock_issue?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_issue?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_issue?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n\n          @if (element.stock_issue?.stock_transfer) {\n          <span class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n          } @else {\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.stock_issue_id, 'view']\"></app-techlify-icon>\n            <app-techlify-form-button [component]=\"stockIssueProductForm()\" [model]=\"element\"\n              [data]=\"{ stockIssueId: element?.stock_issue_id, product: element?.product }\" width=\"500px\"\n              (saved)=\"modelsUpdatedById($event);listUpdated.emit(true)\">\n            </app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload();listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n          }\n\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-average_cost\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-total\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ grandTotal | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns", "isExportWorking"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 StockIssueProductListComponent = __decorate([
     UntilDestroy()
 ], StockIssueProductListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueProductListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-issue-products-list', providers: [DatePipe], template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Issues</mat-card-title>\n    <app-techlify-form-button [component]=\"stockIssueSingleProductForm()\" [data]=\"{ product: product() }\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true)\"></app-techlify-form-button>\n    <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n      [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issue Products\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-issues', element?.stock_issue_id, 'view']\">\n            {{ element?.stock_issue_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Average Price Column -->\n      <ng-container matColumnDef=\"average_cost\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Average Cost</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.average_cost | currency: 'USD'}}\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Total Column -->\n      <ng-container matColumnDef=\"total\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.total | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.stock_issue?.issuable\"\n            [routerLink]=\"['/maintenances', element?.stock_issue?.issuable_id, 'view']\">\n            Maintenance for {{ element?.stock_issue?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_issue?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_issue?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.stock_issue_id, 'view']\"></app-techlify-icon>\n            <app-techlify-form-button [component]=\"stockIssueProductForm()\" [model]=\"element\"\n              [data]=\"{ stockIssueId: element?.stock_issue_id, product: element?.product }\" width=\"500px\"\n              (saved)=\"modelsUpdatedById($event);listUpdated.emit(true)\">\n            </app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload();listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-average_cost\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-total\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ grandTotal | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+            args: [{ selector: 'app-stock-issue-products-list', providers: [DatePipe], template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Issues</mat-card-title>\n    <app-techlify-form-button [component]=\"stockIssueSingleProductForm()\" [data]=\"{ product: product() }\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true)\"></app-techlify-form-button>\n    <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n      [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issue Products\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-issues', element?.stock_issue_id, 'view']\">\n            {{ element?.stock_issue_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Average Price Column -->\n      <ng-container matColumnDef=\"average_cost\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Average Cost</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.average_cost | currency: 'USD'}}\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Total Column -->\n      <ng-container matColumnDef=\"total\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.total | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.stock_issue?.issuable\"\n            [routerLink]=\"['/maintenances', element?.stock_issue?.issuable_id, 'view']\">\n            Maintenance for {{ element?.stock_issue?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_issue?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_issue?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n\n          @if (element.stock_issue?.stock_transfer) {\n          <span class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n          } @else {\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.stock_issue_id, 'view']\"></app-techlify-icon>\n            <app-techlify-form-button [component]=\"stockIssueProductForm()\" [model]=\"element\"\n              [data]=\"{ stockIssueId: element?.stock_issue_id, product: element?.product }\" width=\"500px\"\n              (saved)=\"modelsUpdatedById($event);listUpdated.emit(true)\">\n            </app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload();listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n          }\n\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-average_cost\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-total\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ grandTotal | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: StockIssueProductService }, { type: i2$1.FormBuilder }, { type: i1.TechlifyFeatureService }, { type: i3.DatePipe }] });
 
 class StockTransferService extends TechlifyService {
@@ -2378,7 +2378,7 @@ class ProductBasicInfoComponent {
     loadProductStocksSummary() {
         const params = {
             product_ids: this.product?.id,
-            include: 'stock_receipts_quantity_sum,stock_issuances_quantity_sum,stock_quantity_remaining',
+            include: 'stock_receipts_quantity_sum,stock_issue_quantity_sum,stock_quantity_remaining',
         };
         this.stockSummaryService.summary(params).subscribe({
             next: (response) => {
@@ -2387,11 +2387,11 @@ class ProductBasicInfoComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductBasicInfoComponent, deps: [{ token: StockSummaryService }, { token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: { product: "product" }, outputs: { saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n\n  <!-- Header: Image + Product Info + Actions -->\n  <mat-card-content class=\"d-flex gap-3 align-items-start\">\n    <div class=\"product-image-container rounded overflow-hidden flex-shrink-0\">\n      <img *ngIf=\"product?.image_file_url\" [src]=\"product.image_file_url\" alt=\"{{ product?.name }}\"\n        class=\"w-100 h-100 object-fit-cover\" />\n      <div *ngIf=\"!product?.image_file_url\"\n        class=\"w-100 h-100 bg-secondary-subtle d-flex align-items-center justify-content-center rounded\">\n        <span class=\"material-symbols-outlined text-secondary\" style=\"font-size: 40px;\">inventory_2</span>\n      </div>\n    </div>\n\n    <div class=\"flex-grow-1\">\n      <div class=\"d-flex justify-content-between align-items-start\">\n        <div>\n          <h5 class=\"fw-semibold mb-1\">{{ product?.name }}</h5>\n          <div class=\"d-flex align-items-center gap-1 text-secondary small flex-wrap\">\n            <span>{{ product?.sku }}</span>\n            <span> \u2022 </span>\n            <span>{{ product?.type?.title }}</span>\n            <span> \u2022 </span>\n            <span class=\"material-symbols-outlined\" style=\"font-size: 16px;\">view_in_ar</span>\n            <span>{{ product?.measure?.title }}</span>\n          </div>\n          <div *ngIf=\"product?.average_cost != null\" class=\"d-flex align-items-center gap-1 text-secondary small\">\n            <i class=\"fa-solid fa-money-bill\"></i>\n            <span>{{ product?.average_cost | currency }}</span>\n          </div>\n        </div>\n        <div class=\"d-flex gap-2 flex-shrink-0 align-middle text-secondary\">\n          <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n          <app-techlify-delete-button [model]=\"product\" [data]=\"{type: 'Product', title: product?.name}\"\n            [service]=\"service\"></app-techlify-delete-button>\n        </div>\n      </div>\n\n      <!-- Categories -->\n      <div *ngIf=\"product?.categories?.length\" class=\"d-flex flex-wrap gap-1 mt-2\">\n        <span class=\"badge border bg-light text-dark fw-medium\" *ngFor=\"let category of product?.categories\">\n          {{ category?.title }}\n        </span>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Stock Summary Row -->\n  <mat-card-content class=\"py-3\">\n    <div class=\"row g-0\">\n      <!-- Stock Receipts -->\n      <div *ngIf=\"stockSummary\" class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Receipts</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_receipts_quantity_sum | number }}</p>\n        <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary\">\n          Last Added On {{ product?.last_stock_receipt?.date | date: 'MMM d, y' }}\n        </small>\n      </div>\n\n      <!-- Stock Issues -->\n      <div *ngIf=\"stockSummary\" class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Issues</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_issuances_quantity_sum | number }}</p>\n        <small *ngIf=\"product?.last_stock_issue\" class=\"text-secondary\">\n          Last Added On {{ product?.last_stock_issue?.date | date: 'MMM d, y' }}\n        </small>\n      </div>\n\n      <!-- On Hand -->\n      <div class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">On Hand</small>\n        <p class=\"mb-0 fw-semibold fs-2 text-success\"\n          [ngClass]=\"{ 'text-danger': product?.stock_on_hand < product?.reorder_point }\">\n          {{ (product?.stock_on_hand | number) ?? 0 }}</p>\n        <small *ngIf=\"product?.reorder_point\" class=\"text-secondary\">\n          Reorder At {{ product?.reorder_point }}\n        </small>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Description -->\n  <mat-card-content *ngIf=\"product?.description\" class=\"pt-2\">\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0 mt-1\">{{ product?.description }}</p>\n  </mat-card-content>\n\n  <div class=\"d-flex flex-row align-items-center w-100 mt-2 gap-3 overflow-hidden\">\n    <div class=\"barcode-container flex-grow-1 min-width-0 overflow-hidden\">\n      <ngx-barcode6 [bc-value]=\"product?.sku\" [bc-display-value]=\"true\"></ngx-barcode6>\n    </div>\n    <div class=\"flex-shrink-0\">\n      <qrcode [qrdata]=\"product?.sku\" [width]=\"128\"></qrcode>\n    </div>\n  </div>\n\n</mat-card>", styles: [".product-image-container{width:80px;height:80px}.barcode-container{min-width:0}.barcode-container ::ng-deep ngx-barcode6 svg{width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "imageSrc", "imageHeight", "imageWidth", "margin", "qrdata", "scale", "version", "width", "alt", "ariaLabel", "title"], outputs: ["qrCodeURL"] }, { kind: "component", type: i6$1.NgxBarcode6, selector: "ngx-barcode6", inputs: ["bc-element-type", "bc-class", "bc-format", "bc-line-color", "bc-width", "bc-height", "bc-display-value", "bc-font-options", "bc-font", "bc-text-align", "bc-text-position", "bc-text-margin", "bc-font-size", "bc-background", "bc-margin", "bc-margin-top", "bc-margin-bottom", "bc-margin-left", "bc-margin-right", "bc-value", "bc-valid"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: { product: "product" }, outputs: { saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n\n  <!-- Header: Image + Product Info + Actions -->\n  <mat-card-content class=\"d-flex gap-3 align-items-start\">\n    <div class=\"product-image-container rounded overflow-hidden flex-shrink-0\">\n      <img *ngIf=\"product?.image_file_url\" [src]=\"product.image_file_url\" alt=\"{{ product?.name }}\"\n        class=\"w-100 h-100 object-fit-cover\" />\n      <div *ngIf=\"!product?.image_file_url\"\n        class=\"w-100 h-100 bg-secondary-subtle d-flex align-items-center justify-content-center rounded\">\n        <span class=\"material-symbols-outlined text-secondary\" style=\"font-size: 40px;\">inventory_2</span>\n      </div>\n    </div>\n\n    <div class=\"flex-grow-1\">\n      <div class=\"d-flex justify-content-between align-items-start\">\n        <div>\n          <h5 class=\"fw-semibold mb-1\">{{ product?.name }}</h5>\n          <div class=\"d-flex align-items-center gap-1 text-secondary small flex-wrap\">\n            <span>{{ product?.sku }}</span>\n            <span> \u2022 </span>\n            <span>{{ product?.type?.title }}</span>\n            <span> \u2022 </span>\n            <span class=\"material-symbols-outlined\" style=\"font-size: 16px;\">view_in_ar</span>\n            <span>{{ product?.measure?.title }}</span>\n          </div>\n          <div *ngIf=\"product?.average_cost != null\" class=\"d-flex align-items-center gap-1 text-secondary small\">\n            <i class=\"fa-solid fa-money-bill\"></i>\n            <span>{{ product?.average_cost | currency }}</span>\n          </div>\n        </div>\n        <div class=\"d-flex gap-2 flex-shrink-0 align-middle text-secondary\">\n          <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n          <app-techlify-delete-button [model]=\"product\" [data]=\"{type: 'Product', title: product?.name}\"\n            [service]=\"service\"></app-techlify-delete-button>\n        </div>\n      </div>\n\n      <!-- Categories -->\n      <div *ngIf=\"product?.categories?.length\" class=\"d-flex flex-wrap gap-1 mt-2\">\n        <span class=\"badge border bg-light text-dark fw-medium\" *ngFor=\"let category of product?.categories\">\n          {{ category?.title }}\n        </span>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Stock Summary Row -->\n  <mat-card-content class=\"py-3\">\n    <div class=\"row g-0\">\n      <!-- Stock Receipts -->\n      <div *ngIf=\"stockSummary\" class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Receipts</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_receipts_quantity_sum | number }}</p>\n        <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary\">\n          Last Added On {{ product?.last_stock_receipt?.date | date: 'MMM d, y' }}\n        </small>\n      </div>\n\n      <!-- Stock Issues -->\n      <div *ngIf=\"stockSummary\" class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Issues</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_issue_quantity_sum | number }}</p>\n        <small *ngIf=\"product?.last_stock_issue\" class=\"text-secondary\">\n          Last Added On {{ product?.last_stock_issue?.date | date: 'MMM d, y' }}\n        </small>\n      </div>\n\n      <!-- On Hand -->\n      <div class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">On Hand</small>\n        <p class=\"mb-0 fw-semibold fs-2 text-success\"\n          [ngClass]=\"{ 'text-danger': product?.stock_on_hand < product?.reorder_point }\">\n          {{ (product?.stock_on_hand | number) ?? 0 }}</p>\n        <small *ngIf=\"product?.reorder_point\" class=\"text-secondary\">\n          Reorder At {{ product?.reorder_point }}\n        </small>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Description -->\n  <mat-card-content *ngIf=\"product?.description\" class=\"pt-2\">\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0 mt-1\">{{ product?.description }}</p>\n  </mat-card-content>\n\n  <div class=\"d-flex flex-row align-items-center w-100 mt-2 gap-3 overflow-hidden\">\n    <div class=\"barcode-container flex-grow-1 min-width-0 overflow-hidden\">\n      <ngx-barcode6 [bc-value]=\"product?.sku\" [bc-display-value]=\"true\"></ngx-barcode6>\n    </div>\n    <div class=\"flex-shrink-0\">\n      <qrcode [qrdata]=\"product?.sku\" [width]=\"128\"></qrcode>\n    </div>\n  </div>\n\n</mat-card>", styles: [".product-image-container{width:80px;height:80px}.barcode-container{min-width:0}.barcode-container ::ng-deep ngx-barcode6 svg{width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "imageSrc", "imageHeight", "imageWidth", "margin", "qrdata", "scale", "version", "width", "alt", "ariaLabel", "title"], outputs: ["qrCodeURL"] }, { kind: "component", type: i6$1.NgxBarcode6, selector: "ngx-barcode6", inputs: ["bc-element-type", "bc-class", "bc-format", "bc-line-color", "bc-width", "bc-height", "bc-display-value", "bc-font-options", "bc-font", "bc-text-align", "bc-text-position", "bc-text-margin", "bc-font-size", "bc-background", "bc-margin", "bc-margin-top", "bc-margin-bottom", "bc-margin-left", "bc-margin-right", "bc-value", "bc-valid"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductBasicInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-product-basic-info', template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n\n  <!-- Header: Image + Product Info + Actions -->\n  <mat-card-content class=\"d-flex gap-3 align-items-start\">\n    <div class=\"product-image-container rounded overflow-hidden flex-shrink-0\">\n      <img *ngIf=\"product?.image_file_url\" [src]=\"product.image_file_url\" alt=\"{{ product?.name }}\"\n        class=\"w-100 h-100 object-fit-cover\" />\n      <div *ngIf=\"!product?.image_file_url\"\n        class=\"w-100 h-100 bg-secondary-subtle d-flex align-items-center justify-content-center rounded\">\n        <span class=\"material-symbols-outlined text-secondary\" style=\"font-size: 40px;\">inventory_2</span>\n      </div>\n    </div>\n\n    <div class=\"flex-grow-1\">\n      <div class=\"d-flex justify-content-between align-items-start\">\n        <div>\n          <h5 class=\"fw-semibold mb-1\">{{ product?.name }}</h5>\n          <div class=\"d-flex align-items-center gap-1 text-secondary small flex-wrap\">\n            <span>{{ product?.sku }}</span>\n            <span> \u2022 </span>\n            <span>{{ product?.type?.title }}</span>\n            <span> \u2022 </span>\n            <span class=\"material-symbols-outlined\" style=\"font-size: 16px;\">view_in_ar</span>\n            <span>{{ product?.measure?.title }}</span>\n          </div>\n          <div *ngIf=\"product?.average_cost != null\" class=\"d-flex align-items-center gap-1 text-secondary small\">\n            <i class=\"fa-solid fa-money-bill\"></i>\n            <span>{{ product?.average_cost | currency }}</span>\n          </div>\n        </div>\n        <div class=\"d-flex gap-2 flex-shrink-0 align-middle text-secondary\">\n          <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n          <app-techlify-delete-button [model]=\"product\" [data]=\"{type: 'Product', title: product?.name}\"\n            [service]=\"service\"></app-techlify-delete-button>\n        </div>\n      </div>\n\n      <!-- Categories -->\n      <div *ngIf=\"product?.categories?.length\" class=\"d-flex flex-wrap gap-1 mt-2\">\n        <span class=\"badge border bg-light text-dark fw-medium\" *ngFor=\"let category of product?.categories\">\n          {{ category?.title }}\n        </span>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Stock Summary Row -->\n  <mat-card-content class=\"py-3\">\n    <div class=\"row g-0\">\n      <!-- Stock Receipts -->\n      <div *ngIf=\"stockSummary\" class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Receipts</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_receipts_quantity_sum | number }}</p>\n        <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary\">\n          Last Added On {{ product?.last_stock_receipt?.date | date: 'MMM d, y' }}\n        </small>\n      </div>\n\n      <!-- Stock Issues -->\n      <div *ngIf=\"stockSummary\" class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Issues</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_issuances_quantity_sum | number }}</p>\n        <small *ngIf=\"product?.last_stock_issue\" class=\"text-secondary\">\n          Last Added On {{ product?.last_stock_issue?.date | date: 'MMM d, y' }}\n        </small>\n      </div>\n\n      <!-- On Hand -->\n      <div class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">On Hand</small>\n        <p class=\"mb-0 fw-semibold fs-2 text-success\"\n          [ngClass]=\"{ 'text-danger': product?.stock_on_hand < product?.reorder_point }\">\n          {{ (product?.stock_on_hand | number) ?? 0 }}</p>\n        <small *ngIf=\"product?.reorder_point\" class=\"text-secondary\">\n          Reorder At {{ product?.reorder_point }}\n        </small>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Description -->\n  <mat-card-content *ngIf=\"product?.description\" class=\"pt-2\">\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0 mt-1\">{{ product?.description }}</p>\n  </mat-card-content>\n\n  <div class=\"d-flex flex-row align-items-center w-100 mt-2 gap-3 overflow-hidden\">\n    <div class=\"barcode-container flex-grow-1 min-width-0 overflow-hidden\">\n      <ngx-barcode6 [bc-value]=\"product?.sku\" [bc-display-value]=\"true\"></ngx-barcode6>\n    </div>\n    <div class=\"flex-shrink-0\">\n      <qrcode [qrdata]=\"product?.sku\" [width]=\"128\"></qrcode>\n    </div>\n  </div>\n\n</mat-card>", styles: [".product-image-container{width:80px;height:80px}.barcode-container{min-width:0}.barcode-container ::ng-deep ngx-barcode6 svg{width:100%;height:auto}\n"] }]
+            args: [{ selector: 'app-product-basic-info', template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n\n  <!-- Header: Image + Product Info + Actions -->\n  <mat-card-content class=\"d-flex gap-3 align-items-start\">\n    <div class=\"product-image-container rounded overflow-hidden flex-shrink-0\">\n      <img *ngIf=\"product?.image_file_url\" [src]=\"product.image_file_url\" alt=\"{{ product?.name }}\"\n        class=\"w-100 h-100 object-fit-cover\" />\n      <div *ngIf=\"!product?.image_file_url\"\n        class=\"w-100 h-100 bg-secondary-subtle d-flex align-items-center justify-content-center rounded\">\n        <span class=\"material-symbols-outlined text-secondary\" style=\"font-size: 40px;\">inventory_2</span>\n      </div>\n    </div>\n\n    <div class=\"flex-grow-1\">\n      <div class=\"d-flex justify-content-between align-items-start\">\n        <div>\n          <h5 class=\"fw-semibold mb-1\">{{ product?.name }}</h5>\n          <div class=\"d-flex align-items-center gap-1 text-secondary small flex-wrap\">\n            <span>{{ product?.sku }}</span>\n            <span> \u2022 </span>\n            <span>{{ product?.type?.title }}</span>\n            <span> \u2022 </span>\n            <span class=\"material-symbols-outlined\" style=\"font-size: 16px;\">view_in_ar</span>\n            <span>{{ product?.measure?.title }}</span>\n          </div>\n          <div *ngIf=\"product?.average_cost != null\" class=\"d-flex align-items-center gap-1 text-secondary small\">\n            <i class=\"fa-solid fa-money-bill\"></i>\n            <span>{{ product?.average_cost | currency }}</span>\n          </div>\n        </div>\n        <div class=\"d-flex gap-2 flex-shrink-0 align-middle text-secondary\">\n          <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n          <app-techlify-delete-button [model]=\"product\" [data]=\"{type: 'Product', title: product?.name}\"\n            [service]=\"service\"></app-techlify-delete-button>\n        </div>\n      </div>\n\n      <!-- Categories -->\n      <div *ngIf=\"product?.categories?.length\" class=\"d-flex flex-wrap gap-1 mt-2\">\n        <span class=\"badge border bg-light text-dark fw-medium\" *ngFor=\"let category of product?.categories\">\n          {{ category?.title }}\n        </span>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Stock Summary Row -->\n  <mat-card-content class=\"py-3\">\n    <div class=\"row g-0\">\n      <!-- Stock Receipts -->\n      <div *ngIf=\"stockSummary\" class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Receipts</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_receipts_quantity_sum | number }}</p>\n        <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary\">\n          Last Added On {{ product?.last_stock_receipt?.date | date: 'MMM d, y' }}\n        </small>\n      </div>\n\n      <!-- Stock Issues -->\n      <div *ngIf=\"stockSummary\" class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Issues</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_issue_quantity_sum | number }}</p>\n        <small *ngIf=\"product?.last_stock_issue\" class=\"text-secondary\">\n          Last Added On {{ product?.last_stock_issue?.date | date: 'MMM d, y' }}\n        </small>\n      </div>\n\n      <!-- On Hand -->\n      <div class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">On Hand</small>\n        <p class=\"mb-0 fw-semibold fs-2 text-success\"\n          [ngClass]=\"{ 'text-danger': product?.stock_on_hand < product?.reorder_point }\">\n          {{ (product?.stock_on_hand | number) ?? 0 }}</p>\n        <small *ngIf=\"product?.reorder_point\" class=\"text-secondary\">\n          Reorder At {{ product?.reorder_point }}\n        </small>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Description -->\n  <mat-card-content *ngIf=\"product?.description\" class=\"pt-2\">\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0 mt-1\">{{ product?.description }}</p>\n  </mat-card-content>\n\n  <div class=\"d-flex flex-row align-items-center w-100 mt-2 gap-3 overflow-hidden\">\n    <div class=\"barcode-container flex-grow-1 min-width-0 overflow-hidden\">\n      <ngx-barcode6 [bc-value]=\"product?.sku\" [bc-display-value]=\"true\"></ngx-barcode6>\n    </div>\n    <div class=\"flex-shrink-0\">\n      <qrcode [qrdata]=\"product?.sku\" [width]=\"128\"></qrcode>\n    </div>\n  </div>\n\n</mat-card>", styles: [".product-image-container{width:80px;height:80px}.barcode-container{min-width:0}.barcode-container ::ng-deep ngx-barcode6 svg{width:100%;height:auto}\n"] }]
         }], ctorParameters: () => [{ type: StockSummaryService }, { type: ProductService }], propDecorators: { product: [{
                 type: Input
             }], saved: [{
@@ -2410,7 +2410,7 @@ class ProductViewPageComponent {
     productBasicInfoComponent;
     productLocationList;
     stockTransferList;
-    stockReceiptsListPage;
+    stockReceiptProductListPage;
     stockIssueProductListPage;
     constructor(productService, activatedRoute, location) {
         this.productService = productService;
@@ -2445,7 +2445,7 @@ class ProductViewPageComponent {
         this.getProduct(this.id);
         this.productBasicInfoComponent.loadProductStocksSummary();
         this.productLocationList.reload();
-        this.stockReceiptsListPage.reload();
+        this.stockReceiptProductListPage.reload();
         this.stockIssueProductListPage.reload();
     }
     /**
@@ -2463,11 +2463,11 @@ class ProductViewPageComponent {
         this.location.back();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductViewPageComponent, deps: [{ token: ProductService }, { token: i4$1.ActivatedRoute }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductViewPageComponent, selector: "app-product-view-page", viewQueries: [{ propertyName: "productBasicInfoComponent", first: true, predicate: ["productBasicInfoComponent"], descendants: true }, { propertyName: "productLocationList", first: true, predicate: ["productLocationList"], descendants: true }, { propertyName: "stockTransferList", first: true, predicate: ["stockTransferList"], descendants: true }, { propertyName: "stockReceiptsListPage", first: true, predicate: ["stockReceiptsListPage"], descendants: true }, { propertyName: "stockIssueProductListPage", first: true, predicate: ["stockIssueProductListPage"], descendants: true }], ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n  <div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n    <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\"\n        (updated)=\"stockTransferList.reload(); stockIssueProductListPage.reload(); \"\n        #productLocationList></app-product-location-list>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"Product\"\n        [relatedModelId]=\"product.id\"></app-note-list>\n\n    </div>\n    <div class=\"d-flex flex-column gap-3 w-100\">\n      <app-stock-receipt-product-list #stockReceiptsListPage [filters]=\"{ product_ids: product?.id }\"\n        [product]=\"product\" [isProductView]=\"true\" (listUpdated)=\"getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipt-product-list>\n\n      <app-stock-issue-products-list #stockIssueProductListPage [isProductView]=\"true\"\n        [product]=\"product\" [filters]=\"{ product_ids: product?.id }\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issue-products-list>\n\n      <app-stock-transfer-list #stockTransferList *ngIf=\"product\" [productId]=\"product.id\"\n        (changed)=\"stockTransferChanged()\"></app-stock-transfer-list>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: ["filters", "isProductView", "selectedColumns", "exportInProgress", "product"], outputs: ["listUpdated", "columnConfigReady"] }, { kind: "component", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: ["filters", "isProductView", "product", "selectedColumns", "exportInProgress", "issuableData"], outputs: ["selectedColumnsChange", "listUpdated", "columnConfigReady"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ProductLocationListComponent, selector: "app-product-location-list", inputs: ["product"], outputs: ["updated"] }, { kind: "component", type: StockTransferListComponent, selector: "app-stock-transfer-list", inputs: ["productId"], outputs: ["changed"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: ["product"], outputs: ["saved", "deleted"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductViewPageComponent, selector: "app-product-view-page", viewQueries: [{ propertyName: "productBasicInfoComponent", first: true, predicate: ["productBasicInfoComponent"], descendants: true }, { propertyName: "productLocationList", first: true, predicate: ["productLocationList"], descendants: true }, { propertyName: "stockTransferList", first: true, predicate: ["stockTransferList"], descendants: true }, { propertyName: "stockReceiptProductListPage", first: true, predicate: ["stockReceiptProductListPage"], descendants: true }, { propertyName: "stockIssueProductListPage", first: true, predicate: ["stockIssueProductListPage"], descendants: true }], ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n  <div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n    <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\"\n        (updated)=\"stockTransferList.reload(); stockIssueProductListPage.reload(); stockReceiptProductListPage.reload()\"\n        #productLocationList></app-product-location-list>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"Product\"\n        [relatedModelId]=\"product.id\"></app-note-list>\n\n    </div>\n    <div class=\"d-flex flex-column gap-3 w-100\">\n      <app-stock-receipt-product-list #stockReceiptProductListPage [filters]=\"{ product_ids: product?.id }\"\n        [product]=\"product\" [isProductView]=\"true\" (listUpdated)=\"getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipt-product-list>\n\n      <app-stock-issue-products-list #stockIssueProductListPage [isProductView]=\"true\"\n        [product]=\"product\" [filters]=\"{ product_ids: product?.id }\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issue-products-list>\n\n      <app-stock-transfer-list #stockTransferList *ngIf=\"product\" [productId]=\"product.id\"\n        (changed)=\"stockTransferChanged()\"></app-stock-transfer-list>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: ["filters", "isProductView", "selectedColumns", "exportInProgress", "product"], outputs: ["listUpdated", "columnConfigReady"] }, { kind: "component", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: ["filters", "isProductView", "product", "selectedColumns", "exportInProgress", "issuableData"], outputs: ["selectedColumnsChange", "listUpdated", "columnConfigReady"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ProductLocationListComponent, selector: "app-product-location-list", inputs: ["product"], outputs: ["updated"] }, { kind: "component", type: StockTransferListComponent, selector: "app-stock-transfer-list", inputs: ["productId"], outputs: ["changed"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: ["product"], outputs: ["saved", "deleted"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductViewPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-product-view-page', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n  <div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n    <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\"\n        (updated)=\"stockTransferList.reload(); stockIssueProductListPage.reload(); \"\n        #productLocationList></app-product-location-list>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"Product\"\n        [relatedModelId]=\"product.id\"></app-note-list>\n\n    </div>\n    <div class=\"d-flex flex-column gap-3 w-100\">\n      <app-stock-receipt-product-list #stockReceiptsListPage [filters]=\"{ product_ids: product?.id }\"\n        [product]=\"product\" [isProductView]=\"true\" (listUpdated)=\"getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipt-product-list>\n\n      <app-stock-issue-products-list #stockIssueProductListPage [isProductView]=\"true\"\n        [product]=\"product\" [filters]=\"{ product_ids: product?.id }\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issue-products-list>\n\n      <app-stock-transfer-list #stockTransferList *ngIf=\"product\" [productId]=\"product.id\"\n        (changed)=\"stockTransferChanged()\"></app-stock-transfer-list>\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'app-product-view-page', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n  <div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n    <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\"\n        (updated)=\"stockTransferList.reload(); stockIssueProductListPage.reload(); stockReceiptProductListPage.reload()\"\n        #productLocationList></app-product-location-list>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"Product\"\n        [relatedModelId]=\"product.id\"></app-note-list>\n\n    </div>\n    <div class=\"d-flex flex-column gap-3 w-100\">\n      <app-stock-receipt-product-list #stockReceiptProductListPage [filters]=\"{ product_ids: product?.id }\"\n        [product]=\"product\" [isProductView]=\"true\" (listUpdated)=\"getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipt-product-list>\n\n      <app-stock-issue-products-list #stockIssueProductListPage [isProductView]=\"true\"\n        [product]=\"product\" [filters]=\"{ product_ids: product?.id }\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issue-products-list>\n\n      <app-stock-transfer-list #stockTransferList *ngIf=\"product\" [productId]=\"product.id\"\n        (changed)=\"stockTransferChanged()\"></app-stock-transfer-list>\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: () => [{ type: ProductService }, { type: i4$1.ActivatedRoute }, { type: i3.Location }], propDecorators: { productBasicInfoComponent: [{
                 type: ViewChild,
                 args: ['productBasicInfoComponent']
@@ -2477,9 +2477,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], stockTransferList: [{
                 type: ViewChild,
                 args: ['stockTransferList']
-            }], stockReceiptsListPage: [{
+            }], stockReceiptProductListPage: [{
                 type: ViewChild,
-                args: ['stockReceiptsListPage']
+                args: ['stockReceiptProductListPage']
             }], stockIssueProductListPage: [{
                 type: ViewChild,
                 args: ['stockIssueProductListPage']
@@ -2789,7 +2789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-const routes$8 = [
+const routes$9 = [
     {
         path: '',
         component: ProductNavBarComponent,
@@ -2836,12 +2836,12 @@ const routes$8 = [
 class ProductRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ProductRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductRoutingModule, imports: [RouterModule.forChild(routes$8), RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductRoutingModule, imports: [RouterModule.forChild(routes$9), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild(routes$8)],
+                    imports: [RouterModule.forChild(routes$9)],
                     exports: [RouterModule],
                 }]
         }] });
@@ -3393,7 +3393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<mat-card class=\"d-flex flex-column gap-2 container\">\n    <mat-card-content>\n\n        <div class=\"d-flex flex-column gap-1\">\n            <h5>\n                <span class=\"material-symbols-outlined align-middle\">download</span>\n                Receive Stock\n            </h5>\n        </div>\n\n        <form class=\"d-flex flex-column gap-2\" [formGroup]=\"form\" (submit)=\"save()\">\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Supplier</mat-label>\n                        <app-searchable-selector apiUrl='api/suppliers' formControlName=\"supplier_id\"\n                            titleField='company_name' required></app-searchable-selector>\n                        <mat-error *ngIf=\"isFieldValid('supplier_id')\">{{ getErrorMessage('supplier_id') }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Date</mat-label>\n                        <input matInput [matDatepicker]=\"picker\" placeholder=\"Date\" formControlName=\"date\" required>\n                        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                        <mat-datepicker #picker></mat-datepicker>\n                        <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n                    </mat-form-field>\n                </div>\n\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <div class=\"w-50\">\n                        <mat-form-field appearance='outline' class=\"w-100\">\n                            <mat-label>Particulars</mat-label>\n                            <textarea matInput placeholder=\"Particulars\" formControlName=\"details\"></textarea>\n                        </mat-form-field>\n                    </div>\n                </div>\n            </div>\n\n            <table class=\"table mt-3\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">#</th>\n                        <th scope=\"col\">Product</th>\n                        <th *ngIf=\"locationCount() > 0\" scope=\"col\">Location</th>\n                        <th scope=\"col\">Quantity</th>\n                        <th scope=\"col\">Purchase Price</th>\n                        <th scope=\"col\">Total Value</th>\n                        <th scope=\"col\">Particulars</th>\n                        <th scope=\"col\" class=\"text-center\" width=\"50\"></th>\n                    </tr>\n                </thead>\n                <tbody formArrayName=\"stock_receipt_products\">\n                    <tr *ngFor=\"let row of stockReceiptProducts.controls; let i = index\" [formGroupName]=\"i\">\n                        <th scope=\"row\">{{ i + 1 }}</th>\n                        <td>\n                            <mat-form-field appearance='outline' class=\"w-100\">\n                                <mat-label>Product</mat-label>\n                                <app-searchable-selector apiUrl='api/products' formControlName=\"product_id\"\n                                    titleField='name' [cache]=\"true\" [selectedValue]=\"getSelectedProduct(i)\"\n                                    required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td *ngIf=\"locationCount() > 0\">\n                            <app-location-selector appearance='outline'\n                                formControlName=\"location_id\"></app-location-selector>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Quantity</mat-label>\n                                <input matInput formControlName=\"quantity\" min=\"0\" type=\"number\">\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Purchase Price</mat-label>\n                                <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\">\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Total Value</mat-label>\n                                <input matInput [value]=\"getRowTotal(i) | currency\" readonly>\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline'>\n                                <mat-label>Particulars</mat-label>\n                                <input matInput formControlName=\"particulars\">\n                            </mat-form-field>\n                        </td>\n                        <td class=\"text-center align-middle\">\n                            <div class=\"d-flex gap-2 justify-content-center align-items-center text-secondary\">\n                                <app-techlify-icon role='button' name='delete' (click)=\"removeStockReceiptProduct(i)\"\n                                    matTooltip=\"Remove row\"></app-techlify-icon>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n                <tfoot>\n                    <tr>\n                        <td colspan=\"8\" class=\"text-end\">\n                            <div class=\"d-flex flex-row gap-2 justify-content-end\">\n                                <button mat-button color=\"primary\" type=\"button\" (click)=\"clearProducts()\"\n                                    [disabled]=\"stockReceiptProducts.length === 0\">\n                                    <mat-icon>block</mat-icon> CLEAR ALL\n                                </button>\n                                <button mat-raised-button color=\"primary\" type=\"button\"\n                                    (click)=\"addStockReceiptProduct()\">\n                                    <mat-icon>add</mat-icon> ADD\n                                </button>\n                            </div>\n                        </td>\n                    </tr>\n                </tfoot>\n            </table>\n\n            <div class=\"d-flex justify-content-end align-items-center gap-2 mt-2\">\n                <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                <button [disabled]=\"isWorking || stockReceiptProducts.length === 0\" mat-raised-button color=\"primary\"\n                    type=\"submit\">Save</button>\n            </div>\n\n        </form>\n\n    </mat-card-content>\n</mat-card>\n" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: StockReceiptService }, { type: i4$1.Router }, { type: i4$1.ActivatedRoute }, { type: LocationService }, { type: i3.Location }] });
 
-const routes$7 = [
+const routes$8 = [
     {
         path: '',
         component: StockReceiptPageComponent,
@@ -3421,12 +3421,12 @@ const routes$7 = [
 class StockReceiptsRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptsRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptsRoutingModule, imports: [RouterModule.forChild(routes$7), RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptsRoutingModule, imports: [RouterModule.forChild(routes$8), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptsRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild(routes$7)],
+                    imports: [RouterModule.forChild(routes$8)],
                     exports: [RouterModule],
                 }]
         }] });
@@ -4101,7 +4101,7 @@ class InventoryDashboardPageComponent {
     productSummaryService;
     lowStockProductsCount;
     stockReceiptsQtySum;
-    stockIssuanceQtySum;
+    stockIssueQuantitySum;
     constructor(productSummaryService) {
         this.productSummaryService = productSummaryService;
     }
@@ -4110,7 +4110,7 @@ class InventoryDashboardPageComponent {
     }
     loadProductSummary() {
         const params = {
-            include: 'low_stock_products_count,stock_receipts_quantity_sum,stock_issuances_quantity_sum',
+            include: 'low_stock_products_count,stock_receipts_quantity_sum,stock_issue_quantity_sum',
             date_from: moment$1().startOf('month').format('YYYY-MM-DD'),
             date_to: moment$1().endOf('month').format('YYYY-MM-DD'),
         };
@@ -4118,16 +4118,16 @@ class InventoryDashboardPageComponent {
             next: (response) => {
                 this.lowStockProductsCount = response?.low_stock_products_count;
                 this.stockReceiptsQtySum = response?.stock_receipts_quantity_sum;
-                this.stockIssuanceQtySum = response?.stock_issuances_quantity_sum;
+                this.stockIssueQuantitySum = response?.stock_issue_quantity_sum;
             },
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InventoryDashboardPageComponent, deps: [{ token: ProductSummaryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InventoryDashboardPageComponent, selector: "app-inventory-dashboard-page", ngImport: i0, template: "<div class=\"d-flex justify-content-start align-items-start gap-3 vh-100\">\n  <div class=\"row\" style=\"width: calc(100% - 300px)\">\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\" style=\"color: #f5222d !important\"> inventory_2 </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Low Stock Products</small>\n            <h1 class=\"mb-0 fw-bold\">{{ lowStockProductsCount | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\"> arrow_circle_down </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Received This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockReceiptsQtySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\"> arrow_circle_up </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Issued This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockIssuanceQtySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-product-quick-search></app-product-quick-search>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-low-stock-products-widget></app-low-stock-products-widget>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-product-summary-chart title=\"Product By Category\"></app-product-summary-chart>\n    </div>\n  </div>\n  <div style=\"width: 300px\" class=\"d-flex flex-column gap-3 h-100\">\n    <mat-card class=\"h-100\">\n      <mat-card-content>\n        <div class=\"d-flex justify-content-start align-items-center gap-2\">\n          <mat-icon>flag</mat-icon>\n          <h3 class=\"mb-0 fw-bold\">Reports</h3>\n        </div>\n      </mat-card-content>\n      <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start gap-3\">\n        <a\n          class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark\"\n          routerLink=\"/inventory/reports/low-stock-report\"\n        >\n          <span class=\"material-symbols-outlined fs-3\"> description </span>\n          <h3 class=\"mb-0\">Low Stock Report</h3>\n          <span class=\"material-symbols-outlined\"> chevron_forward </span>\n        </a>\n        <a\n          class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark cursor-pointer\"\n          routerLink=\"/inventory/reports/inventory-value-report\"\n        >\n          <span class=\"material-symbols-outlined fs-3\"> description </span>\n          <h3 class=\"mb-0\">Inventory Value Report</h3>\n          <span class=\"material-symbols-outlined\"> chevron_forward </span>\n        </a>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: LowStockProductsWidgetComponent, selector: "app-low-stock-products-widget" }, { kind: "component", type: ProductSummaryChartComponent, selector: "app-product-summary-chart", inputs: ["height", "title"] }, { kind: "component", type: ProductQuickSearchComponent, selector: "app-product-quick-search" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InventoryDashboardPageComponent, selector: "app-inventory-dashboard-page", ngImport: i0, template: "<div class=\"d-flex justify-content-start align-items-start gap-3 vh-100\">\n  <div class=\"row\" style=\"width: calc(100% - 300px)\">\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\" style=\"color: #f5222d !important\"> inventory_2 </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Low Stock Products</small>\n            <h1 class=\"mb-0 fw-bold\">{{ lowStockProductsCount | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\"> arrow_circle_down </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Received This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockReceiptsQtySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\"> arrow_circle_up </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Issued This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockIssueQuantitySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-product-quick-search></app-product-quick-search>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-low-stock-products-widget></app-low-stock-products-widget>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-product-summary-chart title=\"Product By Category\"></app-product-summary-chart>\n    </div>\n  </div>\n  <div style=\"width: 300px\" class=\"d-flex flex-column gap-3 h-100\">\n    <mat-card class=\"h-100\">\n      <mat-card-content>\n        <div class=\"d-flex justify-content-start align-items-center gap-2\">\n          <mat-icon>flag</mat-icon>\n          <h3 class=\"mb-0 fw-bold\">Reports</h3>\n        </div>\n      </mat-card-content>\n      <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start gap-3\">\n        <a\n          class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark\"\n          routerLink=\"/inventory/reports/low-stock-report\"\n        >\n          <span class=\"material-symbols-outlined fs-3\"> description </span>\n          <h3 class=\"mb-0\">Low Stock Report</h3>\n          <span class=\"material-symbols-outlined\"> chevron_forward </span>\n        </a>\n        <a\n          class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark cursor-pointer\"\n          routerLink=\"/inventory/reports/inventory-value-report\"\n        >\n          <span class=\"material-symbols-outlined fs-3\"> description </span>\n          <h3 class=\"mb-0\">Inventory Value Report</h3>\n          <span class=\"material-symbols-outlined\"> chevron_forward </span>\n        </a>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: LowStockProductsWidgetComponent, selector: "app-low-stock-products-widget" }, { kind: "component", type: ProductSummaryChartComponent, selector: "app-product-summary-chart", inputs: ["height", "title"] }, { kind: "component", type: ProductQuickSearchComponent, selector: "app-product-quick-search" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InventoryDashboardPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-inventory-dashboard-page', template: "<div class=\"d-flex justify-content-start align-items-start gap-3 vh-100\">\n  <div class=\"row\" style=\"width: calc(100% - 300px)\">\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\" style=\"color: #f5222d !important\"> inventory_2 </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Low Stock Products</small>\n            <h1 class=\"mb-0 fw-bold\">{{ lowStockProductsCount | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\"> arrow_circle_down </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Received This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockReceiptsQtySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\"> arrow_circle_up </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Issued This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockIssuanceQtySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-product-quick-search></app-product-quick-search>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-low-stock-products-widget></app-low-stock-products-widget>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-product-summary-chart title=\"Product By Category\"></app-product-summary-chart>\n    </div>\n  </div>\n  <div style=\"width: 300px\" class=\"d-flex flex-column gap-3 h-100\">\n    <mat-card class=\"h-100\">\n      <mat-card-content>\n        <div class=\"d-flex justify-content-start align-items-center gap-2\">\n          <mat-icon>flag</mat-icon>\n          <h3 class=\"mb-0 fw-bold\">Reports</h3>\n        </div>\n      </mat-card-content>\n      <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start gap-3\">\n        <a\n          class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark\"\n          routerLink=\"/inventory/reports/low-stock-report\"\n        >\n          <span class=\"material-symbols-outlined fs-3\"> description </span>\n          <h3 class=\"mb-0\">Low Stock Report</h3>\n          <span class=\"material-symbols-outlined\"> chevron_forward </span>\n        </a>\n        <a\n          class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark cursor-pointer\"\n          routerLink=\"/inventory/reports/inventory-value-report\"\n        >\n          <span class=\"material-symbols-outlined fs-3\"> description </span>\n          <h3 class=\"mb-0\">Inventory Value Report</h3>\n          <span class=\"material-symbols-outlined\"> chevron_forward </span>\n        </a>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'app-inventory-dashboard-page', template: "<div class=\"d-flex justify-content-start align-items-start gap-3 vh-100\">\n  <div class=\"row\" style=\"width: calc(100% - 300px)\">\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\" style=\"color: #f5222d !important\"> inventory_2 </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Low Stock Products</small>\n            <h1 class=\"mb-0 fw-bold\">{{ lowStockProductsCount | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\"> arrow_circle_down </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Received This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockReceiptsQtySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\"> arrow_circle_up </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Issued This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockIssueQuantitySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-product-quick-search></app-product-quick-search>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-low-stock-products-widget></app-low-stock-products-widget>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-product-summary-chart title=\"Product By Category\"></app-product-summary-chart>\n    </div>\n  </div>\n  <div style=\"width: 300px\" class=\"d-flex flex-column gap-3 h-100\">\n    <mat-card class=\"h-100\">\n      <mat-card-content>\n        <div class=\"d-flex justify-content-start align-items-center gap-2\">\n          <mat-icon>flag</mat-icon>\n          <h3 class=\"mb-0 fw-bold\">Reports</h3>\n        </div>\n      </mat-card-content>\n      <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start gap-3\">\n        <a\n          class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark\"\n          routerLink=\"/inventory/reports/low-stock-report\"\n        >\n          <span class=\"material-symbols-outlined fs-3\"> description </span>\n          <h3 class=\"mb-0\">Low Stock Report</h3>\n          <span class=\"material-symbols-outlined\"> chevron_forward </span>\n        </a>\n        <a\n          class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark cursor-pointer\"\n          routerLink=\"/inventory/reports/inventory-value-report\"\n        >\n          <span class=\"material-symbols-outlined fs-3\"> description </span>\n          <h3 class=\"mb-0\">Inventory Value Report</h3>\n          <span class=\"material-symbols-outlined\"> chevron_forward </span>\n        </a>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ProductSummaryService }] });
 
 class LowStockReportService extends TechlifyService {
@@ -4437,17 +4437,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class SharedModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SharedModule, imports: [TechlifyFormButtonComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SharedModule, imports: [TechlifyDeleteButtonComponent,
+            TechlifyFormButtonComponent,
             InfiniteScrollDirective], exports: [CommonModule,
             InfiniteScrollDirective,
             MaterialModule,
             ReactiveFormsModule,
             RouterModule,
             SearchableSelectorModule,
+            TechlifyDeleteButtonComponent,
             TechlifyFormButtonComponent,
             TechlifyIconModule,
             TimelineFilterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedModule, imports: [TechlifyFormButtonComponent, CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedModule, imports: [TechlifyDeleteButtonComponent,
+            TechlifyFormButtonComponent, CommonModule,
             MaterialModule,
             ReactiveFormsModule,
             RouterModule,
@@ -4459,6 +4462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: NgModule,
             args: [{
                     imports: [
+                        TechlifyDeleteButtonComponent,
                         TechlifyFormButtonComponent,
                         InfiniteScrollDirective
                     ],
@@ -4469,6 +4473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReactiveFormsModule,
                         RouterModule,
                         SearchableSelectorModule,
+                        TechlifyDeleteButtonComponent,
                         TechlifyFormButtonComponent,
                         TechlifyIconModule,
                         TimelineFilterModule,
@@ -4570,7 +4575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<div class=\"d-flex flex-column gap-2\">\n  <mat-card>\n    <mat-card-content class=\"d-flex flex-row align-items-center justify-content-between\">\n      <h5 class=\"mb-0\">Stock Issue Summary Report</h5>\n\n      <form class=\"d-flex flex-row gap-1\" [formGroup]=\"filterForm\">\n        <mat-form-field class=\"fl-md\">\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <app-timeline-filter appearance=\"fill\" labelText=\"Period\" formControlName=\"duration\" [form]=\"filterForm\"\n          [showClearButton]=\"true\"></app-timeline-filter>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector formControlName=\"category_ids\" apiUrl=\"api/product-categories\"\n            [multiple]=\"true\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Location</mat-label>\n          <app-searchable-selector formControlName=\"location_ids\" apiUrl=\"api/inventory-locations\" [multiple]=\"true\"\n            [isEmitInitialEvent]=\"true\" (selectedValueChange)=\"onLocationsChange($event)\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Group By</mat-label>\n          <mat-select required formControlName=\"group_by\">\n            <mat-option value=\"product\">Product</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card *ngFor=\"let group of locationGroups()\">\n    <mat-card-content class=\"p-0\">\n      <h6 class=\"px-3 pt-3 mb-2 fw-bold\">{{ group.location?.title }}</h6>\n\n      <table mat-table [dataSource]=\"group.models\" class=\"w-100\">\n        <ng-container matColumnDef=\"#\">\n          <th mat-header-cell *matHeaderCellDef>#</th>\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"product\">\n          <th mat-header-cell *matHeaderCellDef>Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\" class=\"text-dark\">\n              {{ element?.product?.name }}\n            </a>\n          </td>\n          <td mat-footer-cell *matFooterCellDef> <strong> Total </strong> </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"stock_issues\">\n          <th mat-header-cell *matHeaderCellDef>Stock Issues</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.total_quantity }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_quantity }} </strong> </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"stock_issues_avco\">\n          <th mat-header-cell *matHeaderCellDef>Stock Issues AVCO</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.total_avco | currency }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_avco | currency }} </strong> </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        <tr [hidden]=\"!group?.grand_total_avco && !group?.grand_total_quantity\" mat-footer-row\n          *matFooterRowDef=\"displayedColumns\"></tr>\n      </table>\n\n      <p *ngIf=\"!group.models.length\" class=\"px-3 py-2 mb-0 text-secondary\">No stock issues for this location.</p>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card *ngIf=\"!isWorking && !locationGroups().length\">\n    <mat-card-content class=\"text-secondary text-center py-4\">\n      Select one or more locations to view the report.\n    </mat-card-content>\n  </mat-card>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n</div>\n" }]
         }], ctorParameters: () => [{ type: StockIssueProductDataService }, { type: i2$1.FormBuilder }] });
 
-const routes$6 = [
+const routes$7 = [
     {
         path: 'reports/low-stock-report',
         component: LowStockReportComponent,
@@ -4593,7 +4598,7 @@ const routes$6 = [
     },
     {
         path: "measures",
-        loadChildren: () => import('./techlify-inventory-common-measure.module-BvCXv-OU.mjs').then((mod) => mod.MeasureModule),
+        loadChildren: () => Promise.resolve().then(function () { return measure_module; }).then((mod) => mod.MeasureModule),
     },
     {
         path: 'stock-issues',
@@ -4605,7 +4610,7 @@ const routes$6 = [
     },
     {
         path: 'categories',
-        loadChildren: () => import('./techlify-inventory-common-category.module-BAv_zX8Q.mjs').then((mod) => mod.CategoryModule),
+        loadChildren: () => import('./techlify-inventory-common-category.module-D1l7dua9.mjs').then((mod) => mod.CategoryModule),
     },
     {
         path: 'products',
@@ -4628,12 +4633,12 @@ const routes$6 = [
 class InventoryCommonRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InventoryCommonRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: InventoryCommonRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InventoryCommonRoutingModule, imports: [RouterModule.forChild(routes$6), RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InventoryCommonRoutingModule, imports: [RouterModule.forChild(routes$7), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InventoryCommonRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild(routes$6)],
+                    imports: [RouterModule.forChild(routes$7)],
                     exports: [RouterModule],
                 }]
         }] });
@@ -4910,7 +4915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>" }]
         }], ctorParameters: () => [] });
 
-const routes$5 = [
+const routes$6 = [
     {
         path: '',
         component: StockIssuePageComponent,
@@ -4922,29 +4927,29 @@ const routes$5 = [
     },
     {
         path: 'form',
-        loadComponent: () => import('./techlify-inventory-common-stock-issue-form.component-qViURcnj.mjs').then(m => m.StockIssueFormComponent),
+        loadComponent: () => import('./techlify-inventory-common-stock-issue-form.component-BeTQ9t-g.mjs').then(m => m.StockIssueFormComponent),
         canLoad: [AuthenticationGuard]
     },
     {
         path: 'form/:id',
-        loadComponent: () => import('./techlify-inventory-common-stock-issue-form.component-qViURcnj.mjs').then(m => m.StockIssueFormComponent),
+        loadComponent: () => import('./techlify-inventory-common-stock-issue-form.component-BeTQ9t-g.mjs').then(m => m.StockIssueFormComponent),
         canLoad: [AuthenticationGuard]
     },
     {
         path: ':id/view',
-        loadComponent: () => import('./techlify-inventory-common-stock-issue-view.component-BlmkYmV0.mjs').then(m => m.StockIssueViewComponent),
+        loadComponent: () => import('./techlify-inventory-common-stock-issue-view.component--rs8hgm5.mjs').then(m => m.StockIssueViewComponent),
         canLoad: [AuthenticationGuard]
     }
 ];
 class StockIssueRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StockIssueRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueRoutingModule, imports: [RouterModule.forChild(routes$5), RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueRoutingModule, imports: [RouterModule.forChild(routes$6), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild(routes$5)],
+                    imports: [RouterModule.forChild(routes$6)],
                     exports: [RouterModule],
                 }]
         }] });
@@ -5020,6 +5025,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'app-stock-issue-product-form-button', standalone: true, imports: [TechlifyIconModule], template: "<app-techlify-icon role=\"button\" [name]=\"stockIssueProduct() ? 'edit' : 'add'\" (click)=\"open()\">\n</app-techlify-icon>\n" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }] });
 
+class MeasureFormComponent extends TechlifyFormComponent {
+    formValidatorService;
+    formBuilder;
+    service;
+    dialogRef;
+    data;
+    constructor(formValidatorService, formBuilder, service, dialogRef, data) {
+        super(formValidatorService, service);
+        this.formValidatorService = formValidatorService;
+        this.formBuilder = formBuilder;
+        this.service = service;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.errorMessages = {
+            title: {
+                required: 'The title field is required.',
+            },
+            quantity_measure: {
+                required: 'The quantity measure field is required.',
+            },
+        };
+        this.form = this.formBuilder.group({
+            id: [''],
+            title: ['', Validators.required],
+            quantity_measure: ['', Validators.required],
+            description: [''],
+        });
+    }
+    ngOnInit() {
+        const model = this.data?.model;
+        if (model) {
+            this.isUpdate = true;
+            this.form.patchValue({ ...model });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasureFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: MeasureService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MeasureFormComponent, isStandalone: true, selector: "app-measure-form", usesInheritance: true, ngImport: i0, template: "<mat-card-content>\n  <h5 class=\"text-center\">Measure Form</h5>\n  <small class=\"text-center text-secondary mb-2\">Measures are used throughout the app. ONLY create measure as is applicable.</small>\n\n  <form [formGroup]=\"form\" class=\"d-flex flex-row flex-wrap justify-content-start gap-2 mt-2\" (ngSubmit)=\"submit()\">\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>Title</mat-label>\n      <input formControlName=\"title\" type=\"text\" matInput placeholder=\"Title\" />\n      <mat-error *ngIf=\"isFieldValid('title')\">\n        {{ getErrorMessage('title') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>Quantity Measure</mat-label>\n      <input formControlName=\"quantity_measure\" type=\"text\" matInput placeholder=\"Quantity Measure\" />\n      <mat-hint> What is this measure for? eg: Unit, Length, Mass, Capacity. </mat-hint>\n      <mat-error *ngIf=\"isFieldValid('quantity_measure')\">\n        {{ getErrorMessage('quantity_measure') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>Description</mat-label>\n      <textarea matInput formControlName=\"description\" placeholder=\"Description\" rows=\"3\"></textarea>\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-2\" style=\"width: calc(100%)\">\n      <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n      <button [disabled]=\"isWorking\" type=\"button\" mat-flat-button (click)=\"dialogRef.close()\">Cancel</button>\n    </div>\n  </form>\n\n</mat-card-content>", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasureFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-measure-form', standalone: true, imports: [SharedModule], template: "<mat-card-content>\n  <h5 class=\"text-center\">Measure Form</h5>\n  <small class=\"text-center text-secondary mb-2\">Measures are used throughout the app. ONLY create measure as is applicable.</small>\n\n  <form [formGroup]=\"form\" class=\"d-flex flex-row flex-wrap justify-content-start gap-2 mt-2\" (ngSubmit)=\"submit()\">\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>Title</mat-label>\n      <input formControlName=\"title\" type=\"text\" matInput placeholder=\"Title\" />\n      <mat-error *ngIf=\"isFieldValid('title')\">\n        {{ getErrorMessage('title') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>Quantity Measure</mat-label>\n      <input formControlName=\"quantity_measure\" type=\"text\" matInput placeholder=\"Quantity Measure\" />\n      <mat-hint> What is this measure for? eg: Unit, Length, Mass, Capacity. </mat-hint>\n      <mat-error *ngIf=\"isFieldValid('quantity_measure')\">\n        {{ getErrorMessage('quantity_measure') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>Description</mat-label>\n      <textarea matInput formControlName=\"description\" placeholder=\"Description\" rows=\"3\"></textarea>\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-2\" style=\"width: calc(100%)\">\n      <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n      <button [disabled]=\"isWorking\" type=\"button\" mat-flat-button (click)=\"dialogRef.close()\">Cancel</button>\n    </div>\n  </form>\n\n</mat-card-content>" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: MeasureService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }, {
+                    type: Optional
+                }] }] });
+
+class MeasuresListComponent extends TechlifyListComponent {
+    formBuilder;
+    service;
+    measureForm = signal(MeasureFormComponent);
+    displayedColumns = [
+        'no',
+        'title',
+        'products',
+        'quantity_measure',
+        'description',
+        'actions'
+    ];
+    constructor(formBuilder, service) {
+        super();
+        this.formBuilder = formBuilder;
+        this.service = service;
+        this.filterForm = this.formBuilder.group({
+            search: [''],
+            sort_by: ['created_at|desc'],
+        });
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        const params = {
+            page: this.page,
+            perPage: this.perPage,
+            withCount: 'products',
+            ...this.filterForm.value,
+        };
+        this.isWorking = true;
+        this.service.index(params).subscribe({
+            next: (response) => {
+                this.isWorking = false;
+                this.models = this.models.concat(response?.data);
+                this.lastPage = response?.last_page;
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    onSortChange(sort) {
+        let { active, direction } = sort;
+        if (!active) {
+            active = 'created_at';
+        }
+        if (!direction) {
+            direction = 'desc';
+            active = 'created_at';
+        }
+        this.filterForm.get('sort_by').setValue(active + '|' + direction);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasuresListComponent, deps: [{ token: i2$1.FormBuilder }, { token: MeasureService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MeasuresListComponent, selector: "app-measure-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-center align-items-center gap-2\">\n      <h3 class=\"mb-0\">Measures</h3>\n      <app-techlify-form-button [component]=\"measureForm()\" [width]=\"'500px'\"\n        (saved)=\"reload()\"></app-techlify-form-button>\n    </div>\n    <app-techlify-filter [filterForm]=\"filterForm\" (filterUpdated)=\"reload()\"></app-techlify-filter>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"p-0\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Service Centers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Title Column -->\n      <ng-container matColumnDef=\"title\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"products\">\n        <th mat-header-cell *matHeaderCellDef>Products</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a\n            class=\"cursor-pointer text-dark text-decoration-none\"\n            [routerLink]=\"['/inventory/products']\"\n            [queryParams]=\"{ measure_ids: element.id }\"\n          >\n            {{ element?.products_count }} products\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Quantity Measure Column -->\n      <ng-container matColumnDef=\"quantity_measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity Measure</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity_measure }}\n        </td>\n      </ng-container>\n\n      <!-- Description Column -->\n      <ng-container matColumnDef=\"description\">\n        <th mat-header-cell *matHeaderCellDef>Description</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.description }}</td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <app-techlify-form-button [component]=\"measureForm()\" [model]=\"element\" [width]=\"'500px'\"\n              (saved)=\"reload()\" *ngIf=\"element?.client_id\"></app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]=\"{ type: 'Measure', title: element?.title }\" (deleted)=\"reload()\"\n              *ngIf=\"element?.client_id && element?.products_count == 0\"></app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: ["filterForm", "filterConfig"], outputs: ["filterUpdated"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasuresListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-measure-list', template: "<mat-card class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-center align-items-center gap-2\">\n      <h3 class=\"mb-0\">Measures</h3>\n      <app-techlify-form-button [component]=\"measureForm()\" [width]=\"'500px'\"\n        (saved)=\"reload()\"></app-techlify-form-button>\n    </div>\n    <app-techlify-filter [filterForm]=\"filterForm\" (filterUpdated)=\"reload()\"></app-techlify-filter>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"p-0\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Service Centers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Title Column -->\n      <ng-container matColumnDef=\"title\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"products\">\n        <th mat-header-cell *matHeaderCellDef>Products</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a\n            class=\"cursor-pointer text-dark text-decoration-none\"\n            [routerLink]=\"['/inventory/products']\"\n            [queryParams]=\"{ measure_ids: element.id }\"\n          >\n            {{ element?.products_count }} products\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Quantity Measure Column -->\n      <ng-container matColumnDef=\"quantity_measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity Measure</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity_measure }}\n        </td>\n      </ng-container>\n\n      <!-- Description Column -->\n      <ng-container matColumnDef=\"description\">\n        <th mat-header-cell *matHeaderCellDef>Description</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.description }}</td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <app-techlify-form-button [component]=\"measureForm()\" [model]=\"element\" [width]=\"'500px'\"\n              (saved)=\"reload()\" *ngIf=\"element?.client_id\"></app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]=\"{ type: 'Measure', title: element?.title }\" (deleted)=\"reload()\"\n              *ngIf=\"element?.client_id && element?.products_count == 0\"></app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: i2$1.FormBuilder }, { type: MeasureService }] });
+
+const routes$5 = [
+    {
+        path: '',
+        component: MeasuresListComponent,
+    },
+];
+class MeasureRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasureRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: MeasureRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasureRoutingModule, imports: [RouterModule.forChild(routes$5), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasureRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes$5)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class MeasureModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: MeasureModule, declarations: [MeasuresListComponent], imports: [CommonModule,
+            MeasureRoutingModule,
+            MaterialModule$1,
+            SharedModule,
+            TechlifyFilterModule,
+            InfiniteScrollModule,
+            MatProgressBarModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasureModule, imports: [CommonModule,
+            MeasureRoutingModule,
+            MaterialModule$1,
+            SharedModule,
+            TechlifyFilterModule,
+            InfiniteScrollModule,
+            MatProgressBarModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasureModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MeasuresListComponent],
+                    imports: [
+                        CommonModule,
+                        MeasureRoutingModule,
+                        MaterialModule$1,
+                        SharedModule,
+                        TechlifyFilterModule,
+                        InfiniteScrollModule,
+                        MatProgressBarModule,
+                    ],
+                }]
+        }] });
+
+var measure_module = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    MeasureModule: MeasureModule
+});
+
 class IncidentService extends TechlifyService {
     constructor(httpService) {
         super(httpService, 'incidents');
@@ -6237,7 +6407,7 @@ const routes$4 = [
             },
             {
                 path: 'purchase-orders/:id/view',
-                loadComponent: () => import('./techlify-inventory-common-purchase-order-view.component-BSrVKxdr.mjs').then(m => m.PurchaseOrderViewComponent)
+                loadComponent: () => import('./techlify-inventory-common-purchase-order-view.component-Bumakb5M.mjs').then(m => m.PurchaseOrderViewComponent)
             }
         ],
     },
@@ -7077,5 +7247,5 @@ var shelf_module = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { IncidentListComponent as $, StockIssueProductFormButtonComponent as A, StockReceiptsModule as B, StockReceiptPageComponent as C, StockReceiptListComponent as D, StockReceiptProductsListComponent as E, StockReceiptSingleProductFormComponent as F, StockReceiptViewComponent as G, StockReceiptProductFormComponent as H, InventoryCommonRoutingModule as I, StockReceiptProductFormButtonComponent as J, StockTransferListComponent as K, LocationService as L, MeasureService as M, StockTransferFormComponent as N, StockTransferService as O, PurchaseOrderService as P, SupplierModule as Q, SupplierFormButtonComponent as R, StockIssueService as S, TechlifyFilterComponent as T, SupplierFormComponent as U, SuppliersListComponent as V, SupplierTypeService as W, PayeeSelectorModule as X, PayeeSelectorComponent as Y, IncidentModule as Z, IncidentService as _, TechlifyFilterModule as a, IncidentFormComponent as a0, IncidentFormButtonComponent as a1, RatingModule as a2, RatingService as a3, RatingListComponent as a4, RatingFormComponent as a5, RatingFormButtonComponent as a6, ExportToExcelButtonComponent as a7, LocationModule as a8, LocationListComponent as a9, LocationFormComponent as aa, LocationFormButtonComponent as ab, ShelfModule as ac, ShelfService as ad, ShelfListComponent as ae, ShelfFormComponent as af, ShelfFormButtonComponent as ag, MaterialModule as b, LocationSelectorComponent as c, InventoryCommonModule as d, StockSummaryService as e, ProductModule as f, ProductFormComponent as g, ProductBasicInfoComponent as h, ProductFormButtonComponent as i, ProductQuickSearchComponent as j, ProductSearchModule as k, ProductSearchComponent as l, ProductListComponent as m, ProductService as n, ProductFormService as o, ProductBatchUpdateFormComponent as p, ProductImportPageComponent as q, ProductViewPageComponent as r, StockIssueModule as s, StockIssuePageComponent as t, StockIssuePageModule as u, StockIssueSingleProductFormComponent as v, StockIssueListComponent as w, StockIssueProductListComponent as x, StockIssueProductService as y, StockIssueProductFormComponent as z };
-//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-EM-86Ss5.mjs.map
+export { IncidentService as $, StockReceiptsModule as A, StockReceiptPageComponent as B, StockReceiptListComponent as C, StockReceiptProductsListComponent as D, StockReceiptSingleProductFormComponent as E, StockReceiptViewComponent as F, StockReceiptProductFormComponent as G, StockReceiptProductFormButtonComponent as H, InventoryCommonRoutingModule as I, StockTransferListComponent as J, StockTransferFormComponent as K, LocationService as L, MaterialModule as M, StockTransferService as N, MeasureModule as O, PurchaseOrderService as P, MeasureService as Q, SupplierModule as R, StockIssueService as S, TechlifyFilterComponent as T, SupplierFormButtonComponent as U, SupplierFormComponent as V, SuppliersListComponent as W, SupplierTypeService as X, PayeeSelectorModule as Y, PayeeSelectorComponent as Z, IncidentModule as _, TechlifyFilterModule as a, IncidentListComponent as a0, IncidentFormComponent as a1, IncidentFormButtonComponent as a2, RatingModule as a3, RatingService as a4, RatingListComponent as a5, RatingFormComponent as a6, RatingFormButtonComponent as a7, ExportToExcelButtonComponent as a8, LocationModule as a9, LocationListComponent as aa, LocationFormComponent as ab, LocationFormButtonComponent as ac, ShelfModule as ad, ShelfService as ae, ShelfListComponent as af, ShelfFormComponent as ag, ShelfFormButtonComponent as ah, LocationSelectorComponent as b, InventoryCommonModule as c, StockSummaryService as d, ProductModule as e, ProductFormComponent as f, ProductBasicInfoComponent as g, ProductFormButtonComponent as h, ProductQuickSearchComponent as i, ProductSearchModule as j, ProductSearchComponent as k, ProductListComponent as l, ProductService as m, ProductFormService as n, ProductBatchUpdateFormComponent as o, ProductImportPageComponent as p, ProductViewPageComponent as q, StockIssueModule as r, StockIssuePageComponent as s, StockIssuePageModule as t, StockIssueSingleProductFormComponent as u, StockIssueListComponent as v, StockIssueProductListComponent as w, StockIssueProductService as x, StockIssueProductFormComponent as y, StockIssueProductFormButtonComponent as z };
+//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-dhFANY2r.mjs.map