techlify-inventory-common 18.4.1 → 18.5.0

package/fesm2022/{techlify-inventory-common-techlify-inventory-common-BCHHzF2b.mjs → techlify-inventory-common-techlify-inventory-common-CmIBHBen.mjs}

@@ -5,11 +5,11 @@ import { RouterModule, RouterLink, RouterLinkActive } from '@angular/router';
 import moment from 'moment';
 import * as i1 from 'ngx-techlify-core';
 import { TechlifyServiceBaseClass, TechlifyListingControllerInterface, TechlifyFormComponentInterface, SearchableSelectorModule, AuthenticationGuard, ImportCsvModule, TimelineFilterModule, MaterialModule as MaterialModule$1, ColumnSelectorModule } from 'ngx-techlify-core';
-import * as i8 from '@angular/material/icon';
+import * as i8$1 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import * as i4$1 from '@angular/material/card';
+import * as i4 from '@angular/material/card';
 import { MatCard, MatCardContent, MatCardModule } from '@angular/material/card';
-import * as i4 from '@angular/common';
+import * as i5 from '@angular/common';
 import { NgIf, CommonModule, NgForOf, CurrencyPipe, DatePipe } from '@angular/common';
 import * as i15 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule, MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderRow, MatTable, MatHeaderCellDef, MatHeaderRowDef, MatRowDef, MatRow, MatFooterCell, MatFooterRow, MatFooterRowDef, MatFooterCellDef } from '@angular/material/table';
@@ -19,9 +19,9 @@ import * as i10 from 'ngx-infinite-scroll';
 import { InfiniteScrollDirective, InfiniteScrollModule } from 'ngx-infinite-scroll';
 import * as i2$1 from 'angular-google-charts';
 import { ChartType, GoogleChartsModule } from 'angular-google-charts';
-import * as i6$1 from '@angular/material/form-field';
+import * as i8 from '@angular/material/form-field';
 import { MatFormFieldModule, MatFormField, MatLabel, MatSuffix, MatError, MatHint } from '@angular/material/form-field';
-import * as i7 from '@angular/material/input';
+import * as i9 from '@angular/material/input';
 import { MatInputModule, MatInput } from '@angular/material/input';
 import * as i2$2 from '@angular/forms';
 import { Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormControl } from '@angular/forms';
