techlify-inventory-common 18.8.1 → 18.10.0

package/fesm2022/{techlify-inventory-common-techlify-inventory-common-KJHI_roN.mjs → techlify-inventory-common-techlify-inventory-common-BBi2hKoE.mjs}

@@ -4,7 +4,7 @@ import * as i4$1 from '@angular/router';
 import { RouterModule, RouterLink, RouterLinkActive } from '@angular/router';
 import moment from 'moment';
 import * as i1 from 'ngx-techlify-core';
-import { TechlifyServiceBaseClass, TechlifyListingControllerInterface, TechlifyFormComponentInterface, SearchableSelectorModule, AuthenticationGuard, ImportCsvModule, TimelineFilterModule, MaterialModule as MaterialModule$1, ColumnSelectorModule } from 'ngx-techlify-core';
+import { TechlifyServiceBaseClass, TechlifyListingControllerInterface, TechlifyFormComponentInterface, SearchableSelectorModule, AuthenticationGuard, ImportCsvModule, TimelineFilterModule, MaterialModule as MaterialModule$1, ColumnSelectorModule, ActionPopupComponent, AuditLogForModelModule, NoteModule } from 'ngx-techlify-core';
 import * as i8$1 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i4 from '@angular/material/card';
@@ -70,11 +70,12 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatStepperModule } from '@angular/material/stepper';
+import * as i6$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTreeModule } from '@angular/material/tree';
 import moment$1 from 'moment/moment';
-import * as i13 from 'ngx-permissions';
+import * as i5$2 from 'ngx-permissions';
 import { NgxPermissionsModule } from 'ngx-permissions';
 
 class ProductSummaryService extends TechlifyServiceBaseClass {
@@ -464,9 +465,15 @@ class LocationService extends TechlifyServiceBaseClass {
     count() {
         return this.index().pipe(map((res) => res.data.length));
     }
+    /**
+     * @todo remove this function from here
+     */
     productStatistics(model, params) {
         return this.httpService.get(`api/inventory-locations/${model.id}/product-statistics`, { params });
     }
+    updateStatus(model) {
+        return this.httpService.put(`api/inventory-locations/${model.id}/update-status`, { status_id: model.status_id });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationService, providedIn: 'root' });
 }
@@ -1355,11 +1362,11 @@ class ProductFormComponent {
         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$1.FormBuilder }, { token: i1.FormValidatorService }, { token: i1.AlertService }, { token: i5.DatePipe }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductFormComponent, selector: "app-product-form", inputs: { product: "product", displayedFormFields: "displayedFormFields", displayedFormSections: "displayedFormSections" }, outputs: { saved: "saved", cancelled: "cancelled" }, ngImport: i0, template: "<form [formGroup]=\"productForm\" (submit)=\"save()\">\n  <h3 class=\"text-center\">{{ product?.id ? 'Update' : 'Create' }} Product</h3>\n  <div fxLayout=\"column\">\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('basic information')\">\n      <h3><strong>Basic Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('name')\">\n          <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n          <mat-error *ngIf=\"isFieldValid('name')\">{{ getErrorMessage('name') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product type')\">\n          <mat-label>Product Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"> </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\">{{ getErrorMessage('type_id') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sku')\">\n          <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n          <mat-error *ngIf=\"isFieldValid('sku')\">{{ getErrorMessage('sku') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('category_ids')\">\n            {{ getErrorMessage('category_ids') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"100%\" *ngIf=\"isFormFieldShown('description')\">\n          <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('inventory information')\">\n      <h3><strong>Inventory Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product measure')\">\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\">{{ getErrorMessage('measure_id') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\">{{ getErrorMessage('reorder_point') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity')\">\n          <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\">{{ getErrorMessage('initial_quantity') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity date')\">\n          <input\n            matInput\n            [matDatepicker]=\"pickerInitialQuantityDate\"\n            placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n          <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n          <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\"\n            >{{ getErrorMessage('initial_quantity_date') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('sales information')\">\n      <h3><strong>Sale Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sales price')\">\n          <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\" step=\"any\" />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\">{{ getErrorMessage('sale_price') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('condition types')\">\n          <mat-label>Condition</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/condition-types\"\n            formControlName=\"condition_type_id\"\n          ></app-searchable-selector>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('minimum price')\">\n          <input\n            matInput\n            placeholder=\"Minimum Price\"\n            formControlName=\"minimum_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('minimum_price')\">{{ getErrorMessage('minimum_price') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n        </mat-form-field>\n      </div>\n    </div>\n    <!--    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('accounts information')\">-->\n    <!--      <h3><strong>Accounts Information</strong></h3>-->\n    <!--      <div fxLayout fxLayoutGap=\"0.5rem\">-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('income account')\">-->\n    <!--          <mat-label>Income Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"income_account_id\"> </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('expense account')\">-->\n    <!--          <mat-label>Expense Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"expense_account_id\">-->\n    <!--          </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--      </div>-->\n    <!--    </div>-->\n    <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"cancelled.emit(true)\">\n        Cancel\n      </button>\n      <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i10.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.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.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.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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+    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\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('name')\">\n          <mat-label>Name</mat-label>\n          <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n          <mat-error *ngIf=\"isFieldValid('name')\">{{ getErrorMessage('name') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product type')\">\n          <mat-label>Product Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"> </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\">{{ getErrorMessage('type_id') }} </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sku')\">\n          <mat-label>SKU</mat-label>\n          <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n          <mat-error *ngIf=\"isFieldValid('sku')\">{{ getErrorMessage('sku') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('category_ids')\">\n            {{ getErrorMessage('category_ids') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"100%\" *ngIf=\"isFormFieldShown('description')\">\n          <mat-label>Description</mat-label>\n          <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('inventory information')\">\n      <h3><strong>Inventory Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product measure')\">\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\">{{ getErrorMessage('measure_id') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <mat-label>Reorder Point</mat-label>\n          <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\">{{ getErrorMessage('reorder_point') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity')\">\n          <mat-label>Initial Quantity</mat-label>\n          <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\">{{ getErrorMessage('initial_quantity') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity date')\">\n          <mat-label>Initial Quantity Date</mat-label>\n          <input matInput [matDatepicker]=\"pickerInitialQuantityDate\" placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\" />\n          <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n          <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n          <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\">{{ 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          <mat-label>Selling Price</mat-label>\n          <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\" step=\"any\" />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\">{{ getErrorMessage('sale_price') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('condition types')\">\n          <mat-label>Condition</mat-label>\n          <app-searchable-selector apiUrl=\"api/condition-types\"\n            formControlName=\"condition_type_id\"></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          <mat-label>Minimum Price</mat-label>\n          <input matInput placeholder=\"Minimum Price\" formControlName=\"minimum_price\" required type=\"number\"\n            step=\"any\" />\n          <mat-error *ngIf=\"isFieldValid('minimum_price')\">{{ getErrorMessage('minimum_price') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <mat-label>Maximum Price</mat-label>\n          <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"cancelled.emit(true)\">\n        Cancel\n      </button>\n      <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n    </div>\n  </div>\n</form>", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i10.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.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.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.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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-product-form', template: "<form [formGroup]=\"productForm\" (submit)=\"save()\">\n  <h3 class=\"text-center\">{{ product?.id ? 'Update' : 'Create' }} Product</h3>\n  <div fxLayout=\"column\">\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('basic information')\">\n      <h3><strong>Basic Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('name')\">\n          <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n          <mat-error *ngIf=\"isFieldValid('name')\">{{ getErrorMessage('name') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product type')\">\n          <mat-label>Product Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"> </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\">{{ getErrorMessage('type_id') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sku')\">\n          <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n          <mat-error *ngIf=\"isFieldValid('sku')\">{{ getErrorMessage('sku') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('category_ids')\">\n            {{ getErrorMessage('category_ids') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"100%\" *ngIf=\"isFormFieldShown('description')\">\n          <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('inventory information')\">\n      <h3><strong>Inventory Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product measure')\">\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\">{{ getErrorMessage('measure_id') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\">{{ getErrorMessage('reorder_point') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity')\">\n          <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\">{{ getErrorMessage('initial_quantity') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity date')\">\n          <input\n            matInput\n            [matDatepicker]=\"pickerInitialQuantityDate\"\n            placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\"\n          />\n          <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n          <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n          <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\"\n            >{{ getErrorMessage('initial_quantity_date') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('sales information')\">\n      <h3><strong>Sale Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sales price')\">\n          <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\" step=\"any\" />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\">{{ getErrorMessage('sale_price') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('condition types')\">\n          <mat-label>Condition</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/condition-types\"\n            formControlName=\"condition_type_id\"\n          ></app-searchable-selector>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('minimum price')\">\n          <input\n            matInput\n            placeholder=\"Minimum Price\"\n            formControlName=\"minimum_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('minimum_price')\">{{ getErrorMessage('minimum_price') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n        </mat-form-field>\n      </div>\n    </div>\n    <!--    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('accounts information')\">-->\n    <!--      <h3><strong>Accounts Information</strong></h3>-->\n    <!--      <div fxLayout fxLayoutGap=\"0.5rem\">-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('income account')\">-->\n    <!--          <mat-label>Income Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"income_account_id\"> </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('expense account')\">-->\n    <!--          <mat-label>Expense Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"expense_account_id\">-->\n    <!--          </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--      </div>-->\n    <!--    </div>-->\n    <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"cancelled.emit(true)\">\n        Cancel\n      </button>\n      <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n    </div>\n  </div>\n</form>\n" }]
