techlify-inventory-common 18.1.0 → 18.2.0

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

@@ -0,0 +1,3143 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, Inject, EventEmitter, Output, forwardRef, 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, Timeline, AuthenticationGuard, SearchableSelectorModule, TimelineFilterModule, MaterialModule, ImportCsvModule, ColumnSelectorModule } from 'ngx-techlify-core';
+import * as i3 from '@angular/material/icon';
+import { 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, CommonModule, NgForOf, CurrencyPipe, DatePipe } from '@angular/common';
+import * as i14 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 i7 from '@angular/material/progress-bar';
+import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i10 from 'ngx-infinite-scroll';
+import { InfiniteScrollModule, InfiniteScrollDirective } from 'ngx-infinite-scroll';
+import * as i2$1 from 'angular-google-charts';
+import { ChartType, GoogleChartsModule } from 'angular-google-charts';
+import * as i7$2 from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormField, MatLabel } from '@angular/material/form-field';
+import * as i9 from '@angular/material/input';
+import { MatInputModule, MatInput } from '@angular/material/input';
+import * as i2$2 from '@angular/forms';
+import { Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormControl } from '@angular/forms';
+import { BehaviorSubject, lastValueFrom, debounceTime as debounceTime$1, distinctUntilChanged } from 'rxjs';
+import * as i13 from '@angular/material/sort';
+import { MatSortHeader, MatSort } from '@angular/material/sort';
+import * as i2$3 from '@angular/material/tooltip';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
+import { __decorate } from 'tslib';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i4$2 from 'ngx-spinner';
+import * as i7$1 from '@angular/material/button';
+import { 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 * as i12 from '@angular/material/select';
+import * as i9$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { HttpParams } from '@angular/common/http';
+import * as i12$1 from '@angular/material/button-toggle';
+import * as i3$1 from '@angular/material/divider';
+
+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\n            [routerLink]=\"['/inventory/products', element?.id, 'view']\"\n            class=\"text-dark\"\n          >\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: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.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: i7.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\n            [routerLink]=\"['/inventory/products', element?.id, 'view']\"\n            class=\"text-dark\"\n          >\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 class=\"w-100\" [height]=\"height\" [type]=\"chart.type\" [data]=\"chart.data\" [columns]=\"chart.columns\"\n            [options]=\"chart.options\">\n        </google-chart>\n    </mat-card-content>\n</mat-card>", 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 class=\"w-100\" [height]=\"height\" [type]=\"chart.type\" [data]=\"chart.data\" [columns]=\"chart.columns\"\n            [options]=\"chart.options\">\n        </google-chart>\n    </mat-card-content>\n</mat-card>" }]
+        }], 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\n            matInput\n            placeholder=\"Title\"\n            formControlName=\"title\"\n            required\n          />\n          <mat-error *ngIf=\"isFieldValid('title')\"\n            >{{ getErrorMessage(\"title\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            placeholder=\"Description\"\n            formControlName=\"description\"\n            required\n          />\n          <mat-error *ngIf=\"isFieldValid('description')\"\n            >{{ getErrorMessage(\"description\") }}\n          </mat-error>\n        </mat-form-field>\n        <div fxFlex=\"100%\" fxLayout fxLayoutGap=\"1rem\">\n          <button\n            mat-button\n            class=\"mt-2\"\n            type=\"button\"\n            (click)=\"dialogRef.close()\"\n          >\n            Cancel\n          </button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">\n            Save\n          </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: i7$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasureFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-measure-form", template: "<div>\n  <form [formGroup]=\"productMeasureForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"text-center\">Create/Update Product Measure</h3>\n    <div fxLayout=\"column\">\n      <div fxLayout=\"column\">\n        <mat-form-field>\n          <input\n            matInput\n            placeholder=\"Title\"\n            formControlName=\"title\"\n            required\n          />\n          <mat-error *ngIf=\"isFieldValid('title')\"\n            >{{ getErrorMessage(\"title\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            placeholder=\"Description\"\n            formControlName=\"description\"\n            required\n          />\n          <mat-error *ngIf=\"isFieldValid('description')\"\n            >{{ getErrorMessage(\"description\") }}\n          </mat-error>\n        </mat-form-field>\n        <div fxFlex=\"100%\" fxLayout fxLayoutGap=\"1rem\">\n          <button\n            mat-button\n            class=\"mt-2\"\n            type=\"button\"\n            (click)=\"dialogRef.close()\"\n          >\n            Cancel\n          </button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">\n            Save\n          </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\n        mat-raised-button\n        class=\"ml-2\"\n        color=\"primary\"\n        (click)=\"modifyProductMeasure()\"\n      >\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\n          matInput\n          placeholder=\"Item Name, Description, etc.\"\n          formControlName=\"search\"\n        />\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\n          *ngFor=\"let column of columnDefinitions\"\n          [value]=\"column.def\"\n          [disabled]=\"!column.isShow\"\n        >\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: i7$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.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\n        mat-raised-button\n        class=\"ml-2\"\n        color=\"primary\"\n        (click)=\"modifyProductMeasure()\"\n      >\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\n          matInput\n          placeholder=\"Item Name, Description, etc.\"\n          formControlName=\"search\"\n        />\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\n          *ngFor=\"let column of columnDefinitions\"\n          [value]=\"column.def\"\n          [disabled]=\"!column.isShow\"\n        >\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: () => [] });
+
+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')\"\n            >{{ getErrorMessage(\"name\") }}\n          </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\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_id\"\n          >\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\"\n            >{{ getErrorMessage(\"type_id\") }}\n          </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')\"\n            >{{ getErrorMessage(\"sku\") }}\n          </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\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-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\n            matInput\n            placeholder=\"Description\"\n            formControlName=\"description\"\n          ></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\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('product measure')\"\n        >\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-measures\"\n            formControlName=\"measure_id\"\n          >\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\"\n            >{{ getErrorMessage(\"measure_id\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <input\n            matInput\n            placeholder=\"Reorder Point\"\n            formControlName=\"reorder_point\"\n            type=\"number\"\n          />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\"\n            >{{ getErrorMessage(\"reorder_point\") }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('initial quantity')\"\n        >\n          <input\n            matInput\n            placeholder=\"Initial Quantity\"\n            formControlName=\"initial_quantity\"\n          />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\"\n            >{{ getErrorMessage(\"initial_quantity\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('initial quantity date')\"\n        >\n          <input\n            matInput\n            [matDatepicker]=\"pickerInitialQuantityDate\"\n            placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\"\n          />\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"pickerInitialQuantityDate\"\n          ></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\n            matInput\n            placeholder=\"Selling Price\"\n            formControlName=\"sale_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\"\n            >{{ getErrorMessage(\"sale_price\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('condition types')\"\n        >\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')\"\n            >{{ getErrorMessage(\"minimum_price\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <input\n            matInput\n            placeholder=\"Maximum Price\"\n            formControlName=\"maximum_price\"\n            type=\"number\"\n            step=\"any\"\n          />\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\n        [disabled]=\"isWorking\"\n        mat-button\n        class=\"mt-2\"\n        type=\"button\"\n        (click)=\"cancelled.emit(true)\"\n      >\n        Cancel\n      </button>\n      <button\n        [disabled]=\"isWorking\"\n        mat-raised-button\n        color=\"primary\"\n        class=\"mt-2\"\n        type=\"submit\"\n      >\n        Save\n      </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: i7$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i10$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i10$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-form", template: "<form [formGroup]=\"productForm\" (submit)=\"save()\">\n  <h3 class=\"text-center\">{{ product?.id ? \"Update\" : \"Create\" }} Product</h3>\n  <div fxLayout=\"column\">\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('basic information')\">\n      <h3><strong>Basic Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('name')\">\n          <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n          <mat-error *ngIf=\"isFieldValid('name')\"\n            >{{ getErrorMessage(\"name\") }}\n          </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\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_id\"\n          >\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\"\n            >{{ getErrorMessage(\"type_id\") }}\n          </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')\"\n            >{{ getErrorMessage(\"sku\") }}\n          </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\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-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\n            matInput\n            placeholder=\"Description\"\n            formControlName=\"description\"\n          ></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\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('product measure')\"\n        >\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-measures\"\n            formControlName=\"measure_id\"\n          >\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\"\n            >{{ getErrorMessage(\"measure_id\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <input\n            matInput\n            placeholder=\"Reorder Point\"\n            formControlName=\"reorder_point\"\n            type=\"number\"\n          />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\"\n            >{{ getErrorMessage(\"reorder_point\") }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('initial quantity')\"\n        >\n          <input\n            matInput\n            placeholder=\"Initial Quantity\"\n            formControlName=\"initial_quantity\"\n          />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\"\n            >{{ getErrorMessage(\"initial_quantity\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('initial quantity date')\"\n        >\n          <input\n            matInput\n            [matDatepicker]=\"pickerInitialQuantityDate\"\n            placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\"\n          />\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"pickerInitialQuantityDate\"\n          ></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\n            matInput\n            placeholder=\"Selling Price\"\n            formControlName=\"sale_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\"\n            >{{ getErrorMessage(\"sale_price\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('condition types')\"\n        >\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')\"\n            >{{ getErrorMessage(\"minimum_price\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <input\n            matInput\n            placeholder=\"Maximum Price\"\n            formControlName=\"maximum_price\"\n            type=\"number\"\n            step=\"any\"\n          />\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\n        [disabled]=\"isWorking\"\n        mat-button\n        class=\"mt-2\"\n        type=\"button\"\n        (click)=\"cancelled.emit(true)\"\n      >\n        Cancel\n      </button>\n      <button\n        [disabled]=\"isWorking\"\n        mat-raised-button\n        color=\"primary\"\n        class=\"mt-2\"\n        type=\"submit\"\n      >\n        Save\n      </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 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\n  (ngSubmit)=\"submit()\"\n  [formGroup]=\"supplierForm\"\n  class=\"mat-typography\"\n>\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\n        autocomplete=\"off\"\n        formControlName=\"company_name\"\n        matInput\n        placeholder=\"Company Name\"\n        required\n      />\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\n        autocomplete=\"off\"\n        formControlName=\"contact_name\"\n        matInput\n        placeholder=\"Contact Name\"\n      />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Types</mat-label>\n      <app-searchable-selector\n        apiUrl=\"api/supplier-types\"\n        formControlName=\"supplier_type_id\"\n        titleField=\"title\"\n      >\n      </app-searchable-selector>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>Phone</mat-label>\n      <input\n        autocomplete=\"off\"\n        formControlName=\"phone\"\n        matInput\n        placeholder=\"Phone\"\n      />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Email</mat-label>\n      <input\n        autocomplete=\"off\"\n        formControlName=\"email\"\n        matInput\n        placeholder=\"Email\"\n        type=\"email\"\n      />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Address</mat-label>\n      <input\n        autocomplete=\"off\"\n        formControlName=\"address\"\n        matInput\n        placeholder=\"Address\"\n      />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <input\n        autocomplete=\"off\"\n        formControlName=\"details\"\n        matInput\n        placeholder=\"Details\"\n      />\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button\n        (click)=\"dialogRef.close()\"\n        [disabled]=\"isWorking\"\n        mat-flat-button\n        type=\"button\"\n      >\n        Cancel\n      </button>\n      <button\n        [disabled]=\"isWorking\"\n        color=\"primary\"\n        mat-raised-button\n        type=\"submit\"\n      >\n        Save\n      </button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.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: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-supplier-form", template: "<form\n  (ngSubmit)=\"submit()\"\n  [formGroup]=\"supplierForm\"\n  class=\"mat-typography\"\n>\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\n        autocomplete=\"off\"\n        formControlName=\"company_name\"\n        matInput\n        placeholder=\"Company Name\"\n        required\n      />\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\n        autocomplete=\"off\"\n        formControlName=\"contact_name\"\n        matInput\n        placeholder=\"Contact Name\"\n      />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Types</mat-label>\n      <app-searchable-selector\n        apiUrl=\"api/supplier-types\"\n        formControlName=\"supplier_type_id\"\n        titleField=\"title\"\n      >\n      </app-searchable-selector>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>Phone</mat-label>\n      <input\n        autocomplete=\"off\"\n        formControlName=\"phone\"\n        matInput\n        placeholder=\"Phone\"\n      />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Email</mat-label>\n      <input\n        autocomplete=\"off\"\n        formControlName=\"email\"\n        matInput\n        placeholder=\"Email\"\n        type=\"email\"\n      />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Address</mat-label>\n      <input\n        autocomplete=\"off\"\n        formControlName=\"address\"\n        matInput\n        placeholder=\"Address\"\n      />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <input\n        autocomplete=\"off\"\n        formControlName=\"details\"\n        matInput\n        placeholder=\"Details\"\n      />\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button\n        (click)=\"dialogRef.close()\"\n        [disabled]=\"isWorking\"\n        mat-flat-button\n        type=\"button\"\n      >\n        Cancel\n      </button>\n      <button\n        [disabled]=\"isWorking\"\n        color=\"primary\"\n        mat-raised-button\n        type=\"submit\"\n      >\n        Save\n      </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\">\n    The payee field is required.\n  </mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.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\">\n    The payee field is required.\n  </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\">\n  {{ stockReceipt?.id ? \"Edit\" : \"Receive\" }} Stock for {{ product?.name }}\n</h3>\n<form\n  [formGroup]=\"form\"\n  class=\"d-flex flex-column gap-1 justify-content-start\"\n  (submit)=\"save()\"\n>\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\n      matInput\n      [matDatepicker]=\"datePicker\"\n      formControlName=\"date\"\n      (focus)=\"datePicker.open()\"\n    />\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\n      [disabled]=\"isWorking\"\n      mat-raised-button\n      color=\"primary\"\n      type=\"submit\"\n    >\n      Save\n    </button>\n    <button\n      [disabled]=\"isWorking\"\n      (click)=\"cancelled.emit()\"\n      mat-flat-button\n      type=\"button\"\n    >\n      Cancel\n    </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: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7$1.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\">\n  {{ stockReceipt?.id ? \"Edit\" : \"Receive\" }} Stock for {{ product?.name }}\n</h3>\n<form\n  [formGroup]=\"form\"\n  class=\"d-flex flex-column gap-1 justify-content-start\"\n  (submit)=\"save()\"\n>\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\n      matInput\n      [matDatepicker]=\"datePicker\"\n      formControlName=\"date\"\n      (focus)=\"datePicker.open()\"\n    />\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\n      [disabled]=\"isWorking\"\n      mat-raised-button\n      color=\"primary\"\n      type=\"submit\"\n    >\n      Save\n    </button>\n    <button\n      [disabled]=\"isWorking\"\n      (click)=\"cancelled.emit()\"\n      mat-flat-button\n      type=\"button\"\n    >\n      Cancel\n    </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\">\n  {{ stockIssuance?.id ? \"Edit\" : \"Issue\" }} Stock for {{ product?.name }}\n</h3>\n<form\n  [formGroup]=\"form\"\n  class=\"d-flex flex-column gap-1 justify-content-start\"\n  (submit)=\"save()\"\n>\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\n      matInput\n      [matDatepicker]=\"datePicker\"\n      formControlName=\"date\"\n      (focus)=\"datePicker.open()\"\n    />\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\n      [disabled]=\"isWorking\"\n      mat-raised-button\n      color=\"primary\"\n      type=\"submit\"\n    >\n      Save\n    </button>\n    <button\n      [disabled]=\"isWorking\"\n      (click)=\"cancelled.emit()\"\n      mat-flat-button\n      type=\"button\"\n    >\n      Cancel\n    </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: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7$1.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\">\n  {{ stockIssuance?.id ? \"Edit\" : \"Issue\" }} Stock for {{ product?.name }}\n</h3>\n<form\n  [formGroup]=\"form\"\n  class=\"d-flex flex-column gap-1 justify-content-start\"\n  (submit)=\"save()\"\n>\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\n      matInput\n      [matDatepicker]=\"datePicker\"\n      formControlName=\"date\"\n      (focus)=\"datePicker.open()\"\n    />\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\n      [disabled]=\"isWorking\"\n      mat-raised-button\n      color=\"primary\"\n      type=\"submit\"\n    >\n      Save\n    </button>\n    <button\n      [disabled]=\"isWorking\"\n      (click)=\"cancelled.emit()\"\n      mat-flat-button\n      type=\"button\"\n    >\n      Cancel\n    </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 Issuance\"\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 Issuance\"\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
+            }] } });
+
+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\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  [class.text-secondary]=\"product\"\n  (click)=\"showForm(addProductForm)\"\n>\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: i3.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\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  [class.text-secondary]=\"product\"\n  (click)=\"showForm(addProductForm)\"\n>\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
+            }] } });
+
+let ProductListComponent = class ProductListComponent {
+    fb;
+    dialog;
+    activatedRoute;
+    productService;
+    requestHelperService;
+    productFormService;
+    filterForm;
+    lastPage;
+    page = 1;
+    perPage = 25;
+    totalItems = 0;
+    currentPage = 1;
+    num_items = 25;
+    routeFilters;
+    products = [];
+    dataSource = new MatTableDataSource();
+    isLoading = false;
+    columnConfig = [
+        { label: '#', def: '#', isSelected: true, isEditable: true },
+        { label: 'Name', def: 'name', isSelected: true, isEditable: true },
+        { label: 'SKU', def: 'sku', isSelected: true, isEditable: true },
+        { label: 'Categories', def: 'categories', isSelected: true, isEditable: true },
+        { label: 'Initial Quantity', def: 'initial_quantity', isSelected: true, isEditable: true },
+        { label: 'Reorder Point', def: 'reorder_point', isSelected: true, isEditable: true },
+        { label: 'Stock Receipts', def: 'stock_receipts', isSelected: true, isEditable: true },
+        { label: 'Stock Issuances', def: 'stock_issuances', isSelected: true, isEditable: true },
+        { label: 'On Hand', def: 'on_hand', isSelected: true, isEditable: true },
+        { label: 'Sale Price', def: 'sale_price', isSelected: true, 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 },
+        { label: 'Actions', def: 'Actions', isSelected: true, isEditable: true },
+    ];
+    selectedColumns = this.columnConfig.filter(col => col.isSelected);
+    get displayedColumns() {
+        return this.selectedColumns.map(col => col.def);
+    }
+    importId;
+    constructor(fb, dialog, activatedRoute, productService, requestHelperService, productFormService) {
+        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.isLoading) {
+                this.reload();
+            }
+        });
+    }
+    loadData() {
+        let params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+        };
+        params.page = this.page;
+        params.perPage = this.perPage;
+        params.num_items = this.num_items + "|" + this.currentPage;
+        params.with = "categories,lastStockReceipt,lastStockIssuance,creator";
+        if (this.importId) {
+            params.import_id = this.importId;
+        }
+        this.isLoading = true;
+        this.productService.index(params).subscribe({
+            next: (res) => {
+                this.isLoading = false;
+                this.dataSource = new MatTableDataSource(this.dataSource.data.concat(res?.data));
+                this.totalItems = res.total;
+                // stop reloading data once data loaded.
+                this.productFormService.listUpdated(false);
+            },
+            error: () => (this.isLoading = false),
+        });
+    }
+    reload() {
+        if (this.isLoading)
+            return;
+        this.dataSource = new MatTableDataSource();
+        this.currentPage = 1;
+        this.loadData();
+    }
+    modifyProduct(model) {
+        const dialogRef = this.dialog.open(ProductFormComponent, {
+            width: "600px",
+            data: {
+                details: model,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.reload();
+            }
+        });
+    }
+    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);
+    }
+    onScroll() {
+        if (this.totalItems > this.dataSource.data.length) {
+            this.currentPage += 1;
+            this.loadData();
+        }
+    }
+    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", ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form\n      [formGroup]=\"filterForm\"\n      class=\"d-flex justify-content-between align-items-center gap-2\"\n    >\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_save\n        </span>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mt-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 style=\"width: 120px\">\n          <input matInput placeholder=\"Product\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\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 style=\"width: 120px\">\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        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Income Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"income_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Expense Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"expense_account_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<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\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\n              class=\"badge bg-secondary\"\n              *ngFor=\"let category of element?.categories\"\n            >\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>\n          Initial Quantity\n        </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>\n          Stock Receipts\n        </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>\n          Stock Issuances\n        </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\n              [product]=\"element\"\n            ></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\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-issue-form-button>\n          </div>\n        </td>\n      </ng-container>\n      <tr\n        mat-header-row\n        *matHeaderRowDef=\"displayedColumns; sticky: true\"\n      ></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\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: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.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: i7.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: "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\n      [formGroup]=\"filterForm\"\n      class=\"d-flex justify-content-between align-items-center gap-2\"\n    >\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_save\n        </span>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mt-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 style=\"width: 120px\">\n          <input matInput placeholder=\"Product\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\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 style=\"width: 120px\">\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        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Income Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"income_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Expense Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"expense_account_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<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\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\n              class=\"badge bg-secondary\"\n              *ngFor=\"let category of element?.categories\"\n            >\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>\n          Initial Quantity\n        </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>\n          Stock Receipts\n        </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>\n          Stock Issuances\n        </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\n              [product]=\"element\"\n            ></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\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-issue-form-button>\n          </div>\n        </td>\n      </ng-container>\n      <tr\n        mat-header-row\n        *matHeaderRowDef=\"displayedColumns; sticky: true\"\n      ></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\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 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\n  [formGroup]=\"filterForm\"\n  fxLayout\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"10px\"\n>\n  <mat-form-field\n    *ngIf=\"filterForm.get('search')\"\n    [appearance]=\"getFilterConfig('appearance', 'search')\"\n  >\n    <mat-label>Search</mat-label>\n    <input\n      formControlName=\"search\"\n      matInput\n      [placeholder]=\"getFilterConfig('placeholder', 'search')\"\n    />\n    <button\n      *ngIf=\"filterForm.value?.search\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('search')\"\n    >\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>{{\n        getFilterConfig(\"label\", \"payment_account_ids\") || \"Payment Account\"\n      }}</mat-label>\n      <app-searchable-selector\n        formControlName=\"payment_account_ids\"\n        [apiUrl]=\"\n          getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'\n        \"\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\n        *ngIf=\"filterForm.value?.customer_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('customer_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"\n      filterForm.get('project_ids') &&\n      getFilterConfig('disabled', 'project_ids') === false\n    \"\n  >\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\n        *ngIf=\"filterForm.value?.project_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('project_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('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\n      *ngIf=\"filterForm.value?.product_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('product_ids')\"\n    >\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\n      *ngIf=\"filterForm.value?.measure_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('measure_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngxPermissionsOnly=\"['supplier.read']\">\n    <mat-form-field\n      *ngIf=\"filterForm.get('supplier_ids')\"\n      [appearance]=\"getFilterConfig('appearance', 'supplier_ids')\"\n    >\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\n        *ngIf=\"filterForm.value?.supplier_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('supplier_ids')\"\n      >\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\n    *ngIf=\"filterForm.get('cost_category_ids')\"\n    style=\"width: 150px\"\n  >\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\n      *ngIf=\"filterForm.value?.milestone_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('milestone_ids')\"\n    >\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\n      apiUrl=\"api/persons\"\n      formControlName=\"team_member_ids\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.team_member_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('team_member_ids')\"\n    >\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]=\"\n        getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')\n      \"\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\n      class=\"mr-2 text-secondary\"\n      *ngIf=\"getFilterConfig('showLabel', 'fixed_asset_document_status')\"\n    >\n      Status\n    </small>\n    <mat-button-toggle-group\n      formControlName=\"fixed_asset_document_status\"\n      [multiple]=\"false\"\n    >\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\n    *ngIf=\"filterForm.get('task_status_ids')\"\n    style=\"width: 150px\"\n  >\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\n      *ngIf=\"filterForm.value?.task_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('task_status_ids')\"\n    >\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: i7$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }], 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\n  [formGroup]=\"filterForm\"\n  fxLayout\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"10px\"\n>\n  <mat-form-field\n    *ngIf=\"filterForm.get('search')\"\n    [appearance]=\"getFilterConfig('appearance', 'search')\"\n  >\n    <mat-label>Search</mat-label>\n    <input\n      formControlName=\"search\"\n      matInput\n      [placeholder]=\"getFilterConfig('placeholder', 'search')\"\n    />\n    <button\n      *ngIf=\"filterForm.value?.search\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('search')\"\n    >\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>{{\n        getFilterConfig(\"label\", \"payment_account_ids\") || \"Payment Account\"\n      }}</mat-label>\n      <app-searchable-selector\n        formControlName=\"payment_account_ids\"\n        [apiUrl]=\"\n          getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'\n        \"\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\n        *ngIf=\"filterForm.value?.customer_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('customer_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"\n      filterForm.get('project_ids') &&\n      getFilterConfig('disabled', 'project_ids') === false\n    \"\n  >\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\n        *ngIf=\"filterForm.value?.project_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('project_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('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\n      *ngIf=\"filterForm.value?.product_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('product_ids')\"\n    >\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\n      *ngIf=\"filterForm.value?.measure_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('measure_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngxPermissionsOnly=\"['supplier.read']\">\n    <mat-form-field\n      *ngIf=\"filterForm.get('supplier_ids')\"\n      [appearance]=\"getFilterConfig('appearance', 'supplier_ids')\"\n    >\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\n        *ngIf=\"filterForm.value?.supplier_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('supplier_ids')\"\n      >\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\n    *ngIf=\"filterForm.get('cost_category_ids')\"\n    style=\"width: 150px\"\n  >\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\n      *ngIf=\"filterForm.value?.milestone_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('milestone_ids')\"\n    >\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\n      apiUrl=\"api/persons\"\n      formControlName=\"team_member_ids\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.team_member_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('team_member_ids')\"\n    >\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]=\"\n        getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')\n      \"\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\n      class=\"mr-2 text-secondary\"\n      *ngIf=\"getFilterConfig('showLabel', 'fixed_asset_document_status')\"\n    >\n      Status\n    </small>\n    <mat-button-toggle-group\n      formControlName=\"fixed_asset_document_status\"\n      [multiple]=\"false\"\n    >\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\n    *ngIf=\"filterForm.get('task_status_ids')\"\n    style=\"width: 150px\"\n  >\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\n      *ngIf=\"filterForm.value?.task_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('task_status_ids')\"\n    >\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 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\n  class=\"material-symbols-outlined cursor-pointer\"\n  (click)=\"showDeleteConfirmModel(deleteModelTemplate)\"\n>\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\n      [disabled]=\"isDeleting\"\n      mat-raised-button\n      type=\"button\"\n      color=\"warn\"\n      (click)=\"delete()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      mat-flat-button\n      mat-dialog-close\n      type=\"button\"\n    >\n      Cancel\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i7$1.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\n  class=\"material-symbols-outlined cursor-pointer\"\n  (click)=\"showDeleteConfirmModel(deleteModelTemplate)\"\n>\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\n      [disabled]=\"isDeleting\"\n      mat-raised-button\n      type=\"button\"\n      color=\"warn\"\n      (click)=\"delete()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      mat-flat-button\n      mat-dialog-close\n      type=\"button\"\n    >\n      Cancel\n    </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;
+    product;
+    listUpdated = new EventEmitter();
+    displayedColumns = [
+        "no",
+        "product",
+        "date",
+        "quantity",
+        "purchase_price",
+        "amount",
+        "particulars",
+        "supplier",
+        "creator",
+        "actions",
+    ];
+    filterConfig = {
+        duration: {
+            label: "Date",
+        },
+    };
+    constructor(stockReceiptService, formBuilder, requestHelperService) {
+        super();
+        this.stockReceiptService = stockReceiptService;
+        this.formBuilder = formBuilder;
+        this.requestHelperService = requestHelperService;
+        this.lastPage = 0;
+        this.filterForm = this.formBuilder.group({
+            product_ids: [""],
+            duration: [Timeline.THIS_MONTH],
+            date_from: [""],
+            date_to: [""],
+            supplier_ids: [""],
+            measure_ids: [""],
+            sort_by: ["date|desc"],
+        });
+    }
+    ngOnInit() {
+        this.filterForm.valueChanges
+            .pipe(debounceTime$1(500))
+            .subscribe({
+            next: () => this.reload(),
+        });
+        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);
+            }
+        }
+    }
+    loadData() {
+        const params = {
+            page: this.page,
+            perPage: this.perPage,
+            with: "creator,supplier,product.measure",
+            ...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) {
+        console.log(sort);
+        let { active, direction } = sort;
+        if (!active) {
+            active = "date";
+        }
+        if (!direction) {
+            direction = "desc";
+            active = "date";
+        }
+        this.filterForm.get("sort_by").setValue(active + "|" + direction);
+    }
+    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 }], 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\n    class=\"d-flex justify-content-between align-items-center gap-3\"\n  >\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n    </div>\n\n    <app-techlify-filter\n      [filterForm]=\"filterForm\"\n      (filterUpdated)=\"reload()\"\n      [filterConfig]=\"filterConfig\"\n    ></app-techlify-filter>\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          <a\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\"\n          >\n            {{ element?.product?.name }}\n          </a>\n        </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\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\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>\n          Purchase Price\n        </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: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: ["filterForm", "filterConfig"], outputs: ["filterUpdated"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7.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: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.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: 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\n    class=\"d-flex justify-content-between align-items-center gap-3\"\n  >\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n    </div>\n\n    <app-techlify-filter\n      [filterForm]=\"filterForm\"\n      (filterUpdated)=\"reload()\"\n      [filterConfig]=\"filterConfig\"\n    ></app-techlify-filter>\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          <a\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\"\n          >\n            {{ element?.product?.name }}\n          </a>\n        </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\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\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>\n          Purchase Price\n        </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 }], 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\n  class=\"material-symbols-outlined cursor-pointer\"\n  (click)=\"showDeleteConfirmModel(deleteModelTemplate)\"\n>\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\n      [disabled]=\"isDeleting\"\n      mat-raised-button\n      type=\"button\"\n      color=\"warn\"\n      (click)=\"delete()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      mat-flat-button\n      mat-dialog-close\n      type=\"button\"\n    >\n      Cancel\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i7$1.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\n  class=\"material-symbols-outlined cursor-pointer\"\n  (click)=\"showDeleteConfirmModel(deleteModelTemplate)\"\n>\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\n      [disabled]=\"isDeleting\"\n      mat-raised-button\n      type=\"button\"\n      color=\"warn\"\n      (click)=\"delete()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      mat-flat-button\n      mat-dialog-close\n      type=\"button\"\n    >\n      Cancel\n    </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;
+    product;
+    issuableType;
+    issuableId;
+    label = "Stock Issuances";
+    listUpdated = new EventEmitter();
+    filterConfig = {
+        duration: {
+            label: "Date",
+        },
+        search: {
+            placeholder: "Search Product Name, SKU, Description, etc",
+        },
+    };
+    displayedColumns = [
+        "no",
+        "product",
+        "date",
+        "quantity",
+        "related",
+        "particulars",
+        "creator",
+        "actions",
+    ];
+    constructor(formBuilder, requestHelperService, stockIssuanceService) {
+        super();
+        this.formBuilder = formBuilder;
+        this.requestHelperService = requestHelperService;
+        this.stockIssuanceService = stockIssuanceService;
+        this.lastPage = 0;
+        this.filterForm = this.formBuilder.group({
+            duration: [Timeline.THIS_MONTH],
+            date_from: [""],
+            date_to: [""],
+            measure_ids: [""],
+            product_ids: [""],
+            search: [""],
+            sort_by: ["date|desc"],
+        });
+    }
+    ngOnInit() {
+        this.filterForm.valueChanges
+            .pipe(debounceTime$1(500))
+            .subscribe({
+            next: () => this.reload(),
+        });
+        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);
+            }
+        }
+    }
+    loadData() {
+        const params = {
+            page: this.page,
+            perPage: this.perPage,
+            with: "creator,product.measure,issuable.fixedAsset",
+            ...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);
+    }
+    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 }], 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\n    class=\"d-flex justify-content-between align-items-center gap-3\"\n  >\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      ></app-stock-issue-form-button>\n    </div>\n\n    <app-techlify-filter\n      [filterForm]=\"filterForm\"\n      [filterConfig]=\"filterConfig\"\n      (filterUpdated)=\"reload()\"\n    ></app-techlify-filter>\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 Issuances</h3>\n\n      <app-stock-issue-form-button\n        [product]=\"product\"\n        icon=\"add\"\n        (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\n      [dataSource]=\"models\"\n      class=\"w-100\"\n      aria-describedby=\"Stock Issuances\"\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          <a\n            [routerLink]=\"[\n              '/inventory/products/',\n              element?.product?.id,\n              'view'\n            ]\"\n          >\n            {{ element?.product?.name }}\n          </a>\n        </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      <!-- 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\n            class=\"text-dark\"\n            *ngIf=\"element?.issuable\"\n            [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\"\n          >\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\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\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>\n          Purchase Price\n        </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\"\n              [stockIssuance]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"\n            ></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button\n              [stockIssuance]=\"element\"\n              (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: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.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: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: ["filterForm", "filterConfig"], outputs: ["filterUpdated"] }, { 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: "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\n    class=\"d-flex justify-content-between align-items-center gap-3\"\n  >\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      ></app-stock-issue-form-button>\n    </div>\n\n    <app-techlify-filter\n      [filterForm]=\"filterForm\"\n      [filterConfig]=\"filterConfig\"\n      (filterUpdated)=\"reload()\"\n    ></app-techlify-filter>\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 Issuances</h3>\n\n      <app-stock-issue-form-button\n        [product]=\"product\"\n        icon=\"add\"\n        (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\n      [dataSource]=\"models\"\n      class=\"w-100\"\n      aria-describedby=\"Stock Issuances\"\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          <a\n            [routerLink]=\"[\n              '/inventory/products/',\n              element?.product?.id,\n              'view'\n            ]\"\n          >\n            {{ element?.product?.name }}\n          </a>\n        </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      <!-- 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\n            class=\"text-dark\"\n            *ngIf=\"element?.issuable\"\n            [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\"\n          >\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\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\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>\n          Purchase Price\n        </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\"\n              [stockIssuance]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"\n            ></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button\n              [stockIssuance]=\"element\"\n              (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 }], 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\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<ng-template #formTemplate>\n  <form\n    [formGroup]=\"form\"\n    (submit)=\"save()\"\n    mat-dialog-content\n    class=\"d-flex flex-column gap-2\"\n  >\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\n        [disabled]=\"isSaving\"\n        type=\"submit\"\n        mat-raised-button\n        color=\"primary\"\n      >\n        Save\n      </button>\n      <button\n        [disabled]=\"isSaving\"\n        type=\"button\"\n        mat-flat-button\n        mat-dialog-close\n      >\n        Cancel\n      </button>\n    </div>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.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: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.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\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<ng-template #formTemplate>\n  <form\n    [formGroup]=\"form\"\n    (submit)=\"save()\"\n    mat-dialog-content\n    class=\"d-flex flex-column gap-2\"\n  >\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\n        [disabled]=\"isSaving\"\n        type=\"submit\"\n        mat-raised-button\n        color=\"primary\"\n      >\n        Save\n      </button>\n      <button\n        [disabled]=\"isSaving\"\n        type=\"button\"\n        mat-flat-button\n        mat-dialog-close\n      >\n        Cancel\n      </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\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"showDeleteDialog(deleteConfirmDialog)\"\n>\n  delete\n</mat-icon>\n\n<ng-template #deleteConfirmDialog>\n  <h3 mat-dialog-title>Delete Product Tax</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the product tax?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-raised-button\n      color=\"warn\"\n      (click)=\"delete()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: i7$1.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: i3.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\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"showDeleteDialog(deleteConfirmDialog)\"\n>\n  delete\n</mat-icon>\n\n<ng-template #deleteConfirmDialog>\n  <h3 mat-dialog-title>Delete Product Tax</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the product tax?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-raised-button\n      color=\"warn\"\n      (click)=\"delete()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </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\n    class=\"pb-3 d-flex justify-content-between align-items-center gap-3\"\n  >\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\n      [product]=\"product\"\n      (saved)=\"onCreated($event)\"\n    ></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\">\n            {{ element?.tax?.title }} ({{ element?.tax?.code }})\n          </p>\n          <small class=\"text-secondary\"\n            >{{ element?.tax?.value }} - {{ element?.tax?.type?.title }}</small\n          >\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: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.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: i3$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\n    class=\"pb-3 d-flex justify-content-between align-items-center gap-3\"\n  >\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\n      [product]=\"product\"\n      (saved)=\"onCreated($event)\"\n    ></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\">\n            {{ element?.tax?.title }} ({{ element?.tax?.code }})\n          </p>\n          <small class=\"text-secondary\"\n            >{{ element?.tax?.value }} - {{ element?.tax?.type?.title }}</small\n          >\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 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\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"showDeleteDialog(deleteProductDialog)\"\n>\n  delete\n</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\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-raised-button\n      color=\"warn\"\n      (click)=\"deleteProduct()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i7$1.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: i3.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\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"showDeleteDialog(deleteProductDialog)\"\n>\n  delete\n</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\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-raised-button\n      color=\"warn\"\n      (click)=\"deleteProduct()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </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\n    class=\"d-flex justify-content-between align-items-center mb-1 mb-2\"\n  >\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">Product Information</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button\n        [product]=\"product\"\n        (saved)=\"onProductSaved($event)\"\n      ></app-product-form-button>\n      <app-product-delete-button\n        [product]=\"product\"\n        (deleted)=\"deleted.emit()\"\n      ></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"mt-3\">\n    <h3 class=\"mb-1 font-weight-bold\">{{ product?.name }}</h3>\n    <div class=\"d-flex flex-wrap gap-1\">\n      <span\n        class=\"badge badge-primary\"\n        *ngFor=\"let category of product?.categories\"\n      >\n        {{ category?.title }}\n      </span>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-3 d-flex justify-content-between align-items-start\"\n  >\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">SKU</small>\n      <p class=\"mb-0\">{{ product?.sku }}</p>\n    </div>\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Measure</small>\n      <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n    </div>\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Reorder Point</small>\n      <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\"\n  >\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0\">{{ product?.description }}</p>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-5 d-flex justify-content-between align-items-start\"\n  >\n    <div\n      *ngIf=\"stockSummary\"\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\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\n      *ngIf=\"stockSummary\"\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\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  </mat-card-content>\n\n  <mat-card-content\n    *ngIf=\"stockSummary\"\n    class=\"mt-3 d-flex justify-content-center align-items-center\"\n  >\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\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</mat-card>\n", 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: i3$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\n    class=\"d-flex justify-content-between align-items-center mb-1 mb-2\"\n  >\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">Product Information</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button\n        [product]=\"product\"\n        (saved)=\"onProductSaved($event)\"\n      ></app-product-form-button>\n      <app-product-delete-button\n        [product]=\"product\"\n        (deleted)=\"deleted.emit()\"\n      ></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"mt-3\">\n    <h3 class=\"mb-1 font-weight-bold\">{{ product?.name }}</h3>\n    <div class=\"d-flex flex-wrap gap-1\">\n      <span\n        class=\"badge badge-primary\"\n        *ngFor=\"let category of product?.categories\"\n      >\n        {{ category?.title }}\n      </span>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-3 d-flex justify-content-between align-items-start\"\n  >\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">SKU</small>\n      <p class=\"mb-0\">{{ product?.sku }}</p>\n    </div>\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Measure</small>\n      <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n    </div>\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Reorder Point</small>\n      <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\"\n  >\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0\">{{ product?.description }}</p>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-5 d-flex justify-content-between align-items-start\"\n  >\n    <div\n      *ngIf=\"stockSummary\"\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\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\n      *ngIf=\"stockSummary\"\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\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  </mat-card-content>\n\n  <mat-card-content\n    *ngIf=\"stockSummary\"\n    class=\"mt-3 d-flex justify-content-center align-items-center\"\n  >\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\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</mat-card>\n" }]
+        }], 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\n  *ngIf=\"product\"\n  class=\"d-flex justify-content-start align-items-start gap-3\"\n>\n  <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n    <app-product-basic-info\n      [product]=\"product\"\n      #productBasicInfoComponent\n      (deleted)=\"onProductDeleted()\"\n      (saved)=\"onProductUpdated($event)\"\n    ></app-product-basic-info>\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\n      [product]=\"product\"\n      (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"\n    ></app-stock-receipts-list-page>\n\n    <app-stock-issuances-list\n      [product]=\"product\"\n      (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"\n    ></app-stock-issuances-list>\n  </div>\n</div>\n", 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: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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\n  *ngIf=\"product\"\n  class=\"d-flex justify-content-start align-items-start gap-3\"\n>\n  <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n    <app-product-basic-info\n      [product]=\"product\"\n      #productBasicInfoComponent\n      (deleted)=\"onProductDeleted()\"\n      (saved)=\"onProductUpdated($event)\"\n    ></app-product-basic-info>\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\n      [product]=\"product\"\n      (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"\n    ></app-stock-receipts-list-page>\n\n    <app-stock-issuances-list\n      [product]=\"product\"\n      (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"\n    ></app-stock-issuances-list>\n  </div>\n</div>\n" }]
+        }], 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 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], 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] });
+}
+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,
+                    ],
+                    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,
+            StockReceiptFormModule], 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,
+            StockReceiptFormModule] });
+}
+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,
+                        StockReceiptFormModule,
+                    ],
+                }]
+        }] });
+
+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], exports: [StockIssuanceDeleteButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceDeleteButtonModule, imports: [CommonModule, MaterialModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuanceDeleteButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [StockIssuanceDeleteButtonComponent],
+                    imports: [CommonModule, MaterialModule],
+                    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,
+            TechlifyFilterModule,
+            StockIssueFormModule,
+            InfiniteScrollModule,
+            StockIssuanceDeleteButtonModule,
+            MatProgressBarModule,
+            RouterModule], exports: [StockIssuancesListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesListModule, imports: [CommonModule,
+            MaterialModule,
+            TechlifyFilterModule,
+            StockIssueFormModule,
+            InfiniteScrollModule,
+            StockIssuanceDeleteButtonModule,
+            MatProgressBarModule,
+            RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [StockIssuancesListComponent],
+                    imports: [
+                        CommonModule,
+                        MaterialModule,
+                        TechlifyFilterModule,
+                        StockIssueFormModule,
+                        InfiniteScrollModule,
+                        StockIssuanceDeleteButtonModule,
+                        MatProgressBarModule,
+                        RouterModule,
+                    ],
+                    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,
+            ReactiveFormsModule,
+            SearchableSelectorModule], exports: [ProductTaxListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxModule, imports: [CommonModule,
+            MaterialModule,
+            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,
+                        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], imports: [CommonModule,
+            ProductRoutingModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            StockReceiptFormModule,
+            StockIssueFormModule,
+            ImportCsvModule,
+            StockReceiptsModule,
+            StockIssuancesListModule,
+            ProductTaxModule,
+            MaterialModule,
+            MatProgressBarModule,
+            InfiniteScrollModule,
+            FlexModule,
+            ReactiveFormsModule,
+            FormsModule,
+            ColumnSelectorModule], 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,
+            MatProgressBarModule,
+            InfiniteScrollModule,
+            FlexModule,
+            ReactiveFormsModule,
+            FormsModule,
+            ColumnSelectorModule] });
+}
+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,
+                    ],
+                    imports: [
+                        CommonModule,
+                        ProductRoutingModule,
+                        SearchableSelectorModule,
+                        TimelineFilterModule,
+                        StockReceiptFormModule,
+                        StockIssueFormModule,
+                        ImportCsvModule,
+                        StockReceiptsModule,
+                        StockIssuancesListModule,
+                        ProductTaxModule,
+                        MaterialModule,
+                        MatProgressBarModule,
+                        InfiniteScrollModule,
+                        FlexModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        ColumnSelectorModule,
+                    ],
+                    exports: [
+                        ProductFormComponent,
+                        ProductBasicInfoComponent,
+                        ProductFormButtonComponent,
+                    ],
+                }]
+        }] });
+
+var product_module = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ProductModule: ProductModule
+});
+
+class ProductQuickSearchComponent extends TechlifyListingControllerInterface {
+    productService;
+    displayedColumns = ['#', 'Product', 'SKU', 'Type', 'Categories', '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\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\n            [routerLink]=\"['/inventory/products', element?.id, 'view']\"\n            class=\"text-dark\"\n          >\n            {{ element?.name }}\n          </a>\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      <!-- Type Column -->\n      <ng-container matColumnDef=\"Type\">\n        <th mat-header-cell *matHeaderCellDef>Type</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.type?.title }}</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\n              class=\"badge bg-secondary\"\n              *ngFor=\"let category of element?.categories\"\n            >\n              {{ category?.title }}\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- On Hand Column -->\n      <ng-container matColumnDef=\"On Hand\">\n        <th mat-header-cell *matHeaderCellDef>On Hand</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_balance }}\n        </td>\n      </ng-container>\n\n      <!-- 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\n              class=\"cursor-pointer\"\n              matTooltip=\"View\"\n              [routerLink]=\"['/inventory/products', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\"\n            >\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></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>\n", 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\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\n            [routerLink]=\"['/inventory/products', element?.id, 'view']\"\n            class=\"text-dark\"\n          >\n            {{ element?.name }}\n          </a>\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      <!-- Type Column -->\n      <ng-container matColumnDef=\"Type\">\n        <th mat-header-cell *matHeaderCellDef>Type</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.type?.title }}</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\n              class=\"badge bg-secondary\"\n              *ngFor=\"let category of element?.categories\"\n            >\n              {{ category?.title }}\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- On Hand Column -->\n      <ng-container matColumnDef=\"On Hand\">\n        <th mat-header-cell *matHeaderCellDef>On Hand</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_balance }}\n        </td>\n      </ng-container>\n\n      <!-- 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\n              class=\"cursor-pointer\"\n              matTooltip=\"View\"\n              [routerLink]=\"['/inventory/products', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\"\n            >\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></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>\n" }]
+        }], 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;\">\n            inventory_2\n          </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\">\n            arrow_circle_down\n          </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\">\n            arrow_circle_up\n          </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\">\n            description\n          </span>\n          <h3 class=\"mb-0\">Low Stock Report</h3>\n          <span class=\"material-symbols-outlined\">\n            chevron_forward\n          </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\">\n            description\n          </span>\n          <h3 class=\"mb-0\">Inventory Value Report</h3>\n          <span class=\"material-symbols-outlined\">\n            chevron_forward\n          </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: i3.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;\">\n            inventory_2\n          </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\">\n            arrow_circle_down\n          </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\">\n            arrow_circle_up\n          </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\">\n            description\n          </span>\n          <h3 class=\"mb-0\">Low Stock Report</h3>\n          <span class=\"material-symbols-outlined\">\n            chevron_forward\n          </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\">\n            description\n          </span>\n          <h3 class=\"mb-0\">Inventory Value Report</h3>\n          <span class=\"material-symbols-outlined\">\n            chevron_forward\n          </span>\n        </a>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: ProductService }] });
+
+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: "<ng-container\n  *ngIf=\"product?.categories?.length > 0\"\n  class=\"d-flex justify-content-start align-items-center gap-1\"\n>\n  <span class=\"badge bg-primary-lighter\" *ngFor=\"let category of product?.categories\">\n    {{ category?.title }}\n  </span>\n</ng-container>\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: "<ng-container\n  *ngIf=\"product?.categories?.length > 0\"\n  class=\"d-flex justify-content-start align-items-center gap-1\"\n>\n  <span class=\"badge bg-primary-lighter\" *ngFor=\"let category of product?.categories\">\n    {{ category?.title }}\n  </span>\n</ng-container>\n" }]
+        }], propDecorators: { product: [{
+                type: Input
+            }] } });
+
+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\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_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 class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table [dataSource]=\"models\" class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\n        matSort (matSortChange)=\"onSortChange($event)\"\n      >\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\n              [routerLink]=\"['/inventory/products', element?.id, 'view']\"\n              class=\"text-dark\"\n            >\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>\n            Last Purchase\n          </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 }} -\n              {{ element?.last_stock_receipt?.quantity }} {{ 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\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_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 class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table [dataSource]=\"models\" class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\n        matSort (matSortChange)=\"onSortChange($event)\"\n      >\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\n              [routerLink]=\"['/inventory/products', element?.id, 'view']\"\n              class=\"text-dark\"\n            >\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>\n            Last Purchase\n          </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 }} -\n              {{ element?.last_stock_receipt?.quantity }} {{ 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\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_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 class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table [dataSource]=\"models\" class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\n        matSort (matSortChange)=\"onSortChange($event)\"\n      >\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\n              [routerLink]=\"['/inventory/products', element?.id, 'view']\"\n              class=\"text-dark\"\n            >\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?.last_stock_receipt?.amount ?? 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\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_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 class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table [dataSource]=\"models\" class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\"\n        matSort (matSortChange)=\"onSortChange($event)\"\n      >\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\n              [routerLink]=\"['/inventory/products', element?.id, 'view']\"\n              class=\"text-dark\"\n            >\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?.last_stock_receipt?.amount ?? 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-CFDwJ-TS.mjs').then((m) => m.SupplierModule),
+    },
+    {
+        path: "measures",
+        loadChildren: () => import('./techlify-inventory-common-measure.module-CZHhYoQd.mjs').then((mod) => mod.MeasureModule),
+    },
+    {
+        path: "stock-issuances",
+        loadChildren: () => import('./techlify-inventory-common-stock-issuances.module-BjPbzqUW.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-BKEBFEeZ.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,
+            InfiniteScrollModule,
+            MatProgressBarModule,
+            RouterModule], exports: [LowStockProductsWidgetComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetModule, imports: [CommonModule,
+            MaterialModule,
+            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,
+                        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,
+            MatProgressBarModule,
+            GoogleChartsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartModule, imports: [CommonModule,
+            MaterialModule,
+            MatProgressBarModule,
+            GoogleChartsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MaterialModule,
+                        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,
+            LowStockProductsWidgetModule,
+            ProductSummaryChartModule,
+            ProductSummaryChartComponent,
+            ProductQuickSearchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonModule, imports: [CommonModule,
+            InventoryCommonRoutingModule,
+            MaterialModule,
+            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,
+                        LowStockProductsWidgetModule,
+                        ProductSummaryChartModule,
+                        ProductSummaryChartComponent,
+                        ProductQuickSearchComponent,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of inventory-common
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InventoryCommonRoutingModule as I, SupplierFormComponent as S, TechlifyFormService as T, SupplierService as a, TechlifyFilterComponent as b, TechlifyFilterModule as c, StockIssuancesListComponent as d, StockReceiptFormModule as e, StockIssueFormModule as f, StockIssuancesListModule as g, InventoryCommonModule as h, StockSummaryService as i };
+//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-CYiCJfk9.mjs.map