@@ -33,12 +33,12 @@ import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { __decorate } from 'tslib';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogTitle, MatDialogContent } from '@angular/material/dialog';
-import * as i4$2 from 'ngx-spinner';
-import * as i4$3 from '@angular/material/button';
+import * as i4$1 from 'ngx-spinner';
+import * as i7 from '@angular/material/button';
 import { MatButtonModule, MatButton } from '@angular/material/button';
 import * as i10$1 from '@angular/flex-layout';
 import { FlexLayoutModule, FlexModule } from '@angular/flex-layout';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, map } from 'rxjs/operators';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import * as i11 from '@angular/material/core';
 import { MatCommonModule, MatLineModule, MatNativeDateModule, MatOptionModule, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
@@ -46,7 +46,7 @@ import * as i12 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { SelectionModel } from '@angular/cdk/collections';
 import { HttpParams } from '@angular/common/http';
-import * as i9 from '@angular/material/datepicker';
+import * as i9$1 from '@angular/material/datepicker';
 import { MatDatepickerModule, MatDatepickerInput, MatDatepickerToggle, MatDatepicker } from '@angular/material/datepicker';
 import * as i10$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -56,7 +56,7 @@ import { MatBadgeModule } from '@angular/material/badge';
 import * as i12$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i5 from '@angular/material/divider';
+import * as i5$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -77,42 +77,29 @@ import moment$1 from 'moment/moment';
 import * as i13 from 'ngx-permissions';
 import { NgxPermissionsModule } from 'ngx-permissions';
 
+class ProductSummaryService extends TechlifyServiceBaseClass {
+    httpService;
+    constructor(httpService) {
+        super(httpService, 'products-summary');
+        this.httpService = httpService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
 class ProductService extends TechlifyServiceBaseClass {
-    dataManager;
     httpService;
-    constructor(dataManager, httpService) {
+    constructor(httpService) {
         super(httpService, 'products');
-        this.dataManager = dataManager;
         this.httpService = httpService;
     }
-    getProducts(filters) {
-        return this.dataManager.GET(`api/products`, filters);
-    }
-    getProduct(id) {
-        return this.dataManager.GET(`api/products/${id}`);
-    }
-    createProduct(model) {
-        return this.dataManager.POST(`api/products`, model);
-    }
-    updateProducts(model) {
-        return this.dataManager.PUT(`api/products/${model.id}`, model);
-    }
-    deleteProduct(id) {
-        return this.dataManager.DELETE(`api/products/${id}`);
-    }
-    getProductMeasures(filters) {
-        return this.dataManager.GET(`api/product-measures`, filters);
-    }
-    createProductMeasure(model) {
-        return this.dataManager.POST(`api/product-measures`, model);
-    }
-    updateProductMeasure(model) {
-        return this.dataManager.PUT(`api/product-measures/${model.id}`, model);
-    }
-    summary(params) {
-        return this.httpService.get('api/products-summary', { params });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductService, deps: [{ token: i1.DataManager }, { token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductService, decorators: [{
@@ -120,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.DataManager }, { type: i1.HttpService }] });
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
 
 class LowStockProductsWidgetComponent extends TechlifyListingControllerInterface {
     productService;
@@ -152,7 +139,7 @@ class LowStockProductsWidgetComponent extends TechlifyListingControllerInterface
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetComponent, deps: [{ token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LowStockProductsWidgetComponent, selector: "app-low-stock-products-widget", usesInheritance: true, ngImport: i0, template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content>\n    <h3>Low Stock Products</h3>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"models\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n      <!-- # Column -->\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      </ng-container>\n\n      <!-- Product Column -->\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?.id, 'view']\" class=\"text-dark\">\n            {{ element?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Stock Column -->\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef>Stock</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.current_stock }}</td>\n      </ng-container>\n\n      <!-- Reorder Point Column -->\n      <ng-container matColumnDef=\"Reorder Point\">\n        <th mat-header-cell *matHeaderCellDef>Reorder Point</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.reorder_point }}</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", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LowStockProductsWidgetComponent, selector: "app-low-stock-products-widget", usesInheritance: true, ngImport: i0, template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content>\n    <h3>Low Stock Products</h3>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"models\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n      <!-- # Column -->\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      </ng-container>\n\n      <!-- Product Column -->\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?.id, 'view']\" class=\"text-dark\">\n            {{ element?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Stock Column -->\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef>Stock</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.current_stock }}</td>\n      </ng-container>\n\n      <!-- Reorder Point Column -->\n      <ng-container matColumnDef=\"Reorder Point\">\n        <th mat-header-cell *matHeaderCellDef>Reorder Point</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.reorder_point }}</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", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.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: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetComponent, decorators: [{
             type: Component,
@@ -160,11 +147,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: ProductService }] });
 
 class ProductSummaryChartComponent {
-    productService;
+    productSummaryService;
     height = 400;
     title = 'Product Summary';
-    constructor(productService) {
-        this.productService = productService;
+    constructor(productSummaryService) {
+        this.productSummaryService = productSummaryService;
     }
     chart = {
         title: 'Pie Chart',
@@ -184,7 +171,7 @@ class ProductSummaryChartComponent {
             group_by: 'category_id',
         };
         this.isLoading = true;
-        this.productService.summary(params).subscribe({
+        this.productSummaryService.index(params).subscribe({
             next: (response) => {
                 let data = [];
                 response?.products_aggregated?.forEach((item) => {
@@ -196,18 +183,32 @@ class ProductSummaryChartComponent {
             error: () => (this.isLoading = false),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartComponent, deps: [{ token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartComponent, deps: [{ token: ProductSummaryService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductSummaryChartComponent, isStandalone: true, selector: "app-product-summary-chart", inputs: { height: "height", title: "title" }, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <h3>{{ title }}</h3>\n  </mat-card-content>\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n  <mat-card-content *ngIf=\"chart.data?.length > 0\">\n    <google-chart\n      class=\"w-100\"\n      [height]=\"height\"\n      [type]=\"chart.type\"\n      [data]=\"chart.data\"\n      [columns]=\"chart.columns\"\n      [options]=\"chart.options\"\n    >\n    </google-chart>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: GoogleChartsModule }, { kind: "component", type: i2$1.GoogleChartComponent, selector: "google-chart", inputs: ["type", "data", "columns", "title", "width", "height", "options", "formatters", "dynamicResize"], outputs: ["ready", "error", "select", "mouseover", "mouseleave"], exportAs: ["googleChart"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-product-summary-chart', standalone: true, imports: [MatCard, MatCardContent, GoogleChartsModule, MatProgressBar, NgIf], template: "<mat-card>\n  <mat-card-content>\n    <h3>{{ title }}</h3>\n  </mat-card-content>\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n  <mat-card-content *ngIf=\"chart.data?.length > 0\">\n    <google-chart\n      class=\"w-100\"\n      [height]=\"height\"\n      [type]=\"chart.type\"\n      [data]=\"chart.data\"\n      [columns]=\"chart.columns\"\n      [options]=\"chart.options\"\n    >\n    </google-chart>\n  </mat-card-content>\n</mat-card>\n" }]
-        }], ctorParameters: () => [{ type: ProductService }], propDecorators: { height: [{
+        }], ctorParameters: () => [{ type: ProductSummaryService }], propDecorators: { height: [{
                 type: Input
             }], title: [{
                 type: Input
             }] } });
 
+class MeasureService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'product-measures');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MeasureService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MeasureService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MeasureService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
 const errorMessages$1 = {
     title: {
         required: 'Please Enter Title',
@@ -217,7 +218,7 @@ const errorMessages$1 = {
     },
 };
 class ProductMeasureFormComponent {
-    productService;
+    measureService;
     fb;
     dialogRef;
     data;
@@ -228,8 +229,8 @@ class ProductMeasureFormComponent {
     productMeasureForm;
     isWorking = false;
     isUpdate = false;
-    constructor(productService, fb, dialogRef, data, spinnerService, formValidatorService, errorService, alertService) {
-        this.productService = productService;
+    constructor(measureService, fb, dialogRef, data, spinnerService, formValidatorService, errorService, alertService) {
+        this.measureService = measureService;
         this.fb = fb;
         this.dialogRef = dialogRef;
         this.data = data;
@@ -260,8 +261,8 @@ class ProductMeasureFormComponent {
             this.spinnerService.show();
             this.isWorking = true;
             let result = this.isUpdate
-                ? await this.productService.updateProductMeasure(productMeasure)
-                : await this.productService.createProductMeasure(productMeasure);
+                ? await this.measureService.update(productMeasure).toPromise()
+                : await this.measureService.store(productMeasure).toPromise();
             this.dialogRef.close(result);
         }
         catch (error) {
@@ -284,23 +285,23 @@ class ProductMeasureFormComponent {
     getErrorMessage(field) {
         return this.formValidatorService.getErrorMessage(field, this.productMeasureForm, errorMessages$1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasureFormComponent, deps: [{ token: ProductService }, { token: i2$2.FormBuilder }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i4$2.NgxSpinnerService }, { token: i1.FormValidatorService }, { token: i1.ErrorHandlerService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductMeasureFormComponent, selector: "app-product-measure-form", ngImport: i0, template: "<div>\n  <form [formGroup]=\"productMeasureForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"text-center\">Create/Update Product Measure</h3>\n    <div fxLayout=\"column\">\n      <div fxLayout=\"column\">\n        <mat-form-field>\n          <input matInput placeholder=\"Title\" formControlName=\"title\" required />\n          <mat-error *ngIf=\"isFieldValid('title')\">{{ getErrorMessage('title') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <input matInput placeholder=\"Description\" formControlName=\"description\" required />\n          <mat-error *ngIf=\"isFieldValid('description')\">{{ getErrorMessage('description') }} </mat-error>\n        </mat-form-field>\n        <div fxFlex=\"100%\" fxLayout fxLayoutGap=\"1rem\">\n          <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">Cancel</button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.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: i10$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasureFormComponent, deps: [{ token: MeasureService }, { token: i2$2.FormBuilder }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i4$1.NgxSpinnerService }, { token: i1.FormValidatorService }, { token: i1.ErrorHandlerService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductMeasureFormComponent, selector: "app-product-measure-form", ngImport: i0, template: "<div>\n  <form [formGroup]=\"productMeasureForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"text-center\">Create/Update Product Measure</h3>\n    <div fxLayout=\"column\">\n      <div fxLayout=\"column\">\n        <mat-form-field>\n          <input matInput placeholder=\"Title\" formControlName=\"title\" required />\n          <mat-error *ngIf=\"isFieldValid('title')\">{{ getErrorMessage('title') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <input matInput placeholder=\"Description\" formControlName=\"description\" required />\n          <mat-error *ngIf=\"isFieldValid('description')\">{{ getErrorMessage('description') }} </mat-error>\n        </mat-form-field>\n        <div fxFlex=\"100%\" fxLayout fxLayoutGap=\"1rem\">\n          <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">Cancel</button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i5.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: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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: i10$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasureFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-product-measure-form', template: "<div>\n  <form [formGroup]=\"productMeasureForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"text-center\">Create/Update Product Measure</h3>\n    <div fxLayout=\"column\">\n      <div fxLayout=\"column\">\n        <mat-form-field>\n          <input matInput placeholder=\"Title\" formControlName=\"title\" required />\n          <mat-error *ngIf=\"isFieldValid('title')\">{{ getErrorMessage('title') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <input matInput placeholder=\"Description\" formControlName=\"description\" required />\n          <mat-error *ngIf=\"isFieldValid('description')\">{{ getErrorMessage('description') }} </mat-error>\n        </mat-form-field>\n        <div fxFlex=\"100%\" fxLayout fxLayoutGap=\"1rem\">\n          <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">Cancel</button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: ProductService }, { type: i2$2.FormBuilder }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: MeasureService }, { type: i2$2.FormBuilder }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i4$2.NgxSpinnerService }, { type: i1.FormValidatorService }, { type: i1.ErrorHandlerService }, { type: i1.AlertService }] });
+                }] }, { type: i4$1.NgxSpinnerService }, { type: i1.FormValidatorService }, { type: i1.ErrorHandlerService }, { type: i1.AlertService }] });
 
 let ProductMeasuresListComponent = class ProductMeasuresListComponent {
     fb;
     dialog;
     filterService;
     activatedRoute;
-    productService;
+    measureService;
     filterFormGroup;
     lastPage;
     page = 1;
@@ -318,12 +319,12 @@ let ProductMeasuresListComponent = class ProductMeasuresListComponent {
     ];
     displayedColumns = ['#', 'Title', 'Description', 'Actions'];
     dataSource = new MatTableDataSource();
-    constructor(fb, dialog, filterService, activatedRoute, productService) {
+    constructor(fb, dialog, filterService, activatedRoute, measureService) {
         this.fb = fb;
         this.dialog = dialog;
         this.filterService = filterService;
         this.activatedRoute = activatedRoute;
-        this.productService = productService;
+        this.measureService = measureService;
         this.filterFormGroup = this.fb.group({
             num_items: [this.num_items + '|' + this.currentPage],
             search: [''],
@@ -355,7 +356,7 @@ let ProductMeasuresListComponent = class ProductMeasuresListComponent {
         filters.per_page = this.perPage;
         filters.type_ids = filters.type_ids.toString();
         filters.num_items = this.num_items + '|' + this.currentPage;
-        let res = await this.productService.getProductMeasures(filters);
+        let res = await this.measureService.index(filters).toPromise();
         if (this.productMeasures.length < 1) {
             this.productMeasures = res.data;
         }
@@ -405,8 +406,8 @@ let ProductMeasuresListComponent = class ProductMeasuresListComponent {
         //Called once, before the instance is destroyed.
         //Add 'implements OnDestroy' to the class.
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasuresListComponent, deps: [{ token: i2$2.FormBuilder }, { token: i1$1.MatDialog }, { token: i1.FilterService }, { token: i2.ActivatedRoute }, { token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductMeasuresListComponent, selector: "app-product-measure-list", ngImport: i0, template: "<div fxLayout=\"column\">\n  <div class=\"text-center\" fxLayoutAlign=\"center center\">\n    <h3 fxLayout>\n      <span class=\"mt-1\"> Product Measures </span>\n      <button mat-raised-button class=\"ml-2\" color=\"primary\" (click)=\"modifyProductMeasure()\">\n        <mat-icon>add</mat-icon>\n        Product Measure\n      </button>\n    </h3>\n  </div>\n\n  <div fxLayout>\n    <form [formGroup]=\"filterFormGroup\" fxLayout fxLayoutGap=\"0.5rem\">\n      <mat-form-field>\n        <input matInput placeholder=\"Item Name, Description, etc.\" formControlName=\"search\" />\n      </mat-form-field>\n    </form>\n\n    <mat-form-field class=\"ml-2\" fxFlex=\"0 1 calc(11.11% - 0.5rem)\">\n      <mat-label>Columns</mat-label>\n      <mat-select [(ngModel)]=\"displayedColumns\" multiple name=\"column\">\n        <mat-option *ngFor=\"let column of columnDefinitions\" [value]=\"column.def\" [disabled]=\"!column.isShow\">\n          {{ column?.def }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <table\n    mat-table\n    #table\n    [dataSource]=\"dataSource\"\n    class=\"mat-elevation-z8 w-100 mt-4 table-hover\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [fromRoot]=\"true\"\n    infiniteScrollContainer=\"mat-sidenav-content\"\n    matSort\n    (matSortChange)=\"sortColumn($event)\"\n    matSortDisableClear=\"true\"\n  >\n    <!-- # Column -->\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    </ng-container>\n\n    <!-- Title Column -->\n    <ng-container matColumnDef=\"Title\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Title</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.title }}</td>\n    </ng-container>\n\n    <!-- Description Column -->\n    <ng-container matColumnDef=\"Description\">\n      <th mat-header-cell mat-sort-header *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=\"text-secondary\" fxLayoutGap=\"1rem\">\n          <button mat-icon-button (click)=\"modifyProductMeasure(element)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.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: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i14.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.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: i10$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i10$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], preserveWhitespaces: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasuresListComponent, deps: [{ token: i2$2.FormBuilder }, { token: i1$1.MatDialog }, { token: i1.FilterService }, { token: i2.ActivatedRoute }, { token: MeasureService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductMeasuresListComponent, selector: "app-product-measure-list", ngImport: i0, template: "<div fxLayout=\"column\">\n  <div class=\"text-center\" fxLayoutAlign=\"center center\">\n    <h3 fxLayout>\n      <span class=\"mt-1\"> Product Measures </span>\n      <button mat-raised-button class=\"ml-2\" color=\"primary\" (click)=\"modifyProductMeasure()\">\n        <mat-icon>add</mat-icon>\n        Product Measure\n      </button>\n    </h3>\n  </div>\n\n  <div fxLayout>\n    <form [formGroup]=\"filterFormGroup\" fxLayout fxLayoutGap=\"0.5rem\">\n      <mat-form-field>\n        <input matInput placeholder=\"Item Name, Description, etc.\" formControlName=\"search\" />\n      </mat-form-field>\n    </form>\n\n    <mat-form-field class=\"ml-2\" fxFlex=\"0 1 calc(11.11% - 0.5rem)\">\n      <mat-label>Columns</mat-label>\n      <mat-select [(ngModel)]=\"displayedColumns\" multiple name=\"column\">\n        <mat-option *ngFor=\"let column of columnDefinitions\" [value]=\"column.def\" [disabled]=\"!column.isShow\">\n          {{ column?.def }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <table\n    mat-table\n    #table\n    [dataSource]=\"dataSource\"\n    class=\"mat-elevation-z8 w-100 mt-4 table-hover\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [fromRoot]=\"true\"\n    infiniteScrollContainer=\"mat-sidenav-content\"\n    matSort\n    (matSortChange)=\"sortColumn($event)\"\n    matSortDisableClear=\"true\"\n  >\n    <!-- # Column -->\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    </ng-container>\n\n    <!-- Title Column -->\n    <ng-container matColumnDef=\"Title\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Title</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.title }}</td>\n    </ng-container>\n\n    <!-- Description Column -->\n    <ng-container matColumnDef=\"Description\">\n      <th mat-header-cell mat-sort-header *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=\"text-secondary\" fxLayoutGap=\"1rem\">\n          <button mat-icon-button (click)=\"modifyProductMeasure(element)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i14.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.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: i10$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i10$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], preserveWhitespaces: true });
 };
 ProductMeasuresListComponent = __decorate([
     UntilDestroy()
@@ -414,7 +415,7 @@ ProductMeasuresListComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasuresListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-product-measure-list', template: "<div fxLayout=\"column\">\n  <div class=\"text-center\" fxLayoutAlign=\"center center\">\n    <h3 fxLayout>\n      <span class=\"mt-1\"> Product Measures </span>\n      <button mat-raised-button class=\"ml-2\" color=\"primary\" (click)=\"modifyProductMeasure()\">\n        <mat-icon>add</mat-icon>\n        Product Measure\n      </button>\n    </h3>\n  </div>\n\n  <div fxLayout>\n    <form [formGroup]=\"filterFormGroup\" fxLayout fxLayoutGap=\"0.5rem\">\n      <mat-form-field>\n        <input matInput placeholder=\"Item Name, Description, etc.\" formControlName=\"search\" />\n      </mat-form-field>\n    </form>\n\n    <mat-form-field class=\"ml-2\" fxFlex=\"0 1 calc(11.11% - 0.5rem)\">\n      <mat-label>Columns</mat-label>\n      <mat-select [(ngModel)]=\"displayedColumns\" multiple name=\"column\">\n        <mat-option *ngFor=\"let column of columnDefinitions\" [value]=\"column.def\" [disabled]=\"!column.isShow\">\n          {{ column?.def }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <table\n    mat-table\n    #table\n    [dataSource]=\"dataSource\"\n    class=\"mat-elevation-z8 w-100 mt-4 table-hover\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [fromRoot]=\"true\"\n    infiniteScrollContainer=\"mat-sidenav-content\"\n    matSort\n    (matSortChange)=\"sortColumn($event)\"\n    matSortDisableClear=\"true\"\n  >\n    <!-- # Column -->\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    </ng-container>\n\n    <!-- Title Column -->\n    <ng-container matColumnDef=\"Title\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Title</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.title }}</td>\n    </ng-container>\n\n    <!-- Description Column -->\n    <ng-container matColumnDef=\"Description\">\n      <th mat-header-cell mat-sort-header *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=\"text-secondary\" fxLayoutGap=\"1rem\">\n          <button mat-icon-button (click)=\"modifyProductMeasure(element)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n  </table>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: i1$1.MatDialog }, { type: i1.FilterService }, { type: i2.ActivatedRoute }, { type: ProductService }] });
+        }], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: i1$1.MatDialog }, { type: i1.FilterService }, { type: i2.ActivatedRoute }, { type: MeasureService }] });
 
 class TechlifyFormService {
     _isListUpdated = new BehaviorSubject(false);
@@ -454,6 +455,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpService }] });
 
+class LocationService extends TechlifyServiceBaseClass {
+    httpService;
+    constructor(httpService) {
+        super(httpService, 'inventory-locations');
+        this.httpService = httpService;
+    }
+    count() {
+        return this.index().pipe(map((res) => res.data.length));
+    }
+    productStatistics(model, params) {
+        return this.httpService.get(`api/inventory-locations/${model.id}/product-statistics`, { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
 class SupplierService {
     httpService;
     constructor(httpService) {
@@ -602,13 +625,13 @@ class SupplierFormComponent extends TechlifyFormComponentInterface {
     getErrorMessage(field) {
         return this.formValidatorService.getErrorMessage(field, this.supplierForm, this.errorMessages);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormComponent, deps: [{ token: i2$2.FormBuilder }, { token: i1.FormValidatorService }, { token: i1.AlertService }, { token: i4$2.NgxSpinnerService }, { token: i1$1.MatDialogRef }, { token: i1.ErrorHandlerService }, { token: MAT_DIALOG_DATA }, { token: SupplierService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierFormComponent, selector: "app-supplier-form", usesInheritance: true, ngImport: i0, template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"supplierForm\" class=\"mat-typography\">\n  <div class=\"d-flex flex-column justify-content-start gap-2\" mat-dialog-content>\n    <h2 class=\"mb-2\">{{ isUpdateMode ? 'Edit' : 'Create' }} Supplier</h2>\n    <mat-form-field>\n      <mat-label>Company Name</mat-label>\n      <input autocomplete=\"off\" formControlName=\"company_name\" matInput placeholder=\"Company Name\" required />\n      <mat-error *ngIf=\"isFieldValid('company_name')\">\n        {{ getErrorMessage('company_name') }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>Contact Name</mat-label>\n      <input autocomplete=\"off\" formControlName=\"contact_name\" matInput placeholder=\"Contact Name\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Types</mat-label>\n      <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_id\" titleField=\"title\">\n      </app-searchable-selector>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>Phone</mat-label>\n      <input autocomplete=\"off\" formControlName=\"phone\" matInput placeholder=\"Phone\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Email</mat-label>\n      <input autocomplete=\"off\" formControlName=\"email\" matInput placeholder=\"Email\" type=\"email\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Address</mat-label>\n      <input autocomplete=\"off\" formControlName=\"address\" matInput placeholder=\"Address\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <input autocomplete=\"off\" formControlName=\"details\" matInput placeholder=\"Details\" />\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button (click)=\"dialogRef.close()\" [disabled]=\"isWorking\" mat-flat-button type=\"button\">Cancel</button>\n      <button [disabled]=\"isWorking\" color=\"primary\" mat-raised-button type=\"submit\">Save</button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.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: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormComponent, deps: [{ token: i2$2.FormBuilder }, { token: i1.FormValidatorService }, { token: i1.AlertService }, { token: i4$1.NgxSpinnerService }, { token: i1$1.MatDialogRef }, { token: i1.ErrorHandlerService }, { token: MAT_DIALOG_DATA }, { token: SupplierService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierFormComponent, selector: "app-supplier-form", usesInheritance: true, ngImport: i0, template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"supplierForm\" class=\"mat-typography\">\n  <div class=\"d-flex flex-column justify-content-start gap-2\" mat-dialog-content>\n    <h2 class=\"mb-2\">{{ isUpdateMode ? 'Edit' : 'Create' }} Supplier</h2>\n    <mat-form-field>\n      <mat-label>Company Name</mat-label>\n      <input autocomplete=\"off\" formControlName=\"company_name\" matInput placeholder=\"Company Name\" required />\n      <mat-error *ngIf=\"isFieldValid('company_name')\">\n        {{ getErrorMessage('company_name') }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>Contact Name</mat-label>\n      <input autocomplete=\"off\" formControlName=\"contact_name\" matInput placeholder=\"Contact Name\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Types</mat-label>\n      <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_id\" titleField=\"title\">\n      </app-searchable-selector>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>Phone</mat-label>\n      <input autocomplete=\"off\" formControlName=\"phone\" matInput placeholder=\"Phone\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Email</mat-label>\n      <input autocomplete=\"off\" formControlName=\"email\" matInput placeholder=\"Email\" type=\"email\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Address</mat-label>\n      <input autocomplete=\"off\" formControlName=\"address\" matInput placeholder=\"Address\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <input autocomplete=\"off\" formControlName=\"details\" matInput placeholder=\"Details\" />\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button (click)=\"dialogRef.close()\" [disabled]=\"isWorking\" mat-flat-button type=\"button\">Cancel</button>\n      <button [disabled]=\"isWorking\" color=\"primary\" mat-raised-button type=\"submit\">Save</button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.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: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-supplier-form', template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"supplierForm\" class=\"mat-typography\">\n  <div class=\"d-flex flex-column justify-content-start gap-2\" mat-dialog-content>\n    <h2 class=\"mb-2\">{{ isUpdateMode ? 'Edit' : 'Create' }} Supplier</h2>\n    <mat-form-field>\n      <mat-label>Company Name</mat-label>\n      <input autocomplete=\"off\" formControlName=\"company_name\" matInput placeholder=\"Company Name\" required />\n      <mat-error *ngIf=\"isFieldValid('company_name')\">\n        {{ getErrorMessage('company_name') }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>Contact Name</mat-label>\n      <input autocomplete=\"off\" formControlName=\"contact_name\" matInput placeholder=\"Contact Name\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Types</mat-label>\n      <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_id\" titleField=\"title\">\n      </app-searchable-selector>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>Phone</mat-label>\n      <input autocomplete=\"off\" formControlName=\"phone\" matInput placeholder=\"Phone\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Email</mat-label>\n      <input autocomplete=\"off\" formControlName=\"email\" matInput placeholder=\"Email\" type=\"email\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Address</mat-label>\n      <input autocomplete=\"off\" formControlName=\"address\" matInput placeholder=\"Address\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <input autocomplete=\"off\" formControlName=\"details\" matInput placeholder=\"Details\" />\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button (click)=\"dialogRef.close()\" [disabled]=\"isWorking\" mat-flat-button type=\"button\">Cancel</button>\n      <button [disabled]=\"isWorking\" color=\"primary\" mat-raised-button type=\"submit\">Save</button>\n    </div>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: i1.FormValidatorService }, { type: i1.AlertService }, { type: i4$2.NgxSpinnerService }, { type: i1$1.MatDialogRef }, { type: i1.ErrorHandlerService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: i1.FormValidatorService }, { type: i1.AlertService }, { type: i4$1.NgxSpinnerService }, { type: i1$1.MatDialogRef }, { type: i1.ErrorHandlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: SupplierService }] });
@@ -641,7 +664,7 @@ class PayeeSelectorComponent {
                 useExisting: forwardRef(() => PayeeSelectorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field [appearance]=\"appearance\" class=\"w-100\">\n  <mat-label>{{ label }}</mat-label>\n  <app-searchable-selector\n    apiUrl=\"api/suppliers\"\n    titleField=\"company_name\"\n    sortBy=\"company_name|asc\"\n    [required]=\"required\"\n    [(ngModel)]=\"value\"\n    #payeeSelector=\"ngModel\"\n    name=\"payeeSelector\"\n    [add]=\"showAddButton\"\n    [itemComponent]=\"SupplierFormComponent\"\n    (ngModelChange)=\"onChange($event)\"\n    [addConfig]=\"{ width: '600px' }\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [multiple]=\"multiple\"\n  >\n  </app-searchable-selector>\n  <mat-error *ngIf=\"payeeSelector.invalid && payeeSelector.touched\"> The payee field is required. </mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], preserveWhitespaces: true });
+        ], ngImport: i0, template: "<mat-form-field [appearance]=\"appearance\" class=\"w-100\">\n  <mat-label>{{ label }}</mat-label>\n  <app-searchable-selector\n    apiUrl=\"api/suppliers\"\n    titleField=\"company_name\"\n    sortBy=\"company_name|asc\"\n    [required]=\"required\"\n    [(ngModel)]=\"value\"\n    #payeeSelector=\"ngModel\"\n    name=\"payeeSelector\"\n    [add]=\"showAddButton\"\n    [itemComponent]=\"SupplierFormComponent\"\n    (ngModelChange)=\"onChange($event)\"\n    [addConfig]=\"{ width: '600px' }\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [multiple]=\"multiple\"\n  >\n  </app-searchable-selector>\n  <mat-error *ngIf=\"payeeSelector.invalid && payeeSelector.touched\"> The payee field is required. </mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayeeSelectorComponent, decorators: [{
             type: Component,
@@ -669,17 +692,21 @@ class StockReceiptFormComponent extends TechlifyFormComponentInterface {
     stockReceiptService;
     alertService;
     dateUtils;
+    locationService;
     product;
     stockReceipt;
+    latestLocationId;
     saved = new EventEmitter();
     cancelled = new EventEmitter();
     isWorking;
-    constructor(formValidatorService, formBuilder, stockReceiptService, alertService, dateUtils) {
+    locationsCountValue = 0;
+    constructor(formValidatorService, formBuilder, stockReceiptService, alertService, dateUtils, locationService) {
         super(formValidatorService);
         this.formBuilder = formBuilder;
         this.stockReceiptService = stockReceiptService;
         this.alertService = alertService;
         this.dateUtils = dateUtils;
+        this.locationService = locationService;
         this.errorMessages = {
             date: {
                 required: 'The date field is required.',
@@ -694,6 +721,7 @@ class StockReceiptFormComponent extends TechlifyFormComponentInterface {
         this.form = this.formBuilder.group({
             id: [''],
             supplier_id: [''],
+            location_id: ['', Validators.required],
             date: [new Date(), Validators.required],
             quantity: [1, Validators.required],
             purchase_price: [0, Validators.required],
@@ -702,6 +730,9 @@ class StockReceiptFormComponent extends TechlifyFormComponentInterface {
         });
     }
     ngOnInit() {
+        this.locationService.count().subscribe((count) => {
+            this.locationsCountValue = count;
+        });
         this.form
             .get('quantity')
             ?.valueChanges.pipe(debounceTime$1(500))
@@ -720,14 +751,18 @@ class StockReceiptFormComponent extends TechlifyFormComponentInterface {
         else {
             // on create for set default quantity and purchase price from last record
             if (this.product?.last_stock_receipt) {
-                const { quantity, purchase_price } = this.product.last_stock_receipt;
+                const { quantity, purchase_price, location_id } = this.product.last_stock_receipt;
                 this.form.patchValue({
                     quantity,
                     purchase_price,
+                    location_id,
                 });
             }
         }
     }
+    get locationsCount() {
+        return this.locationsCountValue;
+    }
     save() {
         if (this.form.invalid) {
             this.alertService.addAlert('Please check the form for errors', 'error');
@@ -759,16 +794,18 @@ class StockReceiptFormComponent extends TechlifyFormComponentInterface {
         const amount = parseFloat(purchase_price) * parseFloat(quantity) || 0;
         this.form.get('amount')?.setValue(amount);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$2.FormBuilder }, { token: StockReceiptService }, { token: i1.AlertService }, { token: i1.DateUtils }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockReceiptFormComponent, selector: "app-stock-receipt-form", inputs: { product: "product", stockReceipt: "stockReceipt" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<h3 class=\"text-center\">{{ stockReceipt?.id ? 'Edit' : 'Receive' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <app-payee-selector\n    label=\"Supplier\"\n    formControlName=\"supplier_id\"\n    appearance=\"fill\"\n    [showAddButton]=\"true\"\n  ></app-payee-selector>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Purchase Price</mat-label>\n    <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('purchase_price')\">\n      {{ getErrorMessage('purchase_price') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Total Value</mat-label>\n    <input matInput formControlName=\"amount\" readonly type=\"number\" min=\"0\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PayeeSelectorComponent, selector: "app-payee-selector", inputs: ["label", "appearance", "required", "showAddButton", "multiple"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.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: "component", type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], preserveWhitespaces: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$2.FormBuilder }, { token: StockReceiptService }, { token: i1.AlertService }, { token: i1.DateUtils }, { token: LocationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockReceiptFormComponent, selector: "app-stock-receipt-form", inputs: { product: "product", stockReceipt: "stockReceipt", latestLocationId: "latestLocationId" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<h3 class=\"text-center\">{{ stockReceipt?.id ? 'Edit' : 'Receive' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <app-payee-selector label=\"Supplier\" formControlName=\"supplier_id\" appearance=\"fill\"\n    [showAddButton]=\"true\"></app-payee-selector>\n\n  <mat-form-field *ngIf=\"locationsCount > 1\">\n    <mat-label>Location</mat-label>\n    <app-searchable-selector required formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Purchase Price</mat-label>\n    <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('purchase_price')\">\n      {{ getErrorMessage('purchase_price') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Total Value</mat-label>\n    <input matInput formControlName=\"amount\" readonly type=\"number\" min=\"0\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PayeeSelectorComponent, selector: "app-payee-selector", inputs: ["label", "appearance", "required", "showAddButton", "multiple"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipt-form', template: "<h3 class=\"text-center\">{{ stockReceipt?.id ? 'Edit' : 'Receive' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <app-payee-selector\n    label=\"Supplier\"\n    formControlName=\"supplier_id\"\n    appearance=\"fill\"\n    [showAddButton]=\"true\"\n  ></app-payee-selector>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Purchase Price</mat-label>\n    <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('purchase_price')\">\n      {{ getErrorMessage('purchase_price') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Total Value</mat-label>\n    <input matInput formControlName=\"amount\" readonly type=\"number\" min=\"0\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$2.FormBuilder }, { type: StockReceiptService }, { type: i1.AlertService }, { type: i1.DateUtils }], propDecorators: { product: [{
+            args: [{ selector: 'app-stock-receipt-form', template: "<h3 class=\"text-center\">{{ stockReceipt?.id ? 'Edit' : 'Receive' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <app-payee-selector label=\"Supplier\" formControlName=\"supplier_id\" appearance=\"fill\"\n    [showAddButton]=\"true\"></app-payee-selector>\n\n  <mat-form-field *ngIf=\"locationsCount > 1\">\n    <mat-label>Location</mat-label>\n    <app-searchable-selector required formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Purchase Price</mat-label>\n    <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('purchase_price')\">\n      {{ getErrorMessage('purchase_price') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Total Value</mat-label>\n    <input matInput formControlName=\"amount\" readonly type=\"number\" min=\"0\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$2.FormBuilder }, { type: StockReceiptService }, { type: i1.AlertService }, { type: i1.DateUtils }, { type: LocationService }], propDecorators: { product: [{
                 type: Input
             }], stockReceipt: [{
                 type: Input
+            }], latestLocationId: [{
+                type: Input
             }], saved: [{
                 type: Output
             }], cancelled: [{
@@ -779,6 +816,7 @@ class StockReceiptFormButtonComponent {
     matDialog;
     product;
     stockReceipt;
+    latestLocationId;
     icon;
     saved = new EventEmitter();
     matDialogRef;
@@ -793,15 +831,17 @@ class StockReceiptFormButtonComponent {
         this.saved.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptFormButtonComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: { product: "product", stockReceipt: "stockReceipt", icon: "icon" }, outputs: { saved: "saved" }, ngImport: i0, template: "<span\n  class=\"material-symbols-outlined cursor-pointer\"\n  [class.text-primary]=\"icon\"\n  matTooltip=\"Stock Receipt\"\n  (click)=\"showStockReceiptForm(stockReceiptFormTemplate)\"\n>\n  {{ stockReceipt ? 'edit' : icon ?? 'download' }}\n</span>\n\n<ng-template #stockReceiptFormTemplate>\n  <app-stock-receipt-form\n    mat-dialog-content\n    [product]=\"product\"\n    [stockReceipt]=\"stockReceipt\"\n    (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockReceiptSaved($event)\"\n  ></app-stock-receipt-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: StockReceiptFormComponent, selector: "app-stock-receipt-form", inputs: ["product", "stockReceipt"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: { product: "product", stockReceipt: "stockReceipt", latestLocationId: "latestLocationId", icon: "icon" }, outputs: { saved: "saved" }, ngImport: i0, template: "<span\n  class=\"material-symbols-outlined cursor-pointer\"\n  [class.text-primary]=\"icon\"\n  matTooltip=\"Stock Receipt\"\n  (click)=\"showStockReceiptForm(stockReceiptFormTemplate)\"\n>\n  {{ stockReceipt ? 'edit' : icon ?? 'download' }}\n</span>\n\n<ng-template #stockReceiptFormTemplate>\n  <app-stock-receipt-form\n    mat-dialog-content\n    [latestLocationId]=\"latestLocationId\"\n    [product]=\"product\"\n    [stockReceipt]=\"stockReceipt\"\n    (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockReceiptSaved($event)\"\n  ></app-stock-receipt-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: StockReceiptFormComponent, selector: "app-stock-receipt-form", inputs: ["product", "stockReceipt", "latestLocationId"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptFormButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipt-form-button', template: "<span\n  class=\"material-symbols-outlined cursor-pointer\"\n  [class.text-primary]=\"icon\"\n  matTooltip=\"Stock Receipt\"\n  (click)=\"showStockReceiptForm(stockReceiptFormTemplate)\"\n>\n  {{ stockReceipt ? 'edit' : icon ?? 'download' }}\n</span>\n\n<ng-template #stockReceiptFormTemplate>\n  <app-stock-receipt-form\n    mat-dialog-content\n    [product]=\"product\"\n    [stockReceipt]=\"stockReceipt\"\n    (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockReceiptSaved($event)\"\n  ></app-stock-receipt-form>\n</ng-template>\n" }]
+            args: [{ selector: 'app-stock-receipt-form-button', template: "<span\n  class=\"material-symbols-outlined cursor-pointer\"\n  [class.text-primary]=\"icon\"\n  matTooltip=\"Stock Receipt\"\n  (click)=\"showStockReceiptForm(stockReceiptFormTemplate)\"\n>\n  {{ stockReceipt ? 'edit' : icon ?? 'download' }}\n</span>\n\n<ng-template #stockReceiptFormTemplate>\n  <app-stock-receipt-form\n    mat-dialog-content\n    [latestLocationId]=\"latestLocationId\"\n    [product]=\"product\"\n    [stockReceipt]=\"stockReceipt\"\n    (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockReceiptSaved($event)\"\n  ></app-stock-receipt-form>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { product: [{
                 type: Input
             }], stockReceipt: [{
                 type: Input
+            }], latestLocationId: [{
+                type: Input
             }], icon: [{
                 type: Input
             }], saved: [{
@@ -827,6 +867,7 @@ class StockIssueFormComponent extends TechlifyFormComponentInterface {
     stockIssuanceService;
     alertService;
     dateUtils;
+    locationService;
     product;
     stockIssuance;
     issuableType;
@@ -834,12 +875,14 @@ class StockIssueFormComponent extends TechlifyFormComponentInterface {
     saved = new EventEmitter();
     cancelled = new EventEmitter();
     isWorking;
-    constructor(formValidatorService, formBuilder, stockIssuanceService, alertService, dateUtils) {
+    locationsCountValue = 0;
+    constructor(formValidatorService, formBuilder, stockIssuanceService, alertService, dateUtils, locationService) {
         super(formValidatorService);
         this.formBuilder = formBuilder;
         this.stockIssuanceService = stockIssuanceService;
         this.alertService = alertService;
         this.dateUtils = dateUtils;
+        this.locationService = locationService;
         this.errorMessages = {
             date: {
                 required: 'The date field is required.',
@@ -851,12 +894,16 @@ class StockIssueFormComponent extends TechlifyFormComponentInterface {
         this.form = this.formBuilder.group({
             id: [''],
             product_id: [''],
+            location_id: ['', Validators.required],
             date: [new Date(), Validators.required],
             quantity: [1, Validators.required],
             particulars: [''],
         });
     }
     ngOnInit() {
+        this.locationService.count().subscribe((count) => {
+            this.locationsCountValue = count;
+        });
         if (this.product) {
             this.form.get('product_id')?.setValue(this.product?.id);
         }
@@ -870,13 +917,17 @@ class StockIssueFormComponent extends TechlifyFormComponentInterface {
         else {
             // on create for set default quantity from last record
             if (this.product?.last_stock_issuance) {
-                const { quantity } = this.product.last_stock_issuance;
+                const { quantity, location_id } = this.product.last_stock_issuance;
                 this.form.patchValue({
                     quantity,
+                    location_id,
                 });
             }
         }
     }
+    get locationsCount() {
+        return this.locationsCountValue;
+    }
     save() {
         if (this.form.invalid) {
             this.alertService.addAlert('Please check the form for errors', 'error');
@@ -910,13 +961,13 @@ class StockIssueFormComponent extends TechlifyFormComponentInterface {
     onProductChange(product) {
         this.product = product;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssueFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$2.FormBuilder }, { token: StockIssuanceService }, { token: i1.AlertService }, { token: i1.DateUtils }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockIssueFormComponent, selector: "app-stock-issue-form", inputs: { product: "product", stockIssuance: "stockIssuance", issuableType: "issuableType", issuableId: "issuableId" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<h3 class=\"text-center\">{{ stockIssuance?.id ? 'Edit' : 'Issue' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <mat-form-field *ngIf=\"!product\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector\n      formControlName=\"product_id\"\n      apiUrl=\"api/products\"\n      titleField=\"name\"\n      (selectedValueChange)=\"onProductChange($event)\"\n    ></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.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: "component", type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssueFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$2.FormBuilder }, { token: StockIssuanceService }, { token: i1.AlertService }, { token: i1.DateUtils }, { token: LocationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockIssueFormComponent, selector: "app-stock-issue-form", inputs: { product: "product", stockIssuance: "stockIssuance", issuableType: "issuableType", issuableId: "issuableId" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<h3 class=\"text-center\">{{ stockIssuance?.id ? 'Edit' : 'Issue' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <mat-form-field *ngIf=\"!product\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n      (selectedValueChange)=\"onProductChange($event)\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"locationsCount > 1\">\n    <mat-label>Location</mat-label>\n    <app-searchable-selector required formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssueFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-issue-form', template: "<h3 class=\"text-center\">{{ stockIssuance?.id ? 'Edit' : 'Issue' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <mat-form-field *ngIf=\"!product\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector\n      formControlName=\"product_id\"\n      apiUrl=\"api/products\"\n      titleField=\"name\"\n      (selectedValueChange)=\"onProductChange($event)\"\n    ></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$2.FormBuilder }, { type: StockIssuanceService }, { type: i1.AlertService }, { type: i1.DateUtils }], propDecorators: { product: [{
+            args: [{ selector: 'app-stock-issue-form', template: "<h3 class=\"text-center\">{{ stockIssuance?.id ? 'Edit' : 'Issue' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <mat-form-field *ngIf=\"!product\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n      (selectedValueChange)=\"onProductChange($event)\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"locationsCount > 1\">\n    <mat-label>Location</mat-label>\n    <app-searchable-selector required formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$2.FormBuilder }, { type: StockIssuanceService }, { type: i1.AlertService }, { type: i1.DateUtils }, { type: LocationService }], propDecorators: { product: [{
                 type: Input
             }], stockIssuance: [{
                 type: Input
@@ -1303,13 +1354,13 @@ class ProductFormComponent {
     isFormSectionShown(sectionName) {
         return this.displayedFormSections.length > 0 && this.displayedFormSections.includes(sectionName);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormComponent, deps: [{ token: ProductService }, { token: i2$2.FormBuilder }, { token: i1.FormValidatorService }, { token: i1.AlertService }, { token: i4.DatePipe }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductFormComponent, selector: "app-product-form", inputs: { product: "product", displayedFormFields: "displayedFormFields", displayedFormSections: "displayedFormSections" }, outputs: { saved: "saved", cancelled: "cancelled" }, ngImport: i0, template: "<form [formGroup]=\"productForm\" (submit)=\"save()\">\n  <h3 class=\"text-center\">{{ product?.id ? 'Update' : 'Create' }} Product</h3>\n  <div fxLayout=\"column\">\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('basic information')\">\n      <h3><strong>Basic Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('name')\">\n          <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n          <mat-error *ngIf=\"isFieldValid('name')\">{{ getErrorMessage('name') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product type')\">\n          <mat-label>Product Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"> </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\">{{ getErrorMessage('type_id') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sku')\">\n          <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n          <mat-error *ngIf=\"isFieldValid('sku')\">{{ getErrorMessage('sku') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('category_ids')\">\n            {{ getErrorMessage('category_ids') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"100%\" *ngIf=\"isFormFieldShown('description')\">\n          <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('inventory information')\">\n      <h3><strong>Inventory Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product measure')\">\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\">{{ getErrorMessage('measure_id') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\">{{ getErrorMessage('reorder_point') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity')\">\n          <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\">{{ getErrorMessage('initial_quantity') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity date')\">\n          <input\n            matInput\n            [matDatepicker]=\"pickerInitialQuantityDate\"\n            placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n          <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n          <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\"\n            >{{ getErrorMessage('initial_quantity_date') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('sales information')\">\n      <h3><strong>Sale Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sales price')\">\n          <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\" step=\"any\" />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\">{{ getErrorMessage('sale_price') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('condition types')\">\n          <mat-label>Condition</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/condition-types\"\n            formControlName=\"condition_type_id\"\n          ></app-searchable-selector>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('minimum price')\">\n          <input\n            matInput\n            placeholder=\"Minimum Price\"\n            formControlName=\"minimum_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('minimum_price')\">{{ getErrorMessage('minimum_price') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n        </mat-form-field>\n      </div>\n    </div>\n    <!--    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('accounts information')\">-->\n    <!--      <h3><strong>Accounts Information</strong></h3>-->\n    <!--      <div fxLayout fxLayoutGap=\"0.5rem\">-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('income account')\">-->\n    <!--          <mat-label>Income Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"income_account_id\"> </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('expense account')\">-->\n    <!--          <mat-label>Expense Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"expense_account_id\">-->\n    <!--          </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--      </div>-->\n    <!--    </div>-->\n    <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"cancelled.emit(true)\">\n        Cancel\n      </button>\n      <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.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: "component", type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i10$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i10$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormComponent, deps: [{ token: ProductService }, { token: i2$2.FormBuilder }, { token: i1.FormValidatorService }, { token: i1.AlertService }, { token: i5.DatePipe }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductFormComponent, selector: "app-product-form", inputs: { product: "product", displayedFormFields: "displayedFormFields", displayedFormSections: "displayedFormSections" }, outputs: { saved: "saved", cancelled: "cancelled" }, ngImport: i0, template: "<form [formGroup]=\"productForm\" (submit)=\"save()\">\n  <h3 class=\"text-center\">{{ product?.id ? 'Update' : 'Create' }} Product</h3>\n  <div fxLayout=\"column\">\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('basic information')\">\n      <h3><strong>Basic Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('name')\">\n          <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n          <mat-error *ngIf=\"isFieldValid('name')\">{{ getErrorMessage('name') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product type')\">\n          <mat-label>Product Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"> </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\">{{ getErrorMessage('type_id') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sku')\">\n          <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n          <mat-error *ngIf=\"isFieldValid('sku')\">{{ getErrorMessage('sku') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('category_ids')\">\n            {{ getErrorMessage('category_ids') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"100%\" *ngIf=\"isFormFieldShown('description')\">\n          <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('inventory information')\">\n      <h3><strong>Inventory Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product measure')\">\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\">{{ getErrorMessage('measure_id') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\">{{ getErrorMessage('reorder_point') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity')\">\n          <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\">{{ getErrorMessage('initial_quantity') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity date')\">\n          <input\n            matInput\n            [matDatepicker]=\"pickerInitialQuantityDate\"\n            placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n          <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n          <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\"\n            >{{ getErrorMessage('initial_quantity_date') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('sales information')\">\n      <h3><strong>Sale Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sales price')\">\n          <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\" step=\"any\" />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\">{{ getErrorMessage('sale_price') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('condition types')\">\n          <mat-label>Condition</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/condition-types\"\n            formControlName=\"condition_type_id\"\n          ></app-searchable-selector>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('minimum price')\">\n          <input\n            matInput\n            placeholder=\"Minimum Price\"\n            formControlName=\"minimum_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('minimum_price')\">{{ getErrorMessage('minimum_price') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n        </mat-form-field>\n      </div>\n    </div>\n    <!--    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('accounts information')\">-->\n    <!--      <h3><strong>Accounts Information</strong></h3>-->\n    <!--      <div fxLayout fxLayoutGap=\"0.5rem\">-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('income account')\">-->\n    <!--          <mat-label>Income Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"income_account_id\"> </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('expense account')\">-->\n    <!--          <mat-label>Expense Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"expense_account_id\">-->\n    <!--          </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--      </div>-->\n    <!--    </div>-->\n    <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"cancelled.emit(true)\">\n        Cancel\n      </button>\n      <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9.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: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i10$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i10$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-product-form', template: "<form [formGroup]=\"productForm\" (submit)=\"save()\">\n  <h3 class=\"text-center\">{{ product?.id ? 'Update' : 'Create' }} Product</h3>\n  <div fxLayout=\"column\">\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('basic information')\">\n      <h3><strong>Basic Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('name')\">\n          <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n          <mat-error *ngIf=\"isFieldValid('name')\">{{ getErrorMessage('name') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product type')\">\n          <mat-label>Product Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"> </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\">{{ getErrorMessage('type_id') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sku')\">\n          <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n          <mat-error *ngIf=\"isFieldValid('sku')\">{{ getErrorMessage('sku') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('category_ids')\">\n            {{ getErrorMessage('category_ids') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"100%\" *ngIf=\"isFormFieldShown('description')\">\n          <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('inventory information')\">\n      <h3><strong>Inventory Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product measure')\">\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\">{{ getErrorMessage('measure_id') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\">{{ getErrorMessage('reorder_point') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity')\">\n          <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\">{{ getErrorMessage('initial_quantity') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity date')\">\n          <input\n            matInput\n            [matDatepicker]=\"pickerInitialQuantityDate\"\n            placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n          <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n          <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\"\n            >{{ getErrorMessage('initial_quantity_date') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('sales information')\">\n      <h3><strong>Sale Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sales price')\">\n          <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\" step=\"any\" />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\">{{ getErrorMessage('sale_price') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('condition types')\">\n          <mat-label>Condition</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/condition-types\"\n            formControlName=\"condition_type_id\"\n          ></app-searchable-selector>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('minimum price')\">\n          <input\n            matInput\n            placeholder=\"Minimum Price\"\n            formControlName=\"minimum_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('minimum_price')\">{{ getErrorMessage('minimum_price') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n        </mat-form-field>\n      </div>\n    </div>\n    <!--    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('accounts information')\">-->\n    <!--      <h3><strong>Accounts Information</strong></h3>-->\n    <!--      <div fxLayout fxLayoutGap=\"0.5rem\">-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('income account')\">-->\n    <!--          <mat-label>Income Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"income_account_id\"> </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('expense account')\">-->\n    <!--          <mat-label>Expense Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"expense_account_id\">-->\n    <!--          </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--      </div>-->\n    <!--    </div>-->\n    <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"cancelled.emit(true)\">\n        Cancel\n      </button>\n      <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n    </div>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: ProductService }, { type: i2$2.FormBuilder }, { type: i1.FormValidatorService }, { type: i1.AlertService }, { type: i4.DatePipe }, { type: ProductFormService }], propDecorators: { saved: [{
+        }], ctorParameters: () => [{ type: ProductService }, { type: i2$2.FormBuilder }, { type: i1.FormValidatorService }, { type: i1.AlertService }, { type: i5.DatePipe }, { type: ProductFormService }], propDecorators: { saved: [{
                 type: Output
             }], cancelled: [{
                 type: Output
@@ -1344,7 +1395,7 @@ class ProductFormButtonComponent {
         this.productFormService.listUpdated(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: { product: "product" }, outputs: { saved: "saved" }, ngImport: i0, template: "<mat-icon color=\"primary\" class=\"cursor-pointer\" [class.text-secondary]=\"product\" (click)=\"showForm(addProductForm)\">\n  {{ product ? 'edit' : 'add' }}\n</mat-icon>\n\n<ng-template #addProductForm>\n  <app-product-form\n    [product]=\"product\"\n    mat-dialog-content\n    (saved)=\"onProductSaved($event)\"\n    (cancelled)=\"matDialog.closeAll()\"\n  ></app-product-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ProductFormComponent, selector: "app-product-form", inputs: ["product", "displayedFormFields", "displayedFormSections"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: { product: "product" }, outputs: { saved: "saved" }, ngImport: i0, template: "<mat-icon color=\"primary\" class=\"cursor-pointer\" [class.text-secondary]=\"product\" (click)=\"showForm(addProductForm)\">\n  {{ product ? 'edit' : 'add' }}\n</mat-icon>\n\n<ng-template #addProductForm>\n  <app-product-form\n    [product]=\"product\"\n    mat-dialog-content\n    (saved)=\"onProductSaved($event)\"\n    (cancelled)=\"matDialog.closeAll()\"\n  ></app-product-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ProductFormComponent, selector: "app-product-form", inputs: ["product", "displayedFormFields", "displayedFormSections"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormButtonComponent, decorators: [{
             type: Component,
@@ -1407,7 +1458,7 @@ class ProductBatchUpdateFormComponent extends TechlifyFormComponentInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBatchUpdateFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$2.FormBuilder }, { token: i1.AlertService }, { token: ProductBatchService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductBatchUpdateFormComponent, selector: "app-product-batch-update-form", inputs: { selection: "selection" }, outputs: { updated: "updated" }, usesInheritance: true, ngImport: i0, template: "<p class=\"text-primary fw-bold\">{{ selection.selected.length }} Product(s) Selected</p>\n<form [formGroup]=\"form\" class=\"d-flex flex-column justify-content-start\" (submit)=\"save()\">\n  <mat-form-field>\n    <mat-label>Type</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Category</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Reorder Point</mat-label>\n    <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2 mt-3\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Update</button>\n    <button [disabled]=\"isSaving\" mat-flat-button type=\"button\" (click)=\"selection.clear()\">Cancel</button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductBatchUpdateFormComponent, selector: "app-product-batch-update-form", inputs: { selection: "selection" }, outputs: { updated: "updated" }, usesInheritance: true, ngImport: i0, template: "<p class=\"text-primary fw-bold\">{{ selection.selected.length }} Product(s) Selected</p>\n<form [formGroup]=\"form\" class=\"d-flex flex-column justify-content-start\" (submit)=\"save()\">\n  <mat-form-field>\n    <mat-label>Type</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Category</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Reorder Point</mat-label>\n    <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2 mt-3\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Update</button>\n    <button [disabled]=\"isSaving\" mat-flat-button type=\"button\" (click)=\"selection.clear()\">Cancel</button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBatchUpdateFormComponent, decorators: [{
             type: Component,
@@ -1426,6 +1477,22 @@ let ProductListComponent = class ProductListComponent extends TechlifyListingCon
     requestHelperService;
     productFormService;
     selection = new SelectionModel(true, []);
+    // Columns to use during Excel export
+    customExportColumns = [
+        '#',
+        'name',
+        'type',
+        'sku',
+        'categories',
+        'reorder_point',
+        'stock_receipts',
+        'last_stock_receipt_date',
+        'stock_issuances',
+        'last_stock_issue_date',
+        'on_hand',
+        'measure',
+        'sale_price'
+    ];
     exportInProgress = false;
     columnConfig = [
         { label: 'Initial Quantity', def: 'initial_quantity', isSelected: false, isEditable: true },
@@ -1435,15 +1502,16 @@ let ProductListComponent = class ProductListComponent extends TechlifyListingCon
     ];
     selectedColumns = this.columnConfig.filter((col) => col.isSelected);
     get displayedColumns() {
+        if (this.exportInProgress) {
+            return this.customExportColumns;
+        }
         const selectedCols = this.selectedColumns.map(col => col.def);
         const defaultCols = [
             '#', 'name', 'sku', 'categories', 'reorder_point',
-            'stock_receipts', 'stock_issuances', 'on_hand', 'sale_price'
+            'stock_receipts', 'stock_issuances', 'on_hand', 'measure', 'sale_price'
         ];
         const cols = defaultCols.concat(...selectedCols);
-        if (!this.exportInProgress) {
-            cols.push('Actions', 'Select');
-        }
+        cols.push('Actions', 'Select');
         return cols;
     }
     importId;
@@ -1496,7 +1564,7 @@ let ProductListComponent = class ProductListComponent extends TechlifyListingCon
         };
         params.page = this.page;
         params.perPage = this.perPage;
-        params.with = 'categories,lastStockReceipt,lastStockIssuance,creator';
+        params.with = 'categories,lastStockReceipt,lastStockIssuance,measure,creator';
         if (this.importId) {
             params.import_id = this.importId;
         }
@@ -1542,25 +1610,16 @@ let ProductListComponent = class ProductListComponent extends TechlifyListingCon
     }
     handleExport(hideColumns) {
         this.exportInProgress = hideColumns;
-        this.isWorking = true;
-        if (hideColumns) {
-            // Hide the Action and select columns
-            this.selectedColumns = this.selectedColumns.filter((col) => col.def !== 'Actions' && col.def !== 'Select');
-        }
-        else {
-            this.selectedColumns = this.columnConfig.filter((col) => col.isSelected);
-        }
-        this.isWorking = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: i2$2.FormBuilder }, { token: i1$1.MatDialog }, { token: i2.ActivatedRoute }, { token: ProductService }, { token: i1.RequestHelperService }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, selector: "app-product-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button class=\"mt-2\"></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n          file_upload\n        </span>\n        <app-export-to-excel-button tableId=\"productTable\" fileName=\"products\" (onExportStart)=\"handleExport(true)\" (onExportEnd)=\"handleExport(false)\"></app-export-to-excel-button>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mb-2 d-print-none\"\n          [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"\n        ></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<div class=\"d-flex justify-content-start gap-3\">\n  <mat-card [style.width]=\"selection.isEmpty() ? '100%' : '85%'\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        [fromRoot]=\"true\"\n        matSort\n        (matSortChange)=\"sortColumn($event)\"\n        matSortDisableClear=\"true\"\n        aria-describedby=\"Products List\"\n        id=\"productTable\"\n      >\n        <!-- # Column -->\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        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n              <small class=\"text-secondary\" *ngIf=\"element.type\">{{ element.type?.title }}</small>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Categories Column -->\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n            <div\n              *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n            >\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- SKU Column -->\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n        </ng-container>\n\n        <!-- Initial Quantity Column -->\n        <ng-container matColumnDef=\"initial_quantity\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Initial Quantity</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n              on {{ element?.initial_quantity_date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Receipts Column -->\n        <ng-container matColumnDef=\"stock_receipts\">\n          <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>Stock Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt\">\n              last added on {{ element?.last_stock_receipt?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Issuances Column -->\n        <ng-container matColumnDef=\"stock_issuances\">\n          <th mat-header-cell mat-sort-header=\"stock_issuances_sum_quantity\" *matHeaderCellDef>Stock Issuances</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_issuances_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issuance\">\n              last issued on {{ element?.last_stock_issuance?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- On Hand Column -->\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell mat-sort-header=\"stock_balance\" *matHeaderCellDef>On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_balance }}\n          </td>\n        </ng-container>\n\n        <!-- Reorder Point Column -->\n        <ng-container matColumnDef=\"reorder_point\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.reorder_point }}\n          </td>\n        </ng-container>\n\n        <!-- Selling Price Column -->\n        <ng-container matColumnDef=\"sale_price\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.sale_price | currency }}\n          </td>\n        </ng-container>\n\n        <!-- Income Account Column -->\n        <ng-container matColumnDef=\"income_account\">\n          <th mat-header-cell *matHeaderCellDef>Income Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.income_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Expense Account Column -->\n        <ng-container matColumnDef=\"expense_account\">\n          <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.expense_account?.title }}\n          </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-0\">{{ element?.creator?.name }}</p>\n            <small class=\"text-secondary\">{{ element?.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=\"text-secondary d-flex gap-1\">\n              <app-product-form-button [product]=\"element\"></app-product-form-button>\n              <mat-icon\n                class=\"cursor-pointer\"\n                matTooltip=\"View\"\n                [routerLink]=\"[element.id, 'view']\"\n                routerLinkActive=\"route-link-active\"\n              >\n                remove_red_eye\n              </mat-icon>\n\n              <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n              <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"Select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllRowsSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllRowsSelected()\"\n                          [aria-label]=\"checkboxLabel()\">\n            </mat-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"$event ? selection.toggle(row) : null\"\n                          [checked]=\"selection.isSelected(row)\"\n                          [aria-label]=\"checkboxLabel(row)\">\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></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  <mat-card\n    *ngIf=\"!selection.isEmpty()\"\n    style=\"width: calc(15% - 1rem)\"\n  >\n    <mat-card-content>\n      <app-product-batch-update-form [selection]=\"selection\" (updated)=\"reload()\"></app-product-batch-update-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "icon"], outputs: ["saved"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "component", type: i10$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.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: i14.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i15.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.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: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: ExportToExcelButtonComponent, selector: "app-export-to-excel-button", inputs: ["tableId", "fileName"], outputs: ["onExportStart", "onExportEnd"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductBatchUpdateFormComponent, selector: "app-product-batch-update-form", inputs: ["selection"], outputs: ["updated"] }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, selector: "app-product-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button class=\"mt-2\"></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n          file_upload\n        </span>\n        <app-export-to-excel-button tableId=\"productTable\" fileName=\"products\" (onExportStart)=\"handleExport(true)\" (onExportEnd)=\"handleExport(false)\"></app-export-to-excel-button>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mb-2 d-print-none\"\n          [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"\n        ></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<div class=\"d-flex justify-content-start gap-3\">\n  <mat-card [style.width]=\"selection.isEmpty() ? '100%' : '85%'\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        [fromRoot]=\"true\"\n        matSort\n        (matSortChange)=\"sortColumn($event)\"\n        matSortDisableClear=\"true\"\n        aria-describedby=\"Products List\"\n        id=\"productTable\"\n      >\n        <!-- # Column -->\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        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n              <small class=\"text-secondary\" *ngIf=\"element.type && !exportInProgress\">\n                {{ element.type?.title }}\n              </small>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.type?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Categories Column -->\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n            <div\n              *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n            >\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- SKU Column -->\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n        </ng-container>\n\n        <!-- Initial Quantity Column -->\n        <ng-container matColumnDef=\"initial_quantity\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Initial Quantity</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n              on {{ element?.initial_quantity_date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Receipts Column -->\n        <ng-container matColumnDef=\"stock_receipts\">\n          <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>Stock Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt && !exportInProgress\">\n              Latest on {{ element?.last_stock_receipt?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Receipt Date Column -->\n        <ng-container matColumnDef=\"last_stock_receipt_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Receipt Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- Stock Issuances Column -->\n        <ng-container matColumnDef=\"stock_issuances\">\n          <th mat-header-cell mat-sort-header=\"stock_issuances_sum_quantity\" *matHeaderCellDef>Stock Issuances</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_issuances_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issuance && !exportInProgress\">\n              Latest on {{ element?.last_stock_issuance?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Issue Date Column -->\n        <ng-container matColumnDef=\"last_stock_issue_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Issue Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_issuance?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- On Hand Column -->\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell *matHeaderCellDef>On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_balance }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"measure\">\n          <th mat-header-cell *matHeaderCellDef>Measure</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.measure?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Reorder Point Column -->\n        <ng-container matColumnDef=\"reorder_point\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.reorder_point }}\n          </td>\n        </ng-container>\n\n        <!-- Selling Price Column -->\n        <ng-container matColumnDef=\"sale_price\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.sale_price | currency }}\n          </td>\n        </ng-container>\n\n        <!-- Income Account Column -->\n        <ng-container matColumnDef=\"income_account\">\n          <th mat-header-cell *matHeaderCellDef>Income Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.income_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Expense Account Column -->\n        <ng-container matColumnDef=\"expense_account\">\n          <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.expense_account?.title }}\n          </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-0\">{{ element?.creator?.name }}</p>\n            <small class=\"text-secondary\">{{ element?.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=\"text-secondary d-flex gap-1\">\n              <app-product-form-button [product]=\"element\"></app-product-form-button>\n              <mat-icon\n                class=\"cursor-pointer\"\n                matTooltip=\"View\"\n                [routerLink]=\"[element.id, 'view']\"\n                routerLinkActive=\"route-link-active\"\n              >\n                remove_red_eye\n              </mat-icon>\n\n              <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n              <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"Select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllRowsSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllRowsSelected()\"\n                          [aria-label]=\"checkboxLabel()\">\n            </mat-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"$event ? selection.toggle(row) : null\"\n                          [checked]=\"selection.isSelected(row)\"\n                          [aria-label]=\"checkboxLabel(row)\">\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></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  <mat-card\n    *ngIf=\"!selection.isEmpty()\"\n    style=\"width: calc(15% - 1rem)\"\n  >\n    <mat-card-content>\n      <app-product-batch-update-form [selection]=\"selection\" (updated)=\"reload()\"></app-product-batch-update-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "component", type: i10$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i14.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i15.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.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: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.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: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: ExportToExcelButtonComponent, selector: "app-export-to-excel-button", inputs: ["tableId", "fileName"], outputs: ["onExportStart", "onExportEnd"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductBatchUpdateFormComponent, selector: "app-product-batch-update-form", inputs: ["selection"], outputs: ["updated"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 ProductListComponent = __decorate([
     UntilDestroy()
 ], ProductListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-product-list', template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button class=\"mt-2\"></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n          file_upload\n        </span>\n        <app-export-to-excel-button tableId=\"productTable\" fileName=\"products\" (onExportStart)=\"handleExport(true)\" (onExportEnd)=\"handleExport(false)\"></app-export-to-excel-button>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mb-2 d-print-none\"\n          [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"\n        ></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<div class=\"d-flex justify-content-start gap-3\">\n  <mat-card [style.width]=\"selection.isEmpty() ? '100%' : '85%'\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        [fromRoot]=\"true\"\n        matSort\n        (matSortChange)=\"sortColumn($event)\"\n        matSortDisableClear=\"true\"\n        aria-describedby=\"Products List\"\n        id=\"productTable\"\n      >\n        <!-- # Column -->\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        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n              <small class=\"text-secondary\" *ngIf=\"element.type\">{{ element.type?.title }}</small>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Categories Column -->\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n            <div\n              *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n            >\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- SKU Column -->\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n        </ng-container>\n\n        <!-- Initial Quantity Column -->\n        <ng-container matColumnDef=\"initial_quantity\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Initial Quantity</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n              on {{ element?.initial_quantity_date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Receipts Column -->\n        <ng-container matColumnDef=\"stock_receipts\">\n          <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>Stock Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt\">\n              last added on {{ element?.last_stock_receipt?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Issuances Column -->\n        <ng-container matColumnDef=\"stock_issuances\">\n          <th mat-header-cell mat-sort-header=\"stock_issuances_sum_quantity\" *matHeaderCellDef>Stock Issuances</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_issuances_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issuance\">\n              last issued on {{ element?.last_stock_issuance?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- On Hand Column -->\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell mat-sort-header=\"stock_balance\" *matHeaderCellDef>On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_balance }}\n          </td>\n        </ng-container>\n\n        <!-- Reorder Point Column -->\n        <ng-container matColumnDef=\"reorder_point\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.reorder_point }}\n          </td>\n        </ng-container>\n\n        <!-- Selling Price Column -->\n        <ng-container matColumnDef=\"sale_price\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.sale_price | currency }}\n          </td>\n        </ng-container>\n\n        <!-- Income Account Column -->\n        <ng-container matColumnDef=\"income_account\">\n          <th mat-header-cell *matHeaderCellDef>Income Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.income_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Expense Account Column -->\n        <ng-container matColumnDef=\"expense_account\">\n          <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.expense_account?.title }}\n          </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-0\">{{ element?.creator?.name }}</p>\n            <small class=\"text-secondary\">{{ element?.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=\"text-secondary d-flex gap-1\">\n              <app-product-form-button [product]=\"element\"></app-product-form-button>\n              <mat-icon\n                class=\"cursor-pointer\"\n                matTooltip=\"View\"\n                [routerLink]=\"[element.id, 'view']\"\n                routerLinkActive=\"route-link-active\"\n              >\n                remove_red_eye\n              </mat-icon>\n\n              <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n              <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"Select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllRowsSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllRowsSelected()\"\n                          [aria-label]=\"checkboxLabel()\">\n            </mat-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"$event ? selection.toggle(row) : null\"\n                          [checked]=\"selection.isSelected(row)\"\n                          [aria-label]=\"checkboxLabel(row)\">\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></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  <mat-card\n    *ngIf=\"!selection.isEmpty()\"\n    style=\"width: calc(15% - 1rem)\"\n  >\n    <mat-card-content>\n      <app-product-batch-update-form [selection]=\"selection\" (updated)=\"reload()\"></app-product-batch-update-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n" }]
+            args: [{ selector: 'app-product-list', template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button class=\"mt-2\"></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n          file_upload\n        </span>\n        <app-export-to-excel-button tableId=\"productTable\" fileName=\"products\" (onExportStart)=\"handleExport(true)\" (onExportEnd)=\"handleExport(false)\"></app-export-to-excel-button>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mb-2 d-print-none\"\n          [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"\n        ></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<div class=\"d-flex justify-content-start gap-3\">\n  <mat-card [style.width]=\"selection.isEmpty() ? '100%' : '85%'\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        [fromRoot]=\"true\"\n        matSort\n        (matSortChange)=\"sortColumn($event)\"\n        matSortDisableClear=\"true\"\n        aria-describedby=\"Products List\"\n        id=\"productTable\"\n      >\n        <!-- # Column -->\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        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n              <small class=\"text-secondary\" *ngIf=\"element.type && !exportInProgress\">\n                {{ element.type?.title }}\n              </small>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.type?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Categories Column -->\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n            <div\n              *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n            >\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- SKU Column -->\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n        </ng-container>\n\n        <!-- Initial Quantity Column -->\n        <ng-container matColumnDef=\"initial_quantity\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Initial Quantity</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n              on {{ element?.initial_quantity_date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Receipts Column -->\n        <ng-container matColumnDef=\"stock_receipts\">\n          <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>Stock Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt && !exportInProgress\">\n              Latest on {{ element?.last_stock_receipt?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Receipt Date Column -->\n        <ng-container matColumnDef=\"last_stock_receipt_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Receipt Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- Stock Issuances Column -->\n        <ng-container matColumnDef=\"stock_issuances\">\n          <th mat-header-cell mat-sort-header=\"stock_issuances_sum_quantity\" *matHeaderCellDef>Stock Issuances</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_issuances_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issuance && !exportInProgress\">\n              Latest on {{ element?.last_stock_issuance?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Issue Date Column -->\n        <ng-container matColumnDef=\"last_stock_issue_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Issue Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_issuance?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- On Hand Column -->\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell *matHeaderCellDef>On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_balance }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"measure\">\n          <th mat-header-cell *matHeaderCellDef>Measure</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.measure?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Reorder Point Column -->\n        <ng-container matColumnDef=\"reorder_point\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.reorder_point }}\n          </td>\n        </ng-container>\n\n        <!-- Selling Price Column -->\n        <ng-container matColumnDef=\"sale_price\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.sale_price | currency }}\n          </td>\n        </ng-container>\n\n        <!-- Income Account Column -->\n        <ng-container matColumnDef=\"income_account\">\n          <th mat-header-cell *matHeaderCellDef>Income Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.income_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Expense Account Column -->\n        <ng-container matColumnDef=\"expense_account\">\n          <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.expense_account?.title }}\n          </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-0\">{{ element?.creator?.name }}</p>\n            <small class=\"text-secondary\">{{ element?.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=\"text-secondary d-flex gap-1\">\n              <app-product-form-button [product]=\"element\"></app-product-form-button>\n              <mat-icon\n                class=\"cursor-pointer\"\n                matTooltip=\"View\"\n                [routerLink]=\"[element.id, 'view']\"\n                routerLinkActive=\"route-link-active\"\n              >\n                remove_red_eye\n              </mat-icon>\n\n              <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n              <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"Select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllRowsSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllRowsSelected()\"\n                          [aria-label]=\"checkboxLabel()\">\n            </mat-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"$event ? selection.toggle(row) : null\"\n                          [checked]=\"selection.isSelected(row)\"\n                          [aria-label]=\"checkboxLabel(row)\">\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></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  <mat-card\n    *ngIf=\"!selection.isEmpty()\"\n    style=\"width: calc(15% - 1rem)\"\n  >\n    <mat-card-content>\n      <app-product-batch-update-form [selection]=\"selection\" (updated)=\"reload()\"></app-product-batch-update-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: i1$1.MatDialog }, { type: i2.ActivatedRoute }, { type: ProductService }, { type: i1.RequestHelperService }, { type: ProductFormService }] });
 
 class ProductNavBarComponent {
@@ -1614,7 +1673,7 @@ class StockReceiptDeleteButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: StockReceiptService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockReceiptDeleteButtonComponent, selector: "app-stock-receipt-delete-button", inputs: { stockReceipt: "stockReceipt" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<span class=\"material-symbols-outlined cursor-pointer\" (click)=\"showDeleteConfirmModel(deleteModelTemplate)\">\n  delete\n</span>\n\n<ng-template #deleteModelTemplate>\n  <h3 mat-dialog-title>Delete Stock Receipt</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the stock receipt record?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-2\">\n    <button [disabled]=\"isDeleting\" mat-raised-button type=\"button\" color=\"warn\" (click)=\"delete()\">Delete</button>\n    <button [disabled]=\"isDeleting\" mat-flat-button mat-dialog-close type=\"button\">Cancel</button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockReceiptDeleteButtonComponent, selector: "app-stock-receipt-delete-button", inputs: { stockReceipt: "stockReceipt" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<span class=\"material-symbols-outlined cursor-pointer\" (click)=\"showDeleteConfirmModel(deleteModelTemplate)\">\n  delete\n</span>\n\n<ng-template #deleteModelTemplate>\n  <h3 mat-dialog-title>Delete Stock Receipt</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the stock receipt record?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-2\">\n    <button [disabled]=\"isDeleting\" mat-raised-button type=\"button\" color=\"warn\" (click)=\"delete()\">Delete</button>\n    <button [disabled]=\"isDeleting\" mat-flat-button mat-dialog-close type=\"button\">Cancel</button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ 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: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptDeleteButtonComponent, decorators: [{
             type: Component,
@@ -1631,6 +1690,7 @@ let StockReceiptsListPageComponent = class StockReceiptsListPageComponent extend
     requestHelperService;
     activatedRoute;
     product;
+    supplierId;
     listUpdated = new EventEmitter();
     defaultSelectedColumns = [
         "no",
@@ -1638,6 +1698,7 @@ let StockReceiptsListPageComponent = class StockReceiptsListPageComponent extend
         "sku",
         "date",
         "quantity",
+        'measure',
         "location",
         "purchase_price",
         "amount",
@@ -1675,9 +1736,16 @@ let StockReceiptsListPageComponent = class StockReceiptsListPageComponent extend
     ngOnInit() {
         if (this.product) {
             this.filterForm.get('product_ids')?.setValue(this.product?.id);
-            const index = this.displayedColumns.indexOf('product');
+            const index = this.defaultSelectedColumns.indexOf('product');
             if (index !== -1) {
-                this.displayedColumns.splice(index, 1);
+                this.defaultSelectedColumns.splice(index, 1);
+            }
+        }
+        if (this.supplierId) {
+            this.filterForm.get('supplier_ids')?.setValue(this.supplierId);
+            const index = this.defaultSelectedColumns.indexOf('supplier');
+            if (index !== -1) {
+                this.defaultSelectedColumns.splice(index, 1);
             }
         }
         this.updateFormWithQueryParams();
@@ -1745,16 +1813,18 @@ let StockReceiptsListPageComponent = class StockReceiptsListPageComponent extend
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsListPageComponent, deps: [{ token: StockReceiptService }, { token: i2$2.FormBuilder }, { token: i1.RequestHelperService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockReceiptsListPageComponent, selector: "app-stock-receipts-list-page", inputs: { product: "product" }, outputs: { listUpdated: "listUpdated" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"!product\" 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-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector\n        mode=\"icon\"\n        class=\"mb-2 d-print-none\"\n        [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"\n      ></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter\n        appearance=\"fill\"\n        labelText=\"Date\"\n        formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\"\n        [showClearButton]=\"true\"\n        [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/product-categories\"\n          formControlName=\"category_ids\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/product-measures\"\n          formControlName=\"measure_ids\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/inventory-locations\"\n          formControlName=\"location_ids\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n      <app-stock-receipt-form-button\n        [product]=\"product\"\n        (saved)=\"reload(); listUpdated.emit()\"\n        icon=\"add\"\n      ></app-stock-receipt-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"models\"\n      class=\"w-100\"\n      aria-describedby=\"Stock Receipts\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      matSort\n      (matSortChange)=\"onSortChange($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      <!-- 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          <div class=\"d-flex flex-column gap-1\">\n            <a\n              class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\"\n            >\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\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?.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\">{{ element?.quantity }} {{ 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\n            class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\"\n          >\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\">\n          {{ element?.purchase_price | currency }}\n        </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\">\n          {{ element?.amount | currency }}\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      <!-- 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\">\n          {{ element?.supplier?.company_name }}\n        </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?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.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\">\n            <app-stock-receipt-form-button\n              [product]=\"element.product\"\n              [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"\n            ></app-stock-receipt-form-button>\n            <app-stock-receipt-delete-button\n              [stockReceipt]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"\n            ></app-stock-receipt-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.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: i7.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: i14.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "icon"], outputs: ["saved"] }, { 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"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: StockReceiptDeleteButtonComponent, selector: "app-stock-receipt-delete-button", inputs: ["stockReceipt"], outputs: ["deleted"] }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockReceiptsListPageComponent, selector: "app-stock-receipts-list-page", inputs: { product: "product", supplierId: "supplierId" }, outputs: { listUpdated: "listUpdated" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"!product\" 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-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\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=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n      <app-stock-receipt-form-button [latestLocationId]=\"models.length > 0 ? models[0].location_id : null\"\n        [product]=\"product\" (saved)=\"reload(); listUpdated.emit()\" icon=\"add\"></app-stock-receipt-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipts\" 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      <!-- 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          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\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?.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\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\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\">\n          {{ element?.purchase_price | currency }}\n        </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\">\n          {{ element?.amount | currency }}\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      <!-- 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\">\n          {{ element?.supplier?.company_name }}\n        </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?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.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\">\n            <app-stock-receipt-form-button [product]=\"element.product\" [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-receipt-form-button>\n            <app-stock-receipt-delete-button [stockReceipt]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-receipt-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.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: i9.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: i14.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { 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"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: StockReceiptDeleteButtonComponent, selector: "app-stock-receipt-delete-button", inputs: ["stockReceipt"], outputs: ["deleted"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 StockReceiptsListPageComponent = __decorate([
     UntilDestroy()
 ], StockReceiptsListPageComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsListPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipts-list-page', template: "<mat-card *ngIf=\"!product\" 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-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector\n        mode=\"icon\"\n        class=\"mb-2 d-print-none\"\n        [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"\n      ></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter\n        appearance=\"fill\"\n        labelText=\"Date\"\n        formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\"\n        [showClearButton]=\"true\"\n        [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/product-categories\"\n          formControlName=\"category_ids\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/product-measures\"\n          formControlName=\"measure_ids\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/inventory-locations\"\n          formControlName=\"location_ids\"\n          [multiple]=\"true\"\n        >\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n      <app-stock-receipt-form-button\n        [product]=\"product\"\n        (saved)=\"reload(); listUpdated.emit()\"\n        icon=\"add\"\n      ></app-stock-receipt-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"models\"\n      class=\"w-100\"\n      aria-describedby=\"Stock Receipts\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      matSort\n      (matSortChange)=\"onSortChange($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      <!-- 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          <div class=\"d-flex flex-column gap-1\">\n            <a\n              class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\"\n            >\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\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?.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\">{{ element?.quantity }} {{ 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\n            class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\"\n          >\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\">\n          {{ element?.purchase_price | currency }}\n        </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\">\n          {{ element?.amount | currency }}\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      <!-- 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\">\n          {{ element?.supplier?.company_name }}\n        </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?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.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\">\n            <app-stock-receipt-form-button\n              [product]=\"element.product\"\n              [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"\n            ></app-stock-receipt-form-button>\n            <app-stock-receipt-delete-button\n              [stockReceipt]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"\n            ></app-stock-receipt-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+            args: [{ selector: 'app-stock-receipts-list-page', template: "<mat-card *ngIf=\"!product\" 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-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\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=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n      <app-stock-receipt-form-button [latestLocationId]=\"models.length > 0 ? models[0].location_id : null\"\n        [product]=\"product\" (saved)=\"reload(); listUpdated.emit()\" icon=\"add\"></app-stock-receipt-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipts\" 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      <!-- 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          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\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?.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\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\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\">\n          {{ element?.purchase_price | currency }}\n        </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\">\n          {{ element?.amount | currency }}\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      <!-- 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\">\n          {{ element?.supplier?.company_name }}\n        </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?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.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\">\n            <app-stock-receipt-form-button [product]=\"element.product\" [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-receipt-form-button>\n            <app-stock-receipt-delete-button [stockReceipt]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-receipt-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: StockReceiptService }, { type: i2$2.FormBuilder }, { type: i1.RequestHelperService }, { type: i2.ActivatedRoute }], propDecorators: { product: [{
                 type: Input
+            }], supplierId: [{
+                type: Input
             }], listUpdated: [{
                 type: Output
             }] } });
@@ -1789,7 +1859,7 @@ class StockIssuanceDeleteButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: StockIssuanceService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockIssuanceDeleteButtonComponent, selector: "app-stock-issuance-delete-button", inputs: { stockIssuance: "stockIssuance" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<span class=\"material-symbols-outlined cursor-pointer\" (click)=\"showDeleteConfirmModel(deleteModelTemplate)\">\n  delete\n</span>\n\n<ng-template #deleteModelTemplate>\n  <h3 mat-dialog-title>Delete Stock Issuance</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the stock issuance record?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-2\">\n    <button [disabled]=\"isDeleting\" mat-raised-button type=\"button\" color=\"warn\" (click)=\"delete()\">Delete</button>\n    <button [disabled]=\"isDeleting\" mat-flat-button mat-dialog-close type=\"button\">Cancel</button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockIssuanceDeleteButtonComponent, selector: "app-stock-issuance-delete-button", inputs: { stockIssuance: "stockIssuance" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<span class=\"material-symbols-outlined cursor-pointer\" (click)=\"showDeleteConfirmModel(deleteModelTemplate)\">\n  delete\n</span>\n\n<ng-template #deleteModelTemplate>\n  <h3 mat-dialog-title>Delete Stock Issuance</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the stock issuance record?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-2\">\n    <button [disabled]=\"isDeleting\" mat-raised-button type=\"button\" color=\"warn\" (click)=\"delete()\">Delete</button>\n    <button [disabled]=\"isDeleting\" mat-flat-button mat-dialog-close type=\"button\">Cancel</button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ 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: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceDeleteButtonComponent, decorators: [{
             type: Component,
@@ -1811,7 +1881,7 @@ class StockIssuancesListComponent extends TechlifyListingControllerInterface {
     label = 'Stock Issues';
     listUpdated = new EventEmitter();
     defaultSelectedColumns = [
-        'no', 'product', 'sku', 'date', 'quantity', 'location', 'related', 'particulars',
+        'no', 'product', 'sku', 'date', 'quantity', 'measure', 'location', 'related', 'particulars',
     ];
     columnConfig = [
         { label: 'Creator', def: 'creator', isSelected: false, isEditable: true },
@@ -1917,11 +1987,11 @@ class StockIssuancesListComponent extends TechlifyListingControllerInterface {
         }, { emitEvent: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesListComponent, deps: [{ token: i2$2.FormBuilder }, { token: i1.RequestHelperService }, { token: StockIssuanceService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockIssuancesListComponent, selector: "app-stock-issuances-list", inputs: { product: "product", issuableType: "issuableType", issuableId: "issuableId", label: "label" }, outputs: { listUpdated: "listUpdated" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"!product\" 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-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <app-stock-issue-form-button\n        icon=\"add\"\n        [issuableType]=\"issuableType\"\n        [issuableId]=\"issuableId\"\n        (saved)=\"reload()\"\n        class=\"mt-2\"\n      ></app-stock-issue-form-button>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector\n        mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\" [(selectedColumns)]=\"selectedColumns\"\n      ></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter\n        appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\" (selectionChange)=\"onDurationChange($event)\"\n        [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\" [dateTo]=\"filterForm.value?.date_to\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Issues</h3>\n\n      <app-stock-issue-form-button\n        class=\"mt-2\" [product]=\"product\" icon=\"add\" (saved)=\"reload(); listUpdated.emit()\"\n      ></app-stock-issue-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issuances\"\n      infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\n      matSort (matSortChange)=\"onSortChange($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      <!-- 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          <div class=\"d-flex flex-column gap-1\">\n            <a\n              class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\"\n            >\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\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?.date | date }}</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\n            class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\"\n          >\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 mat-sort-header>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </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\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</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\">\n          {{ element?.purchase_price | currency }}\n        </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\">\n          {{ element?.amount | currency }}\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      <!-- 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\">\n          {{ element?.supplier?.company_name }}\n        </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?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.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\">\n            <app-stock-issue-form-button\n              [product]=\"element.product\" [stockIssuance]=\"element\" (saved)=\"reload(); listUpdated.emit()\"\n            ></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button\n              [stockIssuance]=\"element\" (deleted)=\"reload(); listUpdated.emit()\"\n            ></app-stock-issuance-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.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: i14.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "directive", type: i10.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: StockIssuanceDeleteButtonComponent, selector: "app-stock-issuance-delete-button", inputs: ["stockIssuance"], outputs: ["deleted"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockIssuancesListComponent, selector: "app-stock-issuances-list", inputs: { product: "product", issuableType: "issuableType", issuableId: "issuableId", label: "label" }, outputs: { listUpdated: "listUpdated" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"!product\" 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-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <app-stock-issue-form-button icon=\"add\" [issuableType]=\"issuableType\" [issuableId]=\"issuableId\" (saved)=\"reload()\"\n        class=\"mt-2\"></app-stock-issue-form-button>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\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=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Issues</h3>\n\n      <app-stock-issue-form-button class=\"mt-2\" [product]=\"product\" icon=\"add\"\n        (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issuances\" 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      <!-- 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          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\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?.date | date }}</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 mat-sort-header>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </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\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\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      <!-- 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\">\n          {{ element?.purchase_price | currency }}\n        </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\">\n          {{ element?.amount | currency }}\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      <!-- 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\">\n          {{ element?.supplier?.company_name }}\n        </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?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.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\">\n            <app-stock-issue-form-button [product]=\"element.product\" [stockIssuance]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button [stockIssuance]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-issuance-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i14.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.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: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "directive", type: i10.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: StockIssuanceDeleteButtonComponent, selector: "app-stock-issuance-delete-button", inputs: ["stockIssuance"], outputs: ["deleted"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-issuances-list', template: "<mat-card *ngIf=\"!product\" 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-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <app-stock-issue-form-button\n        icon=\"add\"\n        [issuableType]=\"issuableType\"\n        [issuableId]=\"issuableId\"\n        (saved)=\"reload()\"\n        class=\"mt-2\"\n      ></app-stock-issue-form-button>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector\n        mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\" [(selectedColumns)]=\"selectedColumns\"\n      ></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter\n        appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\" (selectionChange)=\"onDurationChange($event)\"\n        [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\" [dateTo]=\"filterForm.value?.date_to\"\n      ></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Issues</h3>\n\n      <app-stock-issue-form-button\n        class=\"mt-2\" [product]=\"product\" icon=\"add\" (saved)=\"reload(); listUpdated.emit()\"\n      ></app-stock-issue-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issuances\"\n      infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\n      matSort (matSortChange)=\"onSortChange($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      <!-- 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          <div class=\"d-flex flex-column gap-1\">\n            <a\n              class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\"\n            >\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\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?.date | date }}</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\n            class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\"\n          >\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 mat-sort-header>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </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\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</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\">\n          {{ element?.purchase_price | currency }}\n        </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\">\n          {{ element?.amount | currency }}\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      <!-- 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\">\n          {{ element?.supplier?.company_name }}\n        </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?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.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\">\n            <app-stock-issue-form-button\n              [product]=\"element.product\" [stockIssuance]=\"element\" (saved)=\"reload(); listUpdated.emit()\"\n            ></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button\n              [stockIssuance]=\"element\" (deleted)=\"reload(); listUpdated.emit()\"\n            ></app-stock-issuance-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+            args: [{ selector: 'app-stock-issuances-list', template: "<mat-card *ngIf=\"!product\" 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-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <app-stock-issue-form-button icon=\"add\" [issuableType]=\"issuableType\" [issuableId]=\"issuableId\" (saved)=\"reload()\"\n        class=\"mt-2\"></app-stock-issue-form-button>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\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=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Issues</h3>\n\n      <app-stock-issue-form-button class=\"mt-2\" [product]=\"product\" icon=\"add\"\n        (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issuances\" 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      <!-- 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          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\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?.date | date }}</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 mat-sort-header>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </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\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\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      <!-- 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\">\n          {{ element?.purchase_price | currency }}\n        </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\">\n          {{ element?.amount | currency }}\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      <!-- 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\">\n          {{ element?.supplier?.company_name }}\n        </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?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.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\">\n            <app-stock-issue-form-button [product]=\"element.product\" [stockIssuance]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button [stockIssuance]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-issuance-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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: i1.RequestHelperService }, { type: StockIssuanceService }, { type: i2.ActivatedRoute }], propDecorators: { product: [{
                 type: Input
             }], issuableType: [{
@@ -2122,7 +2192,7 @@ class ProductLocationListComponent extends TechlifyListingControllerInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductLocationListComponent, deps: [{ token: ProductStatisticsService }, { token: i1.ErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductLocationListComponent, isStandalone: true, selector: "app-product-location-list", inputs: { product: "product" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> location_on </span>\n      <strong class=\"mb-0 text-dark\">Product Locations</strong>\n    </div>\n\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\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      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef> Stock </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-stock-transfer-form-button *ngIf=\"element?.id\" [productId]=\"product?.id\"\n            (saved)=\"reload()\"></app-stock-transfer-form-button>\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-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: StockTransferFormButtonComponent, selector: "app-stock-transfer-form-button", inputs: ["productId"], outputs: ["saved"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductLocationListComponent, isStandalone: true, selector: "app-product-location-list", inputs: { product: "product" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> location_on </span>\n      <strong class=\"mb-0 text-dark\">Product Locations</strong>\n    </div>\n\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\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      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef> Stock </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-stock-transfer-form-button *ngIf=\"element?.id\" [productId]=\"product?.id\"\n            (saved)=\"reload()\"></app-stock-transfer-form-button>\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-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MaterialModule }, { 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.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: StockTransferFormButtonComponent, selector: "app-stock-transfer-form-button", inputs: ["productId"], outputs: ["saved"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductLocationListComponent, decorators: [{
             type: Component,
@@ -2186,7 +2256,7 @@ class StockTransferListComponent extends TechlifyListingControllerInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferListComponent, deps: [{ token: StockTransferService }, { token: i2$2.FormBuilder }, { token: i1.ErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockTransferListComponent, isStandalone: true, selector: "app-stock-transfer-list", inputs: { productId: "productId" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Transfers</h3>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Transfers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\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      </ng-container>\n\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef>Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <span>{{ element?.date | date }}</span>\n            <span>{{ element?.particulars }}</span>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_from\">\n        <th mat-header-cell *matHeaderCellDef>From</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_from?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_to\">\n        <th mat-header-cell *matHeaderCellDef>To</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_to?.title }}\n        </td>\n      </ng-container>\n\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?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockTransferListComponent, isStandalone: true, selector: "app-stock-transfer-list", inputs: { productId: "productId" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Transfers</h3>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Transfers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\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      </ng-container>\n\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef>Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <span>{{ element?.date | date }}</span>\n            <span>{{ element?.particulars }}</span>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_from\">\n        <th mat-header-cell *matHeaderCellDef>From</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_from?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_to\">\n        <th mat-header-cell *matHeaderCellDef>To</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_to?.title }}\n        </td>\n      </ng-container>\n\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?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\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 *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferListComponent, decorators: [{
             type: Component,
@@ -2258,7 +2328,7 @@ class ProductDeleteButtonComponent {
         this.matDialog.open(templateRef, { width: '500px' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: ProductService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDeleteButtonComponent, selector: "app-product-delete-button", inputs: { product: "product" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer text-secondary\" (click)=\"showDeleteDialog(deleteProductDialog)\"> delete </mat-icon>\n\n<ng-template #deleteProductDialog>\n  <h3 mat-dialog-title>Delete Product</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the\n    <strong>{{ product?.name }}</strong> ?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-raised-button color=\"warn\" (click)=\"deleteProduct()\">\n      Delete\n    </button>\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDeleteButtonComponent, selector: "app-product-delete-button", inputs: { product: "product" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer text-secondary\" (click)=\"showDeleteDialog(deleteProductDialog)\"> delete </mat-icon>\n\n<ng-template #deleteProductDialog>\n  <h3 mat-dialog-title>Delete Product</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the\n    <strong>{{ product?.name }}</strong> ?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-raised-button color=\"warn\" (click)=\"deleteProduct()\">\n      Delete\n    </button>\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ 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: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDeleteButtonComponent, decorators: [{
             type: Component,
@@ -2302,11 +2372,11 @@ class ProductBasicInfoComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBasicInfoComponent, deps: [{ token: StockSummaryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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  <mat-card-content class=\"d-flex justify-content-between align-items-center mb-1 mb-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">{{ product?.name }}</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n      <app-product-delete-button [product]=\"product\" (deleted)=\"deleted.emit()\"></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n\n\n  <mat-card-content class='d-flex flex-column gap-2'>\n    <div class=\"d-flex flex-wrap gap-1 my-3\">\n      <span class=\"badge text-bg-secondary\" *ngFor=\"let category of product?.categories\">\n        {{ category?.title }}\n      </span>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-start\">\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">SKU</small>\n          <p class=\"mb-0\">{{ product?.sku }}</p>\n        </div>\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Type</small>\n          <p class=\"mb-0\">{{ product?.type?.title }}</p>\n        </div>\n      </div>\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Measure</small>\n          <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n        </div>\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <small class=\"text-secondary\">Reorder Point</small>\n            <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\">\n    <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\">\n      <small class=\"text-secondary\">Description</small>\n      <p class=\"mb-0\">{{ product?.description }}</p>\n    </mat-card-content>\n\n    <mat-card-content class=\"mt-5 d-flex justify-content-between align-items-start\">\n      <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n        <mat-card-content class=\"mt-5 d-flex justify-content-between align-items-start\">\n          <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <small class=\"text-secondary\">Stock Receipts</small>\n            <div class=\"d-flex justify-content-start align-items-center gap-2\">\n              <span class=\"material-symbols-outlined\"> arrow_downward </span>\n              <p class=\"mb-0\" style=\"font-size: 24px\">\n                {{ stockSummary?.stock_receipts_quantity_sum }}\n              </p>\n            </div>\n            <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary\">\n              Last Added On {{ product?.last_stock_receipt?.date | date }}\n            </small>\n          </div>\n          <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n              <small class=\"text-secondary\">Stock Issuances</small>\n              <div class=\"d-flex justify-content-start align-items-center gap-2\">\n                <span class=\"material-symbols-outlined\"> ungroup </span>\n                <p class=\"mb-0\" style=\"font-size: 24px\">\n                  {{ stockSummary?.stock_issuances_quantity_sum }}\n                </p>\n              </div>\n              <small *ngIf=\"product?.last_stock_issuance\" class=\"text-secondary\">\n                Last Added On {{ product?.last_stock_issuance?.date | date }}\n              </small>\n            </div>\n          </div>\n        </mat-card-content>\n\n        <mat-card-content *ngIf=\"stockSummary\" class=\"mt-3 d-flex justify-content-center align-items-center\">\n          <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <mat-card-content *ngIf=\"stockSummary\" class=\"mt-3 d-flex justify-content-center align-items-center\">\n              <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n                <small class=\"text-secondary\">On Hand</small>\n                <div class=\"d-flex justify-content-start align-items-center gap-2\">\n                  <span class=\"material-symbols-outlined\"> inventory_2 </span>\n                  <p class=\"mb-0\" style=\"font-size: 24px\">\n                    {{ stockSummary?.stock_quantity_remaining }}\n                  </p>\n                </div>\n              </div>\n            </mat-card-content>\n          </div>\n        </mat-card-content>\n      </div>\n    </mat-card-content>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductDeleteButtonComponent, selector: "app-product-delete-button", inputs: ["product"], outputs: ["deleted"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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  <mat-card-content class=\"d-flex justify-content-between align-items-center mb-1 mb-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">{{ product?.name }}</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n      <app-product-delete-button [product]=\"product\" (deleted)=\"deleted.emit()\"></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n\n\n  <mat-card-content class='d-flex flex-column gap-2'>\n    <div class=\"d-flex flex-wrap gap-1 my-3\">\n      <span class=\"badge text-bg-secondary\" *ngFor=\"let category of product?.categories\">\n        {{ category?.title }}\n      </span>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-start\">\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">SKU</small>\n          <p class=\"mb-0\">{{ product?.sku }}</p>\n        </div>\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Type</small>\n          <p class=\"mb-0\">{{ product?.type?.title }}</p>\n        </div>\n      </div>\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Measure</small>\n          <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n        </div>\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <small class=\"text-secondary\">Reorder Point</small>\n            <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\">\n    <div *ngIf=\"product?.description\" class=\"mb-2 d-flex flex-column justify-content-start align-items-start gap-1\">\n      <small class=\"text-secondary\">Description</small>\n      <p class=\"mb-0\">{{ product?.description }}</p>\n    </div>\n\n    <div>\n      <div class=\"mt-2 d-flex justify-content-between align-items-start\">\n\n        <!-- Stock Receipts  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Receipts</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> arrow_downward </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_receipts_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_receipt?.date | date }}\n          </small>\n        </div>\n\n        <!-- Stock Issues  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Issuances</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> ungroup </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_issuances_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_issuance\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_issuance?.date | date }}\n          </small>\n        </div>\n\n\n        <!-- On Hand  -->\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">On Hand</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> inventory_2 </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ product?.stock_on_hand }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.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.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductDeleteButtonComponent, selector: "app-product-delete-button", inputs: ["product"], outputs: ["deleted"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBasicInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-product-basic-info', template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center mb-1 mb-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">{{ product?.name }}</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n      <app-product-delete-button [product]=\"product\" (deleted)=\"deleted.emit()\"></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n\n\n  <mat-card-content class='d-flex flex-column gap-2'>\n    <div class=\"d-flex flex-wrap gap-1 my-3\">\n      <span class=\"badge text-bg-secondary\" *ngFor=\"let category of product?.categories\">\n        {{ category?.title }}\n      </span>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-start\">\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">SKU</small>\n          <p class=\"mb-0\">{{ product?.sku }}</p>\n        </div>\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Type</small>\n          <p class=\"mb-0\">{{ product?.type?.title }}</p>\n        </div>\n      </div>\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Measure</small>\n          <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n        </div>\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <small class=\"text-secondary\">Reorder Point</small>\n            <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\">\n    <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\">\n      <small class=\"text-secondary\">Description</small>\n      <p class=\"mb-0\">{{ product?.description }}</p>\n    </mat-card-content>\n\n    <mat-card-content class=\"mt-5 d-flex justify-content-between align-items-start\">\n      <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n        <mat-card-content class=\"mt-5 d-flex justify-content-between align-items-start\">\n          <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <small class=\"text-secondary\">Stock Receipts</small>\n            <div class=\"d-flex justify-content-start align-items-center gap-2\">\n              <span class=\"material-symbols-outlined\"> arrow_downward </span>\n              <p class=\"mb-0\" style=\"font-size: 24px\">\n                {{ stockSummary?.stock_receipts_quantity_sum }}\n              </p>\n            </div>\n            <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary\">\n              Last Added On {{ product?.last_stock_receipt?.date | date }}\n            </small>\n          </div>\n          <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n              <small class=\"text-secondary\">Stock Issuances</small>\n              <div class=\"d-flex justify-content-start align-items-center gap-2\">\n                <span class=\"material-symbols-outlined\"> ungroup </span>\n                <p class=\"mb-0\" style=\"font-size: 24px\">\n                  {{ stockSummary?.stock_issuances_quantity_sum }}\n                </p>\n              </div>\n              <small *ngIf=\"product?.last_stock_issuance\" class=\"text-secondary\">\n                Last Added On {{ product?.last_stock_issuance?.date | date }}\n              </small>\n            </div>\n          </div>\n        </mat-card-content>\n\n        <mat-card-content *ngIf=\"stockSummary\" class=\"mt-3 d-flex justify-content-center align-items-center\">\n          <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <mat-card-content *ngIf=\"stockSummary\" class=\"mt-3 d-flex justify-content-center align-items-center\">\n              <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n                <small class=\"text-secondary\">On Hand</small>\n                <div class=\"d-flex justify-content-start align-items-center gap-2\">\n                  <span class=\"material-symbols-outlined\"> inventory_2 </span>\n                  <p class=\"mb-0\" style=\"font-size: 24px\">\n                    {{ stockSummary?.stock_quantity_remaining }}\n                  </p>\n                </div>\n              </div>\n            </mat-card-content>\n          </div>\n        </mat-card-content>\n      </div>\n    </mat-card-content>\n  </mat-card-content>\n</mat-card>" }]
+            args: [{ selector: 'app-product-basic-info', template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center mb-1 mb-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">{{ product?.name }}</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n      <app-product-delete-button [product]=\"product\" (deleted)=\"deleted.emit()\"></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n\n\n  <mat-card-content class='d-flex flex-column gap-2'>\n    <div class=\"d-flex flex-wrap gap-1 my-3\">\n      <span class=\"badge text-bg-secondary\" *ngFor=\"let category of product?.categories\">\n        {{ category?.title }}\n      </span>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-start\">\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">SKU</small>\n          <p class=\"mb-0\">{{ product?.sku }}</p>\n        </div>\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Type</small>\n          <p class=\"mb-0\">{{ product?.type?.title }}</p>\n        </div>\n      </div>\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Measure</small>\n          <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n        </div>\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <small class=\"text-secondary\">Reorder Point</small>\n            <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\">\n    <div *ngIf=\"product?.description\" class=\"mb-2 d-flex flex-column justify-content-start align-items-start gap-1\">\n      <small class=\"text-secondary\">Description</small>\n      <p class=\"mb-0\">{{ product?.description }}</p>\n    </div>\n\n    <div>\n      <div class=\"mt-2 d-flex justify-content-between align-items-start\">\n\n        <!-- Stock Receipts  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Receipts</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> arrow_downward </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_receipts_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_receipt?.date | date }}\n          </small>\n        </div>\n\n        <!-- Stock Issues  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Issuances</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> ungroup </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_issuances_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_issuance\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_issuance?.date | date }}\n          </small>\n        </div>\n\n\n        <!-- On Hand  -->\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">On Hand</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> inventory_2 </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ product?.stock_on_hand }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: StockSummaryService }], propDecorators: { product: [{
                 type: Input
             }], saved: [{
@@ -2365,13 +2435,13 @@ class ProductViewPageComponent {
     onProductDeleted() {
         this.location.back();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductViewPageComponent, deps: [{ token: ProductService }, { token: i2.ActivatedRoute }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductViewPageComponent, selector: "app-product-view-page", 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\">\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\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\"></app-product-location-list>\n\n    <!-- <app-product-tax-list [product]=\"product\"></app-product-tax-list> -->\n  </div>\n  <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n    <app-stock-receipts-list-page [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"></app-stock-receipts-list-page>\n\n    <app-stock-issuances-list [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"></app-stock-issuances-list>\n\n    <app-stock-transfer-list *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StockReceiptsListPageComponent, selector: "app-stock-receipts-list-page", inputs: ["product"], outputs: ["listUpdated"] }, { kind: "component", type: StockIssuancesListComponent, selector: "app-stock-issuances-list", inputs: ["product", "issuableType", "issuableId", "label"], outputs: ["listUpdated"] }, { kind: "component", type: i6.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"] }, { kind: "component", type: StockTransferListComponent, selector: "app-stock-transfer-list", inputs: ["productId"] }, { kind: "component", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: ["product"], outputs: ["saved", "deleted"] }], preserveWhitespaces: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductViewPageComponent, deps: [{ token: ProductService }, { token: i2.ActivatedRoute }, { token: i5.Location }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductViewPageComponent, selector: "app-product-view-page", 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\">\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\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\"></app-product-location-list>\n\n    <!-- <app-product-tax-list [product]=\"product\"></app-product-tax-list> -->\n  </div>\n  <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n    <app-stock-receipts-list-page [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"></app-stock-receipts-list-page>\n\n    <app-stock-issuances-list [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"></app-stock-issuances-list>\n\n    <app-stock-transfer-list *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StockReceiptsListPageComponent, selector: "app-stock-receipts-list-page", inputs: ["product", "supplierId"], outputs: ["listUpdated"] }, { kind: "component", type: StockIssuancesListComponent, selector: "app-stock-issuances-list", inputs: ["product", "issuableType", "issuableId", "label"], outputs: ["listUpdated"] }, { kind: "component", type: i6.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"] }, { kind: "component", type: StockTransferListComponent, selector: "app-stock-transfer-list", inputs: ["productId"] }, { 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.13", 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\">\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\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\"></app-product-location-list>\n\n    <!-- <app-product-tax-list [product]=\"product\"></app-product-tax-list> -->\n  </div>\n  <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n    <app-stock-receipts-list-page [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"></app-stock-receipts-list-page>\n\n    <app-stock-issuances-list [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"></app-stock-issuances-list>\n\n    <app-stock-transfer-list *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n  </div>\n</div>" }]
-        }], ctorParameters: () => [{ type: ProductService }, { type: i2.ActivatedRoute }, { type: i4.Location }] });
+        }], ctorParameters: () => [{ type: ProductService }, { type: i2.ActivatedRoute }, { type: i5.Location }] });
 
 class ProductImportPageComponent {
     importConfig = {
@@ -2500,23 +2570,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class StockReceiptFormModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptFormModule, declarations: [StockReceiptFormComponent, StockReceiptFormButtonComponent], imports: [CommonModule,
-            MatTooltipModule,
-            MatDialogModule,
             PayeeSelectorModule,
             ReactiveFormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatDatepickerModule,
-            MatButtonModule], exports: [StockReceiptFormButtonComponent] });
+            MaterialModule,
+            SearchableSelectorModule], exports: [StockReceiptFormButtonComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptFormModule, imports: [CommonModule,
-            MatTooltipModule,
-            MatDialogModule,
             PayeeSelectorModule,
             ReactiveFormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatDatepickerModule,
-            MatButtonModule] });
+            MaterialModule,
+            SearchableSelectorModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptFormModule, decorators: [{
             type: NgModule,
@@ -2525,14 +2587,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     exports: [StockReceiptFormButtonComponent],
                     imports: [
                         CommonModule,
-                        MatTooltipModule,
-                        MatDialogModule,
                         PayeeSelectorModule,
                         ReactiveFormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatDatepickerModule,
-                        MatButtonModule,
+                        MaterialModule,
+                        SearchableSelectorModule
                     ],
                 }]
         }] });
@@ -2541,21 +2599,11 @@ class StockIssueFormModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssueFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StockIssueFormModule, declarations: [StockIssueFormComponent, StockIssueFormButtonComponent], imports: [CommonModule,
             ReactiveFormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatDatepickerModule,
-            MatButtonModule,
-            MatDialogModule,
-            MatTooltipModule,
+            MaterialModule,
             SearchableSelectorModule], exports: [StockIssueFormButtonComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssueFormModule, imports: [CommonModule,
             ReactiveFormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatDatepickerModule,
-            MatButtonModule,
-            MatDialogModule,
-            MatTooltipModule,
+            MaterialModule,
             SearchableSelectorModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssueFormModule, decorators: [{
@@ -2566,12 +2614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatDatepickerModule,
-                        MatButtonModule,
-                        MatDialogModule,
-                        MatTooltipModule,
+                        MaterialModule,
                         SearchableSelectorModule,
                     ],
                 }]
@@ -2628,7 +2671,7 @@ class StockReceiptImportPageComponent {
             type: 'stock-receipt',
             apiUrl: 'api/import-histories',
         },
-        viewRouterLink: '/stock-receipts',
+        viewRouterLink: '/inventory/stock-receipts',
     };
     constructor() { }
     ngOnInit() {
@@ -2755,7 +2798,7 @@ class TechlifyFilterComponent {
             : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterComponent, deps: [{ token: i1.RequestHelperService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: { filterForm: "filterForm", filterConfig: "filterConfig" }, outputs: { filterUpdated: "filterUpdated" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n  <mat-form-field *ngIf=\"filterForm.get('search')\" [appearance]=\"getFilterConfig('appearance', 'search')\">\n    <mat-label>Search</mat-label>\n    <input formControlName=\"search\" matInput [placeholder]=\"getFilterConfig('placeholder', 'search')\" />\n    <button *ngIf=\"filterForm.value?.search\" mat-icon-button matSuffix (click)=\"resetField('search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <app-timeline-filter\n    *ngIf=\"filterForm?.get('duration')\"\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'duration')\"\n    [appearance]=\"getFilterConfig('appearance', 'duration')\"\n    formControlName=\"duration\"\n    (selectionChange)=\"onDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.date_from\"\n    [dateTo]=\"filterForm.value?.date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('payment_method_ids')\">\n    <mat-label>Payment Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"payment_method_ids\"\n      apiUrl=\"api/payment-methods\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.payment_method_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('payment_method_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('payment_account_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['accountingcommon_account.read']\">\n      <mat-label>{{ getFilterConfig('label', 'payment_account_ids') || 'Payment Account' }}</mat-label>\n      <app-searchable-selector\n        formControlName=\"payment_account_ids\"\n        [apiUrl]=\"getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.payment_account_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('payment_account_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('invoice_status_ids')\">\n    <mat-label>Invoice Status</mat-label>\n    <app-searchable-selector\n      formControlName=\"invoice_status_ids\"\n      apiUrl=\"api/invoice-statuses\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.invoice_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('invoice_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('customer_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['customer_read']\">\n      <mat-label>Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"customer_ids\"\n        titleField=\"name\"\n        apiUrl=\"api/customers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.customer_ids\" mat-icon-button matSuffix (click)=\"resetField('customer_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"filterForm.get('project_ids') && getFilterConfig('disabled', 'project_ids') === false\">\n    <mat-form-field *ngxPermissionsOnly=\"['project.read']\">\n      <mat-label>Project</mat-label>\n      <app-searchable-selector\n        formControlName=\"project_ids\"\n        apiUrl=\"api/projects\"\n        titleField=\"project_name\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.project_ids\" mat-icon-button matSuffix (click)=\"resetField('project_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('product_ids')\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector\n      formControlName=\"product_ids\"\n      apiUrl=\"api/products\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.product_ids\" mat-icon-button matSuffix (click)=\"resetField('product_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('measure_ids')\">\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector\n      formControlName=\"measure_ids\"\n      apiUrl=\"api/product-measures\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.measure_ids\" mat-icon-button matSuffix (click)=\"resetField('measure_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngxPermissionsOnly=\"['supplier.read']\">\n    <mat-form-field *ngIf=\"filterForm.get('supplier_ids')\" [appearance]=\"getFilterConfig('appearance', 'supplier_ids')\">\n      <mat-label>Supplier</mat-label>\n      <app-searchable-selector\n        formControlName=\"supplier_ids\"\n        titleField=\"company_name\"\n        apiUrl=\"api/suppliers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.supplier_ids\" mat-icon-button matSuffix (click)=\"resetField('supplier_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <app-timeline-filter\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'expiry_duration')\"\n    *ngIf=\"filterForm?.get('expiry_duration')\"\n    formControlName=\"expiry_duration\"\n    (selectionChange)=\"onExpiryDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.expiry_date_from\"\n    [dateTo]=\"filterForm.value?.expiry_date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('cost_category_ids')\" style=\"width: 150px\">\n    <mat-label>Cost Category</mat-label>\n    <app-searchable-selector\n      formControlName=\"cost_category_ids\"\n      apiUrl=\"api/cost-code-categories\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.cost_category_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('cost_category_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('milestone_ids')\" style=\"width: 150px\">\n    <mat-label>Milestone</mat-label>\n    <app-searchable-selector\n      formControlName=\"milestone_ids\"\n      apiUrl=\"api/milestones\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.milestone_ids\" mat-icon-button matSuffix (click)=\"resetField('milestone_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('team_member_ids')\">\n    <mat-label>Assignee</mat-label>\n    <app-searchable-selector apiUrl=\"api/persons\" formControlName=\"team_member_ids\" titleField=\"name\" [multiple]=\"true\">\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.team_member_ids\" mat-icon-button matSuffix (click)=\"resetField('team_member_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-types\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_document_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_document_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-document-types\"\n      [multiple]=\"true\"\n      [enableSearch]=\"getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_document_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_document_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div *ngIf=\"filterForm.get('fixed_asset_document_status')\">\n    <small class=\"mr-2 text-secondary\" *ngIf=\"getFilterConfig('showLabel', 'fixed_asset_document_status')\">\n      Status\n    </small>\n    <mat-button-toggle-group formControlName=\"fixed_asset_document_status\" [multiple]=\"false\">\n      <mat-button-toggle value=\"all\">All</mat-button-toggle>\n      <mat-button-toggle value=\"active\">Active</mat-button-toggle>\n      <mat-button-toggle value=\"expired\">Expired</mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <mat-form-field *ngIf=\"filterForm.get('asset_account_ids')\">\n    <mat-label>Asset Account</mat-label>\n    <app-searchable-selector\n      formControlName=\"asset_account_ids\"\n      apiUrl=\"api/accounts\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.asset_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('asset_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_expense_account_ids')\">\n    <mat-label>Depreciation Expense Account</mat-label>\n    <app-searchable-selector\n      [multiple]=\"true\"\n      apiUrl=\"api/accounts\"\n      formControlName=\"depreciation_expense_account_ids\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.depreciation_expense_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('depreciation_expense_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_method_ids')\">\n    <mat-label>Depreciation Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"depreciation_method_ids\"\n      apiUrl=\"api/accounting-plus/depreciation-methods\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      (click)=\"resetField('depreciation_method_ids')\"\n      *ngIf=\"filterForm.value?.depreciation_method_ids\"\n      mat-icon-button\n      matSuffix\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('task_status_ids')\" style=\"width: 150px\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/task-statuses\"\n      formControlName=\"task_status_ids\"\n      titleField=\"title\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.task_status_ids\" mat-icon-button matSuffix (click)=\"resetField('task_status_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('service_center_ids')\">\n    <mat-label>Service Center</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/service-centers\"\n      formControlName=\"service_center_ids\"\n      titleField=\"name\"\n      [enableSearch]=\"false\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.service_center_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('service_center_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_maintenance_status_ids')\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/fixed-asset-maintenance-statuses\"\n      formControlName=\"fixed_asset_maintenance_status_ids\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_maintenance_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_maintenance_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('group_by')\">\n    <mat-label>Group By</mat-label>\n    <mat-select formControlName=\"group_by\">\n      <mat-option value=\"week\">Week</mat-option>\n      <mat-option value=\"month\">Month</mat-option>\n      <mat-option value=\"year\">Year</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i4$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.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: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i13.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: { filterForm: "filterForm", filterConfig: "filterConfig" }, outputs: { filterUpdated: "filterUpdated" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n  <mat-form-field *ngIf=\"filterForm.get('search')\" [appearance]=\"getFilterConfig('appearance', 'search')\">\n    <mat-label>Search</mat-label>\n    <input formControlName=\"search\" matInput [placeholder]=\"getFilterConfig('placeholder', 'search')\" />\n    <button *ngIf=\"filterForm.value?.search\" mat-icon-button matSuffix (click)=\"resetField('search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <app-timeline-filter\n    *ngIf=\"filterForm?.get('duration')\"\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'duration')\"\n    [appearance]=\"getFilterConfig('appearance', 'duration')\"\n    formControlName=\"duration\"\n    (selectionChange)=\"onDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.date_from\"\n    [dateTo]=\"filterForm.value?.date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('payment_method_ids')\">\n    <mat-label>Payment Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"payment_method_ids\"\n      apiUrl=\"api/payment-methods\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.payment_method_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('payment_method_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('payment_account_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['accountingcommon_account.read']\">\n      <mat-label>{{ getFilterConfig('label', 'payment_account_ids') || 'Payment Account' }}</mat-label>\n      <app-searchable-selector\n        formControlName=\"payment_account_ids\"\n        [apiUrl]=\"getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.payment_account_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('payment_account_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('invoice_status_ids')\">\n    <mat-label>Invoice Status</mat-label>\n    <app-searchable-selector\n      formControlName=\"invoice_status_ids\"\n      apiUrl=\"api/invoice-statuses\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.invoice_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('invoice_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('customer_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['customer_read']\">\n      <mat-label>Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"customer_ids\"\n        titleField=\"name\"\n        apiUrl=\"api/customers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.customer_ids\" mat-icon-button matSuffix (click)=\"resetField('customer_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"filterForm.get('project_ids') && getFilterConfig('disabled', 'project_ids') === false\">\n    <mat-form-field *ngxPermissionsOnly=\"['project.read']\">\n      <mat-label>Project</mat-label>\n      <app-searchable-selector\n        formControlName=\"project_ids\"\n        apiUrl=\"api/projects\"\n        titleField=\"project_name\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.project_ids\" mat-icon-button matSuffix (click)=\"resetField('project_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('product_ids')\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector\n      formControlName=\"product_ids\"\n      apiUrl=\"api/products\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.product_ids\" mat-icon-button matSuffix (click)=\"resetField('product_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('measure_ids')\">\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector\n      formControlName=\"measure_ids\"\n      apiUrl=\"api/product-measures\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.measure_ids\" mat-icon-button matSuffix (click)=\"resetField('measure_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngxPermissionsOnly=\"['supplier.read']\">\n    <mat-form-field *ngIf=\"filterForm.get('supplier_ids')\" [appearance]=\"getFilterConfig('appearance', 'supplier_ids')\">\n      <mat-label>Supplier</mat-label>\n      <app-searchable-selector\n        formControlName=\"supplier_ids\"\n        titleField=\"company_name\"\n        apiUrl=\"api/suppliers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.supplier_ids\" mat-icon-button matSuffix (click)=\"resetField('supplier_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <app-timeline-filter\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'expiry_duration')\"\n    *ngIf=\"filterForm?.get('expiry_duration')\"\n    formControlName=\"expiry_duration\"\n    (selectionChange)=\"onExpiryDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.expiry_date_from\"\n    [dateTo]=\"filterForm.value?.expiry_date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('cost_category_ids')\" style=\"width: 150px\">\n    <mat-label>Cost Category</mat-label>\n    <app-searchable-selector\n      formControlName=\"cost_category_ids\"\n      apiUrl=\"api/cost-code-categories\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.cost_category_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('cost_category_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('milestone_ids')\" style=\"width: 150px\">\n    <mat-label>Milestone</mat-label>\n    <app-searchable-selector\n      formControlName=\"milestone_ids\"\n      apiUrl=\"api/milestones\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.milestone_ids\" mat-icon-button matSuffix (click)=\"resetField('milestone_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('team_member_ids')\">\n    <mat-label>Assignee</mat-label>\n    <app-searchable-selector apiUrl=\"api/persons\" formControlName=\"team_member_ids\" titleField=\"name\" [multiple]=\"true\">\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.team_member_ids\" mat-icon-button matSuffix (click)=\"resetField('team_member_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-types\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_document_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_document_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-document-types\"\n      [multiple]=\"true\"\n      [enableSearch]=\"getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_document_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_document_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div *ngIf=\"filterForm.get('fixed_asset_document_status')\">\n    <small class=\"mr-2 text-secondary\" *ngIf=\"getFilterConfig('showLabel', 'fixed_asset_document_status')\">\n      Status\n    </small>\n    <mat-button-toggle-group formControlName=\"fixed_asset_document_status\" [multiple]=\"false\">\n      <mat-button-toggle value=\"all\">All</mat-button-toggle>\n      <mat-button-toggle value=\"active\">Active</mat-button-toggle>\n      <mat-button-toggle value=\"expired\">Expired</mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <mat-form-field *ngIf=\"filterForm.get('asset_account_ids')\">\n    <mat-label>Asset Account</mat-label>\n    <app-searchable-selector\n      formControlName=\"asset_account_ids\"\n      apiUrl=\"api/accounts\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.asset_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('asset_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_expense_account_ids')\">\n    <mat-label>Depreciation Expense Account</mat-label>\n    <app-searchable-selector\n      [multiple]=\"true\"\n      apiUrl=\"api/accounts\"\n      formControlName=\"depreciation_expense_account_ids\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.depreciation_expense_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('depreciation_expense_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_method_ids')\">\n    <mat-label>Depreciation Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"depreciation_method_ids\"\n      apiUrl=\"api/accounting-plus/depreciation-methods\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      (click)=\"resetField('depreciation_method_ids')\"\n      *ngIf=\"filterForm.value?.depreciation_method_ids\"\n      mat-icon-button\n      matSuffix\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('task_status_ids')\" style=\"width: 150px\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/task-statuses\"\n      formControlName=\"task_status_ids\"\n      titleField=\"title\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.task_status_ids\" mat-icon-button matSuffix (click)=\"resetField('task_status_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('service_center_ids')\">\n    <mat-label>Service Center</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/service-centers\"\n      formControlName=\"service_center_ids\"\n      titleField=\"name\"\n      [enableSearch]=\"false\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.service_center_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('service_center_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_maintenance_status_ids')\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/fixed-asset-maintenance-statuses\"\n      formControlName=\"fixed_asset_maintenance_status_ids\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_maintenance_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_maintenance_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('group_by')\">\n    <mat-label>Group By</mat-label>\n    <mat-select formControlName=\"group_by\">\n      <mat-option value=\"week\">Week</mat-option>\n      <mat-option value=\"month\">Month</mat-option>\n      <mat-option value=\"year\">Year</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i13.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterComponent, decorators: [{
             type: Component,
@@ -3000,7 +3043,7 @@ class ProductTaxFormButtonComponent extends TechlifyFormComponentInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxFormButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: ProductTaxService }, { token: i1.FormValidatorService }, { token: i2$2.FormBuilder }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductTaxFormButtonComponent, selector: "app-product-tax-form-button", inputs: { product: "product" }, outputs: { saved: "saved" }, usesInheritance: true, ngImport: i0, template: "<mat-icon color=\"primary\" class=\"cursor-pointer\" (click)=\"showForm(formTemplate)\"> add </mat-icon>\n\n<ng-template #formTemplate>\n  <form [formGroup]=\"form\" (submit)=\"save()\" mat-dialog-content class=\"d-flex flex-column gap-2\">\n    <h3 class=\"text-dark\">Add tax for {{ product?.name }}</h3>\n    <mat-form-field>\n      <mat-label>Tax</mat-label>\n      <app-searchable-selector\n        formControlName=\"tax_id\"\n        required\n        apiUrl=\"api/taxes\"\n        [enableSearch]=\"false\"\n      ></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('tax_id')\">\n        {{ getErrorMessage('tax_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n      <button [disabled]=\"isSaving\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n    </div>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductTaxFormButtonComponent, selector: "app-product-tax-form-button", inputs: { product: "product" }, outputs: { saved: "saved" }, usesInheritance: true, ngImport: i0, template: "<mat-icon color=\"primary\" class=\"cursor-pointer\" (click)=\"showForm(formTemplate)\"> add </mat-icon>\n\n<ng-template #formTemplate>\n  <form [formGroup]=\"form\" (submit)=\"save()\" mat-dialog-content class=\"d-flex flex-column gap-2\">\n    <h3 class=\"text-dark\">Add tax for {{ product?.name }}</h3>\n    <mat-form-field>\n      <mat-label>Tax</mat-label>\n      <app-searchable-selector\n        formControlName=\"tax_id\"\n        required\n        apiUrl=\"api/taxes\"\n        [enableSearch]=\"false\"\n      ></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('tax_id')\">\n        {{ getErrorMessage('tax_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n      <button [disabled]=\"isSaving\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n    </div>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i5.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: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxFormButtonComponent, decorators: [{
             type: Component,
@@ -3047,7 +3090,7 @@ class ProductTaxDeleteButtonComponent {
         this.matDialog.open(templateRef, { width: '500px' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: ProductTaxService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductTaxDeleteButtonComponent, selector: "app-product-tax-delete-button", inputs: { productTax: "productTax" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer text-secondary\" (click)=\"showDeleteDialog(deleteConfirmDialog)\"> delete </mat-icon>\n\n<ng-template #deleteConfirmDialog>\n  <h3 mat-dialog-title>Delete Product Tax</h3>\n  <div mat-dialog-content>Are you sure? You want to delete the product tax?</div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-raised-button color=\"warn\" (click)=\"delete()\">Delete</button>\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: i4$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductTaxDeleteButtonComponent, selector: "app-product-tax-delete-button", inputs: { productTax: "productTax" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer text-secondary\" (click)=\"showDeleteDialog(deleteConfirmDialog)\"> delete </mat-icon>\n\n<ng-template #deleteConfirmDialog>\n  <h3 mat-dialog-title>Delete Product Tax</h3>\n  <div mat-dialog-content>Are you sure? You want to delete the product tax?</div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-raised-button color=\"warn\" (click)=\"delete()\">Delete</button>\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n  </div>\n</ng-template>\n", dependencies: [{ 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: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxDeleteButtonComponent, decorators: [{
             type: Component,
@@ -3076,7 +3119,7 @@ class ProductTaxListComponent extends TechlifyListingControllerInterface {
         this.models = [...this.models];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductTaxListComponent, selector: "app-product-tax-list", inputs: { product: "product" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> percent </span>\n      <strong class=\"mb-0 text-dark\">Product Taxes</strong>\n    </div>\n    <app-product-tax-form-button [product]=\"product\" (saved)=\"onCreated($event)\"></app-product-tax-form-button>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"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      </ng-container>\n\n      <ng-container matColumnDef=\"Tax\">\n        <th mat-header-cell *matHeaderCellDef>Tax</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element?.tax?.title }} ({{ element?.tax?.code }})</p>\n          <small class=\"text-secondary\">{{ element?.tax?.value }} - {{ element?.tax?.type?.title }}</small>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-product-tax-delete-button\n            [productTax]=\"element\"\n            (deleted)=\"onDeleted(i)\"\n          ></app-product-tax-delete-button>\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  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ProductTaxFormButtonComponent, selector: "app-product-tax-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductTaxDeleteButtonComponent, selector: "app-product-tax-delete-button", inputs: ["productTax"], outputs: ["deleted"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductTaxListComponent, selector: "app-product-tax-list", inputs: { product: "product" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> percent </span>\n      <strong class=\"mb-0 text-dark\">Product Taxes</strong>\n    </div>\n    <app-product-tax-form-button [product]=\"product\" (saved)=\"onCreated($event)\"></app-product-tax-form-button>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"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      </ng-container>\n\n      <ng-container matColumnDef=\"Tax\">\n        <th mat-header-cell *matHeaderCellDef>Tax</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element?.tax?.title }} ({{ element?.tax?.code }})</p>\n          <small class=\"text-secondary\">{{ element?.tax?.value }} - {{ element?.tax?.type?.title }}</small>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-product-tax-delete-button\n            [productTax]=\"element\"\n            (deleted)=\"onDeleted(i)\"\n          ></app-product-tax-delete-button>\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  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.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: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ProductTaxFormButtonComponent, selector: "app-product-tax-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductTaxDeleteButtonComponent, selector: "app-product-tax-delete-button", inputs: ["productTax"], outputs: ["deleted"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxListComponent, decorators: [{
             type: Component,
@@ -3238,7 +3281,7 @@ class ProductQuickSearchComponent extends TechlifyListingControllerInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductQuickSearchComponent, deps: [{ token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductQuickSearchComponent, isStandalone: true, selector: "app-product-quick-search", usesInheritance: true, ngImport: i0, template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <h3>Products Quick Search</h3>\n\n    <mat-form-field>\n      <mat-label>Search</mat-label>\n      <input type=\"text\" matInput placeholder=\"Search products\" [formControl]=\"searchControl\" />\n    </mat-form-field>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n      <!-- # Column -->\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      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n              {{ element?.name }}\n            </a>\n            \n            <div *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"SKU\">\n        <th mat-header-cell *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.sku }}</td>\n      </ng-container>\n\n      <!-- On Hand Column -->\n      <ng-container matColumnDef=\"On Hand\">\n        <th mat-header-cell *matHeaderCellDef>On Hand</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_balance }}\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=\"text-secondary d-flex gap-1\">\n            <mat-icon class=\"cursor-pointer\" matTooltip=\"View\"\n              [routerLink]=\"['/inventory/products', element.id, 'view']\" routerLinkActive=\"route-link-active\">\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-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>", styles: [""], dependencies: [{ kind: "directive", type: 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: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ProductModule }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: StockReceiptFormModule }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "icon"], outputs: ["saved"] }, { kind: "ngmodule", type: StockIssueFormModule }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductQuickSearchComponent, isStandalone: true, selector: "app-product-quick-search", usesInheritance: true, ngImport: i0, template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <h3>Products Quick Search</h3>\n\n    <mat-form-field>\n      <mat-label>Search</mat-label>\n      <input type=\"text\" matInput placeholder=\"Search products\" [formControl]=\"searchControl\" />\n    </mat-form-field>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n      <!-- # Column -->\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      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n              {{ element?.name }}\n            </a>\n            \n            <div *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"SKU\">\n        <th mat-header-cell *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.sku }}</td>\n      </ng-container>\n\n      <!-- On Hand Column -->\n      <ng-container matColumnDef=\"On Hand\">\n        <th mat-header-cell *matHeaderCellDef>On Hand</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_balance }}\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=\"text-secondary d-flex gap-1\">\n            <mat-icon class=\"cursor-pointer\" matTooltip=\"View\"\n              [routerLink]=\"['/inventory/products', element.id, 'view']\" routerLinkActive=\"route-link-active\">\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-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>", styles: [""], dependencies: [{ kind: "directive", type: 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: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ProductModule }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: StockReceiptFormModule }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "ngmodule", type: StockIssueFormModule }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductQuickSearchComponent, decorators: [{
             type: Component,
@@ -3275,12 +3318,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: ProductService }] });
 
 class InventoryDashboardPageComponent {
-    productService;
+    productSummaryService;
     lowStockProductsCount;
     stockReceiptsQtySum;
     stockIssuanceQtySum;
-    constructor(productService) {
-        this.productService = productService;
+    constructor(productSummaryService) {
+        this.productSummaryService = productSummaryService;
     }
     ngOnInit() {
         this.loadProductSummary();
@@ -3291,7 +3334,7 @@ class InventoryDashboardPageComponent {
             date_from: moment().startOf('month').format('YYYY-MM-DD'),
             date_to: moment().endOf('month').format('YYYY-MM-DD'),
         };
-        this.productService.summary(params).subscribe({
+        this.productSummaryService.index(params).subscribe({
             next: (response) => {
                 this.lowStockProductsCount = response?.low_stock_products_count;
                 this.stockReceiptsQtySum = response?.stock_receipts_quantity_sum;
@@ -3299,13 +3342,13 @@ class InventoryDashboardPageComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryDashboardPageComponent, deps: [{ token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.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: i4.DecimalPipe, name: "number" }], preserveWhitespaces: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryDashboardPageComponent, deps: [{ token: ProductSummaryService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8$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: i5.DecimalPipe, name: "number" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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" }]
-        }], ctorParameters: () => [{ type: ProductService }] });
+        }], ctorParameters: () => [{ type: ProductSummaryService }] });
 
 class LowStockReportService extends TechlifyServiceBaseClass {
     httpService;
@@ -3494,10 +3537,9 @@ class InventoryValueReportComponent extends TechlifyListingControllerInterface {
     formBuilder;
     displayedColumns = [
         '#',
-        'Product',
-        'Description',
-        'Categories',
-        'Available Stock',
+        'product',
+        'sku',
+        'on_hand',
         'Average Price',
         'Inventory Value',
         'Last Purchase Price',
@@ -3513,6 +3555,7 @@ class InventoryValueReportComponent extends TechlifyListingControllerInterface {
         this.formBuilder = formBuilder;
         this.filterForm = this.formBuilder.group({
             category_ids: [''],
+            type_ids: [''],
             search: [''],
             sort_by: ['id|desc'],
         });
@@ -3527,7 +3570,7 @@ class InventoryValueReportComponent extends TechlifyListingControllerInterface {
             ...this.requestHelperService.convertToFormData(this.filterForm.value),
             page: this.page,
             perPage: 50,
-            with: 'categories,lastStockReceipt',
+            with: 'categories,lastStockReceipt,type',
         };
         this.isWorking = true;
         this.service.index(params).subscribe({
@@ -3569,7 +3612,7 @@ class InventoryValueReportComponent extends TechlifyListingControllerInterface {
             ...this.requestHelperService.convertToFormData(this.filterForm.value),
             page: this.page,
             perPage: 50000,
-            with: 'categories,lastStockReceipt',
+            with: 'categories,lastStockReceipt,type',
             export_type: type,
         };
         this.isExporting = true;
@@ -3589,56 +3632,20 @@ class InventoryValueReportComponent extends TechlifyListingControllerInterface {
         this.loadData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryValueReportComponent, deps: [{ token: InventoryValueReportService }, { token: i2.ActivatedRoute }, { token: i1.RequestHelperService }, { token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InventoryValueReportComponent, isStandalone: true, selector: "app-inventory-value-report", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"mb-0\">Inventory Value Report</h3>\n        <i class=\"fa-solid fa-file-excel cursor-pointer d-print-none\" (click)=\"export('excel')\"></i>\n        <i class=\"fa-solid fa-file-pdf cursor-pointer d-print-none\" (click)=\"export('pdf')\"></i>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        matSort\n        (matSortChange)=\"onSortChange($event)\"\n      >\n        <!-- # Column -->\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        <!-- Product Column -->\n        <ng-container matColumnDef=\"Product\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"name\">Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n              {{ element?.name }}\n            </a>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></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\">\n            {{ element?.description }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Categories Column -->\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\"></app-product-category-badges>\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>Total</strong>\n          </td>\n        </ng-container>\n\n        <!-- Available Stock Column -->\n        <ng-container matColumnDef=\"Available Stock\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"current_stock\">Available Stock</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.current_stock }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Average Price Column -->\n        <ng-container matColumnDef=\"Average Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"average_purchase_price\">Average Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.average_purchase_price | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Column -->\n        <ng-container matColumnDef=\"Inventory Value\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"inventory_value\">Inventory Value</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>{{ totalInventoryValue | currency }}</strong>\n          </td>\n        </ng-container>\n\n        <!-- Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_stock_receipt.purchase_price\">\n            Last Purchase Price\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Based On Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Inventory Value Based On Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_stock_receipt.amount\">\n            <div>\n              <p class=\"mb-0\">Inventory Value</p>\n              <small class=\"text-secondary\">Based on last purchase price</small>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value_based_on_last_price ?? 0 | currency }}\n          </td>\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=\"displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: 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: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: 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: 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: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InventoryValueReportComponent, isStandalone: true, selector: "app-inventory-value-report", usesInheritance: true, ngImport: i0, template: "<div>\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"mb-0\">Inventory Value Report</h3>\n        <i class=\"fa-solid fa-file-excel cursor-pointer d-print-none\" (click)=\"export('excel')\"></i>\n        <i class=\"fa-solid fa-file-pdf cursor-pointer d-print-none\" (click)=\"export('pdf')\"></i>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        matSort\n        (matSortChange)=\"onSortChange($event)\"\n      >\n        <!-- # Column -->\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 mat-sort-header=\"name\">Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n                {{ element?.name }}\n              </a>\n              <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></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\">\n            <div class=\"d-flex flex-column gap-1\">\n              <span>{{ element?.sku }}</span>\n              <span class='text-secondary'> {{ element?.type?.title }} </span>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>Total</strong>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"current_stock\">On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.current_stock }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Average Price Column -->\n        <ng-container matColumnDef=\"Average Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"average_purchase_price\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Avg. Price</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\"\n                matTooltip=\"Average price of batches in stock\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.average_purchase_price | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Column -->\n        <ng-container matColumnDef=\"Inventory Value\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"inventory_value\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Inventory Value</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\" matTooltip=\"Based on average price\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>{{ totalInventoryValue | currency }}</strong>\n          </td>\n        </ng-container>\n\n        <!-- Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_stock_receipt.purchase_price\">\n            Last Price\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Based On Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Inventory Value Based On Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_stock_receipt.amount\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Inventory Value</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\"\n                matTooltip=\"Based on last purchase price\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value_based_on_last_price ?? 0 | currency }}\n          </td>\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=\"displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i14.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i14.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i15.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i15.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i15.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 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: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryValueReportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-inventory-value-report', standalone: true, imports: [
-                        MatCard,
-                        MatCardContent,
-                        MatTable,
-                        MatColumnDef,
-                        MatColumnDef,
-                        MatCellDef,
-                        MatRow,
-                        MatCellDef,
-                        MatHeaderCell,
-                        MatCell,
-                        MatRowDef,
-                        MatCellDef,
-                        MatHeaderCell,
-                        MatColumnDef,
-                        MatCell,
-                        MatColumnDef,
-                        MatHeaderCell,
-                        MatHeaderRowDef,
-                        MatHeaderCell,
-                        MatCell,
-                        MatHeaderRow,
-                        MatCell,
-                        MatCellDef,
-                        MatHeaderCellDef,
-                        MatHeaderCellDef,
-                        MatHeaderCellDef,
-                        MatHeaderCellDef,
+                        MaterialModule,
                         RouterLink,
                         ProductCategoryBadgesComponent,
                         CurrencyPipe,
-                        MatProgressBar,
                         NgIf,
-                        MatFooterRowDef,
-                        MatFooterRow,
-                        MatFooterCellDef,
-                        MatFooterCell,
-                        MatFormField,
-                        MatLabel,
                         ReactiveFormsModule,
                         SearchableSelectorModule,
-                        MatInput,
                         InfiniteScrollDirective,
-                        MatSort,
-                        MatSortHeader,
-                    ], template: "<div class=\"container\">\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"mb-0\">Inventory Value Report</h3>\n        <i class=\"fa-solid fa-file-excel cursor-pointer d-print-none\" (click)=\"export('excel')\"></i>\n        <i class=\"fa-solid fa-file-pdf cursor-pointer d-print-none\" (click)=\"export('pdf')\"></i>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        matSort\n        (matSortChange)=\"onSortChange($event)\"\n      >\n        <!-- # Column -->\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        <!-- Product Column -->\n        <ng-container matColumnDef=\"Product\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"name\">Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n              {{ element?.name }}\n            </a>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></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\">\n            {{ element?.description }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Categories Column -->\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\"></app-product-category-badges>\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>Total</strong>\n          </td>\n        </ng-container>\n\n        <!-- Available Stock Column -->\n        <ng-container matColumnDef=\"Available Stock\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"current_stock\">Available Stock</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.current_stock }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Average Price Column -->\n        <ng-container matColumnDef=\"Average Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"average_purchase_price\">Average Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.average_purchase_price | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Column -->\n        <ng-container matColumnDef=\"Inventory Value\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"inventory_value\">Inventory Value</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>{{ totalInventoryValue | currency }}</strong>\n          </td>\n        </ng-container>\n\n        <!-- Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_stock_receipt.purchase_price\">\n            Last Purchase Price\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Based On Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Inventory Value Based On Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_stock_receipt.amount\">\n            <div>\n              <p class=\"mb-0\">Inventory Value</p>\n              <small class=\"text-secondary\">Based on last purchase price</small>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value_based_on_last_price ?? 0 | currency }}\n          </td>\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=\"displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>\n" }]
+                    ], template: "<div>\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"mb-0\">Inventory Value Report</h3>\n        <i class=\"fa-solid fa-file-excel cursor-pointer d-print-none\" (click)=\"export('excel')\"></i>\n        <i class=\"fa-solid fa-file-pdf cursor-pointer d-print-none\" (click)=\"export('pdf')\"></i>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        matSort\n        (matSortChange)=\"onSortChange($event)\"\n      >\n        <!-- # Column -->\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 mat-sort-header=\"name\">Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n                {{ element?.name }}\n              </a>\n              <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></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\">\n            <div class=\"d-flex flex-column gap-1\">\n              <span>{{ element?.sku }}</span>\n              <span class='text-secondary'> {{ element?.type?.title }} </span>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>Total</strong>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"current_stock\">On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.current_stock }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Average Price Column -->\n        <ng-container matColumnDef=\"Average Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"average_purchase_price\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Avg. Price</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\"\n                matTooltip=\"Average price of batches in stock\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.average_purchase_price | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Column -->\n        <ng-container matColumnDef=\"Inventory Value\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"inventory_value\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Inventory Value</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\" matTooltip=\"Based on average price\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>{{ totalInventoryValue | currency }}</strong>\n          </td>\n        </ng-container>\n\n        <!-- Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_stock_receipt.purchase_price\">\n            Last Price\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Based On Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Inventory Value Based On Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_stock_receipt.amount\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Inventory Value</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\"\n                matTooltip=\"Based on last purchase price\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value_based_on_last_price ?? 0 | currency }}\n          </td>\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=\"displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>" }]
         }], ctorParameters: () => [{ type: InventoryValueReportService }, { type: i2.ActivatedRoute }, { type: i1.RequestHelperService }, { type: i2$2.FormBuilder }] });
 
 const routes = [
@@ -3652,19 +3659,19 @@ const routes = [
     },
     {
         path: 'suppliers',
-        loadChildren: () => import('./techlify-inventory-common-supplier.module-CbKK7WeC.mjs').then((m) => m.SupplierModule),
+        loadChildren: () => import('./techlify-inventory-common-supplier.module-BzCsszWn.mjs').then((m) => m.SupplierModule),
     },
     {
         path: 'locations',
-        loadChildren: () => import('./techlify-inventory-common-location.module-DI57PYtO.mjs').then((mod) => mod.LocationModule),
+        loadChildren: () => import('./techlify-inventory-common-location.module-hLxnh3np.mjs').then((mod) => mod.LocationModule),
     },
     {
         path: "measures",
-        loadChildren: () => import('./techlify-inventory-common-measure.module-eEfRzXya.mjs').then((mod) => mod.MeasureModule),
+        loadChildren: () => import('./techlify-inventory-common-measure.module-CZcQfmvz.mjs').then((mod) => mod.MeasureModule),
     },
     {
         path: 'stock-issuances',
-        loadChildren: () => import('./techlify-inventory-common-stock-issuances.module-BnpAew18.mjs').then((mod) => mod.StockIssuancesModule),
+        loadChildren: () => import('./techlify-inventory-common-stock-issuances.module-9HG3-aO_.mjs').then((mod) => mod.StockIssuancesModule),
     },
     {
         path: 'stock-receipts',
@@ -3672,7 +3679,7 @@ const routes = [
     },
     {
         path: 'categories',
-        loadChildren: () => import('./techlify-inventory-common-category.module-isHvDgRZ.mjs').then((mod) => mod.CategoryModule),
+        loadChildren: () => import('./techlify-inventory-common-category.module-BSXuRnsI.mjs').then((mod) => mod.CategoryModule),
     },
     {
         path: 'products',
@@ -3768,5 +3775,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { InventoryCommonRoutingModule as I, MaterialModule as M, ProductModule as P, SupplierFormComponent as S, TechlifyFormService as T, SupplierService as a, ProductCategoryBadgesComponent as b, StockTransferFormButtonComponent as c, TechlifyFilterComponent as d, TechlifyFilterModule as e, StockIssuancesListComponent as f, StockReceiptFormModule as g, StockIssueFormModule as h, StockIssuancesListModule as i, InventoryCommonModule as j, StockSummaryService as k };
-//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-BCHHzF2b.mjs.map
+export { InventoryCommonRoutingModule as I, LocationService as L, MaterialModule as M, ProductModule as P, SupplierFormComponent as S, TechlifyFormService as T, SupplierService as a, StockReceiptsListPageComponent as b, StockReceiptsModule as c, ProductCategoryBadgesComponent as d, StockTransferFormButtonComponent as e, MeasureService as f, TechlifyFilterComponent as g, TechlifyFilterModule as h, StockIssuancesListComponent as i, StockReceiptFormModule as j, StockIssueFormModule as k, StockIssuancesListModule as l, InventoryCommonModule as m, StockSummaryService as n };
+//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-CmIBHBen.mjs.map