+            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\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('name')\">\n          <mat-label>Name</mat-label>\n          <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n          <mat-error *ngIf=\"isFieldValid('name')\">{{ getErrorMessage('name') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product type')\">\n          <mat-label>Product Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"> </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\">{{ getErrorMessage('type_id') }} </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sku')\">\n          <mat-label>SKU</mat-label>\n          <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n          <mat-error *ngIf=\"isFieldValid('sku')\">{{ getErrorMessage('sku') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('category_ids')\">\n            {{ getErrorMessage('category_ids') }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"100%\" *ngIf=\"isFormFieldShown('description')\">\n          <mat-label>Description</mat-label>\n          <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('inventory information')\">\n      <h3><strong>Inventory Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product measure')\">\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\">{{ getErrorMessage('measure_id') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <mat-label>Reorder Point</mat-label>\n          <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\">{{ getErrorMessage('reorder_point') }} </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity')\">\n          <mat-label>Initial Quantity</mat-label>\n          <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\">{{ getErrorMessage('initial_quantity') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('initial quantity date')\">\n          <mat-label>Initial Quantity Date</mat-label>\n          <input matInput [matDatepicker]=\"pickerInitialQuantityDate\" placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\" />\n          <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n          <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n          <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\">{{ 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          <mat-label>Selling Price</mat-label>\n          <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\" step=\"any\" />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\">{{ getErrorMessage('sale_price') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('condition types')\">\n          <mat-label>Condition</mat-label>\n          <app-searchable-selector apiUrl=\"api/condition-types\"\n            formControlName=\"condition_type_id\"></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          <mat-label>Minimum Price</mat-label>\n          <input matInput placeholder=\"Minimum Price\" formControlName=\"minimum_price\" required type=\"number\"\n            step=\"any\" />\n          <mat-error *ngIf=\"isFieldValid('minimum_price')\">{{ getErrorMessage('minimum_price') }} </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <mat-label>Maximum Price</mat-label>\n          <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"cancelled.emit(true)\">\n        Cancel\n      </button>\n      <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n    </div>\n  </div>\n</form>" }]
         }], ctorParameters: () => [{ type: ProductService }, { type: i2$1.FormBuilder }, { type: i1.FormValidatorService }, { type: i1.AlertService }, { type: i5.DatePipe }, { type: ProductFormService }], propDecorators: { saved: [{
                 type: Output
             }], cancelled: [{
@@ -1622,14 +1629,14 @@ let ProductListComponent = class ProductListComponent extends TechlifyListingCon
         this.exportInProgress = hideColumns;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: i2$1.FormBuilder }, { token: i1$1.MatDialog }, { token: i4$1.ActivatedRoute }, { token: ProductService }, { token: i1.RequestHelperService }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, selector: "app-product-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button class=\"mt-2\"></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n          file_upload\n        </span>\n        <app-export-to-excel-button tableId=\"productTable\" fileName=\"products\" (onExportStart)=\"handleExport(true)\" (onExportEnd)=\"handleExport(false)\"></app-export-to-excel-button>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mb-2 d-print-none\"\n          [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"\n        ></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<div class=\"d-flex justify-content-start gap-3\">\n  <mat-card [style.width]=\"selection.isEmpty() ? '100%' : '85%'\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        [fromRoot]=\"true\"\n        matSort\n        (matSortChange)=\"sortColumn($event)\"\n        matSortDisableClear=\"true\"\n        aria-describedby=\"Products List\"\n        id=\"productTable\"\n      >\n        <!-- # Column -->\n        <ng-container matColumnDef=\"#\">\n          <th mat-header-cell *matHeaderCellDef>#</th>\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n              <small class=\"text-secondary\" *ngIf=\"element.type && !exportInProgress\">\n                {{ element.type?.title }}\n              </small>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.type?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Categories Column -->\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n            <div\n              *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n            >\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- SKU Column -->\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n        </ng-container>\n        \n        <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        <!-- Initial Quantity Column -->\n        <ng-container matColumnDef=\"initial_quantity\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Initial Quantity</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n              on {{ element?.initial_quantity_date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Receipts Column -->\n        <ng-container matColumnDef=\"stock_receipts\">\n          <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>Stock Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt && !exportInProgress\">\n              Latest on {{ element?.last_stock_receipt?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Receipt Date Column -->\n        <ng-container matColumnDef=\"last_stock_receipt_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Receipt Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- Stock Issuances Column -->\n        <ng-container matColumnDef=\"stock_issuances\">\n          <th mat-header-cell mat-sort-header=\"stock_issuances_sum_quantity\" *matHeaderCellDef>Stock Issuances</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_issuances_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issuance && !exportInProgress\">\n              Latest on {{ element?.last_stock_issuance?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Issue Date Column -->\n        <ng-container matColumnDef=\"last_stock_issue_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Issue Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_issuance?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- On Hand Column -->\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell mat-sort-header='stock_on_hand' *matHeaderCellDef>On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_balance }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"measure\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Measure</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.measure?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Reorder Point Column -->\n        <ng-container matColumnDef=\"reorder_point\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.reorder_point }}\n          </td>\n        </ng-container>\n\n        <!-- Selling Price Column -->\n        <ng-container matColumnDef=\"sale_price\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.sale_price | currency }}\n          </td>\n        </ng-container>\n\n        <!-- Income Account Column -->\n        <ng-container matColumnDef=\"income_account\">\n          <th mat-header-cell *matHeaderCellDef>Income Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.income_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Expense Account Column -->\n        <ng-container matColumnDef=\"expense_account\">\n          <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.expense_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Creator Column -->\n        <ng-container matColumnDef=\"creator\">\n          <th mat-header-cell *matHeaderCellDef>Creator</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n            <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n          </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"Actions\">\n          <th mat-header-cell *matHeaderCellDef>Actions</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"text-secondary d-flex gap-1\">\n              <app-product-form-button [product]=\"element\"></app-product-form-button>\n              <mat-icon\n                class=\"cursor-pointer\"\n                matTooltip=\"View\"\n                [routerLink]=\"[element.id, 'view']\"\n                routerLinkActive=\"route-link-active\"\n              >\n                remove_red_eye\n              </mat-icon>\n\n              <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n              <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"Select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllRowsSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllRowsSelected()\"\n                          [aria-label]=\"checkboxLabel()\">\n            </mat-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"$event ? selection.toggle(row) : null\"\n                          [checked]=\"selection.isSelected(row)\"\n                          [aria-label]=\"checkboxLabel(row)\">\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n  <mat-card\n    *ngIf=\"!selection.isEmpty()\"\n    style=\"width: calc(15% - 1rem)\"\n  >\n    <mat-card-content>\n      <app-product-batch-update-form [selection]=\"selection\" (updated)=\"reload()\"></app-product-batch-update-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i15.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: ExportToExcelButtonComponent, selector: "app-export-to-excel-button", inputs: ["tableId", "fileName"], outputs: ["onExportStart", "onExportEnd"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductBatchUpdateFormComponent, selector: "app-product-batch-update-form", inputs: ["selection"], outputs: ["updated"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, selector: "app-product-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button class=\"mt-2\"></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n          file_upload\n        </span>\n        <app-export-to-excel-button tableId=\"productTable\" fileName=\"products\" (onExportStart)=\"handleExport(true)\" (onExportEnd)=\"handleExport(false)\"></app-export-to-excel-button>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mb-2 d-print-none\"\n          [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"\n        ></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<div class=\"d-flex justify-content-start gap-3\">\n  <mat-card [style.width]=\"selection.isEmpty() ? '100%' : '85%'\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        [fromRoot]=\"true\"\n        matSort\n        (matSortChange)=\"sortColumn($event)\"\n        matSortDisableClear=\"true\"\n        aria-describedby=\"Products List\"\n        id=\"productTable\"\n      >\n        <!-- # Column -->\n        <ng-container matColumnDef=\"#\">\n          <th mat-header-cell *matHeaderCellDef>#</th>\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n              <small class=\"text-secondary\" *ngIf=\"element.type && !exportInProgress\">\n                {{ element.type?.title }}\n              </small>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.type?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Categories Column -->\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n            <div\n              *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n            >\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- SKU Column -->\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n        </ng-container>\n        \n        <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        <!-- Initial Quantity Column -->\n        <ng-container matColumnDef=\"initial_quantity\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Initial Quantity</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n              on {{ element?.initial_quantity_date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Receipts Column -->\n        <ng-container matColumnDef=\"stock_receipts\">\n          <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>Stock Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt && !exportInProgress\">\n              Latest on {{ element?.last_stock_receipt?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Receipt Date Column -->\n        <ng-container matColumnDef=\"last_stock_receipt_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Receipt Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- Stock Issuances Column -->\n        <ng-container matColumnDef=\"stock_issuances\">\n          <th mat-header-cell mat-sort-header=\"stock_issuances_sum_quantity\" *matHeaderCellDef>Stock Issuances</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_issuances_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issuance && !exportInProgress\">\n              Latest on {{ element?.last_stock_issuance?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Issue Date Column -->\n        <ng-container matColumnDef=\"last_stock_issue_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Issue Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_issuance?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- On Hand Column -->\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell mat-sort-header='stock_on_hand' *matHeaderCellDef>On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_on_hand }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"measure\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Measure</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.measure?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Reorder Point Column -->\n        <ng-container matColumnDef=\"reorder_point\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.reorder_point }}\n          </td>\n        </ng-container>\n\n        <!-- Selling Price Column -->\n        <ng-container matColumnDef=\"sale_price\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.sale_price | currency }}\n          </td>\n        </ng-container>\n\n        <!-- Income Account Column -->\n        <ng-container matColumnDef=\"income_account\">\n          <th mat-header-cell *matHeaderCellDef>Income Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.income_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Expense Account Column -->\n        <ng-container matColumnDef=\"expense_account\">\n          <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.expense_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Creator Column -->\n        <ng-container matColumnDef=\"creator\">\n          <th mat-header-cell *matHeaderCellDef>Creator</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n            <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n          </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"Actions\">\n          <th mat-header-cell *matHeaderCellDef>Actions</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"text-secondary d-flex gap-1\">\n              <app-product-form-button [product]=\"element\"></app-product-form-button>\n              <mat-icon\n                class=\"cursor-pointer\"\n                matTooltip=\"View\"\n                [routerLink]=\"[element.id, 'view']\"\n                routerLinkActive=\"route-link-active\"\n              >\n                remove_red_eye\n              </mat-icon>\n\n              <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n              <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"Select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllRowsSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllRowsSelected()\"\n                          [aria-label]=\"checkboxLabel()\">\n            </mat-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"$event ? selection.toggle(row) : null\"\n                          [checked]=\"selection.isSelected(row)\"\n                          [aria-label]=\"checkboxLabel(row)\">\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n  <mat-card\n    *ngIf=\"!selection.isEmpty()\"\n    style=\"width: calc(15% - 1rem)\"\n  >\n    <mat-card-content>\n      <app-product-batch-update-form [selection]=\"selection\" (updated)=\"reload()\"></app-product-batch-update-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i15.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: ExportToExcelButtonComponent, selector: "app-export-to-excel-button", inputs: ["tableId", "fileName"], outputs: ["onExportStart", "onExportEnd"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductBatchUpdateFormComponent, selector: "app-product-batch-update-form", inputs: ["selection"], outputs: ["updated"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 ProductListComponent = __decorate([
     UntilDestroy()
 ], ProductListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-product-list', template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button class=\"mt-2\"></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n          file_upload\n        </span>\n        <app-export-to-excel-button tableId=\"productTable\" fileName=\"products\" (onExportStart)=\"handleExport(true)\" (onExportEnd)=\"handleExport(false)\"></app-export-to-excel-button>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mb-2 d-print-none\"\n          [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"\n        ></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<div class=\"d-flex justify-content-start gap-3\">\n  <mat-card [style.width]=\"selection.isEmpty() ? '100%' : '85%'\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        [fromRoot]=\"true\"\n        matSort\n        (matSortChange)=\"sortColumn($event)\"\n        matSortDisableClear=\"true\"\n        aria-describedby=\"Products List\"\n        id=\"productTable\"\n      >\n        <!-- # Column -->\n        <ng-container matColumnDef=\"#\">\n          <th mat-header-cell *matHeaderCellDef>#</th>\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n              <small class=\"text-secondary\" *ngIf=\"element.type && !exportInProgress\">\n                {{ element.type?.title }}\n              </small>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.type?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Categories Column -->\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n            <div\n              *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n            >\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- SKU Column -->\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n        </ng-container>\n        \n        <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        <!-- Initial Quantity Column -->\n        <ng-container matColumnDef=\"initial_quantity\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Initial Quantity</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n              on {{ element?.initial_quantity_date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Receipts Column -->\n        <ng-container matColumnDef=\"stock_receipts\">\n          <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>Stock Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt && !exportInProgress\">\n              Latest on {{ element?.last_stock_receipt?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Receipt Date Column -->\n        <ng-container matColumnDef=\"last_stock_receipt_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Receipt Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- Stock Issuances Column -->\n        <ng-container matColumnDef=\"stock_issuances\">\n          <th mat-header-cell mat-sort-header=\"stock_issuances_sum_quantity\" *matHeaderCellDef>Stock Issuances</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_issuances_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issuance && !exportInProgress\">\n              Latest on {{ element?.last_stock_issuance?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Issue Date Column -->\n        <ng-container matColumnDef=\"last_stock_issue_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Issue Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_issuance?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- On Hand Column -->\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell mat-sort-header='stock_on_hand' *matHeaderCellDef>On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_balance }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"measure\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Measure</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.measure?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Reorder Point Column -->\n        <ng-container matColumnDef=\"reorder_point\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.reorder_point }}\n          </td>\n        </ng-container>\n\n        <!-- Selling Price Column -->\n        <ng-container matColumnDef=\"sale_price\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.sale_price | currency }}\n          </td>\n        </ng-container>\n\n        <!-- Income Account Column -->\n        <ng-container matColumnDef=\"income_account\">\n          <th mat-header-cell *matHeaderCellDef>Income Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.income_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Expense Account Column -->\n        <ng-container matColumnDef=\"expense_account\">\n          <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.expense_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Creator Column -->\n        <ng-container matColumnDef=\"creator\">\n          <th mat-header-cell *matHeaderCellDef>Creator</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n            <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n          </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"Actions\">\n          <th mat-header-cell *matHeaderCellDef>Actions</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"text-secondary d-flex gap-1\">\n              <app-product-form-button [product]=\"element\"></app-product-form-button>\n              <mat-icon\n                class=\"cursor-pointer\"\n                matTooltip=\"View\"\n                [routerLink]=\"[element.id, 'view']\"\n                routerLinkActive=\"route-link-active\"\n              >\n                remove_red_eye\n              </mat-icon>\n\n              <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n              <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"Select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllRowsSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllRowsSelected()\"\n                          [aria-label]=\"checkboxLabel()\">\n            </mat-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"$event ? selection.toggle(row) : null\"\n                          [checked]=\"selection.isSelected(row)\"\n                          [aria-label]=\"checkboxLabel(row)\">\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n  <mat-card\n    *ngIf=\"!selection.isEmpty()\"\n    style=\"width: calc(15% - 1rem)\"\n  >\n    <mat-card-content>\n      <app-product-batch-update-form [selection]=\"selection\" (updated)=\"reload()\"></app-product-batch-update-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n" }]
+            args: [{ selector: 'app-product-list', template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button class=\"mt-2\"></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n          file_upload\n        </span>\n        <app-export-to-excel-button tableId=\"productTable\" fileName=\"products\" (onExportStart)=\"handleExport(true)\" (onExportEnd)=\"handleExport(false)\"></app-export-to-excel-button>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mb-2 d-print-none\"\n          [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"\n        ></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<div class=\"d-flex justify-content-start gap-3\">\n  <mat-card [style.width]=\"selection.isEmpty() ? '100%' : '85%'\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        [fromRoot]=\"true\"\n        matSort\n        (matSortChange)=\"sortColumn($event)\"\n        matSortDisableClear=\"true\"\n        aria-describedby=\"Products List\"\n        id=\"productTable\"\n      >\n        <!-- # Column -->\n        <ng-container matColumnDef=\"#\">\n          <th mat-header-cell *matHeaderCellDef>#</th>\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n              <small class=\"text-secondary\" *ngIf=\"element.type && !exportInProgress\">\n                {{ element.type?.title }}\n              </small>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.type?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Categories Column -->\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n            <div\n              *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n            >\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- SKU Column -->\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n        </ng-container>\n        \n        <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        <!-- Initial Quantity Column -->\n        <ng-container matColumnDef=\"initial_quantity\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Initial Quantity</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n              on {{ element?.initial_quantity_date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Receipts Column -->\n        <ng-container matColumnDef=\"stock_receipts\">\n          <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>Stock Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt && !exportInProgress\">\n              Latest on {{ element?.last_stock_receipt?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Receipt Date Column -->\n        <ng-container matColumnDef=\"last_stock_receipt_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Receipt Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- Stock Issuances Column -->\n        <ng-container matColumnDef=\"stock_issuances\">\n          <th mat-header-cell mat-sort-header=\"stock_issuances_sum_quantity\" *matHeaderCellDef>Stock Issuances</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_issuances_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issuance && !exportInProgress\">\n              Latest on {{ element?.last_stock_issuance?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Last Stock Issue Date Column -->\n        <ng-container matColumnDef=\"last_stock_issue_date\">\n          <th mat-header-cell *matHeaderCellDef>Last Stock Issue Date</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_issuance?.date | date }}\n          </td>\n        </ng-container>\n\n        <!-- On Hand Column -->\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell mat-sort-header='stock_on_hand' *matHeaderCellDef>On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_on_hand }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"measure\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Measure</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.measure?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Reorder Point Column -->\n        <ng-container matColumnDef=\"reorder_point\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.reorder_point }}\n          </td>\n        </ng-container>\n\n        <!-- Selling Price Column -->\n        <ng-container matColumnDef=\"sale_price\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.sale_price | currency }}\n          </td>\n        </ng-container>\n\n        <!-- Income Account Column -->\n        <ng-container matColumnDef=\"income_account\">\n          <th mat-header-cell *matHeaderCellDef>Income Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.income_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Expense Account Column -->\n        <ng-container matColumnDef=\"expense_account\">\n          <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.expense_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Creator Column -->\n        <ng-container matColumnDef=\"creator\">\n          <th mat-header-cell *matHeaderCellDef>Creator</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n            <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n          </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"Actions\">\n          <th mat-header-cell *matHeaderCellDef>Actions</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"text-secondary d-flex gap-1\">\n              <app-product-form-button [product]=\"element\"></app-product-form-button>\n              <mat-icon\n                class=\"cursor-pointer\"\n                matTooltip=\"View\"\n                [routerLink]=\"[element.id, 'view']\"\n                routerLinkActive=\"route-link-active\"\n              >\n                remove_red_eye\n              </mat-icon>\n\n              <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n              <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"Select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                          [checked]=\"selection.hasValue() && isAllRowsSelected()\"\n                          [indeterminate]=\"selection.hasValue() && !isAllRowsSelected()\"\n                          [aria-label]=\"checkboxLabel()\">\n            </mat-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"$event ? selection.toggle(row) : null\"\n                          [checked]=\"selection.isSelected(row)\"\n                          [aria-label]=\"checkboxLabel(row)\">\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n  <mat-card\n    *ngIf=\"!selection.isEmpty()\"\n    style=\"width: calc(15% - 1rem)\"\n  >\n    <mat-card-content>\n      <app-product-batch-update-form [selection]=\"selection\" (updated)=\"reload()\"></app-product-batch-update-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2$1.FormBuilder }, { type: i1$1.MatDialog }, { type: i4$1.ActivatedRoute }, { type: ProductService }, { type: i1.RequestHelperService }, { type: ProductFormService }] });
 
 class ProductNavBarComponent {
@@ -1764,7 +1771,7 @@ let StockReceiptsListPageComponent = class StockReceiptsListPageComponent extend
         const params = {
             page: this.page,
             perPage: this.perPage,
-            with: "creator,supplier,product.measure,product.categories,location",
+            with: "creator,supplier,product.measure,product.categories,location,stockTransfer",
             ...this.requestHelperService.convertToFormData(this.filterForm.value),
         };
         this.isWorking = true;
@@ -1821,14 +1828,14 @@ let StockReceiptsListPageComponent = class StockReceiptsListPageComponent extend
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsListPageComponent, deps: [{ token: StockReceiptService }, { token: i2$1.FormBuilder }, { token: i1.RequestHelperService }, { token: i4$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockReceiptsListPageComponent, selector: "app-stock-receipts-list-page", inputs: { product: "product", supplierId: "supplierId" }, outputs: { listUpdated: "listUpdated" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n      <app-stock-receipt-form-button [latestLocationId]=\"models.length > 0 ? models[0].location_id : null\"\n        [product]=\"product\" (saved)=\"reload(); listUpdated.emit()\" icon=\"add\"></app-stock-receipt-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipts\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.supplier?.company_name }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1\">\n            <app-stock-receipt-form-button [product]=\"element.product\" [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-receipt-form-button>\n            <app-stock-receipt-delete-button [stockReceipt]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-receipt-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: 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: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: StockReceiptDeleteButtonComponent, selector: "app-stock-receipt-delete-button", inputs: ["stockReceipt"], outputs: ["deleted"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockReceiptsListPageComponent, selector: "app-stock-receipts-list-page", inputs: { product: "product", supplierId: "supplierId" }, outputs: { listUpdated: "listUpdated" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n      <app-stock-receipt-form-button [latestLocationId]=\"models.length > 0 ? models[0].location_id : null\"\n        [product]=\"product\" (saved)=\"reload(); listUpdated.emit()\" icon=\"add\"></app-stock-receipt-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipts\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.supplier?.company_name }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1\">\n            <app-stock-receipt-form-button [product]=\"element.product\" [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-receipt-form-button>\n            <app-stock-receipt-delete-button [stockReceipt]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-receipt-delete-button>\n          </div>\n          \n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: 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: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: StockReceiptDeleteButtonComponent, selector: "app-stock-receipt-delete-button", inputs: ["stockReceipt"], outputs: ["deleted"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 StockReceiptsListPageComponent = __decorate([
     UntilDestroy()
 ], StockReceiptsListPageComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsListPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipts-list-page', template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n      <app-stock-receipt-form-button [latestLocationId]=\"models.length > 0 ? models[0].location_id : null\"\n        [product]=\"product\" (saved)=\"reload(); listUpdated.emit()\" icon=\"add\"></app-stock-receipt-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipts\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.supplier?.company_name }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1\">\n            <app-stock-receipt-form-button [product]=\"element.product\" [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-receipt-form-button>\n            <app-stock-receipt-delete-button [stockReceipt]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-receipt-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
+            args: [{ selector: 'app-stock-receipts-list-page', template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n      <app-stock-receipt-form-button [latestLocationId]=\"models.length > 0 ? models[0].location_id : null\"\n        [product]=\"product\" (saved)=\"reload(); listUpdated.emit()\" icon=\"add\"></app-stock-receipt-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipts\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.supplier?.company_name }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1\">\n            <app-stock-receipt-form-button [product]=\"element.product\" [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-receipt-form-button>\n            <app-stock-receipt-delete-button [stockReceipt]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-receipt-delete-button>\n          </div>\n          \n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: StockReceiptService }, { type: i2$1.FormBuilder }, { type: i1.RequestHelperService }, { type: i4$1.ActivatedRoute }], propDecorators: { product: [{
                 type: Input
             }], supplierId: [{
@@ -1887,6 +1894,8 @@ class StockIssuancesListComponent extends TechlifyListingControllerInterface {
     issuableType;
     issuableId;
     label = 'Stock Issues';
+    showActions = true;
+    showFilters = true;
     listUpdated = new EventEmitter();
     defaultSelectedColumns = [
         'no', 'product', 'sku', 'date', 'quantity', 'measure', 'location', 'related', 'particulars',
@@ -1935,7 +1944,7 @@ class StockIssuancesListComponent extends TechlifyListingControllerInterface {
         const params = {
             page: this.page,
             perPage: this.perPage,
-            with: 'creator,product.measure,issuable.fixedAsset,product.categories,location',
+            with: 'creator,product.measure,issuable.fixedAsset,product.categories,location,stockTransfer',
             ...this.requestHelperService.convertToFormData(this.filterForm.value),
         };
         if (this.issuableId && this.issuableType) {
@@ -1996,11 +2005,11 @@ class StockIssuancesListComponent extends TechlifyListingControllerInterface {
         }, { emitEvent: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesListComponent, deps: [{ token: i2$1.FormBuilder }, { token: i1.RequestHelperService }, { token: StockIssuanceService }, { token: i4$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockIssuancesListComponent, selector: "app-stock-issuances-list", inputs: { product: "product", issuableType: "issuableType", issuableId: "issuableId", label: "label" }, outputs: { listUpdated: "listUpdated" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <app-stock-issue-form-button icon=\"add\" [issuableType]=\"issuableType\" [issuableId]=\"issuableId\" (saved)=\"reload()\"\n        class=\"mt-2\"></app-stock-issue-form-button>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Issues</h3>\n\n      <app-stock-issue-form-button class=\"mt-2\" [product]=\"product\" icon=\"add\"\n        (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issuances\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.supplier?.company_name }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1\">\n            <app-stock-issue-form-button [product]=\"element.product\" [stockIssuance]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button [stockIssuance]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-issuance-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: StockIssuanceDeleteButtonComponent, selector: "app-stock-issuance-delete-button", inputs: ["stockIssuance"], outputs: ["deleted"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
+    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", showActions: "showActions", showFilters: "showFilters" }, outputs: { listUpdated: "listUpdated" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <app-stock-issue-form-button icon=\"add\" [issuableType]=\"issuableType\" [issuableId]=\"issuableId\" (saved)=\"reload()\"\n        class=\"mt-2\"></app-stock-issue-form-button>\n\n      <span *ngIf=\"showActions\" matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector *ngIf=\"showActions\" mode=\"icon\" class=\"mt-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\" *ngIf=\"showFilters\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Issues</h3>\n\n      <app-stock-issue-form-button class=\"mt-2\" [product]=\"product\" icon=\"add\"\n        (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issuances\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.supplier?.company_name }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1\">\n            <app-stock-issue-form-button [product]=\"element.product\" [stockIssuance]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button [stockIssuance]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-issuance-delete-button>\n          </div>\n\n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: StockIssuanceDeleteButtonComponent, selector: "app-stock-issuance-delete-button", inputs: ["stockIssuance"], outputs: ["deleted"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-issuances-list', template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <app-stock-issue-form-button icon=\"add\" [issuableType]=\"issuableType\" [issuableId]=\"issuableId\" (saved)=\"reload()\"\n        class=\"mt-2\"></app-stock-issue-form-button>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector mode=\"icon\" class=\"mb-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Issues</h3>\n\n      <app-stock-issue-form-button class=\"mt-2\" [product]=\"product\" icon=\"add\"\n        (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issuances\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.supplier?.company_name }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1\">\n            <app-stock-issue-form-button [product]=\"element.product\" [stockIssuance]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button [stockIssuance]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-issuance-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
+            args: [{ selector: 'app-stock-issuances-list', template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <app-stock-issue-form-button icon=\"add\" [issuableType]=\"issuableType\" [issuableId]=\"issuableId\" (saved)=\"reload()\"\n        class=\"mt-2\"></app-stock-issue-form-button>\n\n      <span *ngIf=\"showActions\" matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-column-selector *ngIf=\"showActions\" mode=\"icon\" class=\"mt-2 d-print-none\" [columnConfigs]=\"columnConfig\"\n        [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n    </div>\n\n    <form [formGroup]=\"filterForm\" *ngIf=\"showFilters\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\"\n        (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\" [dateFrom]=\"filterForm.value?.date_from\"\n        [dateTo]=\"filterForm.value?.date_to\"></app-timeline-filter>\n\n      <mat-form-field>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"product\" class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Issues</h3>\n\n      <app-stock-issue-form-button class=\"mt-2\" [product]=\"product\" icon=\"add\"\n        (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issuances\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\"\n              [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n              {{ element?.product?.name }}\n            </a>\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.quantity }} {{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.supplier?.company_name }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1\">\n            <app-stock-issue-form-button [product]=\"element.product\" [stockIssuance]=\"element\"\n              (saved)=\"reload(); listUpdated.emit()\"></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button [stockIssuance]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit()\"></app-stock-issuance-delete-button>\n          </div>\n\n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\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$1.FormBuilder }, { type: i1.RequestHelperService }, { type: StockIssuanceService }, { type: i4$1.ActivatedRoute }], propDecorators: { product: [{
                 type: Input
             }], issuableType: [{
@@ -2009,6 +2018,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], label: [{
                 type: Input
+            }], showActions: [{
+                type: Input
+            }], showFilters: [{
+                type: Input
             }], listUpdated: [{
                 type: Output
             }] } });
@@ -2032,6 +2045,7 @@ class StockTransferFormComponent extends TechlifyFormComponentInterface {
     alertService;
     service;
     productId;
+    locationFromId;
     saved = new EventEmitter();
     cancelled = new EventEmitter();
     isWorking = false;
@@ -2090,9 +2104,12 @@ class StockTransferFormComponent extends TechlifyFormComponentInterface {
         if (this.productId) {
             this.form.get('product_id')?.setValue(this.productId);
         }
+        if (this.locationFromId) {
+            this.form.get('location_from_id')?.setValue(this.locationFromId);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: i1.AlertService }, { token: StockTransferService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockTransferFormComponent, isStandalone: true, selector: "app-stock-transfer-form", inputs: { productId: "productId" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  class=\"d-flex flex-column justify-content-start gap-0\"\n  (ngSubmit)=\"save()\"\n>\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input formControlName=\"date\" matInput [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location From</mat-label>\n    <app-searchable-selector\n      formControlName=\"location_from_id\"\n      apiUrl=\"api/inventory-locations\"\n    ></app-searchable-selector>\n    <mat-hint>Where are we taking stock from?</mat-hint>\n    <mat-error *ngIf=\"isFieldValid('location_from_id')\">{{ getErrorMessage('location_from_id') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location To</mat-label>\n    <app-searchable-selector\n      formControlName=\"location_to_id\"\n      apiUrl=\"api/inventory-locations\"\n    ></app-searchable-selector>\n    <mat-hint>Where are we taking stock to?</mat-hint>\n    <mat-error *ngIf=\"isFieldValid('location_to_id')\">{{ getErrorMessage('location_to_id') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput placeholder=\"Quantity\" formControlName=\"quantity\" type=\"number\">\n    <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button [disabled]=\"isWorking\" type=\"button\" mat-flat-button (click)=\"cancelled.emit()\">\n      Cancel\n    </button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockTransferFormComponent, isStandalone: true, selector: "app-stock-transfer-form", inputs: { productId: "productId", locationFromId: "locationFromId" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  class=\"d-flex flex-column justify-content-start gap-0\"\n  (ngSubmit)=\"save()\"\n>\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input formControlName=\"date\" matInput [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location From</mat-label>\n    <app-searchable-selector\n      formControlName=\"location_from_id\"\n      apiUrl=\"api/inventory-locations\"\n    ></app-searchable-selector>\n    <mat-hint>Where are we taking stock from?</mat-hint>\n    <mat-error *ngIf=\"isFieldValid('location_from_id')\">{{ getErrorMessage('location_from_id') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location To</mat-label>\n    <app-searchable-selector\n      formControlName=\"location_to_id\"\n      apiUrl=\"api/inventory-locations\"\n    ></app-searchable-selector>\n    <mat-hint>Where are we taking stock to?</mat-hint>\n    <mat-error *ngIf=\"isFieldValid('location_to_id')\">{{ getErrorMessage('location_to_id') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput placeholder=\"Quantity\" formControlName=\"quantity\" type=\"number\">\n    <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button [disabled]=\"isWorking\" type=\"button\" mat-flat-button (click)=\"cancelled.emit()\">\n      Cancel\n    </button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferFormComponent, decorators: [{
             type: Component,
@@ -2113,6 +2130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], template: "<form\n  [formGroup]=\"form\"\n  class=\"d-flex flex-column justify-content-start gap-0\"\n  (ngSubmit)=\"save()\"\n>\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input formControlName=\"date\" matInput [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location From</mat-label>\n    <app-searchable-selector\n      formControlName=\"location_from_id\"\n      apiUrl=\"api/inventory-locations\"\n    ></app-searchable-selector>\n    <mat-hint>Where are we taking stock from?</mat-hint>\n    <mat-error *ngIf=\"isFieldValid('location_from_id')\">{{ getErrorMessage('location_from_id') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location To</mat-label>\n    <app-searchable-selector\n      formControlName=\"location_to_id\"\n      apiUrl=\"api/inventory-locations\"\n    ></app-searchable-selector>\n    <mat-hint>Where are we taking stock to?</mat-hint>\n    <mat-error *ngIf=\"isFieldValid('location_to_id')\">{{ getErrorMessage('location_to_id') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput placeholder=\"Quantity\" formControlName=\"quantity\" type=\"number\">\n    <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button [disabled]=\"isWorking\" type=\"button\" mat-flat-button (click)=\"cancelled.emit()\">\n      Cancel\n    </button>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: i1.AlertService }, { type: StockTransferService }], propDecorators: { productId: [{
                 type: Input
+            }], locationFromId: [{
+                type: Input
             }], saved: [{
                 type: Output
             }], cancelled: [{
@@ -2122,6 +2141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class StockTransferFormButtonComponent {
     matDialog;
     productId;
+    locationFromId;
     saved = new EventEmitter();
     matDialogRef;
     constructor(matDialog) {
@@ -2135,7 +2155,7 @@ class StockTransferFormButtonComponent {
         this.matDialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferFormButtonComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockTransferFormButtonComponent, isStandalone: true, selector: "app-stock-transfer-form-button", inputs: { productId: "productId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<span\n  class=\"material-symbols-outlined text-secondary cursor-pointer\"\n  matTooltip=\"Stock Transfer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  move_up\n</span>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title>Stock Transfer</h3>\n  <app-stock-transfer-form\n          mat-dialog-content\n          [productId]=\"productId\"\n          (cancelled)=\"matDialogRef.close()\"\n          (saved)=\"onSaved($event)\"\n  ></app-stock-transfer-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: StockTransferFormComponent, selector: "app-stock-transfer-form", inputs: ["productId"], outputs: ["saved", "cancelled"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockTransferFormButtonComponent, isStandalone: true, selector: "app-stock-transfer-form-button", inputs: { productId: "productId", locationFromId: "locationFromId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<span\n  class=\"material-symbols-outlined text-secondary cursor-pointer\"\n  matTooltip=\"Stock Transfer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  move_up\n</span>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title>Stock Transfer</h3>\n  <app-stock-transfer-form\n          mat-dialog-content\n          [locationFromId]=\"locationFromId\"\n          [productId]=\"productId\"\n          (cancelled)=\"matDialogRef.close()\"\n          (saved)=\"onSaved($event)\"\n  ></app-stock-transfer-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: StockTransferFormComponent, selector: "app-stock-transfer-form", inputs: ["productId", "locationFromId"], outputs: ["saved", "cancelled"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferFormButtonComponent, decorators: [{
             type: Component,
@@ -2144,9 +2164,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         StockTransferFormComponent,
                         MatDialogTitle,
                         MatDialogContent
-                    ], template: "<span\n  class=\"material-symbols-outlined text-secondary cursor-pointer\"\n  matTooltip=\"Stock Transfer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  move_up\n</span>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title>Stock Transfer</h3>\n  <app-stock-transfer-form\n          mat-dialog-content\n          [productId]=\"productId\"\n          (cancelled)=\"matDialogRef.close()\"\n          (saved)=\"onSaved($event)\"\n  ></app-stock-transfer-form>\n</ng-template>\n" }]
+                    ], template: "<span\n  class=\"material-symbols-outlined text-secondary cursor-pointer\"\n  matTooltip=\"Stock Transfer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  move_up\n</span>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title>Stock Transfer</h3>\n  <app-stock-transfer-form\n          mat-dialog-content\n          [locationFromId]=\"locationFromId\"\n          [productId]=\"productId\"\n          (cancelled)=\"matDialogRef.close()\"\n          (saved)=\"onSaved($event)\"\n  ></app-stock-transfer-form>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { productId: [{
                 type: Input
+            }], locationFromId: [{
+                type: Input
             }], saved: [{
                 type: Output
             }] } });
@@ -2174,6 +2196,7 @@ class ProductLocationListComponent extends TechlifyListingControllerInterface {
     statisticsService;
     errorHandler;
     product;
+    updated = new EventEmitter();
     constructor(statisticsService, errorHandler) {
         super();
         this.statisticsService = statisticsService;
@@ -2201,7 +2224,7 @@ class ProductLocationListComponent extends TechlifyListingControllerInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductLocationListComponent, deps: [{ token: ProductStatisticsService }, { token: i1.ErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductLocationListComponent, isStandalone: true, selector: "app-product-location-list", inputs: { product: "product" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> location_on </span>\n      <strong class=\"mb-0 text-dark\">Product Locations</strong>\n    </div>\n\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef> Stock </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-stock-transfer-form-button *ngIf=\"element?.id\" [productId]=\"product?.id\"\n            (saved)=\"reload()\"></app-stock-transfer-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: StockTransferFormButtonComponent, selector: "app-stock-transfer-form-button", inputs: ["productId"], outputs: ["saved"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductLocationListComponent, isStandalone: true, selector: "app-product-location-list", inputs: { product: "product" }, outputs: { updated: "updated" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> location_on </span>\n      <strong class=\"mb-0 text-dark\">Product Locations</strong>\n    </div>\n\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef> Stock </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-stock-transfer-form-button *ngIf=\"element?.id\" [locationFromId]=\"element?.id\" [productId]=\"product?.id\"\n            (saved)=\"reload();updated.emit($event)\"></app-stock-transfer-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: StockTransferFormButtonComponent, selector: "app-stock-transfer-form-button", inputs: ["productId", "locationFromId"], outputs: ["saved"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductLocationListComponent, decorators: [{
             type: Component,
@@ -2209,9 +2232,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CommonModule,
                         MaterialModule,
                         StockTransferFormButtonComponent
-                    ], template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> location_on </span>\n      <strong class=\"mb-0 text-dark\">Product Locations</strong>\n    </div>\n\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef> Stock </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-stock-transfer-form-button *ngIf=\"element?.id\" [productId]=\"product?.id\"\n            (saved)=\"reload()\"></app-stock-transfer-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </mat-card-content>\n</mat-card>" }]
+                    ], template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> location_on </span>\n      <strong class=\"mb-0 text-dark\">Product Locations</strong>\n    </div>\n\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef> Stock </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-stock-transfer-form-button *ngIf=\"element?.id\" [locationFromId]=\"element?.id\" [productId]=\"product?.id\"\n            (saved)=\"reload();updated.emit($event)\"></app-stock-transfer-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: ProductStatisticsService }, { type: i1.ErrorHandlerService }], propDecorators: { product: [{
                 type: Input
+            }], updated: [{
+                type: Output
             }] } });
 
 class StockTransferListComponent extends TechlifyListingControllerInterface {
@@ -2265,15 +2290,16 @@ class StockTransferListComponent extends TechlifyListingControllerInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferListComponent, deps: [{ token: StockTransferService }, { token: i2$1.FormBuilder }, { token: i1.ErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockTransferListComponent, isStandalone: true, selector: "app-stock-transfer-list", inputs: { productId: "productId" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Transfers</h3>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Transfers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef>Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <span>{{ element?.date | date }}</span>\n            <span>{{ element?.particulars }}</span>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_from\">\n        <th mat-header-cell *matHeaderCellDef>From</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_from?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_to\">\n        <th mat-header-cell *matHeaderCellDef>To</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_to?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StockTransferListComponent, isStandalone: true, selector: "app-stock-transfer-list", inputs: { productId: "productId" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n     \n      <div class=\"d-flex flex-row gap-2 align-items-center\">\n        <h3 class=\"mb-0\">Stock Transfers</h3>\n        <app-stock-transfer-form-button [productId]=\"productId\" (saved)=\"reload()\"></app-stock-transfer-form-button>\n      </div>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Transfers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef>Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <span>{{ element?.date | date }}</span>\n            <span>{{ element?.particulars }}</span>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_from\">\n        <th mat-header-cell *matHeaderCellDef>From</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_from?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_to\">\n        <th mat-header-cell *matHeaderCellDef>To</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_to?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: StockTransferFormButtonComponent, selector: "app-stock-transfer-form-button", inputs: ["productId", "locationFromId"], outputs: ["saved"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockTransferListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-stock-transfer-list', standalone: true, imports: [
                         CommonModule,
                         MaterialModule,
-                        InfiniteScrollDirective
-                    ], template: "<mat-card>\n  <mat-card-content class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n      <h3 class=\"mb-0\">Stock Transfers</h3>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Transfers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef>Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <span>{{ element?.date | date }}</span>\n            <span>{{ element?.particulars }}</span>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_from\">\n        <th mat-header-cell *matHeaderCellDef>From</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_from?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_to\">\n        <th mat-header-cell *matHeaderCellDef>To</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_to?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
+                        InfiniteScrollDirective,
+                        StockTransferFormButtonComponent
+                    ], template: "<mat-card>\n  <mat-card-content class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n     \n      <div class=\"d-flex flex-row gap-2 align-items-center\">\n        <h3 class=\"mb-0\">Stock Transfers</h3>\n        <app-stock-transfer-form-button [productId]=\"productId\" (saved)=\"reload()\"></app-stock-transfer-form-button>\n      </div>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Transfers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef>Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <span>{{ element?.date | date }}</span>\n            <span>{{ element?.particulars }}</span>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_from\">\n        <th mat-header-cell *matHeaderCellDef>From</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_from?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_to\">\n        <th mat-header-cell *matHeaderCellDef>To</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_to?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: StockTransferService }, { type: i2$1.FormBuilder }, { type: i1.ErrorHandlerService }], propDecorators: { productId: [{
                 type: Input
             }] } });
@@ -2381,11 +2407,11 @@ class ProductBasicInfoComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBasicInfoComponent, deps: [{ token: StockSummaryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: { product: "product" }, outputs: { saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center mb-1 mb-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">{{ product?.name }}</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n      <app-product-delete-button [product]=\"product\" (deleted)=\"deleted.emit()\"></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n\n\n  <mat-card-content class='d-flex flex-column gap-2'>\n    <div class=\"d-flex flex-wrap gap-1 my-3\">\n      <span class=\"badge text-bg-secondary\" *ngFor=\"let category of product?.categories\">\n        {{ category?.title }}\n      </span>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-start\">\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">SKU</small>\n          <p class=\"mb-0\">{{ product?.sku }}</p>\n        </div>\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Type</small>\n          <p class=\"mb-0\">{{ product?.type?.title }}</p>\n        </div>\n      </div>\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Measure</small>\n          <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n        </div>\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <small class=\"text-secondary\">Reorder Point</small>\n            <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\">\n    <div *ngIf=\"product?.description\" class=\"mb-2 d-flex flex-column justify-content-start align-items-start gap-1\">\n      <small class=\"text-secondary\">Description</small>\n      <p class=\"mb-0\">{{ product?.description }}</p>\n    </div>\n\n    <div>\n      <div class=\"mt-2 d-flex justify-content-between align-items-start\">\n\n        <!-- Stock Receipts  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Receipts</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> arrow_downward </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_receipts_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_receipt?.date | date }}\n          </small>\n        </div>\n\n        <!-- Stock Issues  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Issuances</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> ungroup </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_issuances_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_issuance\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_issuance?.date | date }}\n          </small>\n        </div>\n\n\n        <!-- On Hand  -->\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">On Hand</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> inventory_2 </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ product?.stock_on_hand }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductDeleteButtonComponent, selector: "app-product-delete-button", inputs: ["product"], outputs: ["deleted"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: { product: "product" }, outputs: { saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center mb-1 mb-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">{{ product?.name }}</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n      <app-product-delete-button [product]=\"product\" (deleted)=\"deleted.emit()\"></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n\n\n  <mat-card-content class='d-flex flex-column gap-2'>\n    <div class=\"d-flex flex-wrap gap-1 my-3\">\n      <span class=\"badge text-bg-secondary\" *ngFor=\"let category of product?.categories\">\n        {{ category?.title }}\n      </span>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-start\">\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">SKU</small>\n          <p class=\"mb-0\">{{ product?.sku }}</p>\n        </div>\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Initial Quantity</small>\n          <p class=\"mb-0\">{{ product?.initial_quantity }}</p>\n        </div>\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Type</small>\n          <p class=\"mb-0\">{{ product?.type?.title }}</p>\n        </div>\n      </div>\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Measure</small>\n          <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n        </div>\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <small class=\"text-secondary\">Reorder Point</small>\n            <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\">\n    <div *ngIf=\"product?.description\" class=\"mb-2 d-flex flex-column justify-content-start align-items-start gap-1\">\n      <small class=\"text-secondary\">Description</small>\n      <p class=\"mb-0\">{{ product?.description }}</p>\n    </div>\n\n    <div>\n      <div class=\"mt-2 d-flex justify-content-between align-items-start\">\n\n        <!-- Stock Receipts  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Receipts</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> arrow_downward </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_receipts_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_receipt?.date | date }}\n          </small>\n        </div>\n\n        <!-- Stock Issues  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Issues</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> ungroup </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_issuances_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_issuance\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_issuance?.date | date }}\n          </small>\n        </div>\n\n\n        <!-- On Hand  -->\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">On Hand</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> inventory_2 </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ product?.stock_on_hand }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductDeleteButtonComponent, selector: "app-product-delete-button", inputs: ["product"], outputs: ["deleted"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBasicInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-product-basic-info', template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center mb-1 mb-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">{{ product?.name }}</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n      <app-product-delete-button [product]=\"product\" (deleted)=\"deleted.emit()\"></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n\n\n  <mat-card-content class='d-flex flex-column gap-2'>\n    <div class=\"d-flex flex-wrap gap-1 my-3\">\n      <span class=\"badge text-bg-secondary\" *ngFor=\"let category of product?.categories\">\n        {{ category?.title }}\n      </span>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-start\">\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">SKU</small>\n          <p class=\"mb-0\">{{ product?.sku }}</p>\n        </div>\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Type</small>\n          <p class=\"mb-0\">{{ product?.type?.title }}</p>\n        </div>\n      </div>\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Measure</small>\n          <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n        </div>\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <small class=\"text-secondary\">Reorder Point</small>\n            <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\">\n    <div *ngIf=\"product?.description\" class=\"mb-2 d-flex flex-column justify-content-start align-items-start gap-1\">\n      <small class=\"text-secondary\">Description</small>\n      <p class=\"mb-0\">{{ product?.description }}</p>\n    </div>\n\n    <div>\n      <div class=\"mt-2 d-flex justify-content-between align-items-start\">\n\n        <!-- Stock Receipts  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Receipts</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> arrow_downward </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_receipts_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_receipt?.date | date }}\n          </small>\n        </div>\n\n        <!-- Stock Issues  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Issuances</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> ungroup </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_issuances_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_issuance\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_issuance?.date | date }}\n          </small>\n        </div>\n\n\n        <!-- On Hand  -->\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">On Hand</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> inventory_2 </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ product?.stock_on_hand }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>" }]
+            args: [{ selector: 'app-product-basic-info', template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center mb-1 mb-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">{{ product?.name }}</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n      <app-product-delete-button [product]=\"product\" (deleted)=\"deleted.emit()\"></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n\n\n  <mat-card-content class='d-flex flex-column gap-2'>\n    <div class=\"d-flex flex-wrap gap-1 my-3\">\n      <span class=\"badge text-bg-secondary\" *ngFor=\"let category of product?.categories\">\n        {{ category?.title }}\n      </span>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-start\">\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">SKU</small>\n          <p class=\"mb-0\">{{ product?.sku }}</p>\n        </div>\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Initial Quantity</small>\n          <p class=\"mb-0\">{{ product?.initial_quantity }}</p>\n        </div>\n\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Type</small>\n          <p class=\"mb-0\">{{ product?.type?.title }}</p>\n        </div>\n      </div>\n      <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Measure</small>\n          <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n        </div>\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n            <small class=\"text-secondary\">Reorder Point</small>\n            <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\">\n    <div *ngIf=\"product?.description\" class=\"mb-2 d-flex flex-column justify-content-start align-items-start gap-1\">\n      <small class=\"text-secondary\">Description</small>\n      <p class=\"mb-0\">{{ product?.description }}</p>\n    </div>\n\n    <div>\n      <div class=\"mt-2 d-flex justify-content-between align-items-start\">\n\n        <!-- Stock Receipts  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Receipts</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> arrow_downward </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_receipts_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_receipt?.date | date }}\n          </small>\n        </div>\n\n        <!-- Stock Issues  -->\n        <div *ngIf=\"stockSummary\" class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">Stock Issues</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> ungroup </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ stockSummary?.stock_issuances_quantity_sum }}\n            </p>\n          </div>\n          <small *ngIf=\"product?.last_stock_issuance\" class=\"text-secondary w-75\">\n            Latest On {{ product?.last_stock_issuance?.date | date }}\n          </small>\n        </div>\n\n\n        <!-- On Hand  -->\n        <div class=\"d-flex flex-column justify-content-start align-items-start gap-1\">\n          <small class=\"text-secondary\">On Hand</small>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> inventory_2 </span>\n            <p class=\"mb-0\" style=\"font-size: 24px\">\n              {{ product?.stock_on_hand }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: StockSummaryService }], propDecorators: { product: [{
                 type: Input
             }], saved: [{
@@ -2402,6 +2428,9 @@ class ProductViewPageComponent {
     id;
     isLoading;
     productLocationList;
+    stockTransferList;
+    stockReceiptsListPage;
+    stockIssueListPage;
     constructor(productService, activatedRoute, location) {
         this.productService = productService;
         this.activatedRoute = activatedRoute;
@@ -2446,14 +2475,23 @@ class ProductViewPageComponent {
         this.location.back();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductViewPageComponent, deps: [{ token: ProductService }, { token: i4$1.ActivatedRoute }, { token: i5.Location }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductViewPageComponent, selector: "app-product-view-page", viewQueries: [{ propertyName: "productLocationList", first: true, predicate: ["productLocationList"], descendants: true }], ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n  <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n    <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n      (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n    <app-product-location-list [product]=\"product\" #productLocationList></app-product-location-list>\n\n    <!-- <app-product-tax-list [product]=\"product\"></app-product-tax-list> -->\n  </div>\n  <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n    <app-stock-receipts-list-page [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipts-list-page>\n\n    <app-stock-issuances-list [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issuances-list>\n\n    <app-stock-transfer-list *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StockReceiptsListPageComponent, selector: "app-stock-receipts-list-page", inputs: ["product", "supplierId"], outputs: ["listUpdated"] }, { kind: "component", type: StockIssuancesListComponent, selector: "app-stock-issuances-list", inputs: ["product", "issuableType", "issuableId", "label"], outputs: ["listUpdated"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ProductLocationListComponent, selector: "app-product-location-list", inputs: ["product"] }, { kind: "component", type: StockTransferListComponent, selector: "app-stock-transfer-list", inputs: ["productId"] }, { kind: "component", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: ["product"], outputs: ["saved", "deleted"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductViewPageComponent, selector: "app-product-view-page", viewQueries: [{ propertyName: "productLocationList", first: true, predicate: ["productLocationList"], descendants: true }, { propertyName: "stockTransferList", first: true, predicate: ["stockTransferList"], descendants: true }, { propertyName: "stockReceiptsListPage", first: true, predicate: ["stockReceiptsListPage"], descendants: true }, { propertyName: "stockIssueListPage", first: true, predicate: ["stockIssueListPage"], descendants: true }], ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n  <div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n    <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\"\n        (updated)=\"stockTransferList.reload(); stockReceiptsListPage.reload(); stockIssueListPage.reload()\"\n        #productLocationList></app-product-location-list>\n\n      <!-- <app-product-tax-list [product]=\"product\"></app-product-tax-list> -->\n    </div>\n    <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n      <app-stock-receipts-list-page #stockReceiptsListPage [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipts-list-page>\n\n      <app-stock-issuances-list #stockIssueListPage [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issuances-list>\n\n      <app-stock-transfer-list #stockTransferList *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n    </div>\n  </div>", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StockReceiptsListPageComponent, selector: "app-stock-receipts-list-page", inputs: ["product", "supplierId"], outputs: ["listUpdated"] }, { kind: "component", type: StockIssuancesListComponent, selector: "app-stock-issuances-list", inputs: ["product", "issuableType", "issuableId", "label", "showActions", "showFilters"], outputs: ["listUpdated"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ProductLocationListComponent, selector: "app-product-location-list", inputs: ["product"], outputs: ["updated"] }, { kind: "component", type: StockTransferListComponent, selector: "app-stock-transfer-list", inputs: ["productId"] }, { kind: "component", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: ["product"], outputs: ["saved", "deleted"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductViewPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-product-view-page', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n  <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n    <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n      (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n    <app-product-location-list [product]=\"product\" #productLocationList></app-product-location-list>\n\n    <!-- <app-product-tax-list [product]=\"product\"></app-product-tax-list> -->\n  </div>\n  <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n    <app-stock-receipts-list-page [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipts-list-page>\n\n    <app-stock-issuances-list [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issuances-list>\n\n    <app-stock-transfer-list *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n  </div>\n</div>" }]
+            args: [{ selector: 'app-product-view-page', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n  <div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n    <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\"\n        (updated)=\"stockTransferList.reload(); stockReceiptsListPage.reload(); stockIssueListPage.reload()\"\n        #productLocationList></app-product-location-list>\n\n      <!-- <app-product-tax-list [product]=\"product\"></app-product-tax-list> -->\n    </div>\n    <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n      <app-stock-receipts-list-page #stockReceiptsListPage [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipts-list-page>\n\n      <app-stock-issuances-list #stockIssueListPage [product]=\"product\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issuances-list>\n\n      <app-stock-transfer-list #stockTransferList *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n    </div>\n  </div>" }]
         }], ctorParameters: () => [{ type: ProductService }, { type: i4$1.ActivatedRoute }, { type: i5.Location }], propDecorators: { productLocationList: [{
                 type: ViewChild,
                 args: ['productLocationList']
+            }], stockTransferList: [{
+                type: ViewChild,
+                args: ['stockTransferList']
+            }], stockReceiptsListPage: [{
+                type: ViewChild,
+                args: ['stockReceiptsListPage']
+            }], stockIssueListPage: [{
+                type: ViewChild,
+                args: ['stockIssueListPage']
             }] } });
 
 class ProductImportPageComponent {
@@ -2519,7 +2557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'app-product-import-page', template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>\n" }]
         }], ctorParameters: () => [] });
 
-const routes$3 = [
+const routes$6 = [
     {
         path: '',
         component: ProductNavBarComponent,
@@ -2556,12 +2594,12 @@ const routes$3 = [
 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: [i4$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, imports: [RouterModule.forChild(routes$3), RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, imports: [RouterModule.forChild(routes$6), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild(routes$3)],
+                    imports: [RouterModule.forChild(routes$6)],
                     exports: [RouterModule],
                 }]
         }] });
@@ -2701,7 +2739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>" }]
         }], ctorParameters: () => [] });
 
-const routes$2 = [
+const routes$5 = [
     {
         path: '',
         component: StockReceiptsListPageComponent,
@@ -2715,12 +2753,12 @@ const routes$2 = [
 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: [i4$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsRoutingModule, imports: [RouterModule.forChild(routes$2), RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsRoutingModule, imports: [RouterModule.forChild(routes$5), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockReceiptsRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild(routes$2)],
+                    imports: [RouterModule.forChild(routes$5)],
                     exports: [RouterModule],
                 }]
         }] });
@@ -2811,7 +2849,7 @@ class TechlifyFilterComponent {
             : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterComponent, deps: [{ token: i1.RequestHelperService }, { token: i4$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: { filterForm: "filterForm", filterConfig: "filterConfig" }, outputs: { filterUpdated: "filterUpdated" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n  <mat-form-field *ngIf=\"filterForm.get('search')\" [appearance]=\"getFilterConfig('appearance', 'search')\">\n    <mat-label>Search</mat-label>\n    <input formControlName=\"search\" matInput [placeholder]=\"getFilterConfig('placeholder', 'search')\" />\n    <button *ngIf=\"filterForm.value?.search\" mat-icon-button matSuffix (click)=\"resetField('search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <app-timeline-filter\n    *ngIf=\"filterForm?.get('duration')\"\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'duration')\"\n    [appearance]=\"getFilterConfig('appearance', 'duration')\"\n    formControlName=\"duration\"\n    (selectionChange)=\"onDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.date_from\"\n    [dateTo]=\"filterForm.value?.date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('payment_method_ids')\">\n    <mat-label>Payment Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"payment_method_ids\"\n      apiUrl=\"api/payment-methods\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.payment_method_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('payment_method_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('payment_account_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['accountingcommon_account.read']\">\n      <mat-label>{{ getFilterConfig('label', 'payment_account_ids') || 'Payment Account' }}</mat-label>\n      <app-searchable-selector\n        formControlName=\"payment_account_ids\"\n        [apiUrl]=\"getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.payment_account_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('payment_account_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('invoice_status_ids')\">\n    <mat-label>Invoice Status</mat-label>\n    <app-searchable-selector\n      formControlName=\"invoice_status_ids\"\n      apiUrl=\"api/invoice-statuses\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.invoice_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('invoice_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('customer_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['customer_read']\">\n      <mat-label>Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"customer_ids\"\n        titleField=\"name\"\n        apiUrl=\"api/customers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.customer_ids\" mat-icon-button matSuffix (click)=\"resetField('customer_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"filterForm.get('project_ids') && getFilterConfig('disabled', 'project_ids') === false\">\n    <mat-form-field *ngxPermissionsOnly=\"['project.read']\">\n      <mat-label>Project</mat-label>\n      <app-searchable-selector\n        formControlName=\"project_ids\"\n        apiUrl=\"api/projects\"\n        titleField=\"project_name\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.project_ids\" mat-icon-button matSuffix (click)=\"resetField('project_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('product_ids')\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector\n      formControlName=\"product_ids\"\n      apiUrl=\"api/products\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.product_ids\" mat-icon-button matSuffix (click)=\"resetField('product_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('measure_ids')\">\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector\n      formControlName=\"measure_ids\"\n      apiUrl=\"api/product-measures\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.measure_ids\" mat-icon-button matSuffix (click)=\"resetField('measure_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngxPermissionsOnly=\"['supplier.read']\">\n    <mat-form-field *ngIf=\"filterForm.get('supplier_ids')\" [appearance]=\"getFilterConfig('appearance', 'supplier_ids')\">\n      <mat-label>Supplier</mat-label>\n      <app-searchable-selector\n        formControlName=\"supplier_ids\"\n        titleField=\"company_name\"\n        apiUrl=\"api/suppliers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.supplier_ids\" mat-icon-button matSuffix (click)=\"resetField('supplier_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <app-timeline-filter\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'expiry_duration')\"\n    *ngIf=\"filterForm?.get('expiry_duration')\"\n    formControlName=\"expiry_duration\"\n    (selectionChange)=\"onExpiryDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.expiry_date_from\"\n    [dateTo]=\"filterForm.value?.expiry_date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('cost_category_ids')\" style=\"width: 150px\">\n    <mat-label>Cost Category</mat-label>\n    <app-searchable-selector\n      formControlName=\"cost_category_ids\"\n      apiUrl=\"api/cost-code-categories\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.cost_category_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('cost_category_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('milestone_ids')\" style=\"width: 150px\">\n    <mat-label>Milestone</mat-label>\n    <app-searchable-selector\n      formControlName=\"milestone_ids\"\n      apiUrl=\"api/milestones\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.milestone_ids\" mat-icon-button matSuffix (click)=\"resetField('milestone_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('team_member_ids')\">\n    <mat-label>Assignee</mat-label>\n    <app-searchable-selector apiUrl=\"api/persons\" formControlName=\"team_member_ids\" titleField=\"name\" [multiple]=\"true\">\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.team_member_ids\" mat-icon-button matSuffix (click)=\"resetField('team_member_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-types\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_document_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_document_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-document-types\"\n      [multiple]=\"true\"\n      [enableSearch]=\"getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_document_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_document_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div *ngIf=\"filterForm.get('fixed_asset_document_status')\">\n    <small class=\"mr-2 text-secondary\" *ngIf=\"getFilterConfig('showLabel', 'fixed_asset_document_status')\">\n      Status\n    </small>\n    <mat-button-toggle-group formControlName=\"fixed_asset_document_status\" [multiple]=\"false\">\n      <mat-button-toggle value=\"all\">All</mat-button-toggle>\n      <mat-button-toggle value=\"active\">Active</mat-button-toggle>\n      <mat-button-toggle value=\"expired\">Expired</mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <mat-form-field *ngIf=\"filterForm.get('asset_account_ids')\">\n    <mat-label>Asset Account</mat-label>\n    <app-searchable-selector\n      formControlName=\"asset_account_ids\"\n      apiUrl=\"api/accounts\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.asset_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('asset_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_expense_account_ids')\">\n    <mat-label>Depreciation Expense Account</mat-label>\n    <app-searchable-selector\n      [multiple]=\"true\"\n      apiUrl=\"api/accounts\"\n      formControlName=\"depreciation_expense_account_ids\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.depreciation_expense_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('depreciation_expense_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_method_ids')\">\n    <mat-label>Depreciation Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"depreciation_method_ids\"\n      apiUrl=\"api/accounting-plus/depreciation-methods\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      (click)=\"resetField('depreciation_method_ids')\"\n      *ngIf=\"filterForm.value?.depreciation_method_ids\"\n      mat-icon-button\n      matSuffix\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('task_status_ids')\" style=\"width: 150px\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/task-statuses\"\n      formControlName=\"task_status_ids\"\n      titleField=\"title\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.task_status_ids\" mat-icon-button matSuffix (click)=\"resetField('task_status_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('service_center_ids')\">\n    <mat-label>Service Center</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/service-centers\"\n      formControlName=\"service_center_ids\"\n      titleField=\"name\"\n      [enableSearch]=\"false\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.service_center_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('service_center_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_maintenance_status_ids')\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/fixed-asset-maintenance-statuses\"\n      formControlName=\"fixed_asset_maintenance_status_ids\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_maintenance_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_maintenance_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('group_by')\">\n    <mat-label>Group By</mat-label>\n    <mat-select formControlName=\"group_by\">\n      <mat-option value=\"week\">Week</mat-option>\n      <mat-option value=\"month\">Month</mat-option>\n      <mat-option value=\"year\">Year</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10.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.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.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i13.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: { filterForm: "filterForm", filterConfig: "filterConfig" }, outputs: { filterUpdated: "filterUpdated" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n  <mat-form-field *ngIf=\"filterForm.get('search')\" [appearance]=\"getFilterConfig('appearance', 'search')\">\n    <mat-label>Search</mat-label>\n    <input formControlName=\"search\" matInput [placeholder]=\"getFilterConfig('placeholder', 'search')\" />\n    <button *ngIf=\"filterForm.value?.search\" mat-icon-button matSuffix (click)=\"resetField('search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <app-timeline-filter\n    *ngIf=\"filterForm?.get('duration')\"\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'duration')\"\n    [appearance]=\"getFilterConfig('appearance', 'duration')\"\n    formControlName=\"duration\"\n    (selectionChange)=\"onDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.date_from\"\n    [dateTo]=\"filterForm.value?.date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('payment_method_ids')\">\n    <mat-label>Payment Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"payment_method_ids\"\n      apiUrl=\"api/payment-methods\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.payment_method_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('payment_method_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('payment_account_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['accountingcommon_account.read']\">\n      <mat-label>{{ getFilterConfig('label', 'payment_account_ids') || 'Payment Account' }}</mat-label>\n      <app-searchable-selector\n        formControlName=\"payment_account_ids\"\n        [apiUrl]=\"getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.payment_account_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('payment_account_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('invoice_status_ids')\">\n    <mat-label>Invoice Status</mat-label>\n    <app-searchable-selector\n      formControlName=\"invoice_status_ids\"\n      apiUrl=\"api/invoice-statuses\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.invoice_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('invoice_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('customer_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['customer_read']\">\n      <mat-label>Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"customer_ids\"\n        titleField=\"name\"\n        apiUrl=\"api/customers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.customer_ids\" mat-icon-button matSuffix (click)=\"resetField('customer_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"filterForm.get('project_ids') && getFilterConfig('disabled', 'project_ids') === false\">\n    <mat-form-field *ngxPermissionsOnly=\"['project.read']\">\n      <mat-label>Project</mat-label>\n      <app-searchable-selector\n        formControlName=\"project_ids\"\n        apiUrl=\"api/projects\"\n        titleField=\"project_name\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.project_ids\" mat-icon-button matSuffix (click)=\"resetField('project_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('product_ids')\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector\n      formControlName=\"product_ids\"\n      apiUrl=\"api/products\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.product_ids\" mat-icon-button matSuffix (click)=\"resetField('product_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('measure_ids')\">\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector\n      formControlName=\"measure_ids\"\n      apiUrl=\"api/product-measures\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.measure_ids\" mat-icon-button matSuffix (click)=\"resetField('measure_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngxPermissionsOnly=\"['supplier.read']\">\n    <mat-form-field *ngIf=\"filterForm.get('supplier_ids')\" [appearance]=\"getFilterConfig('appearance', 'supplier_ids')\">\n      <mat-label>Supplier</mat-label>\n      <app-searchable-selector\n        formControlName=\"supplier_ids\"\n        titleField=\"company_name\"\n        apiUrl=\"api/suppliers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.supplier_ids\" mat-icon-button matSuffix (click)=\"resetField('supplier_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <app-timeline-filter\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'expiry_duration')\"\n    *ngIf=\"filterForm?.get('expiry_duration')\"\n    formControlName=\"expiry_duration\"\n    (selectionChange)=\"onExpiryDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.expiry_date_from\"\n    [dateTo]=\"filterForm.value?.expiry_date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('cost_category_ids')\" style=\"width: 150px\">\n    <mat-label>Cost Category</mat-label>\n    <app-searchable-selector\n      formControlName=\"cost_category_ids\"\n      apiUrl=\"api/cost-code-categories\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.cost_category_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('cost_category_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('milestone_ids')\" style=\"width: 150px\">\n    <mat-label>Milestone</mat-label>\n    <app-searchable-selector\n      formControlName=\"milestone_ids\"\n      apiUrl=\"api/milestones\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.milestone_ids\" mat-icon-button matSuffix (click)=\"resetField('milestone_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('team_member_ids')\">\n    <mat-label>Assignee</mat-label>\n    <app-searchable-selector apiUrl=\"api/persons\" formControlName=\"team_member_ids\" titleField=\"name\" [multiple]=\"true\">\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.team_member_ids\" mat-icon-button matSuffix (click)=\"resetField('team_member_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-types\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_document_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_document_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-document-types\"\n      [multiple]=\"true\"\n      [enableSearch]=\"getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_document_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_document_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div *ngIf=\"filterForm.get('fixed_asset_document_status')\">\n    <small class=\"mr-2 text-secondary\" *ngIf=\"getFilterConfig('showLabel', 'fixed_asset_document_status')\">\n      Status\n    </small>\n    <mat-button-toggle-group formControlName=\"fixed_asset_document_status\" [multiple]=\"false\">\n      <mat-button-toggle value=\"all\">All</mat-button-toggle>\n      <mat-button-toggle value=\"active\">Active</mat-button-toggle>\n      <mat-button-toggle value=\"expired\">Expired</mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <mat-form-field *ngIf=\"filterForm.get('asset_account_ids')\">\n    <mat-label>Asset Account</mat-label>\n    <app-searchable-selector\n      formControlName=\"asset_account_ids\"\n      apiUrl=\"api/accounts\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.asset_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('asset_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_expense_account_ids')\">\n    <mat-label>Depreciation Expense Account</mat-label>\n    <app-searchable-selector\n      [multiple]=\"true\"\n      apiUrl=\"api/accounts\"\n      formControlName=\"depreciation_expense_account_ids\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.depreciation_expense_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('depreciation_expense_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_method_ids')\">\n    <mat-label>Depreciation Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"depreciation_method_ids\"\n      apiUrl=\"api/accounting-plus/depreciation-methods\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      (click)=\"resetField('depreciation_method_ids')\"\n      *ngIf=\"filterForm.value?.depreciation_method_ids\"\n      mat-icon-button\n      matSuffix\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('task_status_ids')\" style=\"width: 150px\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/task-statuses\"\n      formControlName=\"task_status_ids\"\n      titleField=\"title\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.task_status_ids\" mat-icon-button matSuffix (click)=\"resetField('task_status_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('service_center_ids')\">\n    <mat-label>Service Center</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/service-centers\"\n      formControlName=\"service_center_ids\"\n      titleField=\"name\"\n      [enableSearch]=\"false\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.service_center_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('service_center_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_maintenance_status_ids')\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/fixed-asset-maintenance-statuses\"\n      formControlName=\"fixed_asset_maintenance_status_ids\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_maintenance_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_maintenance_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('group_by')\">\n    <mat-label>Group By</mat-label>\n    <mat-select formControlName=\"group_by\">\n      <mat-option value=\"week\">Week</mat-option>\n      <mat-option value=\"month\">Month</mat-option>\n      <mat-option value=\"year\">Year</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10.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.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.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i5$2.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterComponent, decorators: [{
             type: Component,
@@ -3670,7 +3708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], template: "<div>\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"mb-0\">Inventory Value Report</h3>\n        <i class=\"fa-solid fa-file-excel cursor-pointer d-print-none\" (click)=\"export('excel')\"></i>\n        <i class=\"fa-solid fa-file-pdf cursor-pointer d-print-none\" (click)=\"export('pdf')\"></i>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Min Stock On Hand</mat-label>\n          <mat-select formControlName=\"min_stock_on_hand\">\n            <mat-option *ngFor=\"let option of minStockOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table\n        mat-table\n        [dataSource]=\"models\"\n        class=\"w-100\"\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\"\n        matSort\n        (matSortChange)=\"onSortChange($event)\"\n      >\n        <!-- # Column -->\n        <ng-container matColumnDef=\"#\">\n          <th mat-header-cell *matHeaderCellDef>#</th>\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"product\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"name\">Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n                {{ element?.name }}\n              </a>\n              <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <span>{{ element?.sku }}</span>\n              <span class='text-secondary'> {{ element?.type?.title }} </span>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>Total</strong>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"stock_on_hand\">On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_on_hand }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Average Price Column -->\n        <ng-container matColumnDef=\"Average Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"average_purchase_price\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Avg. Price</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\"\n                matTooltip=\"Average price of batches in stock\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.average_purchase_price | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Column -->\n        <ng-container matColumnDef=\"Inventory Value\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"inventory_value\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Inventory Value</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\" matTooltip=\"Based on average price\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>{{ totalInventoryValue | currency }}</strong>\n          </td>\n        </ng-container>\n\n        <!-- Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_stock_receipt.purchase_price\">\n            Last Price\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Based On Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Inventory Value Based On Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_stock_receipt.amount\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Inventory Value</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\"\n                matTooltip=\"Based on last purchase price\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value_based_on_last_price ?? 0 | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>" }]
         }], ctorParameters: () => [{ type: InventoryValueReportService }, { type: i4$1.ActivatedRoute }, { type: i1.RequestHelperService }, { type: i2$1.FormBuilder }] });
 
-const routes$1 = [
+const routes$4 = [
     {
         path: 'reports/low-stock-report',
         component: LowStockReportComponent,
@@ -3681,15 +3719,15 @@ const routes$1 = [
     },
     {
         path: 'suppliers',
-        loadChildren: () => import('./techlify-inventory-common-supplier.module-DaTU-lMt.mjs').then((m) => m.SupplierModule),
+        loadChildren: () => Promise.resolve().then(function () { return supplier_module; }).then((m) => m.SupplierModule),
     },
     {
         path: 'locations',
-        loadChildren: () => import('./techlify-inventory-common-location.module-Bpt1avqg.mjs').then((mod) => mod.LocationModule),
+        loadChildren: () => import('./techlify-inventory-common-location.module-CSrRu4pQ.mjs').then((mod) => mod.LocationModule),
     },
     {
         path: "measures",
-        loadChildren: () => import('./techlify-inventory-common-measure.module-BjJ4KTU_.mjs').then((mod) => mod.MeasureModule),
+        loadChildren: () => import('./techlify-inventory-common-measure.module-Dz5Lc4oT.mjs').then((mod) => mod.MeasureModule),
     },
     {
         path: 'stock-issuances',
@@ -3701,7 +3739,7 @@ const routes$1 = [
     },
     {
         path: 'categories',
-        loadChildren: () => import('./techlify-inventory-common-category.module-CAPeu05n.mjs').then((mod) => mod.CategoryModule),
+        loadChildren: () => import('./techlify-inventory-common-category.module-BmhaQykz.mjs').then((mod) => mod.CategoryModule),
     },
     {
         path: 'products',
@@ -3720,12 +3758,12 @@ const routes$1 = [
 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: [i4$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, imports: [RouterModule.forChild(routes$1), RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, imports: [RouterModule.forChild(routes$4), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild(routes$1)],
+                    imports: [RouterModule.forChild(routes$4)],
                     exports: [RouterModule],
                 }]
         }] });
@@ -3842,7 +3880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>" }]
         }], ctorParameters: () => [] });
 
