techlify-inventory-common 18.2.0 → 18.3.0

package/fesm2022/techlify-inventory-common-techlify-inventory-common-BMNkSTd6.mjs

@@ -0,0 +1,3620 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, Inject, forwardRef, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i2 from '@angular/router';
+import { RouterModule, RouterLink, RouterLinkActive } from '@angular/router';
+import moment from 'moment';
+import * as i1 from 'ngx-techlify-core';
+import { TechlifyServiceBaseClass, TechlifyListingControllerInterface, TechlifyFormComponentInterface, SearchableSelectorModule, AuthenticationGuard, TimelineFilterModule, MaterialModule as MaterialModule$1, ColumnSelectorModule, ImportCsvModule } from 'ngx-techlify-core';
+import * as i8 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import * as i4$1 from '@angular/material/card';
+import { MatCard, MatCardContent, MatCardModule } from '@angular/material/card';
+import * as i4 from '@angular/common';
+import { NgIf, NgForOf, CommonModule, 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';
+import * as i5 from '@angular/material/progress-bar';
+import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
+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 from '@angular/material/form-field';
+import { MatFormField, MatLabel, MatSuffix, MatError, MatHint, MatFormFieldModule } from '@angular/material/form-field';
+import * as i7 from '@angular/material/input';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import * as i2$2 from '@angular/forms';
+import { Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormControl } from '@angular/forms';
+import { BehaviorSubject, lastValueFrom, debounceTime as debounceTime$1, distinctUntilChanged } from 'rxjs';
+import * as i14 from '@angular/material/sort';
+import { MatSortModule, MatSortHeader, MatSort } from '@angular/material/sort';
+import * as i2$3 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { __decorate } from 'tslib';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogModule } from '@angular/material/dialog';
+import * as i4$2 from 'ngx-spinner';
+import * as i4$3 from '@angular/material/button';
+import { MatButton, MatButtonModule } 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 { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+import * as i11 from '@angular/material/core';
+import { MatCommonModule, MatLineModule, MatNativeDateModule, MatOptionModule, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
+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 { MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
+import * as i10$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import moment$1 from 'moment/moment';
+import * as i5$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+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 { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTreeModule } from '@angular/material/tree';
+import * as i13 from 'ngx-permissions';
+import { NgxPermissionsModule } from 'ngx-permissions';
+
+class ProductService extends TechlifyServiceBaseClass {
+    dataManager;
+    httpService;
+    constructor(dataManager, 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 ɵ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: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.DataManager }, { type: i1.HttpService }] });
+
+class LowStockProductsWidgetComponent extends TechlifyListingControllerInterface {
+    productService;
+    displayedColumns = ['#', 'Product', 'Stock', 'Reorder Point'];
+    constructor(productService) {
+        super();
+        this.productService = productService;
+        this.lastPage = 0;
+        this.perPage = 1000;
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        const params = {
+            page: this.page,
+            perPage: this.perPage,
+            is_low_stock: true,
+            num_items: this.perPage + '|' + this.page,
+        };
+        this.isWorking = true;
+        this.productService.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models?.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    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: i5.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,
+            args: [{ selector: 'app-low-stock-products-widget', 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" }]
+        }], ctorParameters: () => [{ type: ProductService }] });
+
+class ProductSummaryChartComponent {
+    productService;
+    height = 400;
+    title = 'Product Summary';
+    constructor(productService) {
+        this.productService = productService;
+    }
+    chart = {
+        title: 'Pie Chart',
+        type: ChartType.PieChart,
+        data: [],
+        options: {
+            pieSliceText: 'value',
+        },
+    };
+    isLoading = false;
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        const params = {
+            include: 'products_aggregated',
+            group_by: 'category_id',
+        };
+        this.isLoading = true;
+        this.productService.summary(params).subscribe({
+            next: (response) => {
+                let data = [];
+                response?.products_aggregated?.forEach((item) => {
+                    data.push([item?.title, item?.product_count]);
+                });
+                this.chart.data = data;
+                this.isLoading = false;
+            },
+            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 ɵ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: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+const errorMessages$1 = {
+    title: {
+        required: 'Please Enter Title',
+    },
+    description: {
+        required: 'Please Enter Description',
+    },
+};
+class ProductMeasureFormComponent {
+    productService;
+    fb;
+    dialogRef;
+    data;
+    spinnerService;
+    formValidatorService;
+    errorService;
+    alertService;
+    productMeasureForm;
+    isWorking = false;
+    isUpdate = false;
+    constructor(productService, fb, dialogRef, data, spinnerService, formValidatorService, errorService, alertService) {
+        this.productService = productService;
+        this.fb = fb;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.spinnerService = spinnerService;
+        this.formValidatorService = formValidatorService;
+        this.errorService = errorService;
+        this.alertService = alertService;
+        this.productMeasureForm = this.fb.group({
+            id: [''],
+            title: ['', Validators.compose([Validators.required])],
+            description: ['', Validators.compose([Validators.required])],
+        });
+    }
+    ngOnInit() {
+        if (this.data.details) {
+            this.isUpdate = true;
+            this.productMeasureForm.patchValue(this.data.details);
+        }
+    }
+    async save() {
+        if (!this.productMeasureForm.valid) {
+            this.alertService.addAlert('Please Fill All Required Fields', 'warn');
+            this.productMeasureForm.markAllAsTouched();
+            return;
+        }
+        let productMeasure = this.productMeasureForm.value;
+        try {
+            this.spinnerService.show();
+            this.isWorking = true;
+            let result = this.isUpdate
+                ? await this.productService.updateProductMeasure(productMeasure)
+                : await this.productService.createProductMeasure(productMeasure);
+            this.dialogRef.close(result);
+        }
+        catch (error) {
+            this.errorService.handleError(error);
+        }
+        finally {
+            this.isWorking = false;
+            this.spinnerService.hide();
+        }
+    }
+    /**
+     * Method to evaluate form fields
+     */
+    isFieldValid(field) {
+        return this.formValidatorService.isFieldValid(field, this.productMeasureForm);
+    }
+    /**
+     * Method to find error in form fields
+     */
+    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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.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 });
+}
+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: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i4$2.NgxSpinnerService }, { type: i1.FormValidatorService }, { type: i1.ErrorHandlerService }, { type: i1.AlertService }] });
+
+let ProductMeasuresListComponent = class ProductMeasuresListComponent {
+    fb;
+    dialog;
+    filterService;
+    activatedRoute;
+    productService;
+    filterFormGroup;
+    lastPage;
+    page = 1;
+    perPage = 25;
+    totalItems = 0;
+    currentPage = 1;
+    num_items = 25;
+    routeFilters;
+    productMeasures = [];
+    columnDefinitions = [
+        { def: '#', isShow: true },
+        { def: 'Title', isShow: true },
+        { def: 'Description', isShow: true },
+        { def: 'Actions', isShow: true },
+    ];
+    displayedColumns = ['#', 'Title', 'Description', 'Actions'];
+    dataSource = new MatTableDataSource();
+    constructor(fb, dialog, filterService, activatedRoute, productService) {
+        this.fb = fb;
+        this.dialog = dialog;
+        this.filterService = filterService;
+        this.activatedRoute = activatedRoute;
+        this.productService = productService;
+        this.filterFormGroup = this.fb.group({
+            num_items: [this.num_items + '|' + this.currentPage],
+            search: [''],
+            type_ids: [''],
+            sort_by: [''],
+        });
+    }
+    ngOnInit() {
+        this.patchFiltersFromRoute();
+        this.listenForChanges();
+        this.loadData();
+    }
+    listenForChanges() {
+        this.filterFormGroup.valueChanges.pipe(debounceTime(500), untilDestroyed(this)).subscribe((changes) => {
+            this.filterService.applyFilterToRoute(this.activatedRoute, this.filterFormGroup.value);
+            this.reload();
+        });
+    }
+    patchFiltersFromRoute() {
+        this.routeFilters = this.filterService.getFiltersFromRoute(this.activatedRoute, this.filterFormGroup.value);
+        this.filterFormGroup.setValue(this.routeFilters);
+        if (this.routeFilters.type_ids) {
+            this.filterFormGroup.get('type_ids').setValue(this.routeFilters.type_ids.split(',').map(Number));
+        }
+    }
+    async loadData() {
+        let filters = this.filterFormGroup.value;
+        filters.page = this.page;
+        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);
+        if (this.productMeasures.length < 1) {
+            this.productMeasures = res.data;
+        }
+        else {
+            res.data.forEach((item) => this.productMeasures.push(item));
+        }
+        this.dataSource = new MatTableDataSource(this.productMeasures);
+        this.totalItems = res.total;
+        this.lastPage = res.last_page || this.page;
+    }
+    reload() {
+        this.productMeasures = [];
+        this.currentPage = 1;
+        this.loadData();
+    }
+    modifyProductMeasure(model) {
+        const dialogRef = this.dialog.open(ProductMeasureFormComponent, {
+            width: '600px',
+            data: {
+                details: model,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.reload();
+            }
+        });
+    }
+    onScroll() {
+        if (this.totalItems > this.productMeasures.length) {
+            this.currentPage += 1;
+            this.loadData();
+        }
+    }
+    assignFilter(column, direction) {
+        if (column) {
+            return this.filterFormGroup.get('sort_by')?.setValue(column + '|' + direction);
+        }
+    }
+    sortColumn(event) {
+        var direction = event.direction.toString().toUpperCase();
+        this.assignFilter(event.active, direction);
+    }
+    // eslint-disable-next-line @angular-eslint/use-lifecycle-interface
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnDestroy() {
+        //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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.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 });
+};
+ProductMeasuresListComponent = __decorate([
+    UntilDestroy()
+], ProductMeasuresListComponent);
+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 }] });
+
+class TechlifyFormService {
+    _isListUpdated = new BehaviorSubject(false);
+    isListUpdated() {
+        return this._isListUpdated.asObservable();
+    }
+    listUpdated(val) {
+        this._isListUpdated.next(val);
+    }
+}
+
+class ProductFormService extends TechlifyFormService {
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class StockReceiptService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'stock-receipts');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class SupplierService {
+    httpService;
+    constructor(httpService) {
+        this.httpService = httpService;
+    }
+    /**
+     * get all suppliers from API
+     *
+     * @param filters Any attributes to filter suppliers by
+     */
+    index(filters) {
+        let queries = new HttpParams({ fromObject: filters });
+        return this.httpService.get(`api/suppliers`, { params: queries });
+    }
+    /**
+     * get individual supplier from API (for view page)
+     *
+     * @param id ID of the supplier being requested
+     */
+    show(id) {
+        return this.httpService.get(`api/suppliers/${id}`);
+    }
+    /**
+     * store a new supplier in the DB
+     *
+     * @param model data from the supplier form that will be stored in the DB
+     */
+    store(model) {
+        return this.httpService.post(`api/suppliers`, model);
+    }
+    /**
+     * update a supplier in the DB
+     *
+     * @param model.id ID of the supplier being updated
+     * @param model data from the supplier form that will be updated in the DB
+     */
+    update(model) {
+        return this.httpService.put(`api/suppliers/${model?.id}`, model);
+    }
+    /**
+     * delete a supplier from the DB
+     *
+     * @param id ID of the supplier being deleted
+     */
+    destroy(id) {
+        return this.httpService.delete(`api/suppliers/${id}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class SupplierFormComponent extends TechlifyFormComponentInterface {
+    fb;
+    alertService;
+    spinnerService;
+    dialogRef;
+    errorService;
+    data;
+    supplierService;
+    errorMessages = {
+        contact_name: {
+            required: 'Contact Name is required',
+        },
+        company_name: {
+            required: 'Company Name is required',
+        },
+        address: {
+            required: 'Address is required',
+        },
+        phone: {
+            required: 'Phone is required',
+        },
+        details: {
+            required: 'Details is required',
+        },
+        email: {
+            required: 'Email is required',
+        },
+        supplier_type_id: {
+            required: 'Supplier Type is required',
+        },
+    };
+    isWorking = false;
+    isUpdateMode = false;
+    supplierForm;
+    constructor(fb, formValidatorService, alertService, spinnerService, dialogRef, errorService, data, supplierService) {
+        super(formValidatorService);
+        this.fb = fb;
+        this.alertService = alertService;
+        this.spinnerService = spinnerService;
+        this.dialogRef = dialogRef;
+        this.errorService = errorService;
+        this.data = data;
+        this.supplierService = supplierService;
+        this.supplierForm = this.fb.group({
+            id: [''],
+            contact_name: [''],
+            company_name: ['', Validators.compose([Validators.required])],
+            details: [''],
+            address: [''],
+            phone: [''],
+            email: [''],
+            supplier_type_id: [''],
+        });
+    }
+    ngOnInit() {
+        if (this.data.details) {
+            this.isUpdateMode = true;
+            this.supplierForm.patchValue(this.data.details);
+        }
+    }
+    async submit() {
+        if (!this.supplierForm.valid) {
+            this.alertService.addAlert('Please Fill All Required Fields', 'warn');
+            this.supplierForm.markAllAsTouched();
+            return;
+        }
+        var supplier = this.supplierForm.value;
+        try {
+            this.spinnerService.show();
+            this.isWorking = true;
+            let result = this.isUpdateMode
+                ? await lastValueFrom(this.supplierService.update(supplier))
+                : await lastValueFrom(this.supplierService.store(supplier));
+            this.dialogRef.close(result);
+        }
+        catch (error) {
+            this.errorService.handleError(error);
+        }
+        finally {
+            this.isWorking = false;
+            this.spinnerService.hide();
+        }
+    }
+    /**Method to evaluate form fields*/
+    isFieldValid(field) {
+        return this.formValidatorService.isFieldValid(field, this.supplierForm);
+    }
+    /**Method to find error in form fields*/
+    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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.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 });
+}
+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: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: SupplierService }] });
+
+class PayeeSelectorComponent {
+    label = 'Payee';
+    appearance = 'fill';
+    required = false;
+    showAddButton = false;
+    multiple = false;
+    value;
+    onChange = () => { };
+    onTouch = () => { };
+    writeValue(value) {
+        this.value = value;
+        this.onChange(value);
+        this.onTouch(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    SupplierFormComponent = SupplierFormComponent;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayeeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PayeeSelectorComponent, selector: "app-payee-selector", inputs: { label: "label", appearance: "appearance", required: "required", showAddButton: "showAddButton", multiple: "multiple" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.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,
+            args: [{ selector: 'app-payee-selector', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PayeeSelectorComponent),
+                            multi: true,
+                        },
+                    ], 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" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], showAddButton: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }] } });
+
+class StockReceiptFormComponent extends TechlifyFormComponentInterface {
+    formBuilder;
+    stockReceiptService;
+    alertService;
+    dateUtils;
+    product;
+    stockReceipt;
+    saved = new EventEmitter();
+    cancelled = new EventEmitter();
+    isWorking;
+    constructor(formValidatorService, formBuilder, stockReceiptService, alertService, dateUtils) {
+        super(formValidatorService);
+        this.formBuilder = formBuilder;
+        this.stockReceiptService = stockReceiptService;
+        this.alertService = alertService;
+        this.dateUtils = dateUtils;
+        this.errorMessages = {
+            date: {
+                required: 'The date field is required.',
+            },
+            quantity: {
+                required: 'The quantity field is required.',
+            },
+            purchase_price: {
+                required: 'The purchase price field is required.',
+            },
+        };
+        this.form = this.formBuilder.group({
+            id: [''],
+            supplier_id: [''],
+            date: [new Date(), Validators.required],
+            quantity: [1, Validators.required],
+            purchase_price: [0, Validators.required],
+            amount: [0],
+            particulars: [''],
+        });
+    }
+    ngOnInit() {
+        this.form
+            .get('quantity')
+            ?.valueChanges.pipe(debounceTime$1(500))
+            .subscribe(() => this.updateTotalAmount());
+        this.form
+            .get('purchase_price')
+            ?.valueChanges.pipe(debounceTime$1(500))
+            .subscribe(() => this.updateTotalAmount());
+        if (this.stockReceipt) {
+            let data = { ...this.stockReceipt };
+            if (data.date) {
+                data.date = new Date(data.date);
+            }
+            this.form.patchValue(data);
+        }
+        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;
+                this.form.patchValue({
+                    quantity,
+                    purchase_price,
+                });
+            }
+        }
+    }
+    save() {
+        if (this.form.invalid) {
+            this.alertService.addAlert('Please check the form for errors', 'error');
+            return;
+        }
+        const data = {
+            product_id: this.product?.id,
+            ...this.form.value,
+        };
+        if (data.date) {
+            data.date = this.dateUtils.getYYYYMMDDString(data.date);
+        }
+        this.isWorking = true;
+        let request = this.stockReceiptService.store(data);
+        if (this.stockReceipt?.id) {
+            request = this.stockReceiptService.update(data);
+        }
+        request.subscribe({
+            next: (response) => {
+                this.isWorking = false;
+                this.saved.emit(response?.item);
+                this.alertService.addAlert('Stock Receipt Saved Successfully!', 'success');
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    updateTotalAmount() {
+        const { purchase_price, quantity } = this.form.value;
+        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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.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 });
+}
+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: [{
+                type: Input
+            }], stockReceipt: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
+class StockReceiptFormButtonComponent {
+    matDialog;
+    product;
+    stockReceipt;
+    icon;
+    saved = new EventEmitter();
+    matDialogRef;
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+    }
+    showStockReceiptForm(templateRef) {
+        this.matDialogRef = this.matDialog.open(templateRef, { width: '500px' });
+    }
+    onStockReceiptSaved(item) {
+        this.matDialogRef.close();
+        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 });
+}
+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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { product: [{
+                type: Input
+            }], stockReceipt: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+class StockIssuanceService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'stock-issuances');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class StockIssueFormComponent extends TechlifyFormComponentInterface {
+    formBuilder;
+    stockIssuanceService;
+    alertService;
+    dateUtils;
+    product;
+    stockIssuance;
+    issuableType;
+    issuableId;
+    saved = new EventEmitter();
+    cancelled = new EventEmitter();
+    isWorking;
+    constructor(formValidatorService, formBuilder, stockIssuanceService, alertService, dateUtils) {
+        super(formValidatorService);
+        this.formBuilder = formBuilder;
+        this.stockIssuanceService = stockIssuanceService;
+        this.alertService = alertService;
+        this.dateUtils = dateUtils;
+        this.errorMessages = {
+            date: {
+                required: 'The date field is required.',
+            },
+            quantity: {
+                required: 'The quantity field is required.',
+            },
+        };
+        this.form = this.formBuilder.group({
+            id: [''],
+            product_id: [''],
+            date: [new Date(), Validators.required],
+            quantity: [1, Validators.required],
+            particulars: [''],
+        });
+    }
+    ngOnInit() {
+        if (this.product) {
+            this.form.get('product_id')?.setValue(this.product?.id);
+        }
+        if (this.stockIssuance) {
+            let data = { ...this.stockIssuance };
+            if (data.date) {
+                data.date = new Date(data.date);
+            }
+            this.form.patchValue(data);
+        }
+        else {
+            // on create for set default quantity from last record
+            if (this.product?.last_stock_issuance) {
+                const { quantity } = this.product.last_stock_issuance;
+                this.form.patchValue({
+                    quantity,
+                });
+            }
+        }
+    }
+    save() {
+        if (this.form.invalid) {
+            this.alertService.addAlert('Please check the form for errors', 'error');
+            return;
+        }
+        const data = {
+            product_id: this.product?.id,
+            ...this.form.value,
+        };
+        if (data.date) {
+            data.date = this.dateUtils.getYYYYMMDDString(data.date);
+        }
+        if (this.issuableId && this.issuableType) {
+            data.issuable_type = this.issuableType;
+            data.issuable_id = this.issuableId;
+        }
+        this.isWorking = true;
+        let request = this.stockIssuanceService.store(data);
+        if (this.stockIssuance?.id) {
+            request = this.stockIssuanceService.update(data);
+        }
+        request.subscribe({
+            next: (response) => {
+                this.isWorking = false;
+                this.saved.emit(response?.item);
+                this.alertService.addAlert('Stock Issuance Saved Successfully!', 'success');
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.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 });
+}
+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: [{
+                type: Input
+            }], stockIssuance: [{
+                type: Input
+            }], issuableType: [{
+                type: Input
+            }], issuableId: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
+class StockIssueFormButtonComponent {
+    matDialog;
+    product;
+    stockIssuance;
+    icon;
+    issuableType;
+    issuableId;
+    saved = new EventEmitter();
+    matDialogRef;
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+    }
+    showStockIssuanceForm(templateRef) {
+        this.matDialogRef = this.matDialog.open(templateRef, { width: '500px' });
+    }
+    onStockIssuanceSaved(item) {
+        this.matDialogRef.close();
+        this.saved.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssueFormButtonComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: { product: "product", stockIssuance: "stockIssuance", icon: "icon", issuableType: "issuableType", issuableId: "issuableId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<span\n  class=\"material-symbols-outlined cursor-pointer\"\n  [class.text-primary]=\"icon\"\n  matTooltip=\"Stock Issue\"\n  (click)=\"showStockIssuanceForm(stockIssuanceFormTemplate)\"\n>\n  {{ stockIssuance ? 'edit' : icon ?? 'upload' }}\n</span>\n\n<ng-template #stockIssuanceFormTemplate>\n  <app-stock-issue-form\n    mat-dialog-content\n    [product]=\"product\"\n    [stockIssuance]=\"stockIssuance\"\n    [issuableType]=\"issuableType\"\n    [issuableId]=\"issuableId\"\n    (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockIssuanceSaved($event)\"\n  ></app-stock-issue-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: StockIssueFormComponent, selector: "app-stock-issue-form", inputs: ["product", "stockIssuance", "issuableType", "issuableId"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssueFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-stock-issue-form-button', template: "<span\n  class=\"material-symbols-outlined cursor-pointer\"\n  [class.text-primary]=\"icon\"\n  matTooltip=\"Stock Issue\"\n  (click)=\"showStockIssuanceForm(stockIssuanceFormTemplate)\"\n>\n  {{ stockIssuance ? 'edit' : icon ?? 'upload' }}\n</span>\n\n<ng-template #stockIssuanceFormTemplate>\n  <app-stock-issue-form\n    mat-dialog-content\n    [product]=\"product\"\n    [stockIssuance]=\"stockIssuance\"\n    [issuableType]=\"issuableType\"\n    [issuableId]=\"issuableId\"\n    (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockIssuanceSaved($event)\"\n  ></app-stock-issue-form>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { product: [{
+                type: Input
+            }], stockIssuance: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], issuableType: [{
+                type: Input
+            }], issuableId: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+const initial_quantity = 0;
+const reorder_point = 10;
+const errorMessages = {
+    type_id: {
+        required: 'Please Enter Type',
+    },
+    name: {
+        required: 'Please Enter Name',
+    },
+    sale_price: {
+        required: 'Please Enter Sales Price',
+    },
+    minimum_price: {
+        required: 'Please Enter Minimum Price',
+    },
+    reorder_point: {
+        required: 'Please Enter Reorder Point',
+    },
+};
+class ProductFormComponent {
+    productService;
+    fb;
+    formValidatorService;
+    alertService;
+    datePipe;
+    productFormService;
+    productForm;
+    isWorking = false;
+    isUpdate = false;
+    saved = new EventEmitter();
+    cancelled = new EventEmitter();
+    product;
+    displayedFormFields = [
+        'name',
+        'product type',
+        'sku',
+        'description',
+        'product measure',
+        'reorder point',
+        'initial quantity',
+        'initial quantity date',
+        'sales price',
+        'minimum price',
+        'maximum price',
+        'income account',
+        'expense account',
+    ];
+    displayedFormSections = [
+        'basic information',
+        'inventory information',
+        'sales information',
+        'accounts information',
+    ];
+    constructor(productService, fb, formValidatorService, alertService, datePipe, productFormService) {
+        this.productService = productService;
+        this.fb = fb;
+        this.formValidatorService = formValidatorService;
+        this.alertService = alertService;
+        this.datePipe = datePipe;
+        this.productFormService = productFormService;
+        this.productForm = this.fb.group({
+            id: [''],
+            type_id: [1, Validators.compose([Validators.required])],
+            sku: [''],
+            name: ['', Validators.compose([Validators.required])],
+            initial_quantity: [initial_quantity],
+            initial_quantity_date: [moment().format()],
+            reorder_point: [reorder_point, Validators.compose([Validators.required])],
+            description: [''],
+            sale_price: [0, Validators.compose([Validators.required])],
+            income_account_id: [''],
+            expense_account_id: [''],
+            measure_id: [1],
+            minimum_price: ['', Validators.compose([Validators.required])],
+            maximum_price: [''],
+            condition_type_id: [1],
+            current_quantity: [],
+            category_ids: [''],
+        });
+    }
+    ngOnInit() {
+        if (this.product?.id) {
+            this.isUpdate = true;
+            let data = { ...this.product };
+            if (this.product?.categories?.length > 0) {
+                data.category_ids = this.product.categories.map((category) => category?.id);
+            }
+            if (data?.initial_quantity_date) {
+                data.initial_quantity_date = moment(data.initial_quantity_date).toISOString();
+            }
+            this.productForm.patchValue(data);
+        }
+    }
+    async save() {
+        this.productForm.markAllAsTouched();
+        if (this.productForm.invalid) {
+            this.alertService.addAlert('Please Fill All Required Fields', 'warn');
+            return;
+        }
+        let product = this.productForm.value;
+        if (product.maximum_price <= 0 || !product.maximum_price) {
+            product.maximum_price = product.minimum_price;
+        }
+        if (product?.initial_quantity_date) {
+            product.initial_quantity_date = moment(product.initial_quantity_date).format('YYYY-MM-DD');
+        }
+        this.isWorking = true;
+        product.with = 'type,measure,incomeAccount,expenseAccount';
+        let request = this.productService.store(product);
+        if (this.isUpdate) {
+            request = this.productService.update(product);
+        }
+        request.subscribe({
+            next: (response) => {
+                this.saved.emit(response?.item);
+                this.isWorking = false;
+                this.productFormService.listUpdated(true);
+                this.alertService.addAlert('Product saved successfully!', 'success');
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    /**
+     * Method to evaluate form fields
+     */
+    isFieldValid(field) {
+        return this.formValidatorService.isFieldValid(field, this.productForm);
+    }
+    /**
+     * Method to find error in form fields
+     */
+    getErrorMessage(field) {
+        return this.formValidatorService.getErrorMessage(field, this.productForm, errorMessages);
+    }
+    /**
+     * Checks displayed Form Fields array for form field and returns boolean result
+     */
+    isFormFieldShown(fieldName) {
+        return this.displayedFormFields.length > 0 && this.displayedFormFields.includes(fieldName);
+    }
+    /**
+     * Checks displayed Form Section array for form section and returns boolean result
+     */
+    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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.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 });
+}
+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: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }], product: [{
+                type: Input
+            }], displayedFormFields: [{
+                type: Input
+            }], displayedFormSections: [{
+                type: Input
+            }] } });
+
+class ProductFormButtonComponent {
+    matDialog;
+    productFormService;
+    product;
+    saved = new EventEmitter();
+    constructor(matDialog, productFormService) {
+        this.matDialog = matDialog;
+        this.productFormService = productFormService;
+    }
+    showForm(templateRef) {
+        this.matDialog.open(templateRef, { width: '600px' });
+    }
+    /**
+     * Handle on product saved event.
+     *
+     * @param product
+     */
+    onProductSaved(product) {
+        this.saved.emit(product);
+        this.matDialog?.closeAll();
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-form-button', 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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ProductFormService }], propDecorators: { product: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+class ProductBatchService extends TechlifyServiceBaseClass {
+    httpService;
+    constructor(httpService) {
+        super(httpService, 'products-batch');
+        this.httpService = httpService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBatchService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBatchService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBatchService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class ProductBatchUpdateFormComponent extends TechlifyFormComponentInterface {
+    formBuilder;
+    alertService;
+    batchService;
+    selection;
+    updated = new EventEmitter();
+    isSaving;
+    constructor(formValidatorService, formBuilder, alertService, batchService) {
+        super(formValidatorService);
+        this.formBuilder = formBuilder;
+        this.alertService = alertService;
+        this.batchService = batchService;
+        this.form = this.formBuilder.group({
+            type_id: [''],
+            category_ids: [''],
+            measure_id: [''],
+            reorder_point: ['']
+        });
+    }
+    save() {
+        const data = { ...this.form.value };
+        data.ids = this.selection.selected.map((product) => product?.id);
+        this.isSaving = true;
+        this.batchService.store(data).subscribe({
+            next: () => {
+                this.isSaving = false;
+                this.alertService.addAlert('The products updated successfully!', 'success');
+                this.selection.clear();
+                this.updated.emit();
+            },
+            error: () => {
+                this.isSaving = false;
+            }
+        });
+    }
+    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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBatchUpdateFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-batch-update-form', 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" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$2.FormBuilder }, { type: i1.AlertService }, { type: ProductBatchService }], propDecorators: { selection: [{
+                type: Input
+            }], updated: [{
+                type: Output
+            }] } });
+
+let ProductListComponent = class ProductListComponent extends TechlifyListingControllerInterface {
+    fb;
+    dialog;
+    activatedRoute;
+    productService;
+    requestHelperService;
+    productFormService;
+    selection = new SelectionModel(true, []);
+    columnConfig = [
+        { label: 'Initial Quantity', def: 'initial_quantity', isSelected: false, isEditable: true },
+        { label: 'Income Account', def: 'income_account', isSelected: false, isEditable: true },
+        { label: 'Expense Account', def: 'expense_account', isSelected: false, isEditable: true },
+        { label: 'Creator', def: 'creator', isSelected: false, isEditable: true },
+    ];
+    selectedColumns = this.columnConfig.filter((col) => col.isSelected);
+    get displayedColumns() {
+        const selectedColumns = this.selectedColumns.map((col) => col.def);
+        const defaultColumns = [
+            '#', 'name', 'sku', 'categories', 'reorder_point', 'stock_receipts', 'stock_issuances',
+            'on_hand', 'sale_price'
+        ];
+        return defaultColumns.concat(...selectedColumns, 'Actions', 'Select');
+    }
+    importId;
+    constructor(fb, dialog, activatedRoute, productService, requestHelperService, productFormService) {
+        super();
+        this.fb = fb;
+        this.dialog = dialog;
+        this.activatedRoute = activatedRoute;
+        this.productService = productService;
+        this.requestHelperService = requestHelperService;
+        this.productFormService = productFormService;
+        this.filterForm = this.fb.group({
+            search: [''],
+            category_ids: [''],
+            type_ids: [''],
+            income_account_ids: [''],
+            expense_account_ids: [''],
+            sort_by: [''],
+        });
+    }
+    ngOnInit() {
+        if (this.activatedRoute.snapshot.params?.['import_id']) {
+            this.importId = parseInt(this.activatedRoute.snapshot.params?.['import_id']);
+        }
+        // update form with URL query params
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            type_ids: { multiple: true },
+            category_ids: { multiple: true },
+            income_account_ids: { multiple: true },
+            expense_account_ids: { multiple: true },
+        });
+        // Update URL query params on filter change
+        this.filterForm.valueChanges.pipe(debounceTime(800)).subscribe(() => {
+            this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData({
+                ...this.filterForm.value,
+            }));
+        });
+        // fetch task on params change
+        this.activatedRoute.queryParams.pipe(debounceTime(800)).subscribe(() => this.reload());
+        // listen form product add or update event and reload.
+        this.productFormService.isListUpdated().subscribe((val) => {
+            if (val && !this.isWorking) {
+                this.reload();
+            }
+        });
+    }
+    loadData() {
+        let params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+        };
+        params.page = this.page;
+        params.perPage = this.perPage;
+        params.with = 'categories,lastStockReceipt,lastStockIssuance,creator';
+        if (this.importId) {
+            params.import_id = this.importId;
+        }
+        this.isWorking = true;
+        this.productService.index(params).subscribe({
+            next: (res) => {
+                this.isWorking = false;
+                this.models = this.models.concat(res?.data);
+                this.lastPage = res?.last_page;
+                // stop reloading data once data loaded.
+                this.productFormService.listUpdated(false);
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    assignFilter(column, direction) {
+        if (column) {
+            return this.filterForm.get('sort_by')?.setValue(column + '|' + direction);
+        }
+    }
+    sortColumn(event) {
+        var direction = event.direction.toString().toUpperCase();
+        this.assignFilter(event.active, direction);
+    }
+    isAllRowsSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.models.length;
+        return numSelected === numRows;
+    }
+    /** Selects all rows if they are not all selected; otherwise clear selection. */
+    toggleAllRows() {
+        if (this.isAllRowsSelected()) {
+            this.selection.clear();
+            return;
+        }
+        this.selection.select(...this.models);
+    }
+    checkboxLabel(row) {
+        if (!row) {
+            return `${this.isAllRowsSelected() ? 'deselect' : 'select'} all`;
+        }
+        return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+    }
+    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-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      >\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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.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: i5.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: 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 });
+};
+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-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      >\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" }]
+        }], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: i1$1.MatDialog }, { type: i2.ActivatedRoute }, { type: ProductService }, { type: i1.RequestHelperService }, { type: ProductFormService }] });
+
+class ProductNavBarComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductNavBarComponent, selector: "app-product-nav-bar", ngImport: i0, template: "<div>\n  <router-outlet></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductNavBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-nav-bar', template: "<div>\n  <router-outlet></router-outlet>\n</div>\n" }]
+        }] });
+
+class ProductCategoryBadgesComponent {
+    product;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductCategoryBadgesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductCategoryBadgesComponent, isStandalone: true, selector: "app-product-category-badges", inputs: { product: "product" }, ngImport: i0, template: "<div *ngIf=\"product?.categories?.length > 0\" class=\"d-flex justify-content-start align-items-center gap-1\">\n  <span class=\"badge bg-primary-lighter\" *ngFor=\"let category of product?.categories\">\n    {{ category?.title }}\n  </span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductCategoryBadgesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-category-badges', standalone: true, imports: [NgIf, NgForOf], template: "<div *ngIf=\"product?.categories?.length > 0\" class=\"d-flex justify-content-start align-items-center gap-1\">\n  <span class=\"badge bg-primary-lighter\" *ngFor=\"let category of product?.categories\">\n    {{ category?.title }}\n  </span>\n</div>\n" }]
+        }], propDecorators: { product: [{
+                type: Input
+            }] } });
+
+class StockReceiptDeleteButtonComponent {
+    matDialog;
+    stockReceiptService;
+    alertService;
+    stockReceipt;
+    deleted = new EventEmitter();
+    isDeleting = false;
+    constructor(matDialog, stockReceiptService, alertService) {
+        this.matDialog = matDialog;
+        this.stockReceiptService = stockReceiptService;
+        this.alertService = alertService;
+    }
+    showDeleteConfirmModel(templateRef) {
+        this.matDialog.open(templateRef, { width: '400px' });
+    }
+    delete() {
+        this.isDeleting = true;
+        this.stockReceiptService.delete(this.stockReceipt).subscribe({
+            next: () => {
+                this.matDialog.closeAll();
+                this.isDeleting = false;
+                this.deleted.emit();
+                this.alertService.addAlert('Stock Receipt deleted successfully!', 'success');
+            },
+            error: () => {
+                this.isDeleting = false;
+            },
+        });
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-stock-receipt-delete-button', 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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: StockReceiptService }, { type: i1.AlertService }], propDecorators: { stockReceipt: [{
+                type: Input
+            }], deleted: [{
+                type: Output
+            }] } });
+
+let StockReceiptsListPageComponent = class StockReceiptsListPageComponent extends TechlifyListingControllerInterface {
+    stockReceiptService;
+    formBuilder;
+    requestHelperService;
+    activatedRoute;
+    product;
+    listUpdated = new EventEmitter();
+    defaultSelectedColumns = [
+        "no",
+        "product",
+        "sku",
+        "date",
+        "quantity",
+        "location",
+        "purchase_price",
+        "amount",
+        "supplier",
+        "particulars",
+    ];
+    columnConfig = [
+        { label: 'Creator', def: 'creator', isSelected: false, isEditable: true },
+    ];
+    selectedColumns = this.columnConfig.filter(col => col.isSelected);
+    get displayedColumns() {
+        const selectedColumns = this.selectedColumns.map(col => col.def);
+        return this.defaultSelectedColumns.concat(...selectedColumns, 'actions');
+    }
+    constructor(stockReceiptService, formBuilder, requestHelperService, activatedRoute) {
+        super();
+        this.stockReceiptService = stockReceiptService;
+        this.formBuilder = formBuilder;
+        this.requestHelperService = requestHelperService;
+        this.activatedRoute = activatedRoute;
+        this.lastPage = 0;
+        this.filterForm = this.formBuilder.group({
+            search: [''],
+            product_ids: [''],
+            category_ids: [''],
+            duration: [''],
+            date_from: [''],
+            date_to: [''],
+            supplier_ids: [''],
+            measure_ids: [''],
+            location_ids: [''],
+            sort_by: ['date|desc'],
+        });
+    }
+    ngOnInit() {
+        if (this.product) {
+            this.filterForm.get('product_ids')?.setValue(this.product?.id);
+            const index = this.displayedColumns.indexOf('product');
+            if (index !== -1) {
+                this.displayedColumns.splice(index, 1);
+            }
+        }
+        this.updateFormWithQueryParams();
+        this.subscribeToFormChanges();
+        this.subscribeToRouteChanges();
+    }
+    loadData() {
+        const params = {
+            page: this.page,
+            perPage: this.perPage,
+            with: "creator,supplier,product.measure,product.categories,location",
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+        };
+        this.isWorking = true;
+        this.stockReceiptService.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: () => {
+                this.isWorking = false;
+            },
+        });
+    }
+    onSortChange(sort) {
+        let { active, direction } = sort;
+        if (!active) {
+            active = 'date';
+        }
+        if (!direction) {
+            direction = 'desc';
+            active = 'date';
+        }
+        this.filterForm.get('sort_by').setValue(active + '|' + direction);
+    }
+    onDurationChange(timelineValue) {
+        let { date_to, date_from } = timelineValue;
+        this.filterForm.patchValue({
+            date_from: date_from ? moment$1(date_from).format("YYYY-MM-DD") : "",
+            date_to: date_to ? moment$1(date_to).format("YYYY-MM-DD") : "",
+        }, { emitEvent: false });
+    }
+    updateFormWithQueryParams() {
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            product_ids: { multiple: true },
+            measure_ids: { multiple: true },
+            category_ids: { multiple: true },
+            supplier_ids: { multiple: true },
+            location_ids: { multiple: true },
+        });
+    }
+    subscribeToFormChanges() {
+        this.filterForm.valueChanges.pipe(debounceTime$1(800)).subscribe({
+            next: () => {
+                this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+            }
+        });
+    }
+    subscribeToRouteChanges() {
+        this.activatedRoute.queryParams
+            .pipe(debounceTime$1(500), distinctUntilChanged())
+            .subscribe(() => {
+            this.reload();
+        });
+    }
+    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      <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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.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: i5.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: "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 });
+};
+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      <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" }]
+        }], ctorParameters: () => [{ type: StockReceiptService }, { type: i2$2.FormBuilder }, { type: i1.RequestHelperService }, { type: i2.ActivatedRoute }], propDecorators: { product: [{
+                type: Input
+            }], listUpdated: [{
+                type: Output
+            }] } });
+
+class StockIssuanceDeleteButtonComponent {
+    matDialog;
+    stockIssuanceService;
+    alertService;
+    stockIssuance;
+    deleted = new EventEmitter();
+    isDeleting = false;
+    constructor(matDialog, stockIssuanceService, alertService) {
+        this.matDialog = matDialog;
+        this.stockIssuanceService = stockIssuanceService;
+        this.alertService = alertService;
+    }
+    showDeleteConfirmModel(templateRef) {
+        this.matDialog.open(templateRef, { width: '400px' });
+    }
+    delete() {
+        this.isDeleting = true;
+        this.stockIssuanceService.delete(this.stockIssuance).subscribe({
+            next: () => {
+                this.matDialog.closeAll();
+                this.isDeleting = false;
+                this.deleted.emit();
+                this.alertService.addAlert('Stock Issuance deleted successfully!', 'success');
+            },
+            error: () => {
+                this.isDeleting = false;
+            },
+        });
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-stock-issuance-delete-button', 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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: StockIssuanceService }, { type: i1.AlertService }], propDecorators: { stockIssuance: [{
+                type: Input
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class StockIssuancesListComponent extends TechlifyListingControllerInterface {
+    formBuilder;
+    requestHelperService;
+    stockIssuanceService;
+    activatedRoute;
+    product;
+    issuableType;
+    issuableId;
+    label = 'Stock Issues';
+    listUpdated = new EventEmitter();
+    defaultSelectedColumns = [
+        'no', 'product', 'sku', 'date', 'quantity', 'location', 'related', 'particulars',
+    ];
+    columnConfig = [
+        { label: 'Creator', def: 'creator', isSelected: false, isEditable: true },
+    ];
+    selectedColumns = this.columnConfig.filter(col => col.isSelected);
+    get displayedColumns() {
+        const selectedColumns = this.selectedColumns.map(col => col.def);
+        return this.defaultSelectedColumns.concat(...selectedColumns, 'actions');
+    }
+    constructor(formBuilder, requestHelperService, stockIssuanceService, activatedRoute) {
+        super();
+        this.formBuilder = formBuilder;
+        this.requestHelperService = requestHelperService;
+        this.stockIssuanceService = stockIssuanceService;
+        this.activatedRoute = activatedRoute;
+        this.lastPage = 0;
+        this.filterForm = this.formBuilder.group({
+            duration: [''],
+            date_from: [''],
+            date_to: [''],
+            measure_ids: [''],
+            product_ids: [''],
+            category_ids: [''],
+            location_ids: [''],
+            search: [''],
+            sort_by: ['date|desc'],
+        });
+    }
+    ngOnInit() {
+        if (this.product) {
+            this.filterForm.get('product_ids')?.setValue(this.product?.id);
+            const index = this.displayedColumns.indexOf('product');
+            if (index !== -1) {
+                this.displayedColumns.splice(index, 1);
+            }
+        }
+        this.updateFormWithQueryParams();
+        this.subscribeToFormChanges();
+        this.subscribeToRouteChanges();
+    }
+    loadData() {
+        const params = {
+            page: this.page,
+            perPage: this.perPage,
+            with: 'creator,product.measure,issuable.fixedAsset,product.categories,location',
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+        };
+        if (this.issuableId && this.issuableType) {
+            params.issuable_ids = this.issuableId;
+            params.issuable_types = this.issuableType;
+        }
+        this.isWorking = true;
+        this.stockIssuanceService.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: () => {
+                this.isWorking = false;
+            },
+        });
+    }
+    onSortChange(sort) {
+        let { active, direction } = sort;
+        if (!active) {
+            active = 'date';
+        }
+        if (!direction) {
+            direction = 'desc';
+            active = 'date';
+        }
+        this.filterForm.get('sort_by').setValue(active + '|' + direction);
+    }
+    updateFormWithQueryParams() {
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            product_ids: { multiple: true },
+            measure_ids: { multiple: true },
+            category_ids: { multiple: true },
+            supplier_ids: { multiple: true },
+            location_ids: { multiple: true },
+        });
+    }
+    subscribeToFormChanges() {
+        this.filterForm.valueChanges.pipe(debounceTime$1(800)).subscribe({
+            next: () => {
+                this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+            }
+        });
+    }
+    subscribeToRouteChanges() {
+        this.activatedRoute.queryParams
+            .pipe(debounceTime$1(500), distinctUntilChanged())
+            .subscribe(() => {
+            this.reload();
+        });
+    }
+    onDurationChange(timelineValue) {
+        let { date_to, date_from } = timelineValue;
+        this.filterForm.patchValue({
+            date_from: date_from ? moment(date_from).format("YYYY-MM-DD") : "",
+            date_to: date_to ? moment(date_to).format("YYYY-MM-DD") : "",
+        }, { 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      <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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "component", type: i5.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 });
+}
+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      <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" }]
+        }], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: i1.RequestHelperService }, { type: StockIssuanceService }, { type: i2.ActivatedRoute }], propDecorators: { product: [{
+                type: Input
+            }], issuableType: [{
+                type: Input
+            }], issuableId: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], listUpdated: [{
+                type: Output
+            }] } });
+
+class ProductTaxService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'product-taxes');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class ProductTaxFormButtonComponent extends TechlifyFormComponentInterface {
+    matDialog;
+    productTaxService;
+    formBuilder;
+    alertService;
+    product;
+    saved = new EventEmitter();
+    isSaving;
+    constructor(matDialog, productTaxService, formValidatorService, formBuilder, alertService) {
+        super(formValidatorService);
+        this.matDialog = matDialog;
+        this.productTaxService = productTaxService;
+        this.formBuilder = formBuilder;
+        this.alertService = alertService;
+        this.errorMessages = {
+            tax_id: {
+                required: 'The tax field is required.',
+            },
+        };
+        this.form = this.formBuilder.group({
+            product_id: [''],
+            tax_id: ['', Validators.required],
+        });
+    }
+    ngOnInit() {
+        if (this.product) {
+            this.form.get('product_id')?.setValue(this.product?.id);
+        }
+    }
+    showForm(templateRef) {
+        this.matDialog.open(templateRef, { width: '400px' });
+    }
+    save() {
+        this.form.markAllAsTouched();
+        if (this.form.invalid) {
+            this.alertService.addAlert('Please check the form for errors.', 'error');
+            return;
+        }
+        const data = { ...this.form.value };
+        const params = {
+            with: 'tax.type',
+        };
+        this.isSaving = true;
+        this.productTaxService.store(data, params).subscribe({
+            next: (response) => {
+                this.isSaving = false;
+                this.matDialog.closeAll();
+                this.alertService.addAlert('Product tax saved successfully!', 'success');
+                this.saved.emit(response?.item);
+            },
+            error: () => (this.isSaving = false),
+        });
+    }
+    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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-tax-form-button', 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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ProductTaxService }, { type: i1.FormValidatorService }, { type: i2$2.FormBuilder }, { type: i1.AlertService }], propDecorators: { product: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+class ProductTaxDeleteButtonComponent {
+    matDialog;
+    productTaxService;
+    alertService;
+    productTax;
+    deleted = new EventEmitter();
+    isDeleting;
+    constructor(matDialog, productTaxService, alertService) {
+        this.matDialog = matDialog;
+        this.productTaxService = productTaxService;
+        this.alertService = alertService;
+    }
+    /**
+     * Delete the product.
+     */
+    delete() {
+        this.isDeleting = true;
+        this.productTaxService.delete(this.productTax).subscribe({
+            next: () => {
+                this.matDialog?.closeAll();
+                this.deleted.emit();
+                this.isDeleting = false;
+                this.alertService.addAlert('Product tax deleted successfully!', 'success');
+            },
+            error: () => (this.isDeleting = false),
+        });
+    }
+    /**
+     * Show delete product dialog.
+     *
+     * @param templateRef
+     */
+    showDeleteDialog(templateRef) {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-tax-delete-button', 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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ProductTaxService }, { type: i1.AlertService }], propDecorators: { productTax: [{
+                type: Input
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class ProductTaxListComponent extends TechlifyListingControllerInterface {
+    product;
+    displayedColumns = ['#', 'Tax', 'Actions'];
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        this.models = this.product?.taxes ?? [];
+    }
+    onCreated(productTax) {
+        this.models.unshift(productTax);
+        this.models = [...this.models];
+    }
+    onDeleted(index) {
+        this.models.splice(index, 1);
+        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$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,
+            args: [{ selector: 'app-product-tax-list', 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" }]
+        }], propDecorators: { product: [{
+                type: Input
+            }] } });
+
+class StockTransferService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'stock-transfers');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class StockTransferFormComponent extends TechlifyFormComponentInterface {
+    formBuilder;
+    alertService;
+    service;
+    productId;
+    saved = new EventEmitter();
+    cancelled = new EventEmitter();
+    isWorking = false;
+    constructor(formValidatorService, formBuilder, alertService, service) {
+        super(formValidatorService);
+        this.formBuilder = formBuilder;
+        this.alertService = alertService;
+        this.service = service;
+        this.errorMessages = {
+            date: {
+                required: 'The date field is required.',
+            },
+            location_from_id: {
+                required: 'The location from field is required.',
+            },
+            location_to_id: {
+                required: 'The location to field is required.',
+            },
+            quantity: {
+                required: 'The quantity field is required.',
+            }
+        };
+        this.form = this.formBuilder.group({
+            product_id: [''],
+            date: [new Date(), [Validators.required]],
+            location_from_id: ['', Validators.required],
+            location_to_id: ['', Validators.required],
+            quantity: [1, Validators.required],
+            particulars: ['']
+        });
+    }
+    save() {
+        this.form.markAsTouched();
+        if (this.form.invalid) {
+            console.log(this.form);
+            this.alertService.addAlert('Please check the form for errors.', 'error');
+            return;
+        }
+        const data = {
+            ...this.form.value
+        };
+        if (data?.date) {
+            data.date = moment$1(data?.date).format('YYYY-MM-DD');
+        }
+        this.isWorking = true;
+        this.service.store(data).subscribe({
+            next: (response) => {
+                this.alertService.addAlert('Stock transferred successfully.', 'success');
+                this.saved.emit(response?.item);
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    ngOnInit() {
+        if (this.productId) {
+            this.form.get('product_id')?.setValue(this.productId);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$2.FormBuilder }, { token: i1.AlertService }, { token: StockTransferService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockTransferFormComponent, isStandalone: true, selector: "app-stock-transfer-form", inputs: { productId: "productId" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  class=\"d-flex flex-column justify-content-start gap-0\"\n  (ngSubmit)=\"save()\"\n>\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input formControlName=\"date\" matInput [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location From</mat-label>\n    <app-searchable-selector\n      formControlName=\"location_from_id\"\n      apiUrl=\"api/inventory-locations\"\n    ></app-searchable-selector>\n    <mat-hint>Where are we taking stock from?</mat-hint>\n    <mat-error *ngIf=\"isFieldValid('location_from_id')\">{{ getErrorMessage('location_from_id') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location To</mat-label>\n    <app-searchable-selector\n      formControlName=\"location_to_id\"\n      apiUrl=\"api/inventory-locations\"\n    ></app-searchable-selector>\n    <mat-hint>Where are we taking stock to?</mat-hint>\n    <mat-error *ngIf=\"isFieldValid('location_to_id')\">{{ getErrorMessage('location_to_id') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput placeholder=\"Quantity\" formControlName=\"quantity\" type=\"number\">\n    <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button [disabled]=\"isWorking\" type=\"button\" mat-flat-button (click)=\"cancelled.emit()\">\n      Cancel\n    </button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ 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.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"] }, { 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: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-stock-transfer-form', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        MatDatepickerInput,
+                        MatDatepickerToggle,
+                        MatDatepicker,
+                        MatSuffix,
+                        SearchableSelectorModule,
+                        MatError,
+                        NgIf,
+                        MatHint,
+                        MatButton
+                    ], template: "<form\n  [formGroup]=\"form\"\n  class=\"d-flex flex-column justify-content-start gap-0\"\n  (ngSubmit)=\"save()\"\n>\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input formControlName=\"date\" matInput [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location From</mat-label>\n    <app-searchable-selector\n      formControlName=\"location_from_id\"\n      apiUrl=\"api/inventory-locations\"\n    ></app-searchable-selector>\n    <mat-hint>Where are we taking stock from?</mat-hint>\n    <mat-error *ngIf=\"isFieldValid('location_from_id')\">{{ getErrorMessage('location_from_id') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location To</mat-label>\n    <app-searchable-selector\n      formControlName=\"location_to_id\"\n      apiUrl=\"api/inventory-locations\"\n    ></app-searchable-selector>\n    <mat-hint>Where are we taking stock to?</mat-hint>\n    <mat-error *ngIf=\"isFieldValid('location_to_id')\">{{ getErrorMessage('location_to_id') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput placeholder=\"Quantity\" formControlName=\"quantity\" type=\"number\">\n    <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button [disabled]=\"isWorking\" type=\"button\" mat-flat-button (click)=\"cancelled.emit()\">\n      Cancel\n    </button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$2.FormBuilder }, { type: i1.AlertService }, { type: StockTransferService }], propDecorators: { productId: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
+class StockTransferFormButtonComponent {
+    matDialog;
+    productId;
+    saved = new EventEmitter();
+    matDialogRef;
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+    }
+    showForm(templateRef) {
+        this.matDialogRef = this.matDialog.open(templateRef, { width: '500px' });
+    }
+    onSaved(model) {
+        this.saved.emit(model);
+        this.matDialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferFormButtonComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockTransferFormButtonComponent, isStandalone: true, selector: "app-stock-transfer-form-button", inputs: { productId: "productId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<span\n  class=\"material-symbols-outlined text-secondary cursor-pointer\"\n  matTooltip=\"Stock Transfer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  move_up\n</span>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title>Stock Transfer</h3>\n  <app-stock-transfer-form\n          mat-dialog-content\n          [productId]=\"productId\"\n          (cancelled)=\"matDialogRef.close()\"\n          (saved)=\"onSaved($event)\"\n  ></app-stock-transfer-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: StockTransferFormComponent, selector: "app-stock-transfer-form", inputs: ["productId"], outputs: ["saved", "cancelled"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-stock-transfer-form-button', standalone: true, imports: [
+                        MatTooltip,
+                        StockTransferFormComponent,
+                        MatDialogTitle,
+                        MatDialogContent
+                    ], template: "<span\n  class=\"material-symbols-outlined text-secondary cursor-pointer\"\n  matTooltip=\"Stock Transfer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  move_up\n</span>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title>Stock Transfer</h3>\n  <app-stock-transfer-form\n          mat-dialog-content\n          [productId]=\"productId\"\n          (cancelled)=\"matDialogRef.close()\"\n          (saved)=\"onSaved($event)\"\n  ></app-stock-transfer-form>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { productId: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+/*
+ * This module imports and re-exports all Angular Material modules for convenience,
+ * so only 1 module import is needed in your feature modules.
+ * See https://material.angular.io/guide/getting-started#step-3-import-the-component-modules.
+ *
+ * To optimize your production builds, you should only import the components used in your app.
+ */
+class MaterialModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, exports: [MatAutocompleteModule,
+            MatBadgeModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatCommonModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatFormFieldModule,
+            MatGridListModule,
+            MatIconModule,
+            MatInputModule,
+            MatLineModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatOptionModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatPseudoCheckboxModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSlideToggleModule,
+            MatSliderModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatStepperModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, imports: [MatAutocompleteModule,
+            MatBadgeModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatCommonModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatFormFieldModule,
+            MatGridListModule,
+            MatIconModule,
+            MatInputModule,
+            MatLineModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatOptionModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatPseudoCheckboxModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSlideToggleModule,
+            MatSliderModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatStepperModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        MatAutocompleteModule,
+                        MatBadgeModule,
+                        MatButtonModule,
+                        MatButtonToggleModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatChipsModule,
+                        MatCommonModule,
+                        MatDatepickerModule,
+                        MatDialogModule,
+                        MatDividerModule,
+                        MatExpansionModule,
+                        MatFormFieldModule,
+                        MatGridListModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatLineModule,
+                        MatListModule,
+                        MatMenuModule,
+                        MatNativeDateModule,
+                        MatOptionModule,
+                        MatPaginatorModule,
+                        MatProgressBarModule,
+                        MatProgressSpinnerModule,
+                        MatPseudoCheckboxModule,
+                        MatRadioModule,
+                        MatRippleModule,
+                        MatSelectModule,
+                        MatSidenavModule,
+                        MatSlideToggleModule,
+                        MatSliderModule,
+                        MatSnackBarModule,
+                        MatSortModule,
+                        MatStepperModule,
+                        MatTableModule,
+                        MatTabsModule,
+                        MatToolbarModule,
+                        MatTooltipModule,
+                        MatTreeModule,
+                    ],
+                }]
+        }] });
+
+class ProductStatisticsService extends TechlifyServiceBaseClass {
+    http;
+    constructor(http) {
+        super(http, 'product-statistics');
+        this.http = http;
+    }
+    stockByLocation(params) {
+        return this.http.get('api/product-statistics/stock-by-location', { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductStatisticsService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductStatisticsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductStatisticsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class ProductLocationListComponent extends TechlifyListingControllerInterface {
+    statisticsService;
+    errorHandler;
+    product;
+    constructor(statisticsService, errorHandler) {
+        super();
+        this.statisticsService = statisticsService;
+        this.errorHandler = errorHandler;
+    }
+    displayedColumns = [
+        '#',
+        'Location',
+        'Stock',
+        'Actions'
+    ];
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        this.statisticsService.stockByLocation({
+            product_id: this.product.id
+        }).subscribe({
+            next: (response) => {
+                this.models = response?.data;
+                this.lastPage = response?.last_page;
+            }, error: (error) => {
+                this.errorHandler.handleError(error);
+            }
+        });
+    }
+    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$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,
+            args: [{ selector: 'app-product-location-list', standalone: true, imports: [
+                        CommonModule,
+                        MaterialModule,
+                        StockTransferFormButtonComponent
+                    ], 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>" }]
+        }], ctorParameters: () => [{ type: ProductStatisticsService }, { type: i1.ErrorHandlerService }], propDecorators: { product: [{
+                type: Input
+            }] } });
+
+class StockTransferListComponent extends TechlifyListingControllerInterface {
+    service;
+    fb;
+    errorHandler;
+    productId;
+    displayedColumns = [
+        '#',
+        'date',
+        'quantity',
+        'location_from',
+        'location_to',
+        'creator'
+    ];
+    constructor(service, fb, errorHandler) {
+        super();
+        this.service = service;
+        this.fb = fb;
+        this.errorHandler = errorHandler;
+        this.filterForm = this.fb.group({
+            product_id: ['']
+        });
+    }
+    ngOnInit() {
+        if (this.productId) {
+            this.filterForm.patchValue({
+                product_id: this.productId
+            });
+        }
+        this.listenForChanges();
+        this.loadData();
+    }
+    loadData() {
+        this.isWorking = true;
+        let filters = this.filterForm.value;
+        filters.page = this.page;
+        filters.per_page = this.productId
+            ? 9999
+            : this.perPage;
+        this.service.index(filters).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: (error) => {
+                this.errorHandler.handleError(error);
+                this.isWorking = false;
+            },
+        });
+    }
+    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: i5.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,
+            args: [{ selector: 'app-stock-transfer-list', standalone: true, imports: [
+                        CommonModule,
+                        MaterialModule,
+                        InfiniteScrollDirective
+                    ], 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>" }]
+        }], ctorParameters: () => [{ type: StockTransferService }, { type: i2$2.FormBuilder }, { type: i1.ErrorHandlerService }], propDecorators: { productId: [{
+                type: Input
+            }] } });
+
+class StockSummaryService {
+    httpService;
+    constructor(httpService) {
+        this.httpService = httpService;
+    }
+    /**
+     * Get the stocks summary.
+     *
+     * @param params
+     */
+    summary(params) {
+        return this.httpService.get('api/stocks-summary', { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockSummaryService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockSummaryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockSummaryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class ProductDeleteButtonComponent {
+    matDialog;
+    productService;
+    alertService;
+    product;
+    deleted = new EventEmitter();
+    isDeleting;
+    constructor(matDialog, productService, alertService) {
+        this.matDialog = matDialog;
+        this.productService = productService;
+        this.alertService = alertService;
+    }
+    /**
+     * Delete the product.
+     */
+    deleteProduct() {
+        this.isDeleting = true;
+        this.productService.delete(this.product).subscribe({
+            next: () => {
+                this.deleted.emit();
+                this.isDeleting = false;
+                this.matDialog.closeAll();
+                this.alertService.addAlert('Product deleted successfully!', 'success');
+            },
+            error: () => (this.isDeleting = false),
+        });
+    }
+    /**
+     * Show delete product dialog.
+     *
+     * @param templateRef
+     */
+    showDeleteDialog(templateRef) {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-delete-button', 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" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ProductService }, { type: i1.AlertService }], propDecorators: { product: [{
+                type: Input
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class ProductBasicInfoComponent {
+    stockSummaryService;
+    product;
+    saved = new EventEmitter();
+    deleted = new EventEmitter();
+    stockSummary;
+    constructor(stockSummaryService) {
+        this.stockSummaryService = stockSummaryService;
+    }
+    ngOnInit() {
+        if (this.product) {
+            this.loadProductStocksSummary();
+        }
+    }
+    onProductSaved(product) {
+        this.product = product;
+        this.saved.emit(this.product);
+    }
+    /**
+     * Load product stocks summary.
+     */
+    loadProductStocksSummary() {
+        const params = {
+            product_ids: this.product?.id,
+            include: 'stock_receipts_quantity_sum,stock_issuances_quantity_sum,stock_quantity_remaining',
+        };
+        this.stockSummaryService.summary(params).subscribe({
+            next: (response) => {
+                this.stockSummary = response;
+            },
+        });
+    }
+    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  <mat-card-content class=\"mt-3\">\n    <div class=\"d-flex flex-wrap gap-1\">\n      <span class=\"badge badge-primary\" *ngFor=\"let category of product?.categories\">\n        <span class=\"badge badge-primary\" *ngFor=\"let category of product?.categories\">\n          {{ category?.title }}\n        </span>\n      </span>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content 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      <small class=\"text-secondary\">SKU</small>\n      <p class=\"mb-0\">{{ product?.sku }}</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\">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  </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$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: i4.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  <mat-card-content class=\"mt-3\">\n    <div class=\"d-flex flex-wrap gap-1\">\n      <span class=\"badge badge-primary\" *ngFor=\"let category of product?.categories\">\n        <span class=\"badge badge-primary\" *ngFor=\"let category of product?.categories\">\n          {{ category?.title }}\n        </span>\n      </span>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content 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      <small class=\"text-secondary\">SKU</small>\n      <p class=\"mb-0\">{{ product?.sku }}</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\">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  </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>" }]
+        }], ctorParameters: () => [{ type: StockSummaryService }], propDecorators: { product: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class ProductViewPageComponent {
+    productService;
+    activatedRoute;
+    location;
+    product;
+    id;
+    isLoading;
+    constructor(productService, activatedRoute, location) {
+        this.productService = productService;
+        this.activatedRoute = activatedRoute;
+        this.location = location;
+        this.id = this.activatedRoute.snapshot.params?.['id'];
+    }
+    ngOnInit() {
+        if (this.id) {
+            this.getProduct(this.id);
+        }
+    }
+    /**
+     * Get the product details.
+     *
+     * @param productId
+     */
+    getProduct(productId) {
+        this.isLoading = true;
+        const params = {
+            with: 'type,measure,incomeAccount,expenseAccount,categories,lastStockReceipt,lastStockIssuance,taxes.tax.type',
+        };
+        this.productService.show(productId, params).subscribe({
+            next: (result) => {
+                this.isLoading = false;
+                this.product = result?.item;
+            },
+            error: () => (this.isLoading = false),
+        });
+    }
+    /**
+     * Handle the on product update event.
+     *
+     * @param product
+     */
+    onProductUpdated(product) {
+        this.getProduct(this.id);
+    }
+    /**
+     * Handle on product delete event.
+     */
+    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: ProductTaxListComponent, selector: "app-product-tax-list", inputs: ["product"] }, { kind: "component", type: i5.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 }] });
+
+class ProductImportPageComponent {
+    importConfig = {
+        apiUrl: 'api/products-import',
+        title: 'Products',
+        importType: 'product',
+        properties: [
+            {
+                label: 'Name',
+                value: 'name',
+                type: 'text',
+            },
+            {
+                label: 'SKU',
+                value: 'sku',
+                type: 'text',
+            },
+            {
+                label: 'Initial Quantity',
+                value: 'initial_quantity',
+                type: 'number',
+            },
+            {
+                label: 'Initial Quantity Date',
+                value: 'initial_quantity_date',
+                type: 'date',
+            },
+            {
+                label: 'Reorder Point',
+                value: 'reorder_point',
+                type: 'number',
+            },
+            {
+                label: 'Measure',
+                value: 'measure',
+                type: 'text',
+            },
+            {
+                label: 'Categories',
+                value: 'categories',
+                type: 'text',
+            },
+        ],
+        sampleFile: {
+            name: 'Products Import',
+            path: 'assets/product/product-import-sample.csv',
+        },
+        importHistory: {
+            isEnabled: true,
+            type: 'product',
+            apiUrl: 'api/import-histories',
+        },
+        viewRouterLink: '/inventory/products/',
+    };
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductImportPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductImportPageComponent, selector: "app-product-import-page", ngImport: i0, template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>\n", styles: [""], dependencies: [{ kind: "component", type: i1.ImportCsvComponent, selector: "app-import-csv", inputs: ["config"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductImportPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-import-page', template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>\n" }]
+        }], ctorParameters: () => [] });
+
+const routes$2 = [
+    {
+        path: '',
+        component: ProductNavBarComponent,
+        children: [
+            {
+                path: '',
+                component: ProductListComponent,
+                canLoad: [AuthenticationGuard],
+            },
+            {
+                path: 'import',
+                component: ProductImportPageComponent,
+                canLoad: [AuthenticationGuard],
+            },
+            {
+                path: 'measure',
+                component: ProductMeasuresListComponent,
+                canLoad: [AuthenticationGuard],
+            },
+            {
+                path: ':id/view',
+                component: ProductViewPageComponent,
+                canLoad: [AuthenticationGuard],
+            },
+            {
+                path: '**',
+                redirectTo: '',
+                pathMatch: 'full',
+                canLoad: [AuthenticationGuard],
+            },
+        ],
+    },
+];
+class ProductRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, imports: [RouterModule.forChild(routes$2), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes$2)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class PayeeSelectorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayeeSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PayeeSelectorModule, declarations: [PayeeSelectorComponent], imports: [CommonModule, MatFormFieldModule, ReactiveFormsModule, SearchableSelectorModule, FormsModule], exports: [PayeeSelectorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayeeSelectorModule, imports: [CommonModule, MatFormFieldModule, ReactiveFormsModule, SearchableSelectorModule, FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayeeSelectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PayeeSelectorComponent],
+                    exports: [PayeeSelectorComponent],
+                    imports: [CommonModule, MatFormFieldModule, ReactiveFormsModule, SearchableSelectorModule, FormsModule],
+                }]
+        }] });
+
+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] });
+    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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [StockReceiptFormComponent, StockReceiptFormButtonComponent],
+                    exports: [StockReceiptFormButtonComponent],
+                    imports: [
+                        CommonModule,
+                        MatTooltipModule,
+                        MatDialogModule,
+                        PayeeSelectorModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        MatButtonModule,
+                    ],
+                }]
+        }] });
+
+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,
+            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,
+            SearchableSelectorModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssueFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [StockIssueFormComponent, StockIssueFormButtonComponent],
+                    exports: [StockIssueFormButtonComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatTooltipModule,
+                        SearchableSelectorModule,
+                    ],
+                }]
+        }] });
+
+const routes$1 = [
+    {
+        path: '',
+        component: StockReceiptsListPageComponent,
+    },
+];
+class StockReceiptsRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsRoutingModule, imports: [RouterModule.forChild(routes$1), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes$1)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class TechlifyFilterComponent {
+    requestHelperService;
+    activatedRoute;
+    filterForm;
+    filterConfig;
+    filterUpdated = new EventEmitter();
+    constructor(requestHelperService, activatedRoute) {
+        this.requestHelperService = requestHelperService;
+        this.activatedRoute = activatedRoute;
+    }
+    ngOnInit() {
+        // listen for filter changes
+        this.filterForm.valueChanges.subscribe({
+            next: (value) => {
+                const params = this.requestHelperService.convertToFormData(value);
+                this.requestHelperService.updateQueryParams(params);
+            },
+        });
+        // update form with query params
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            duration: { number: true },
+            expiry_duration: { number: true },
+            payment_method_ids: { multiple: true },
+            payment_account_ids: { multiple: true },
+            project_ids: { multiple: true },
+            invoice_status_ids: { multiple: true },
+            customer_ids: { multiple: true },
+            cost_category_ids: { multiple: true },
+            team_member_ids: { multiple: true },
+            task_status_ids: { multiple: true },
+            asset_account_ids: { multiple: true },
+            depreciation_method_ids: { multiple: true },
+            depreciation_expense_account_ids: { multiple: true },
+            fixed_asset_type_ids: { multiple: true },
+            fixed_asset_document_type_ids: { multiple: true },
+            service_center_ids: { multiple: true },
+            fixed_asset_maintenance_status_ids: { multiple: true },
+            milestone_ids: { multiple: true },
+            product_ids: { multiple: true },
+            supplier_ids: { multiple: true },
+            measure_ids: { multiple: true },
+            type_ids: { multiple: true },
+            fixed_asset_ids: { multiple: true },
+        });
+        // listen for route change
+        this.activatedRoute.queryParams.pipe(debounceTime$1(800), distinctUntilChanged()).subscribe((val) => {
+            this.filterUpdated.emit(this.filterForm.value);
+        });
+    }
+    resetField(field) {
+        this.filterForm.get(field)?.setValue('');
+    }
+    onDurationChange(timelineValue) {
+        let { date_to, date_from } = timelineValue;
+        this.filterForm.patchValue({
+            date_from: date_from ? moment(date_from).format('YYYY-MM-DD') : '',
+            date_to: date_to ? moment(date_to).format('YYYY-MM-DD') : '',
+        }, { emitEvent: false });
+    }
+    /**
+     * Update expiry date from and date to on value change.
+     *
+     * @param timelineValue
+     */
+    onExpiryDurationChange(timelineValue) {
+        let { date_to, date_from } = timelineValue;
+        this.filterForm.patchValue({
+            expiry_date_from: date_from ? moment(date_from).format('YYYY-MM-DD') : '',
+            expiry_date_to: date_to ? moment(date_to).format('YYYY-MM-DD') : '',
+        });
+    }
+    /**
+     * Get the attribute value for the field.
+     *
+     * @param attribute
+     * @param field
+     */
+    getFilterConfig(attribute, field) {
+        if (!this.filterConfig)
+            return '';
+        // Check if the field and attribute exist in the filter config, return the value or an empty string
+        return this.filterConfig[field] && this.filterConfig[field][attribute] !== undefined
+            ? this.filterConfig[field][attribute]
+            : '';
+    }
+    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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-techlify-filter', 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" }]
+        }], ctorParameters: () => [{ type: i1.RequestHelperService }, { type: i2.ActivatedRoute }], propDecorators: { filterForm: [{
+                type: Input
+            }], filterConfig: [{
+                type: Input
+            }], filterUpdated: [{
+                type: Output
+            }] } });
+
+class TechlifyFilterModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterModule, declarations: [TechlifyFilterComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            FlexLayoutModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            MaterialModule$1,
+            NgxPermissionsModule], exports: [TechlifyFilterComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FlexLayoutModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            MaterialModule$1,
+            NgxPermissionsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TechlifyFilterComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FlexLayoutModule,
+                        SearchableSelectorModule,
+                        TimelineFilterModule,
+                        MaterialModule$1,
+                        NgxPermissionsModule,
+                    ],
+                    exports: [TechlifyFilterComponent],
+                }]
+        }] });
+
+class StockReceiptsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsModule, declarations: [StockReceiptsListPageComponent, StockReceiptDeleteButtonComponent], imports: [CommonModule,
+            StockReceiptsRoutingModule,
+            MatCardModule,
+            TechlifyFilterModule,
+            MatTableModule,
+            MatFormFieldModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            ReactiveFormsModule,
+            PayeeSelectorModule,
+            MatProgressBarModule,
+            InfiniteScrollModule,
+            MaterialModule$1,
+            StockReceiptFormModule,
+            ProductCategoryBadgesComponent,
+            ColumnSelectorModule], exports: [StockReceiptDeleteButtonComponent, StockReceiptsListPageComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsModule, imports: [CommonModule,
+            StockReceiptsRoutingModule,
+            MatCardModule,
+            TechlifyFilterModule,
+            MatTableModule,
+            MatFormFieldModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            ReactiveFormsModule,
+            PayeeSelectorModule,
+            MatProgressBarModule,
+            InfiniteScrollModule,
+            MaterialModule$1,
+            StockReceiptFormModule,
+            ColumnSelectorModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [StockReceiptsListPageComponent, StockReceiptDeleteButtonComponent],
+                    exports: [StockReceiptDeleteButtonComponent, StockReceiptsListPageComponent],
+                    imports: [
+                        CommonModule,
+                        StockReceiptsRoutingModule,
+                        MatCardModule,
+                        TechlifyFilterModule,
+                        MatTableModule,
+                        MatFormFieldModule,
+                        SearchableSelectorModule,
+                        TimelineFilterModule,
+                        ReactiveFormsModule,
+                        PayeeSelectorModule,
+                        MatProgressBarModule,
+                        InfiniteScrollModule,
+                        MaterialModule$1,
+                        StockReceiptFormModule,
+                        ProductCategoryBadgesComponent,
+                        ColumnSelectorModule,
+                    ],
+                }]
+        }] });
+
+var stockReceipts_module = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    StockReceiptsModule: StockReceiptsModule
+});
+
+class StockIssuanceDeleteButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceDeleteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceDeleteButtonModule, declarations: [StockIssuanceDeleteButtonComponent], imports: [CommonModule, MaterialModule$1], exports: [StockIssuanceDeleteButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceDeleteButtonModule, imports: [CommonModule, MaterialModule$1] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceDeleteButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [StockIssuanceDeleteButtonComponent],
+                    imports: [CommonModule, MaterialModule$1],
+                    exports: [StockIssuanceDeleteButtonComponent],
+                }]
+        }] });
+
+class StockIssuancesListModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesListModule, declarations: [StockIssuancesListComponent], imports: [CommonModule,
+            MaterialModule$1,
+            TechlifyFilterModule,
+            StockIssueFormModule,
+            InfiniteScrollModule,
+            StockIssuanceDeleteButtonModule,
+            MatProgressBarModule,
+            RouterModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            ReactiveFormsModule,
+            ProductCategoryBadgesComponent,
+            ColumnSelectorModule], exports: [StockIssuancesListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesListModule, imports: [CommonModule,
+            MaterialModule$1,
+            TechlifyFilterModule,
+            StockIssueFormModule,
+            InfiniteScrollModule,
+            StockIssuanceDeleteButtonModule,
+            MatProgressBarModule,
+            RouterModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            ReactiveFormsModule,
+            ColumnSelectorModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [StockIssuancesListComponent],
+                    imports: [
+                        CommonModule,
+                        MaterialModule$1,
+                        TechlifyFilterModule,
+                        StockIssueFormModule,
+                        InfiniteScrollModule,
+                        StockIssuanceDeleteButtonModule,
+                        MatProgressBarModule,
+                        RouterModule,
+                        SearchableSelectorModule,
+                        TimelineFilterModule,
+                        ReactiveFormsModule,
+                        ProductCategoryBadgesComponent,
+                        ColumnSelectorModule,
+                    ],
+                    exports: [StockIssuancesListComponent],
+                }]
+        }] });
+
+class ProductTaxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxModule, declarations: [ProductTaxListComponent, ProductTaxFormButtonComponent, ProductTaxDeleteButtonComponent], imports: [CommonModule, MaterialModule$1, ReactiveFormsModule, SearchableSelectorModule], exports: [ProductTaxListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxModule, imports: [CommonModule, MaterialModule$1, ReactiveFormsModule, SearchableSelectorModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ProductTaxListComponent, ProductTaxFormButtonComponent, ProductTaxDeleteButtonComponent],
+                    imports: [CommonModule, MaterialModule$1, ReactiveFormsModule, SearchableSelectorModule],
+                    exports: [ProductTaxListComponent],
+                }]
+        }] });
+
+class ProductModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProductModule, declarations: [ProductListComponent,
+            ProductFormComponent,
+            ProductNavBarComponent,
+            ProductMeasuresListComponent,
+            ProductMeasureFormComponent,
+            ProductViewPageComponent,
+            ProductFormButtonComponent,
+            ProductDeleteButtonComponent,
+            ProductBasicInfoComponent,
+            ProductImportPageComponent,
+            ProductBatchUpdateFormComponent], imports: [CommonModule,
+            ProductRoutingModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            StockReceiptFormModule,
+            StockIssueFormModule,
+            ImportCsvModule,
+            StockReceiptsModule,
+            StockIssuancesListModule,
+            ProductTaxModule,
+            MaterialModule$1,
+            MatProgressBarModule,
+            InfiniteScrollModule,
+            FlexModule,
+            ReactiveFormsModule,
+            FormsModule,
+            ColumnSelectorModule,
+            ProductLocationListComponent,
+            StockTransferListComponent], exports: [ProductFormComponent,
+            ProductBasicInfoComponent,
+            ProductFormButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductModule, imports: [CommonModule,
+            ProductRoutingModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            StockReceiptFormModule,
+            StockIssueFormModule,
+            ImportCsvModule,
+            StockReceiptsModule,
+            StockIssuancesListModule,
+            ProductTaxModule,
+            MaterialModule$1,
+            MatProgressBarModule,
+            InfiniteScrollModule,
+            FlexModule,
+            ReactiveFormsModule,
+            FormsModule,
+            ColumnSelectorModule,
+            ProductLocationListComponent,
+            StockTransferListComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ProductListComponent,
+                        ProductFormComponent,
+                        ProductNavBarComponent,
+                        ProductMeasuresListComponent,
+                        ProductMeasureFormComponent,
+                        ProductViewPageComponent,
+                        ProductFormButtonComponent,
+                        ProductDeleteButtonComponent,
+                        ProductBasicInfoComponent,
+                        ProductImportPageComponent,
+                        ProductBatchUpdateFormComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        ProductRoutingModule,
+                        SearchableSelectorModule,
+                        TimelineFilterModule,
+                        StockReceiptFormModule,
+                        StockIssueFormModule,
+                        ImportCsvModule,
+                        StockReceiptsModule,
+                        StockIssuancesListModule,
+                        ProductTaxModule,
+                        MaterialModule$1,
+                        MatProgressBarModule,
+                        InfiniteScrollModule,
+                        FlexModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        ColumnSelectorModule,
+                        ProductLocationListComponent,
+                        StockTransferListComponent
+                    ],
+                    exports: [
+                        ProductFormComponent,
+                        ProductBasicInfoComponent,
+                        ProductFormButtonComponent,
+                    ],
+                }]
+        }] });
+
+var product_module = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ProductModule: ProductModule
+});
+
+class ProductQuickSearchComponent extends TechlifyListingControllerInterface {
+    productService;
+    displayedColumns = ['#', 'Product', 'SKU', 'On Hand', 'Actions'];
+    searchControl = new FormControl('');
+    constructor(productService) {
+        super();
+        this.productService = productService;
+        this.lastPage = 0;
+        this.perPage = 1000;
+    }
+    ngOnInit() {
+        this.loadData();
+        this.searchControl.valueChanges.pipe(debounceTime$1(500)).subscribe(() => this.reload());
+    }
+    loadData() {
+        const params = {
+            page: this.page,
+            perPage: this.perPage,
+            search: this.searchControl.value,
+            sort_by: 'created_at|desc',
+            with: 'type,categories',
+        };
+        this.isWorking = true;
+        this.productService.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models?.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductQuickSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-quick-search', standalone: true, imports: [
+                        InfiniteScrollDirective,
+                        MatCard,
+                        MatCardContent,
+                        MatCell,
+                        MatCellDef,
+                        MatColumnDef,
+                        MatHeaderCell,
+                        MatHeaderRow,
+                        MatTable,
+                        MatHeaderCellDef,
+                        RouterLink,
+                        MatHeaderRowDef,
+                        MatRowDef,
+                        MatRow,
+                        MatProgressBar,
+                        NgIf,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        ReactiveFormsModule,
+                        NgForOf,
+                        MatSortHeader,
+                        MatIcon,
+                        MatTooltip,
+                        ProductModule,
+                        RouterLinkActive,
+                        StockReceiptFormModule,
+                        StockIssueFormModule,
+                    ], 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>" }]
+        }], ctorParameters: () => [{ type: ProductService }] });
+
+class InventoryDashboardPageComponent {
+    productService;
+    lowStockProductsCount;
+    stockReceiptsQtySum;
+    stockIssuanceQtySum;
+    constructor(productService) {
+        this.productService = productService;
+    }
+    ngOnInit() {
+        this.loadProductSummary();
+    }
+    loadProductSummary() {
+        const params = {
+            include: 'low_stock_products_count,stock_receipts_quantity_sum,stock_issuances_quantity_sum',
+            date_from: moment().startOf('month').format('YYYY-MM-DD'),
+            date_to: moment().endOf('month').format('YYYY-MM-DD'),
+        };
+        this.productService.summary(params).subscribe({
+            next: (response) => {
+                this.lowStockProductsCount = response?.low_stock_products_count;
+                this.stockReceiptsQtySum = response?.stock_receipts_quantity_sum;
+                this.stockIssuanceQtySum = response?.stock_issuances_quantity_sum;
+            },
+        });
+    }
+    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 });
+}
+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 }] });
+
+class LowStockReportService extends TechlifyServiceBaseClass {
+    httpService;
+    constructor(httpService) {
+        super(httpService, 'reports/low-stock-report');
+        this.httpService = httpService;
+    }
+    export(params) {
+        return this.http.get('api/reports/low-stock-report/export', { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockReportService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockReportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockReportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class LowStockReportComponent extends TechlifyListingControllerInterface {
+    service;
+    activatedRoute;
+    requestHelperService;
+    formBuilder;
+    displayedColumns = [
+        '#',
+        'Product',
+        'Type',
+        'Categories',
+        'Reorder Point',
+        'Stock',
+        'Last Purchase',
+        '30d Issues',
+        '30d Receipts',
+        '60d Issues',
+        '60d Receipts',
+        '90d Issues',
+        '90d Receipts',
+        '1y Issues',
+        '1y Receipts',
+    ];
+    totalInventoryValue = 0;
+    isExporting = false;
+    constructor(service, activatedRoute, requestHelperService, formBuilder) {
+        super();
+        this.service = service;
+        this.activatedRoute = activatedRoute;
+        this.requestHelperService = requestHelperService;
+        this.formBuilder = formBuilder;
+        this.filterForm = this.formBuilder.group({
+            category_ids: [''],
+            search: [''],
+            sort_by: ['id|desc'],
+        });
+    }
+    ngOnInit() {
+        this.updateFormWithQueryParams();
+        this.subscribeToFormChanges();
+        this.subscribeToRouteChanges();
+    }
+    loadData() {
+        const params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+            page: this.page,
+            perPage: this.perPage,
+            with: 'categories,lastStockReceipt,type,measure',
+        };
+        this.isWorking = true;
+        this.service.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models?.concat(response?.data);
+                this.isWorking = false;
+                this.models.forEach((model) => {
+                    this.totalInventoryValue += model?.inventory_value;
+                });
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    onSortChange(sort) {
+        let { active, direction } = sort;
+        if (!active)
+            active = 'id';
+        if (!direction)
+            direction = 'desc';
+        this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
+    }
+    export() {
+        const params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+            page: this.page,
+            perPage: 50000,
+            with: 'categories,lastStockReceipt',
+        };
+        this.isExporting = true;
+        this.service.export(params).subscribe({
+            next: (response) => {
+                this.isExporting = false;
+                window.open(response?.item?.file_link, '_blank');
+            },
+            error: () => (this.isExporting = false),
+        });
+    }
+    updateFormWithQueryParams() {
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            category_ids: { multiple: true },
+        });
+    }
+    subscribeToFormChanges() {
+        this.filterForm.valueChanges.pipe(debounceTime$1(800)).subscribe({
+            next: () => {
+                this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+            },
+        });
+    }
+    subscribeToRouteChanges() {
+        this.activatedRoute.queryParams.pipe(debounceTime$1(500), distinctUntilChanged()).subscribe(() => {
+            this.reload();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockReportComponent, deps: [{ token: LowStockReportService }, { 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: LowStockReportComponent, isStandalone: true, selector: "app-low-stock-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\">Low Stock Report</h3>\n        <i class=\"fa-solid fa-file-excel cursor-pointer d-print-none\" (click)=\"export()\"></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        </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        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"Type\">\n          <th mat-header-cell *matHeaderCellDef>Type</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.type?.title }}\n          </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\">\n            {{ element?.reorder_point }}\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\">\n            <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n          </td>\n        </ng-container>\n\n        <!-- Stock Column -->\n        <ng-container matColumnDef=\"Stock\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"stock\">Stock</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock }}\n          </td>\n        </ng-container>\n\n        <!-- Last Purchase Column -->\n        <ng-container matColumnDef=\"Last Purchase\">\n          <th mat-header-cell *matHeaderCellDef>Last Purchase</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\" *ngIf=\"element?.last_stock_receipt\">\n              {{ element?.last_stock_receipt?.date | date }} - {{ element?.last_stock_receipt?.quantity }}\n              {{ element?.measure?.title }}\n            </p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt\">\n              {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }} per {{ element?.measure?.title }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- 30d Issues -->\n        <ng-container matColumnDef=\"30d Issues\">\n          <th mat-header-cell *matHeaderCellDef>30d Issues</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.issues_30d }}</td>\n        </ng-container>\n\n        <!-- 30d Receipts -->\n        <ng-container matColumnDef=\"30d Receipts\">\n          <th mat-header-cell *matHeaderCellDef>30d Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.receipts_30d }}</td>\n        </ng-container>\n\n        <!-- 60d Issues -->\n        <ng-container matColumnDef=\"60d Issues\">\n          <th mat-header-cell *matHeaderCellDef>60d Issues</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.issues_60d }}</td>\n        </ng-container>\n\n        <!-- 60d Receipts -->\n        <ng-container matColumnDef=\"60d Receipts\">\n          <th mat-header-cell *matHeaderCellDef>60d Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.receipts_60d }}</td>\n        </ng-container>\n\n        <!-- 90d Issues -->\n        <ng-container matColumnDef=\"90d Issues\">\n          <th mat-header-cell *matHeaderCellDef>90d Issues</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.issues_90d }}</td>\n        </ng-container>\n\n        <!-- 90d Receipts -->\n        <ng-container matColumnDef=\"90d Receipts\">\n          <th mat-header-cell *matHeaderCellDef>90d Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.receipts_90d }}</td>\n        </ng-container>\n\n        <!-- 1y Issues -->\n        <ng-container matColumnDef=\"1y Issues\">\n          <th mat-header-cell *matHeaderCellDef>1y Issues</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.issues_1y }}</td>\n        </ng-container>\n\n        <!-- 60d Receipts -->\n        <ng-container matColumnDef=\"1y Receipts\">\n          <th mat-header-cell *matHeaderCellDef>1y Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.receipts_1y }}</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</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { 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: 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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { 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: MatLabel, selector: "mat-label" }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { 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"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "pipe", type: DatePipe, name: "date" }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockReportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-low-stock-report', standalone: true, imports: [
+                        CurrencyPipe,
+                        FormsModule,
+                        InfiniteScrollDirective,
+                        MatCard,
+                        MatCardContent,
+                        MatCell,
+                        MatCellDef,
+                        MatColumnDef,
+                        MatFooterCell,
+                        MatFooterRow,
+                        MatFooterRowDef,
+                        MatFormField,
+                        MatHeaderCell,
+                        MatHeaderRow,
+                        MatHeaderRowDef,
+                        MatInput,
+                        MatLabel,
+                        MatProgressBar,
+                        MatRow,
+                        MatRowDef,
+                        MatSort,
+                        MatSortHeader,
+                        MatTable,
+                        NgIf,
+                        ProductCategoryBadgesComponent,
+                        ReactiveFormsModule,
+                        SearchableSelectorModule,
+                        RouterLink,
+                        MatFooterCellDef,
+                        MatHeaderCellDef,
+                        MatFooterCellDef,
+                        MatHeaderCellDef,
+                        MatHeaderCellDef,
+                        DatePipe,
+                    ], 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\">Low Stock Report</h3>\n        <i class=\"fa-solid fa-file-excel cursor-pointer d-print-none\" (click)=\"export()\"></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        </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        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"Type\">\n          <th mat-header-cell *matHeaderCellDef>Type</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.type?.title }}\n          </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\">\n            {{ element?.reorder_point }}\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\">\n            <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n          </td>\n        </ng-container>\n\n        <!-- Stock Column -->\n        <ng-container matColumnDef=\"Stock\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"stock\">Stock</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock }}\n          </td>\n        </ng-container>\n\n        <!-- Last Purchase Column -->\n        <ng-container matColumnDef=\"Last Purchase\">\n          <th mat-header-cell *matHeaderCellDef>Last Purchase</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\" *ngIf=\"element?.last_stock_receipt\">\n              {{ element?.last_stock_receipt?.date | date }} - {{ element?.last_stock_receipt?.quantity }}\n              {{ element?.measure?.title }}\n            </p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt\">\n              {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }} per {{ element?.measure?.title }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- 30d Issues -->\n        <ng-container matColumnDef=\"30d Issues\">\n          <th mat-header-cell *matHeaderCellDef>30d Issues</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.issues_30d }}</td>\n        </ng-container>\n\n        <!-- 30d Receipts -->\n        <ng-container matColumnDef=\"30d Receipts\">\n          <th mat-header-cell *matHeaderCellDef>30d Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.receipts_30d }}</td>\n        </ng-container>\n\n        <!-- 60d Issues -->\n        <ng-container matColumnDef=\"60d Issues\">\n          <th mat-header-cell *matHeaderCellDef>60d Issues</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.issues_60d }}</td>\n        </ng-container>\n\n        <!-- 60d Receipts -->\n        <ng-container matColumnDef=\"60d Receipts\">\n          <th mat-header-cell *matHeaderCellDef>60d Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.receipts_60d }}</td>\n        </ng-container>\n\n        <!-- 90d Issues -->\n        <ng-container matColumnDef=\"90d Issues\">\n          <th mat-header-cell *matHeaderCellDef>90d Issues</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.issues_90d }}</td>\n        </ng-container>\n\n        <!-- 90d Receipts -->\n        <ng-container matColumnDef=\"90d Receipts\">\n          <th mat-header-cell *matHeaderCellDef>90d Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.receipts_90d }}</td>\n        </ng-container>\n\n        <!-- 1y Issues -->\n        <ng-container matColumnDef=\"1y Issues\">\n          <th mat-header-cell *matHeaderCellDef>1y Issues</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.issues_1y }}</td>\n        </ng-container>\n\n        <!-- 60d Receipts -->\n        <ng-container matColumnDef=\"1y Receipts\">\n          <th mat-header-cell *matHeaderCellDef>1y Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.receipts_1y }}</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</div>\n" }]
+        }], ctorParameters: () => [{ type: LowStockReportService }, { type: i2.ActivatedRoute }, { type: i1.RequestHelperService }, { type: i2$2.FormBuilder }] });
+
+class InventoryValueReportService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'reports/inventory-value-report');
+    }
+    export(params) {
+        return this.http.get('api/reports/inventory-value-report/export', { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryValueReportService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryValueReportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryValueReportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class InventoryValueReportComponent extends TechlifyListingControllerInterface {
+    service;
+    activatedRoute;
+    requestHelperService;
+    formBuilder;
+    displayedColumns = [
+        '#',
+        'Product',
+        'Description',
+        'Categories',
+        'Available Stock',
+        'Average Price',
+        'Inventory Value',
+        'Last Purchase Price',
+        'Inventory Value Based On Last Purchase Price',
+    ];
+    totalInventoryValue = 0;
+    isExporting = false;
+    constructor(service, activatedRoute, requestHelperService, formBuilder) {
+        super();
+        this.service = service;
+        this.activatedRoute = activatedRoute;
+        this.requestHelperService = requestHelperService;
+        this.formBuilder = formBuilder;
+        this.filterForm = this.formBuilder.group({
+            category_ids: [''],
+            search: [''],
+            sort_by: ['id|desc'],
+        });
+    }
+    ngOnInit() {
+        this.updateFormWithQueryParams();
+        this.subscribeToFormChanges();
+        this.subscribeToRouteChanges();
+    }
+    loadData() {
+        const params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+            page: this.page,
+            perPage: this.perPage,
+            with: 'categories,lastStockReceipt',
+        };
+        this.isWorking = true;
+        this.service.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models?.concat(response?.data);
+                this.isWorking = false;
+                this.models.forEach((model) => {
+                    this.totalInventoryValue += model?.inventory_value;
+                });
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    updateFormWithQueryParams() {
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            category_ids: { multiple: true },
+        });
+    }
+    subscribeToFormChanges() {
+        this.filterForm.valueChanges.pipe(debounceTime$1(800)).subscribe({
+            next: () => {
+                this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+            },
+        });
+    }
+    subscribeToRouteChanges() {
+        this.activatedRoute.queryParams.pipe(debounceTime$1(500), distinctUntilChanged()).subscribe(() => {
+            this.reload();
+        });
+    }
+    onSortChange(sort) {
+        let { active, direction } = sort;
+        if (!active)
+            active = 'id';
+        if (!direction)
+            direction = 'desc';
+        this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
+    }
+    export(type = 'excel') {
+        const params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+            page: this.page,
+            perPage: 50000,
+            with: 'categories,lastStockReceipt',
+            export_type: type,
+        };
+        this.isExporting = true;
+        this.service.export(params).subscribe({
+            next: (response) => {
+                this.isExporting = false;
+                window.open(response?.item?.file_link, '_blank');
+            },
+            error: () => (this.isExporting = false),
+        });
+    }
+    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 });
+}
+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,
+                        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" }]
+        }], ctorParameters: () => [{ type: InventoryValueReportService }, { type: i2.ActivatedRoute }, { type: i1.RequestHelperService }, { type: i2$2.FormBuilder }] });
+
+const routes = [
+    {
+        path: 'reports/low-stock-report',
+        component: LowStockReportComponent,
+    },
+    {
+        path: 'reports/inventory-value-report',
+        component: InventoryValueReportComponent,
+    },
+    {
+        path: 'suppliers',
+        loadChildren: () => import('./techlify-inventory-common-supplier.module-CYq-2pV1.mjs').then((m) => m.SupplierModule),
+    },
+    {
+        path: 'locations',
+        loadChildren: () => import('./techlify-inventory-common-location.module-Cwx9mHKE.mjs').then((mod) => mod.LocationModule),
+    },
+    {
+        path: "measures",
+        loadChildren: () => import('./techlify-inventory-common-measure.module-C2v0-n_m.mjs').then((mod) => mod.MeasureModule),
+    },
+    {
+        path: 'stock-issuances',
+        loadChildren: () => import('./techlify-inventory-common-stock-issuances.module-CPccetrp.mjs').then((mod) => mod.StockIssuancesModule),
+    },
+    {
+        path: 'stock-receipts',
+        loadChildren: () => Promise.resolve().then(function () { return stockReceipts_module; }).then((mod) => mod.StockReceiptsModule),
+    },
+    {
+        path: 'categories',
+        loadChildren: () => import('./techlify-inventory-common-category.module-BsvJ6rVx.mjs').then((mod) => mod.CategoryModule),
+    },
+    {
+        path: 'products',
+        loadChildren: () => Promise.resolve().then(function () { return product_module; }).then((mod) => mod.ProductModule),
+    },
+    {
+        path: 'dashboard',
+        component: InventoryDashboardPageComponent,
+    },
+    {
+        path: '**',
+        redirectTo: 'dashboard',
+        pathMatch: 'full',
+    },
+];
+class InventoryCommonRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class LowStockProductsWidgetModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetModule, declarations: [LowStockProductsWidgetComponent], imports: [CommonModule, MaterialModule$1, InfiniteScrollModule, MatProgressBarModule, RouterModule], exports: [LowStockProductsWidgetComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetModule, imports: [CommonModule, MaterialModule$1, InfiniteScrollModule, MatProgressBarModule, RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LowStockProductsWidgetComponent],
+                    imports: [CommonModule, MaterialModule$1, InfiniteScrollModule, MatProgressBarModule, RouterModule],
+                    exports: [LowStockProductsWidgetComponent],
+                }]
+        }] });
+
+class ProductSummaryChartModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartModule, imports: [CommonModule, MaterialModule$1, MatProgressBarModule, GoogleChartsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartModule, imports: [CommonModule, MaterialModule$1, MatProgressBarModule, GoogleChartsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, MaterialModule$1, MatProgressBarModule, GoogleChartsModule],
+                }]
+        }] });
+
+class InventoryCommonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonModule, declarations: [InventoryDashboardPageComponent], imports: [CommonModule,
+            InventoryCommonRoutingModule,
+            MaterialModule$1,
+            LowStockProductsWidgetModule,
+            ProductSummaryChartModule,
+            ProductSummaryChartComponent,
+            ProductQuickSearchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonModule, imports: [CommonModule,
+            InventoryCommonRoutingModule,
+            MaterialModule$1,
+            LowStockProductsWidgetModule,
+            ProductSummaryChartModule,
+            ProductSummaryChartComponent,
+            ProductQuickSearchComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [InventoryDashboardPageComponent],
+                    imports: [
+                        CommonModule,
+                        InventoryCommonRoutingModule,
+                        MaterialModule$1,
+                        LowStockProductsWidgetModule,
+                        ProductSummaryChartModule,
+                        ProductSummaryChartComponent,
+                        ProductQuickSearchComponent,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of inventory-common
+ */
+
+/**
+ * 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-BMNkSTd6.mjs.map