-const routes = [
+const routes$3 = [
     {
         path: '',
         component: StockIssuancesListComponent,
@@ -3856,12 +3894,12 @@ const routes = [
 class StockIssuancesRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesRoutingModule, imports: [RouterModule.forChild(routes$3), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockIssuancesRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild(routes)],
+                    imports: [RouterModule.forChild(routes$3)],
                     exports: [RouterModule],
                 }]
         }] });
@@ -3923,6 +3961,1097 @@ var stockIssuances_module = /*#__PURE__*/Object.freeze({
     StockIssuancesModule: StockIssuancesModule
 });
 
+class IncidentService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'incidents');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class IncidentFormComponent extends TechlifyFormComponentInterface {
+    formBuilder;
+    alertService;
+    incidentService;
+    incident;
+    incidentableType;
+    incidentableId;
+    saved = new EventEmitter();
+    cancelled = new EventEmitter();
+    isWorking = false;
+    constructor(formValidatorService, formBuilder, alertService, incidentService) {
+        super(formValidatorService);
+        this.formBuilder = formBuilder;
+        this.alertService = alertService;
+        this.incidentService = incidentService;
+        this.errorMessages = {
+            date: {
+                required: 'The date field is required.'
+            },
+            classification_id: {
+                required: 'The classification field is required.'
+            }
+        };
+        this.form = this.formBuilder.group({
+            id: [''],
+            date: ['', Validators.required],
+            classification_id: ['', Validators.required],
+            cost: [''],
+            details: [''],
+            incidentable_id: [''],
+            incidentable_type: ['']
+        });
+    }
+    ngOnInit() {
+        if (this.incidentableType && this.incidentableId) {
+            this.form.patchValue({
+                incidentable_type: this.incidentableType,
+                incidentable_id: this.incidentableId
+            });
+        }
+        if (this.incident) {
+            const data = { ...this.incident };
+            if (data?.date) {
+                data.date = new Date(data.date);
+            }
+            this.form.patchValue(data);
+        }
+    }
+    save() {
+        this.form.markAllAsTouched();
+        if (this.form.invalid) {
+            this.alertService.addAlert('Please check the form for errors.', 'error');
+            return;
+        }
+        const data = {
+            ...this.form.value
+        };
+        if (data?.date) {
+            data.date = moment$1(data.date).format('YYYY-MM-DD');
+        }
+        let request = this.incidentService.store(data);
+        if (data?.id) {
+            request = this.incidentService.update(data);
+        }
+        this.isWorking = true;
+        request.subscribe({
+            next: (response) => {
+                this.saved.emit(response?.item);
+                this.isWorking = false;
+                this.alertService.addAlert('The incident saved successfully!', 'success');
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: i1.AlertService }, { token: IncidentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IncidentFormComponent, isStandalone: true, selector: "app-incident-form", inputs: { incident: "incident", incidentableType: "incidentableType", incidentableId: "incidentableId" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\"\n      (submit)=\"save()\"\n      class=\"d-flex flex-column justify-content-start gap-2\">\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput formControlName=\"date\" [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\n    <mat-datepicker #picker></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>Classification</mat-label>\n    <app-searchable-selector\n      required\n      formControlName=\"classification_id\"\n      apiUrl=\"api/incident-classifications\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <mat-error *ngIf=\"isFieldValid('classification_id')\">\n      {{ getErrorMessage('classification_id') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Cost</mat-label>\n    <input matInput type=\"number\" formControlName=\"cost\" placeholder=\"Cost\"/>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Details</mat-label>\n    <textarea matInput formControlName=\"details\" rows=\"3\" placeholder=\"Details\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-3\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"cancelled.emit()\">Cancel</button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: IncidentFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-incident-form', standalone: true, imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        MatDatepickerInput,
+                        MatDatepicker,
+                        ReactiveFormsModule,
+                        SearchableSelectorModule,
+                        MatButton,
+                        MatError,
+                        NgIf
+                    ], template: "<form [formGroup]=\"form\"\n      (submit)=\"save()\"\n      class=\"d-flex flex-column justify-content-start gap-2\">\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput formControlName=\"date\" [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\n    <mat-datepicker #picker></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>Classification</mat-label>\n    <app-searchable-selector\n      required\n      formControlName=\"classification_id\"\n      apiUrl=\"api/incident-classifications\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <mat-error *ngIf=\"isFieldValid('classification_id')\">\n      {{ getErrorMessage('classification_id') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Cost</mat-label>\n    <input matInput type=\"number\" formControlName=\"cost\" placeholder=\"Cost\"/>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Details</mat-label>\n    <textarea matInput formControlName=\"details\" rows=\"3\" placeholder=\"Details\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-3\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"cancelled.emit()\">Cancel</button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: i1.AlertService }, { type: IncidentService }], propDecorators: { incident: [{
+                type: Input
+            }], incidentableType: [{
+                type: Input
+            }], incidentableId: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
+class IncidentFormButtonComponent {
+    matDialog;
+    incident;
+    incidentableType;
+    incidentableId;
+    saved = new EventEmitter();
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+    }
+    showForm(templateRef) {
+        this.matDialog.open(templateRef, { width: '400px' });
+    }
+    onSaved(category) {
+        this.matDialog.closeAll();
+        this.saved.emit(category);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentFormButtonComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IncidentFormButtonComponent, isStandalone: true, selector: "app-incident-form-button", inputs: { incident: "incident", incidentableType: "incidentableType", incidentableId: "incidentableId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<mat-icon\n  *ngIf=\"!incident\"\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<mat-icon\n  *ngIf=\"incident\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  edit\n</mat-icon>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title class=\"mb-0\">\n    {{ incident ? 'Edit' : 'Create' }} Incident\n  </h3>\n  <div mat-dialog-content>\n    <app-incident-form\n      [incident]=\"incident\"\n      [incidentableId]=\"incidentableId\"\n      [incidentableType]=\"incidentableType\"\n      (saved)=\"onSaved($event)\"\n      (cancelled)=\"matDialog.closeAll()\"\n    ></app-incident-form>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: IncidentFormComponent, selector: "app-incident-form", inputs: ["incident", "incidentableType", "incidentableId"], outputs: ["saved", "cancelled"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-incident-form-button', standalone: true, imports: [
+                        MatIcon,
+                        IncidentFormComponent,
+                        NgIf,
+                        MatDialogTitle,
+                        MatDialogContent
+                    ], template: "<mat-icon\n  *ngIf=\"!incident\"\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<mat-icon\n  *ngIf=\"incident\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  edit\n</mat-icon>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title class=\"mb-0\">\n    {{ incident ? 'Edit' : 'Create' }} Incident\n  </h3>\n  <div mat-dialog-content>\n    <app-incident-form\n      [incident]=\"incident\"\n      [incidentableId]=\"incidentableId\"\n      [incidentableType]=\"incidentableType\"\n      (saved)=\"onSaved($event)\"\n      (cancelled)=\"matDialog.closeAll()\"\n    ></app-incident-form>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { incident: [{
+                type: Input
+            }], incidentableType: [{
+                type: Input
+            }], incidentableId: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+class IncidentListComponent extends TechlifyListingControllerInterface {
+    formBuilder;
+    requestHelperService;
+    activatedRoute;
+    incidentService;
+    supplierId;
+    incidentableType;
+    incidentableId;
+    displayedColumns = [
+        'No',
+        'Date',
+        'Classification',
+        'Cost',
+        'Details',
+        'Creator',
+        'Actions',
+    ];
+    constructor(formBuilder, requestHelperService, activatedRoute, incidentService) {
+        super();
+        this.formBuilder = formBuilder;
+        this.requestHelperService = requestHelperService;
+        this.activatedRoute = activatedRoute;
+        this.incidentService = incidentService;
+        this.lastPage = 0;
+        this.filterForm = this.formBuilder.group({
+            search: [''],
+            classification_ids: [''],
+            sort_by: ['created_at|desc'],
+            incidentable_types: [''],
+            incidentable_ids: [''],
+        });
+    }
+    ngOnInit() {
+        if (this.incidentableType && this.incidentableId) {
+            this.filterForm.patchValue({
+                incidentable_types: this.incidentableType,
+                incidentable_ids: this.incidentableId
+            });
+        }
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            classification_ids: { multiple: true }
+        });
+        this.filterForm.valueChanges.pipe(debounceTime$1(800)).subscribe({
+            next: () => {
+                this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+            }
+        });
+        // listen for route change
+        this.activatedRoute.queryParams
+            .pipe(debounceTime$1(500), distinctUntilChanged())
+            .subscribe((val) => {
+            this.reload();
+        });
+    }
+    loadData() {
+        this.isWorking = true;
+        const params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+            page: this.page,
+            perPage: this.perPage,
+            with: 'classification,creator'
+        };
+        this.incidentService.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            }
+        });
+    }
+    onSortChange(sort) {
+        let { direction, active } = sort;
+        if (!active) {
+            active = 'created_at';
+            direction = 'desc';
+        }
+        if (!direction) {
+            direction = 'desc';
+        }
+        this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentListComponent, deps: [{ token: i2$1.FormBuilder }, { token: i1.RequestHelperService }, { token: i4$1.ActivatedRoute }, { token: IncidentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IncidentListComponent, isStandalone: true, selector: "app-incident-list", inputs: { supplierId: "supplierId", incidentableType: "incidentableType", incidentableId: "incidentableId" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gal-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <h2 class=\"mb-0\">Incidents</h2>\n      <app-incident-form-button\n        *ngxPermissionsOnly=\"['incident.create']\"\n        incidentableType=\"Supplier\"\n        [incidentableId]=\"supplierId\"\n        (saved)=\"reload()\"\n      ></app-incident-form-button>\n    </div>\n    <form\n      [formGroup]=\"filterForm\" (submit)=\"reload()\"\n      class=\"d-flex justify-content-end align-items-center gap-3\"\n    >\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search Details\" matInput formControlName=\"search\">\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Classification</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/incident-classifications\"\n          [enableSearch]=\"false\"\n          formControlName=\"classification_ids\"\n          [multiple]=\"true\"\n        ></app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      matSort\n      (matSortChange)=\"onSortChange($event)\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n\n      <!-- No 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      <!-- Date Column -->\n      <ng-container matColumnDef=\"Date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"date\"> Date </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.date | date }} </td>\n      </ng-container>\n\n      <!-- Classification Column -->\n      <ng-container matColumnDef=\"Classification\">\n        <th mat-header-cell *matHeaderCellDef> Classification </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.classification?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Cost Column -->\n      <ng-container matColumnDef=\"Cost\">\n        <th mat-header-cell *matHeaderCellDef> Cost </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.cost | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Details Column -->\n      <ng-container matColumnDef=\"Details\">\n        <th mat-header-cell *matHeaderCellDef> Details </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.details }}\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          <app-incident-form-button\n            *ngxPermissionsOnly=\"['incident.update']\"\n            [incident]=\"element\"\n            incidentableType=\"Supplier\"\n            [incidentableId]=\"supplierId\"\n            (saved)=\"reload()\"\n          ></app-incident-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "pipe", type: DatePipe, name: "date" }, { 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: 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: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { 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: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "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: "component", type: IncidentFormButtonComponent, selector: "app-incident-form-button", inputs: ["incident", "incidentableType", "incidentableId"], outputs: ["saved"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i5$2.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-incident-list', standalone: true, imports: [
+                        MatCard,
+                        MatCardContent,
+                        DatePipe,
+                        InfiniteScrollDirective,
+                        MatCell,
+                        MatCellDef,
+                        MatColumnDef,
+                        MatHeaderCell,
+                        MatHeaderRow,
+                        MatHeaderRowDef,
+                        MatProgressBar,
+                        MatRow,
+                        MatRowDef,
+                        MatSort,
+                        MatSortHeader,
+                        MatTable,
+                        NgIf,
+                        MatHeaderCellDef,
+                        CurrencyPipe,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatInput,
+                        MatLabel,
+                        SearchableSelectorModule,
+                        IncidentFormButtonComponent,
+                        NgxPermissionsModule
+                    ], template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gal-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <h2 class=\"mb-0\">Incidents</h2>\n      <app-incident-form-button\n        *ngxPermissionsOnly=\"['incident.create']\"\n        incidentableType=\"Supplier\"\n        [incidentableId]=\"supplierId\"\n        (saved)=\"reload()\"\n      ></app-incident-form-button>\n    </div>\n    <form\n      [formGroup]=\"filterForm\" (submit)=\"reload()\"\n      class=\"d-flex justify-content-end align-items-center gap-3\"\n    >\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search Details\" matInput formControlName=\"search\">\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Classification</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/incident-classifications\"\n          [enableSearch]=\"false\"\n          formControlName=\"classification_ids\"\n          [multiple]=\"true\"\n        ></app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      matSort\n      (matSortChange)=\"onSortChange($event)\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n\n      <!-- No 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      <!-- Date Column -->\n      <ng-container matColumnDef=\"Date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"date\"> Date </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.date | date }} </td>\n      </ng-container>\n\n      <!-- Classification Column -->\n      <ng-container matColumnDef=\"Classification\">\n        <th mat-header-cell *matHeaderCellDef> Classification </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.classification?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Cost Column -->\n      <ng-container matColumnDef=\"Cost\">\n        <th mat-header-cell *matHeaderCellDef> Cost </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.cost | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Details Column -->\n      <ng-container matColumnDef=\"Details\">\n        <th mat-header-cell *matHeaderCellDef> Details </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.details }}\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          <app-incident-form-button\n            *ngxPermissionsOnly=\"['incident.update']\"\n            [incident]=\"element\"\n            incidentableType=\"Supplier\"\n            [incidentableId]=\"supplierId\"\n            (saved)=\"reload()\"\n          ></app-incident-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: i2$1.FormBuilder }, { type: i1.RequestHelperService }, { type: i4$1.ActivatedRoute }, { type: IncidentService }], propDecorators: { supplierId: [{
+                type: Input
+            }], incidentableType: [{
+                type: Input
+            }], incidentableId: [{
+                type: Input
+            }] } });
+
+class RatingService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'ratings');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class RatingFormComponent extends TechlifyFormComponentInterface {
+    formBuilder;
+    alertService;
+    ratingService;
+    rating;
+    rateableType;
+    rateableId;
+    saved = new EventEmitter();
+    cancelled = new EventEmitter();
+    isWorking = false;
+    constructor(formValidatorService, formBuilder, alertService, ratingService) {
+        super(formValidatorService);
+        this.formBuilder = formBuilder;
+        this.alertService = alertService;
+        this.ratingService = ratingService;
+        this.errorMessages = {
+            date: {
+                required: 'The date field is required.'
+            },
+            grade_id: {
+                required: 'The grade field is required.'
+            }
+        };
+        this.form = this.formBuilder.group({
+            id: [''],
+            date: ['', Validators.required],
+            grade_id: ['', Validators.required],
+            details: [''],
+            rateable_type: [''],
+            rateable_id: ['']
+        });
+    }
+    ngOnInit() {
+        if (this.rateableId && this.rateableType) {
+            this.form.patchValue({
+                rateable_id: this.rateableId,
+                rateable_type: this.rateableType
+            });
+        }
+        if (this.rating) {
+            const data = { ...this.rating };
+            if (data?.date) {
+                data.date = new Date(data.date);
+            }
+            this.form.patchValue(data);
+        }
+    }
+    save() {
+        this.form.markAllAsTouched();
+        if (this.form.invalid) {
+            this.alertService.addAlert('Please check the form for errors.', 'error');
+            return;
+        }
+        const data = {
+            ...this.form.value
+        };
+        if (data?.date) {
+            data.date = moment$1(data.date).format('YYYY-MM-DD');
+        }
+        let request = this.ratingService.store(data);
+        if (data?.id) {
+            request = this.ratingService.update(data);
+        }
+        this.isWorking = true;
+        request.subscribe({
+            next: (response) => {
+                this.saved.emit(response?.item);
+                this.isWorking = false;
+                this.alertService.addAlert('The rating saved successfully!', 'success');
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: i1.AlertService }, { token: RatingService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RatingFormComponent, isStandalone: true, selector: "app-rating-form", inputs: { rating: "rating", rateableType: "rateableType", rateableId: "rateableId" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\"\n      (submit)=\"save()\"\n      class=\"d-flex flex-column justify-content-start gap-2\">\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput formControlName=\"date\" [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\n    <mat-datepicker #picker></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>Grade</mat-label>\n    <app-searchable-selector\n      required\n      formControlName=\"grade_id\"\n      apiUrl=\"api/rating-grades\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <mat-error *ngIf=\"isFieldValid('grade_id')\">\n      {{ getErrorMessage('grade_id') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Details</mat-label>\n    <textarea matInput formControlName=\"details\" rows=\"3\" placeholder=\"Details\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-3\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"cancelled.emit()\">Cancel</button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: RatingFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-rating-form', standalone: true, imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        MatDatepickerInput,
+                        MatDatepicker,
+                        ReactiveFormsModule,
+                        SearchableSelectorModule,
+                        MatButton,
+                        MatError,
+                        NgIf
+                    ], template: "<form [formGroup]=\"form\"\n      (submit)=\"save()\"\n      class=\"d-flex flex-column justify-content-start gap-2\">\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput formControlName=\"date\" [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\n    <mat-datepicker #picker></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>Grade</mat-label>\n    <app-searchable-selector\n      required\n      formControlName=\"grade_id\"\n      apiUrl=\"api/rating-grades\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <mat-error *ngIf=\"isFieldValid('grade_id')\">\n      {{ getErrorMessage('grade_id') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Details</mat-label>\n    <textarea matInput formControlName=\"details\" rows=\"3\" placeholder=\"Details\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-3\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"cancelled.emit()\">Cancel</button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: i1.AlertService }, { type: RatingService }], propDecorators: { rating: [{
+                type: Input
+            }], rateableType: [{
+                type: Input
+            }], rateableId: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
+class RatingFormButtonComponent {
+    matDialog;
+    rating;
+    rateableType;
+    rateableId;
+    saved = new EventEmitter();
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+    }
+    showForm(templateRef) {
+        this.matDialog.open(templateRef, { width: '400px' });
+    }
+    onSaved(category) {
+        this.matDialog.closeAll();
+        this.saved.emit(category);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingFormButtonComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RatingFormButtonComponent, isStandalone: true, selector: "app-rating-form-button", inputs: { rating: "rating", rateableType: "rateableType", rateableId: "rateableId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<mat-icon\n  *ngIf=\"!rating\"\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<mat-icon\n  *ngIf=\"rating\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  edit\n</mat-icon>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title class=\"mb-0\">\n    {{ rating ? 'Edit' : 'Create' }} Rating\n  </h3>\n  <div mat-dialog-content>\n    <app-rating-form\n      [rating]=\"rating\"\n      [rateableId]=\"rateableId\"\n      [rateableType]=\"rateableType\"\n      (saved)=\"onSaved($event)\"\n      (cancelled)=\"matDialog.closeAll()\"\n    ></app-rating-form>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RatingFormComponent, selector: "app-rating-form", inputs: ["rating", "rateableType", "rateableId"], outputs: ["saved", "cancelled"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-rating-form-button', standalone: true, imports: [
+                        MatIcon,
+                        RatingFormComponent,
+                        NgIf,
+                        MatDialogTitle,
+                        MatDialogContent
+                    ], template: "<mat-icon\n  *ngIf=\"!rating\"\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<mat-icon\n  *ngIf=\"rating\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  edit\n</mat-icon>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title class=\"mb-0\">\n    {{ rating ? 'Edit' : 'Create' }} Rating\n  </h3>\n  <div mat-dialog-content>\n    <app-rating-form\n      [rating]=\"rating\"\n      [rateableId]=\"rateableId\"\n      [rateableType]=\"rateableType\"\n      (saved)=\"onSaved($event)\"\n      (cancelled)=\"matDialog.closeAll()\"\n    ></app-rating-form>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { rating: [{
+                type: Input
+            }], rateableType: [{
+                type: Input
+            }], rateableId: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+class RatingListComponent extends TechlifyListingControllerInterface {
+    formBuilder;
+    requestHelperService;
+    activatedRoute;
+    ratingService;
+    supplierId;
+    rateableType;
+    rateableId;
+    displayedColumns = [
+        'No',
+        'Date',
+        'Grade',
+        'Details',
+        'Creator',
+        'Actions',
+    ];
+    constructor(formBuilder, requestHelperService, activatedRoute, ratingService) {
+        super();
+        this.formBuilder = formBuilder;
+        this.requestHelperService = requestHelperService;
+        this.activatedRoute = activatedRoute;
+        this.ratingService = ratingService;
+        this.lastPage = 0;
+        this.filterForm = this.formBuilder.group({
+            search: [''],
+            grade_ids: [''],
+            rateable_types: [''],
+            rateable_ids: [''],
+            sort_by: ['created_at|desc']
+        });
+    }
+    ngOnInit() {
+        if (this.rateableId && this.rateableType) {
+            this.filterForm.patchValue({
+                rateable_types: this.rateableType,
+                rateable_ids: this.rateableId
+            });
+        }
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            grade_ids: { multiple: true }
+        });
+        this.filterForm.valueChanges.pipe(debounceTime$1(800)).subscribe({
+            next: () => {
+                this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+            }
+        });
+        // listen for route change
+        this.activatedRoute.queryParams
+            .pipe(debounceTime$1(500), distinctUntilChanged())
+            .subscribe((val) => {
+            this.reload();
+        });
+    }
+    loadData() {
+        this.isWorking = true;
+        const params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+            page: this.page,
+            perPage: this.perPage,
+            with: 'grade,creator'
+        };
+        this.ratingService.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            }
+        });
+    }
+    onSortChange(sort) {
+        let { direction, active } = sort;
+        if (!active) {
+            active = 'created_at';
+            direction = 'desc';
+        }
+        if (!direction) {
+            direction = 'desc';
+        }
+        this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingListComponent, deps: [{ token: i2$1.FormBuilder }, { token: i1.RequestHelperService }, { token: i4$1.ActivatedRoute }, { token: RatingService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RatingListComponent, isStandalone: true, selector: "app-rating-list", inputs: { supplierId: "supplierId", rateableType: "rateableType", rateableId: "rateableId" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gal-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <h2 class=\"mb-0\">Ratings</h2>\n      <app-rating-form-button\n        [rateableId]=\"supplierId\" rateableType=\"Supplier\"\n        (saved)=\"reload()\"\n      ></app-rating-form-button>\n    </div>\n    <form\n      [formGroup]=\"filterForm\" (submit)=\"reload()\"\n      class=\"d-flex justify-content-end align-items-center gap-3\"\n    >\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search\" matInput formControlName=\"search\">\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Grade</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/rating-grades\"\n          [enableSearch]=\"false\"\n          formControlName=\"grade_ids\"\n          [multiple]=\"true\"\n        ></app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      matSort\n      (matSortChange)=\"onSortChange($event)\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n\n      <!-- No 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      <!-- Date Column -->\n      <ng-container matColumnDef=\"Date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"date\"> Date </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.date | date }} </td>\n      </ng-container>\n\n      <!-- Grade Column -->\n      <ng-container matColumnDef=\"Grade\">\n        <th mat-header-cell *matHeaderCellDef> Grade </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.grade?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Details Column -->\n      <ng-container matColumnDef=\"Details\">\n        <th mat-header-cell *matHeaderCellDef> Details </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.details }}\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          <app-rating-form-button\n            [rating]=\"element\" (saved)=\"reload()\"\n            [rateableId]=\"supplierId\" rateableType=\"Supplier\"\n          ></app-rating-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: RatingFormButtonComponent, selector: "app-rating-form-button", inputs: ["rating", "rateableType", "rateableId"], outputs: ["saved"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-rating-list', standalone: true, imports: [
+                        CurrencyPipe,
+                        DatePipe,
+                        InfiniteScrollDirective,
+                        MatCard,
+                        MatCardContent,
+                        MatCell,
+                        MatCellDef,
+                        MatColumnDef,
+                        MatFormField,
+                        MatHeaderCell,
+                        MatHeaderRow,
+                        MatHeaderRowDef,
+                        MatInput,
+                        MatLabel,
+                        MatProgressBar,
+                        MatRow,
+                        MatRowDef,
+                        MatSort,
+                        MatSortHeader,
+                        MatTable,
+                        NgIf,
+                        ReactiveFormsModule,
+                        SearchableSelectorModule,
+                        MatHeaderCellDef,
+                        RatingFormButtonComponent
+                    ], template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gal-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <h2 class=\"mb-0\">Ratings</h2>\n      <app-rating-form-button\n        [rateableId]=\"supplierId\" rateableType=\"Supplier\"\n        (saved)=\"reload()\"\n      ></app-rating-form-button>\n    </div>\n    <form\n      [formGroup]=\"filterForm\" (submit)=\"reload()\"\n      class=\"d-flex justify-content-end align-items-center gap-3\"\n    >\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search\" matInput formControlName=\"search\">\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Grade</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/rating-grades\"\n          [enableSearch]=\"false\"\n          formControlName=\"grade_ids\"\n          [multiple]=\"true\"\n        ></app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      matSort\n      (matSortChange)=\"onSortChange($event)\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n\n      <!-- No 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      <!-- Date Column -->\n      <ng-container matColumnDef=\"Date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"date\"> Date </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.date | date }} </td>\n      </ng-container>\n\n      <!-- Grade Column -->\n      <ng-container matColumnDef=\"Grade\">\n        <th mat-header-cell *matHeaderCellDef> Grade </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.grade?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Details Column -->\n      <ng-container matColumnDef=\"Details\">\n        <th mat-header-cell *matHeaderCellDef> Details </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.details }}\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          <app-rating-form-button\n            [rating]=\"element\" (saved)=\"reload()\"\n            [rateableId]=\"supplierId\" rateableType=\"Supplier\"\n          ></app-rating-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: i2$1.FormBuilder }, { type: i1.RequestHelperService }, { type: i4$1.ActivatedRoute }, { type: RatingService }], propDecorators: { supplierId: [{
+                type: Input
+            }], rateableType: [{
+                type: Input
+            }], rateableId: [{
+                type: Input
+            }] } });
+
+class SupplierInformationComponent {
+    dialog;
+    supplierService;
+    alertService;
+    router;
+    errorService;
+    supplier;
+    constructor(dialog, supplierService, alertService, router, errorService) {
+        this.dialog = dialog;
+        this.supplierService = supplierService;
+        this.alertService = alertService;
+        this.router = router;
+        this.errorService = errorService;
+    }
+    modifySupplier(model) {
+        const dialogRef = this.dialog.open(SupplierFormComponent, {
+            width: '600px',
+            data: {
+                details: model,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                location.reload();
+            }
+        });
+    }
+    deleteSupplier(id) {
+        const dialogRef = this.dialog.open(ActionPopupComponent, {
+            width: '400px',
+            data: {
+                title: 'Delete Supplier',
+                message: 'Are you sure you want to delete this supplier?',
+            },
+            autoFocus: false,
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            if (result) {
+                try {
+                    const result = await this.supplierService.destroy(id);
+                    this.alertService.addAlert('Successfully Deleted Supplier', 'success');
+                }
+                catch (error) {
+                    this.errorService.handleError(error);
+                }
+                finally {
+                    this.router.navigateByUrl('/suppliers');
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierInformationComponent, deps: [{ token: i1$1.MatDialog }, { token: SupplierService }, { token: i1.AlertService }, { token: i4$1.Router }, { token: i1.ErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierInformationComponent, selector: "app-supplier-information", inputs: { supplier: "supplier" }, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <div class=\"d-flex justify-content-between align-items-center\">\n      <h3 class=\"mb-0\">Personal Information</h3>\n      <div class=\"d-flex justify-content-end align-items-center gap-1\">\n        <app-audit-log-for-model [modelId]=\"supplier?.id\" modelType=\"Supplier\" logView=\"all\"></app-audit-log-for-model>\n        <mat-icon class=\"material-icons cursor-pointer\" (click)=\"modifySupplier(supplier)\"> edit </mat-icon>\n        <mat-icon class=\"material-icons cursor-pointer\" (click)=\"deleteSupplier(supplier)\"> delete </mat-icon>\n      </div>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <div class=\"mt-2\">\n      <div class=\"d-flex justify-content-start gap-2\">\n        <div>\n          <h3 class=\"mb-0\">{{ supplier?.company_name }}</h3>\n          <span *ngIf=\"supplier?.type\" class=\"status-pill-sm status-light-orange\"> {{ supplier?.type?.title }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row mt-3\">\n      <div class=\"col-6\" *ngIf=\"supplier?.contact_name\">\n        <p class=\"text-muted mb-0\">Contact Name</p>\n        <p class=\"text-wrap\">{{ supplier?.contact_name }}</p>\n      </div>\n      <div class=\"col-6\" *ngIf=\"supplier?.email\">\n        <p class=\"text-muted mb-0\">Email</p>\n        <p class=\"text-wrap\">{{ supplier?.email }}</p>\n      </div>\n      <div class=\"col-6\" *ngIf=\"supplier?.phone\">\n        <p class=\"text-muted mb-0\">Phone</p>\n        <p class=\"text-wrap\">{{ supplier?.phone }}</p>\n      </div>\n      <div class=\"col-6\" *ngIf=\"supplier?.details\">\n        <p class=\"text-muted mb-0\">Details</p>\n        <p class=\"text-wrap\">{{ supplier?.details }}</p>\n      </div>\n    </div>\n\n    <div class=\"row mt-2 h-100\">\n      <div class=\"d-flex\" *ngIf=\"supplier?.address\">\n        <mat-icon class=\"material-icons text-primary my-auto\">location_on</mat-icon>\n        <p class=\"ms-2 my-auto\">{{ supplier?.address }}</p>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1.AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["modelType", "modelId", "logView"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierInformationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-supplier-information', template: "<mat-card>\n  <mat-card-content>\n    <div class=\"d-flex justify-content-between align-items-center\">\n      <h3 class=\"mb-0\">Personal Information</h3>\n      <div class=\"d-flex justify-content-end align-items-center gap-1\">\n        <app-audit-log-for-model [modelId]=\"supplier?.id\" modelType=\"Supplier\" logView=\"all\"></app-audit-log-for-model>\n        <mat-icon class=\"material-icons cursor-pointer\" (click)=\"modifySupplier(supplier)\"> edit </mat-icon>\n        <mat-icon class=\"material-icons cursor-pointer\" (click)=\"deleteSupplier(supplier)\"> delete </mat-icon>\n      </div>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <div class=\"mt-2\">\n      <div class=\"d-flex justify-content-start gap-2\">\n        <div>\n          <h3 class=\"mb-0\">{{ supplier?.company_name }}</h3>\n          <span *ngIf=\"supplier?.type\" class=\"status-pill-sm status-light-orange\"> {{ supplier?.type?.title }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row mt-3\">\n      <div class=\"col-6\" *ngIf=\"supplier?.contact_name\">\n        <p class=\"text-muted mb-0\">Contact Name</p>\n        <p class=\"text-wrap\">{{ supplier?.contact_name }}</p>\n      </div>\n      <div class=\"col-6\" *ngIf=\"supplier?.email\">\n        <p class=\"text-muted mb-0\">Email</p>\n        <p class=\"text-wrap\">{{ supplier?.email }}</p>\n      </div>\n      <div class=\"col-6\" *ngIf=\"supplier?.phone\">\n        <p class=\"text-muted mb-0\">Phone</p>\n        <p class=\"text-wrap\">{{ supplier?.phone }}</p>\n      </div>\n      <div class=\"col-6\" *ngIf=\"supplier?.details\">\n        <p class=\"text-muted mb-0\">Details</p>\n        <p class=\"text-wrap\">{{ supplier?.details }}</p>\n      </div>\n    </div>\n\n    <div class=\"row mt-2 h-100\">\n      <div class=\"d-flex\" *ngIf=\"supplier?.address\">\n        <mat-icon class=\"material-icons text-primary my-auto\">location_on</mat-icon>\n        <p class=\"ms-2 my-auto\">{{ supplier?.address }}</p>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: SupplierService }, { type: i1.AlertService }, { type: i4$1.Router }, { type: i1.ErrorHandlerService }], propDecorators: { supplier: [{
+                type: Input
+            }] } });
+
+class SupplierViewComponent {
+    supplierService;
+    route;
+    router;
+    supplier;
+    supplierId = 0;
+    selectedTabIndex = 0;
+    isLoading = false;
+    constructor(supplierService, route, router) {
+        this.supplierService = supplierService;
+        this.route = route;
+        this.router = router;
+    }
+    ngOnInit() {
+        this.route.firstChild?.url.subscribe((url) => {
+            if (url[0].path === 'ratings') {
+                this.selectedTabIndex = 1;
+            }
+            else if (url[0].path === 'estimates') {
+                this.selectedTabIndex = 2;
+            }
+            else {
+                this.selectedTabIndex = 0;
+            }
+        });
+        this.supplierId = this.route.snapshot.params['id'];
+        this.getSupplier(this.supplierId);
+    }
+    onTabChange(event) {
+        switch (event.index) {
+            case 0:
+                this.router.navigate(['incidents'], { relativeTo: this.route });
+                return;
+            case 1:
+                this.router.navigate(['ratings'], { relativeTo: this.route });
+                return;
+            case 2:
+                this.router.navigate(['estimates'], { relativeTo: this.route });
+                return;
+        }
+    }
+    async getSupplier(id) {
+        this.isLoading = true;
+        let result = await lastValueFrom(this.supplierService.show(id));
+        this.isLoading = false;
+        this.supplier = result.item;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierViewComponent, deps: [{ token: SupplierService }, { token: i4$1.ActivatedRoute }, { token: i4$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierViewComponent, selector: "app-supplier-view", ngImport: i0, template: "<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div *ngIf=\"supplier\" class=\"d-flex flex-row gap-3 justify-content-between\">\n  <div style=\"width: 300px\">\n    <app-supplier-information [supplier]=\"supplier\"></app-supplier-information>\n    <mat-card class=\"mt-3\">\n      <mat-card-content class=\"p-0\">\n        <app-note-list modelType=\"Supplier\" [relatedModelId]=\"supplier?.id\" viewMode=\"timeline\"\n          labelText=\"Notes\"></app-note-list>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <mat-card class='w-100'>\n    <mat-card-content>\n      <mat-tab-group [mat-stretch-tabs]=\"false\">\n        <mat-tab label=\"Incidents\">\n          <app-incident-list [supplierId]=\"supplier?.id\" incidentableType=\"Supplier\" [incidentableId]=\"supplier?.id\">\n          </app-incident-list>\n        </mat-tab>\n        <mat-tab label=\"Ratings\">\n          <app-rating-list [supplierId]=\"supplier?.id\" [rateableId]=\"supplier?.id\" rateableType=\"Supplier\"></app-rating-list>\n        </mat-tab>\n        <mat-tab label=\"Stock Receipts\">\n          <app-stock-receipts-list-page [supplierId]=\"supplier?.id\"></app-stock-receipts-list-page>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-card-content>\n  </mat-card>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: StockReceiptsListPageComponent, selector: "app-stock-receipts-list-page", inputs: ["product", "supplierId"], outputs: ["listUpdated"] }, { kind: "component", type: IncidentListComponent, selector: "app-incident-list", inputs: ["supplierId", "incidentableType", "incidentableId"] }, { kind: "component", type: RatingListComponent, selector: "app-rating-list", inputs: ["supplierId", "rateableType", "rateableId"] }, { kind: "component", type: SupplierInformationComponent, selector: "app-supplier-information", inputs: ["supplier"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-supplier-view', template: "<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div *ngIf=\"supplier\" class=\"d-flex flex-row gap-3 justify-content-between\">\n  <div style=\"width: 300px\">\n    <app-supplier-information [supplier]=\"supplier\"></app-supplier-information>\n    <mat-card class=\"mt-3\">\n      <mat-card-content class=\"p-0\">\n        <app-note-list modelType=\"Supplier\" [relatedModelId]=\"supplier?.id\" viewMode=\"timeline\"\n          labelText=\"Notes\"></app-note-list>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <mat-card class='w-100'>\n    <mat-card-content>\n      <mat-tab-group [mat-stretch-tabs]=\"false\">\n        <mat-tab label=\"Incidents\">\n          <app-incident-list [supplierId]=\"supplier?.id\" incidentableType=\"Supplier\" [incidentableId]=\"supplier?.id\">\n          </app-incident-list>\n        </mat-tab>\n        <mat-tab label=\"Ratings\">\n          <app-rating-list [supplierId]=\"supplier?.id\" [rateableId]=\"supplier?.id\" rateableType=\"Supplier\"></app-rating-list>\n        </mat-tab>\n        <mat-tab label=\"Stock Receipts\">\n          <app-stock-receipts-list-page [supplierId]=\"supplier?.id\"></app-stock-receipts-list-page>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-card-content>\n  </mat-card>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: SupplierService }, { type: i4$1.ActivatedRoute }, { type: i4$1.Router }] });
+
+class SupplierFormService extends TechlifyFormService {
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class SupplierComponent {
+    dialog;
+    supplierFormService;
+    constructor(dialog, supplierFormService) {
+        this.dialog = dialog;
+        this.supplierFormService = supplierFormService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierComponent, deps: [{ token: i1$1.MatDialog }, { token: SupplierFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierComponent, selector: "app-supplier", ngImport: i0, template: "<div>\n  <router-outlet></router-outlet>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.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: SupplierComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-supplier', template: "<div>\n  <router-outlet></router-outlet>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: SupplierFormService }] });
+
+class SupplierFormButtonComponent {
+    matDialog;
+    supplier;
+    onSaved = new EventEmitter();
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+    }
+    ngOnInit() {
+    }
+    openDialog() {
+        this.matDialog.open(SupplierFormComponent, {
+            width: '600px',
+            data: {
+                details: this.supplier
+            },
+        }).afterClosed().subscribe((result) => {
+            if (result) {
+                this.onSaved.emit(result);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormButtonComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierFormButtonComponent, isStandalone: true, selector: "app-supplier-form-button", inputs: { supplier: "supplier" }, outputs: { onSaved: "onSaved" }, ngImport: i0, template: "<mat-icon color=\"primary\" class=\"cursor-pointer\" [class.text-secondary]=\"supplier\" (click)=\"openDialog()\">\n  {{ supplier ? \"edit\" : \"add\" }}\n</mat-icon>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-supplier-form-button', standalone: true, imports: [
+                        CommonModule,
+                        MaterialModule
+                    ], template: "<mat-icon color=\"primary\" class=\"cursor-pointer\" [class.text-secondary]=\"supplier\" (click)=\"openDialog()\">\n  {{ supplier ? \"edit\" : \"add\" }}\n</mat-icon>" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { supplier: [{
+                type: Input
+            }], onSaved: [{
+                type: Output
+            }] } });
+
+class SupplierDeleteButtonComponent {
+    dialog;
+    alertService;
+    errorHandler;
+    supplierService;
+    supplier;
+    onDelete = new EventEmitter();
+    constructor(dialog, alertService, errorHandler, supplierService) {
+        this.dialog = dialog;
+        this.alertService = alertService;
+        this.errorHandler = errorHandler;
+        this.supplierService = supplierService;
+    }
+    ngOnInit() {
+    }
+    openDialog() {
+        this.dialog.open(ActionPopupComponent, {
+            width: '400px',
+            data: {
+                title: 'Delete Supplier',
+                message: 'Are you sure you want to delete the Supplier?',
+            },
+            autoFocus: false,
+        }).afterClosed().subscribe(async (result) => {
+            if (result) {
+                try {
+                    await lastValueFrom(this.supplierService.destroy(this.supplier.id));
+                    this.alertService.addAlert('Successfully deleted the Supplier', 'success');
+                    this.onDelete.emit(this.supplier);
+                }
+                catch (error) {
+                    this.errorHandler.handleError(error);
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.AlertService }, { token: i1.ErrorHandlerService }, { token: SupplierService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierDeleteButtonComponent, isStandalone: true, selector: "app-supplier-delete-button", inputs: { supplier: "supplier" }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer\" *ngxPermissionsOnly=\"['supplier.delete']\" (click)=\"openDialog()\">\n  delete\n</mat-icon>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i5$2.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-supplier-delete-button', standalone: true, imports: [
+                        CommonModule,
+                        MaterialModule,
+                        NgxPermissionsModule
+                    ], template: "<mat-icon class=\"cursor-pointer\" *ngxPermissionsOnly=\"['supplier.delete']\" (click)=\"openDialog()\">\n  delete\n</mat-icon>" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.AlertService }, { type: i1.ErrorHandlerService }, { type: SupplierService }], propDecorators: { supplier: [{
+                type: Input
+            }], onDelete: [{
+                type: Output
+            }] } });
+
+let SuppliersListComponent = class SuppliersListComponent extends TechlifyListingControllerInterface {
+    spinner;
+    fb;
+    supplierService;
+    errorHandler;
+    filterService;
+    activatedRoute;
+    alertService;
+    dialog;
+    supplierFormService;
+    requestHelperService;
+    displayedColumns = [
+        '#',
+        'company_name',
+        'type',
+        'contact_name',
+        'phone',
+        'address',
+        'email',
+        'details',
+        'actions',
+    ];
+    constructor(spinner, fb, supplierService, errorHandler, filterService, activatedRoute, alertService, dialog, supplierFormService, requestHelperService) {
+        super();
+        this.spinner = spinner;
+        this.fb = fb;
+        this.supplierService = supplierService;
+        this.errorHandler = errorHandler;
+        this.filterService = filterService;
+        this.activatedRoute = activatedRoute;
+        this.alertService = alertService;
+        this.dialog = dialog;
+        this.supplierFormService = supplierFormService;
+        this.requestHelperService = requestHelperService;
+        this.page = 1;
+        this.perPage = 25;
+        this.models = [];
+        this.filterForm = this.fb.group({
+            search: [''],
+            supplier_type_ids: [''],
+            sort_by: ['created_at|desc'],
+        });
+    }
+    ngOnInit() {
+        this.updateFormWithQueryParams();
+        this.subscribeToFormChanges();
+        this.subscribeToRouteChanges();
+    }
+    listenForChanges() {
+        // listen for supplier added event to update the list.
+        this.supplierFormService.isListUpdated().subscribe((val) => {
+            if (val && !this.isWorking)
+                this.reload();
+        });
+        // listen for form group changes.
+        this.filterForm.valueChanges.pipe(debounceTime$1(500), untilDestroyed(this)).subscribe(() => {
+            this.filterService.applyFilterToRoute(this.activatedRoute, this.filterForm.value);
+            this.reload();
+        });
+    }
+    sortColumn(event) {
+        var direction = event.direction.toString().toUpperCase();
+        this.assignFilter(event.active, direction);
+    }
+    assignFilter(column, direction) {
+        return this.filterForm.get('sort_by')?.setValue(column + '|' + direction);
+    }
+    async loadData() {
+        let filters = { ...this.requestHelperService.convertToFormData(this.filterForm.value) };
+        filters.page = this.page = 1;
+        filters.perPage = this.perPage;
+        try {
+            this.isWorking = true;
+            let res = await lastValueFrom(this.supplierService.index(filters));
+            this.models = this.models?.concat(res?.data);
+            this.lastPage = res.last_page;
+            // list is updated do not listen form isListUpdated
+            this.supplierFormService.listUpdated(false);
+        }
+        catch (error) {
+            this.errorHandler.handleError(error);
+        }
+        finally {
+            this.isWorking = false;
+        }
+    }
+    updateFormWithQueryParams() {
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            supplier_type_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: SuppliersListComponent, deps: [{ token: i4$2.NgxSpinnerService }, { token: i2$1.FormBuilder }, { token: SupplierService }, { token: i1.ErrorHandlerService }, { token: i1.FilterService }, { token: i4$1.ActivatedRoute }, { token: i1.AlertService }, { token: i1$1.MatDialog }, { token: SupplierFormService }, { token: i1.RequestHelperService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SuppliersListComponent, selector: "app-suppliers-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <h3 class=\"mb-0 fw-bold\">Suppliers</h3>\n      <app-supplier-form-button (onSaved)=\"reload()\" class=\"mt-2\"></app-supplier-form-button>\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 Supplier by Name, Phone, Address, Email, Description\"\n          formControlName=\"search\" />\n        <mat-icon matSuffix>search</mat-icon>\n      </mat-form-field>\n      <mat-form-field>\n        <mat-label>Type</mat-label>\n        <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table #table [dataSource]=\"models\" class=\"w-100 table-hover\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"sortColumn($event)\" aria-describedby=\"Suppliers List\">\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=\"company_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.company_name }}\n        </td>\n      </ng-container>\n\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      <ng-container matColumnDef=\"contact_name\">\n        <th mat-header-cell *matHeaderCellDef>Contact</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.contact_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"phone\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"address\">\n        <th mat-header-cell *matHeaderCellDef>Address</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"details\">\n        <th mat-header-cell *matHeaderCellDef>Details</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</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\">\n          <div class=\"text-secondary d-flex align-items-center gap-1\">\n\n            <a class=\"text-decoration-none text-secondary\" [routerLink]=\"['/inventory/suppliers', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\" *ngxPermissionsOnly=\"['supplier.read']\">\n              <mat-icon matTooltip=\"View\">remove_red_eye</mat-icon>\n            </a>\n            <app-supplier-form-button *ngxPermissionsOnly=\"['supplier.update']\" [supplier]=\"element\"\n              (onSaved)=\"reload()\"></app-supplier-form-button>\n            <app-supplier-delete-button [supplier]=\"element\" (onDelete)=\"reload()\"></app-supplier-delete-button>\n            <app-audit-log-for-model [modelId]=\"element?.id\" modelType=\"Supplier\"\n              logView=\"all\"></app-audit-log-for-model>\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\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i15.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i15.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i15.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i15.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i15.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i15.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i15.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i15.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i15.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i15.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["modelType", "modelId", "logView"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i5$2.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "component", type: SupplierFormButtonComponent, selector: "app-supplier-form-button", inputs: ["supplier"], outputs: ["onSaved"] }, { kind: "component", type: SupplierDeleteButtonComponent, selector: "app-supplier-delete-button", inputs: ["supplier"], outputs: ["onDelete"] }], preserveWhitespaces: true });
+};
+SuppliersListComponent = __decorate([
+    UntilDestroy()
+], SuppliersListComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuppliersListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-suppliers-list', template: "<mat-card class=\"mb-3\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <h3 class=\"mb-0 fw-bold\">Suppliers</h3>\n      <app-supplier-form-button (onSaved)=\"reload()\" class=\"mt-2\"></app-supplier-form-button>\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 Supplier by Name, Phone, Address, Email, Description\"\n          formControlName=\"search\" />\n        <mat-icon matSuffix>search</mat-icon>\n      </mat-form-field>\n      <mat-form-field>\n        <mat-label>Type</mat-label>\n        <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table #table [dataSource]=\"models\" class=\"w-100 table-hover\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"sortColumn($event)\" aria-describedby=\"Suppliers List\">\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=\"company_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.company_name }}\n        </td>\n      </ng-container>\n\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      <ng-container matColumnDef=\"contact_name\">\n        <th mat-header-cell *matHeaderCellDef>Contact</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.contact_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"phone\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"address\">\n        <th mat-header-cell *matHeaderCellDef>Address</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"details\">\n        <th mat-header-cell *matHeaderCellDef>Details</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</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\">\n          <div class=\"text-secondary d-flex align-items-center gap-1\">\n\n            <a class=\"text-decoration-none text-secondary\" [routerLink]=\"['/inventory/suppliers', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\" *ngxPermissionsOnly=\"['supplier.read']\">\n              <mat-icon matTooltip=\"View\">remove_red_eye</mat-icon>\n            </a>\n            <app-supplier-form-button *ngxPermissionsOnly=\"['supplier.update']\" [supplier]=\"element\"\n              (onSaved)=\"reload()\"></app-supplier-form-button>\n            <app-supplier-delete-button [supplier]=\"element\" (onDelete)=\"reload()\"></app-supplier-delete-button>\n            <app-audit-log-for-model [modelId]=\"element?.id\" modelType=\"Supplier\"\n              logView=\"all\"></app-audit-log-for-model>\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\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: i4$2.NgxSpinnerService }, { type: i2$1.FormBuilder }, { type: SupplierService }, { type: i1.ErrorHandlerService }, { type: i1.FilterService }, { type: i4$1.ActivatedRoute }, { type: i1.AlertService }, { type: i1$1.MatDialog }, { type: SupplierFormService }, { type: i1.RequestHelperService }] });
+
+const routes$2 = [
+    {
+        path: '',
+        component: SupplierComponent,
+        children: [
+            { path: '', component: SuppliersListComponent },
+            {
+                path: ':id/view',
+                component: SupplierViewComponent,
+            },
+        ],
+    },
+];
+class SupplierRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, imports: [RouterModule.forChild(routes$2), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes$2)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class SupplierModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SupplierModule, declarations: [SupplierComponent,
+            SupplierViewComponent,
+            SuppliersListComponent,
+            SupplierFormComponent,
+            SupplierInformationComponent], imports: [CommonModule,
+            SupplierRoutingModule,
+            MaterialModule,
+            SearchableSelectorModule,
+            AuditLogForModelModule,
+            NoteModule,
+            FlexModule,
+            ReactiveFormsModule,
+            InfiniteScrollModule,
+            NgxPermissionsModule,
+            SupplierFormButtonComponent,
+            SupplierDeleteButtonComponent,
+            StockReceiptsModule,
+            IncidentListComponent,
+            RatingListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierModule, imports: [CommonModule,
+            SupplierRoutingModule,
+            MaterialModule,
+            SearchableSelectorModule,
+            AuditLogForModelModule,
+            NoteModule,
+            FlexModule,
+            ReactiveFormsModule,
+            InfiniteScrollModule,
+            NgxPermissionsModule,
+            SupplierFormButtonComponent,
+            SupplierDeleteButtonComponent,
+            StockReceiptsModule,
+            IncidentListComponent,
+            RatingListComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SupplierComponent,
+                        SupplierViewComponent,
+                        SuppliersListComponent,
+                        SupplierFormComponent,
+                        SupplierInformationComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SupplierRoutingModule,
+                        MaterialModule,
+                        SearchableSelectorModule,
+                        AuditLogForModelModule,
+                        NoteModule,
+                        FlexModule,
+                        ReactiveFormsModule,
+                        InfiniteScrollModule,
+                        NgxPermissionsModule,
+                        SupplierFormButtonComponent,
+                        SupplierDeleteButtonComponent,
+                        StockReceiptsModule,
+                        IncidentListComponent,
+                        RatingListComponent
+                    ],
+                }]
+        }] });
+
+var supplier_module = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SupplierModule: SupplierModule
+});
+
+class SupplierTypeService {
+    httpService;
+    constructor(httpService) {
+        this.httpService = httpService;
+    }
+    /**
+     * get all suppliers from API
+     *
+     */
+    index() {
+        return this.httpService.get(`api/supplier-types`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierTypeService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierTypeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierTypeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+const routes$1 = [
+    {
+        path: '',
+        component: IncidentListComponent
+    }
+];
+class IncidentRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: IncidentRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentRoutingModule, imports: [RouterModule.forChild(routes$1), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes$1)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class IncidentModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: IncidentModule, imports: [CommonModule,
+            IncidentRoutingModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentModule, imports: [CommonModule,
+            IncidentRoutingModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IncidentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        IncidentRoutingModule
+                    ]
+                }]
+        }] });
+
+const routes = [
+    {
+        path: '', component: RatingListComponent
+    }
+];
+class RatingRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RatingRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class RatingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RatingModule, imports: [CommonModule,
+            RatingRoutingModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingModule, imports: [CommonModule,
+            RatingRoutingModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        RatingRoutingModule
+                    ]
+                }]
+        }] });
+
 /*
  * Public API Surface of inventory-common
  */
@@ -3931,5 +5060,5 @@ var stockIssuances_module = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { InventoryCommonRoutingModule as I, LocationService as L, MaterialModule as M, ProductModule as P, SupplierFormComponent as S, TechlifyFormService as T, SupplierService as a, StockReceiptsListPageComponent as b, StockReceiptsModule as c, ProductCategoryBadgesComponent as d, StockTransferFormButtonComponent as e, MeasureService as f, TechlifyFilterComponent as g, TechlifyFilterModule as h, InventoryCommonModule as i, StockSummaryService as j, ProductFormComponent as k, ProductBasicInfoComponent as l, ProductFormButtonComponent as m, StockIssuancesModule as n, StockIssuancesListComponent as o, StockIssuancesListModule as p };
-//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-KJHI_roN.mjs.map
+export { RatingFormButtonComponent as A, InventoryCommonRoutingModule as I, LocationService as L, MaterialModule as M, ProductModule as P, RatingModule as R, StockTransferFormButtonComponent as S, TechlifyFilterComponent as T, ProductCategoryBadgesComponent as a, MeasureService as b, TechlifyFilterModule as c, InventoryCommonModule as d, StockSummaryService as e, ProductFormComponent as f, ProductBasicInfoComponent as g, ProductFormButtonComponent as h, StockIssuancesModule as i, StockIssuancesListComponent as j, StockIssuancesListModule as k, SupplierModule as l, SupplierFormButtonComponent as m, SupplierFormComponent as n, SuppliersListComponent as o, SupplierTypeService as p, PayeeSelectorModule as q, PayeeSelectorComponent as r, IncidentModule as s, IncidentService as t, IncidentListComponent as u, IncidentFormComponent as v, IncidentFormButtonComponent as w, RatingService as x, RatingListComponent as y, RatingFormComponent as z };
+//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-BBi2hKoE.mjs.map