ngx-techlify-core 18.17.1 → 18.18.0

package/fesm2022/ngx-techlify-core.mjs

@@ -2247,6 +2247,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: HttpService }] });
 
+/**
+ * @deprecated by release 18.20
+ */
 class FilterService {
     constructor(router) {
         this.router = router;
@@ -2885,6 +2888,9 @@ class RequestHelperService {
             const array = value?.split(',');
             return array.map((val) => this.isNumeric(val) ? Number.parseInt(val) : val);
         }
+        else if (value && formGroupElement?.date && formGroupElement?.date === true) {
+            return new Date(value);
+        }
         else if (value && formGroupElement?.number && formGroupElement?.number === true) {
             return Number.parseInt(value);
         }
@@ -3721,11 +3727,13 @@ let TimelineFilterComponent = class TimelineFilterComponent {
         this.id = `timeline-filter-${TimelineFilterComponent_1.nextId++}`;
         this.describedBy = '';
         this.focused = false;
-        this.showCustomDateFields = false;
+        this.isCustomSelected = false;
         this._required = false;
         this._disabled = false;
         this.onChange = () => { };
         this.onTouched = () => { };
+        //Custom range
+        this.selectedRangeLabel = '';
         this.selectorForm = formBuilder.group({
             select_value: [''],
             custom_date_from: [''],
@@ -3738,8 +3746,8 @@ let TimelineFilterComponent = class TimelineFilterComponent {
     ngOnInit() {
         this.timelineValue.valueChanges.
             pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)).subscribe(value => this.value = value);
-        this.customDateFrom.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)).subscribe(value => this.setFieldValue(this.dateFrom, this.datePipe.transform(value, 'yyyy-MM-dd')));
-        this.customDateTo.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)).subscribe(value => this.setFieldValue(this.dateTo, this.datePipe.transform(value, 'yyyy-MM-dd')));
+        this.customDateFrom.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)).subscribe(_ => this.applyRange());
+        this.customDateTo.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)).subscribe(_ => this.applyRange());
     }
     resetFieldValue(field) {
         this.form?.get(field)?.setValue('');
@@ -3747,14 +3755,19 @@ let TimelineFilterComponent = class TimelineFilterComponent {
     getFieldValue(field) {
         return this.form?.get(field)?.value;
     }
-    setFieldValue(field, value) {
-        this.form?.get(field)?.setValue(value);
+    setFieldValue(field, value, emitEvent = true) {
+        this.form?.get(field)?.setValue(value, { emitEvent: emitEvent });
+    }
+    selectionChanged(selected) {
+        if (selected.value == Timeline.CUSTOM) {
+            this.openCalendar();
+        }
     }
     changeTimeline(value) {
         value = parseInt(value);
         const timeline = calculateTimeline(value, this.dateFrom, this.dateTo);
         if (timeline) {
-            this.showCustomDateFields = timeline.show_custom_field;
+            this.isCustomSelected = timeline.show_custom_field;
             //For custom timeline, set the initial from the previous ranges if present
             if (value == Timeline.CUSTOM) {
                 timeline.date_from = this.getFieldValue(this.dateFrom) ?? '';
@@ -3763,6 +3776,7 @@ let TimelineFilterComponent = class TimelineFilterComponent {
                     'custom_date_from': timeline.date_from,
                     'custom_date_to': timeline.date_to,
                 }, { emitEvent: false });
+                this.applyRange();
             }
             this.setFieldValue(this.dateFrom, timeline.date_from);
             this.setFieldValue(this.dateTo, timeline.date_to);
@@ -3770,6 +3784,18 @@ let TimelineFilterComponent = class TimelineFilterComponent {
         this.onChange(this.value);
         this.selectionChange.emit(timeline);
     }
+    openCalendar() {
+        this.picker.open();
+    }
+    applyRange() {
+        const from = this.selectorForm.get('custom_date_from')?.value;
+        const to = this.selectorForm.get('custom_date_to')?.value;
+        if (from && to) {
+            this.selectedRangeLabel = `<b>${this.datePipe.transform(from, 'yyyy-MM-dd')}</b> to <b>${this.datePipe.transform(to, 'yyyy-MM-dd')}</b`;
+            this.setFieldValue(this.dateFrom, this.datePipe.transform(from, 'yyyy-MM-dd'));
+            this.setFieldValue(this.dateTo, this.datePipe.transform(to, 'yyyy-MM-dd'));
+        }
+    }
     setDescribedByIds(ids) {
         this.describedBy = ids.join(' ');
     }
@@ -3798,7 +3824,7 @@ let TimelineFilterComponent = class TimelineFilterComponent {
                 provide: MatFormFieldControl,
                 useExisting: TimelineFilterComponent
             }
-        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<ng-container [formGroup]=\"selectorForm\">\n    <mat-form-field [appearance]=\"appearance\">\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select formControlName=\"select_value\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n        <button *ngIf=\"showClearButton && timelineValue.value\" matSuffix mat-icon-button\n            (click)=\"timelineValue.setValue('')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"showCustomDateFields\">\n        <mat-form-field [appearance]=\"appearance\" style=\"width:200px\">\n            <mat-label>From Date</mat-label>\n            <input matInput formControlName=\"custom_date_from\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n                placeholder=\"From Date\" readonly />\n            <mat-datepicker #fromPicker></mat-datepicker>\n            <button *ngIf=\"getFieldValue(dateFrom)\" matSuffix mat-icon-button (click)=\"resetFieldValue(dateFrom)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n        <mat-form-field [appearance]=\"appearance\" style=\"width:200px\">\n            <mat-label>To Date</mat-label>\n            <input matInput formControlName=\"custom_date_to\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n                placeholder=\"To Date\" readonly />\n            <mat-datepicker #toPicker></mat-datepicker>\n            <button *ngIf=\"getFieldValue(dateTo)\" matSuffix mat-icon-button (click)=\"resetFieldValue(dateTo)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n    </ng-container>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9$3.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: "component", type: i8$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$2.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.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }] }); }
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<ng-container [formGroup]=\"selectorForm\">\n    <mat-form-field [appearance]=\"appearance\" style=\"width:200px\">\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select formControlName=\"select_value\" (selectionChange)=\"selectionChanged($event)\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n        <button *ngIf=\"showClearButton && timelineValue.value\" matSuffix mat-icon-button\n            (click)=\"timelineValue.setValue('')\">\n            <mat-icon>close</mat-icon>\n        </button>\n        <mat-hint *ngIf=\"isCustomSelected && selectedRangeLabel\">\n            <span class=\"custom-hint\" (click)=\"openCalendar()\">\n                <span [innerHTML]=\"selectedRangeLabel\"></span> <mat-icon fontIcon=\"edit\"\n                    style=\"font-size: 16px; vertical-align: middle;\">edit</mat-icon>\n            </span>\n        </mat-hint>\n        <mat-date-range-input class=\"offscreen-range-input\" [rangePicker]=\"picker\">\n            <input matStartDate formControlName=\"custom_date_from\" placeholder=\"From date\" readonly />\n            <input matEndDate formControlName=\"custom_date_to\" placeholder=\"To date\" readonly />\n        </mat-date-range-input>\n        <mat-date-range-picker #picker></mat-date-range-picker>\n    </mat-form-field>\n</ng-container>", styles: [".custom-hint{cursor:pointer;display:inline-flex;align-items:center;gap:4px}.custom-hint:hover{text-decoration:underline}.offscreen-range-input{position:absolute;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i9$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9$3.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: "component", type: i8$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }] }); }
 };
 TimelineFilterComponent = TimelineFilterComponent_1 = __decorate([
     UntilDestroy()
@@ -3811,7 +3837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: MatFormFieldControl,
                             useExisting: TimelineFilterComponent
                         }
-                    ], template: "<ng-container [formGroup]=\"selectorForm\">\n    <mat-form-field [appearance]=\"appearance\">\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select formControlName=\"select_value\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n        <button *ngIf=\"showClearButton && timelineValue.value\" matSuffix mat-icon-button\n            (click)=\"timelineValue.setValue('')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"showCustomDateFields\">\n        <mat-form-field [appearance]=\"appearance\" style=\"width:200px\">\n            <mat-label>From Date</mat-label>\n            <input matInput formControlName=\"custom_date_from\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n                placeholder=\"From Date\" readonly />\n            <mat-datepicker #fromPicker></mat-datepicker>\n            <button *ngIf=\"getFieldValue(dateFrom)\" matSuffix mat-icon-button (click)=\"resetFieldValue(dateFrom)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n        <mat-form-field [appearance]=\"appearance\" style=\"width:200px\">\n            <mat-label>To Date</mat-label>\n            <input matInput formControlName=\"custom_date_to\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n                placeholder=\"To Date\" readonly />\n            <mat-datepicker #toPicker></mat-datepicker>\n            <button *ngIf=\"getFieldValue(dateTo)\" matSuffix mat-icon-button (click)=\"resetFieldValue(dateTo)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n    </ng-container>\n</ng-container>" }]
+                    ], template: "<ng-container [formGroup]=\"selectorForm\">\n    <mat-form-field [appearance]=\"appearance\" style=\"width:200px\">\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select formControlName=\"select_value\" (selectionChange)=\"selectionChanged($event)\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n        <button *ngIf=\"showClearButton && timelineValue.value\" matSuffix mat-icon-button\n            (click)=\"timelineValue.setValue('')\">\n            <mat-icon>close</mat-icon>\n        </button>\n        <mat-hint *ngIf=\"isCustomSelected && selectedRangeLabel\">\n            <span class=\"custom-hint\" (click)=\"openCalendar()\">\n                <span [innerHTML]=\"selectedRangeLabel\"></span> <mat-icon fontIcon=\"edit\"\n                    style=\"font-size: 16px; vertical-align: middle;\">edit</mat-icon>\n            </span>\n        </mat-hint>\n        <mat-date-range-input class=\"offscreen-range-input\" [rangePicker]=\"picker\">\n            <input matStartDate formControlName=\"custom_date_from\" placeholder=\"From date\" readonly />\n            <input matEndDate formControlName=\"custom_date_to\" placeholder=\"To date\" readonly />\n        </mat-date-range-input>\n        <mat-date-range-picker #picker></mat-date-range-picker>\n    </mat-form-field>\n</ng-container>", styles: [".custom-hint{cursor:pointer;display:inline-flex;align-items:center;gap:4px}.custom-hint:hover{text-decoration:underline}.offscreen-range-input{position:absolute;opacity:0;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.UntypedFormBuilder }, { type: i1$4.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -3954,11 +3980,11 @@ class ExportExcelButtonComponent {
         XLSX.writeFile(wb, fileName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExportExcelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: { name: "name", data: "data" }, ngImport: i0, template: "<mat-icon (click)=\"exportExcel()\" class=\"cursor-pointer\">\n  download\n</mat-icon>\n", styles: [""], dependencies: [{ kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: { name: "name", data: "data" }, ngImport: i0, template: "<i (click)=\"exportExcel()\" class=\"cursor-pointer fas fa-file-excel\"></i>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExportExcelButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-export-excel-button', template: "<mat-icon (click)=\"exportExcel()\" class=\"cursor-pointer\">\n  download\n</mat-icon>\n" }]
+            args: [{ selector: 'app-export-excel-button', template: "<i (click)=\"exportExcel()\" class=\"cursor-pointer fas fa-file-excel\"></i>\n" }]
         }], ctorParameters: () => [], propDecorators: { name: [{
                 type: Input
             }], data: [{
@@ -13021,12 +13047,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class CompanyInfoDisplayComponent {
     constructor(currentUserService) {
         this.currentUserService = currentUserService;
-        this.currentUserService.getUserObservable(true).subscribe((user) => {
-            this.client = user?.client;
-        });
+        this.forceReload = true;
+    }
+    ngOnInit() {
+        if (this.forceReload) {
+            this.currentUserService.getUserObservable(true).subscribe((user) => {
+                this.client = user?.client;
+            });
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CompanyInfoDisplayComponent, deps: [{ token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CompanyInfoDisplayComponent, isStandalone: true, selector: "app-company-info-display", inputs: { client: "client" }, ngImport: i0, template: "<div *ngIf=\"client\" class=\"d-flex justify-content-start align-items-start gap-2\">\n  <img *ngIf=\"client?.logo\" [src]=\"client?.logo\" class=\"img img-thumbnail\" style=\"max-height: 75px\" alt=\"\">\n  <div>\n    <h3 class=\"text-dark mb-1\">{{ client?.name }}</h3>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.address\">\n      {{ client?.address }}\n    </p>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.phone\">\n      {{ client?.phone }}\n    </p>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.email\">\n      {{ client?.email }}\n    </p>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CompanyInfoDisplayComponent, isStandalone: true, selector: "app-company-info-display", inputs: { client: "client", forceReload: "forceReload" }, ngImport: i0, template: "<div *ngIf=\"client\" class=\"d-flex justify-content-start align-items-start gap-2\">\n  <img *ngIf=\"client?.logo\" [src]=\"client?.logo\" class=\"img img-thumbnail\" style=\"max-height: 75px\" alt=\"\">\n  <div>\n    <h3 class=\"text-dark mb-1\">{{ client?.name }}</h3>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.address\">\n      {{ client?.address }}\n    </p>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.phone\">\n      {{ client?.phone }}\n    </p>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.email\">\n      {{ client?.email }}\n    </p>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CompanyInfoDisplayComponent, decorators: [{
             type: Component,
@@ -13035,6 +13066,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], template: "<div *ngIf=\"client\" class=\"d-flex justify-content-start align-items-start gap-2\">\n  <img *ngIf=\"client?.logo\" [src]=\"client?.logo\" class=\"img img-thumbnail\" style=\"max-height: 75px\" alt=\"\">\n  <div>\n    <h3 class=\"text-dark mb-1\">{{ client?.name }}</h3>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.address\">\n      {{ client?.address }}\n    </p>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.phone\">\n      {{ client?.phone }}\n    </p>\n    <p class=\"mb-1 text-secondary\" *ngIf=\"client?.email\">\n      {{ client?.email }}\n    </p>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CurrentUserService }], propDecorators: { client: [{
                 type: Input
+            }], forceReload: [{
+                type: Input
             }] } });
 
 class TechlifyAppService extends TechlifyServiceBaseClass {
@@ -13099,6 +13132,7 @@ class TenantListWidgetComponent extends TechlifyListingControllerInterface {
             '#',
             'Name',
             'Users',
+            'Actions'
         ];
     }
     ngOnInit() {
@@ -13118,18 +13152,21 @@ class TenantListWidgetComponent extends TechlifyListingControllerInterface {
                 this.lastPage = response?.last_page;
                 this.isWorking = false;
             },
-            error: () => { this.isWorking = false; }
+            error: () => {
+                this.isWorking = false;
+            }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TenantListWidgetComponent, deps: [{ token: ClientService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TenantListWidgetComponent, isStandalone: true, selector: "app-tenant-list-widget", usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <mat-card-title>Tenants</mat-card-title>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\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 *matHeaderCellDef> Name </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.name }}</td>\n      </ng-container>\n\n      <!-- Users Column -->\n      <ng-container matColumnDef=\"Users\">\n        <th mat-header-cell *matHeaderCellDef> Users </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.users_count }}</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: "ngmodule", type: MaterialModule }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TenantListWidgetComponent, isStandalone: true, selector: "app-tenant-list-widget", usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <mat-card-title>Tenants</mat-card-title>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\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 *matHeaderCellDef> Name </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.name }}</td>\n      </ng-container>\n\n      <!-- Users Column -->\n      <ng-container matColumnDef=\"Users\">\n        <th mat-header-cell *matHeaderCellDef> Users </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.users_count }}</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          <mat-icon class=\"cursor-pointer\" [routerLink]=\"['/app-admin/tenants', element?.id, 'view']\">\n            visibility\n          </mat-icon>\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: "ngmodule", type: MaterialModule }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TenantListWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-tenant-list-widget', standalone: true, imports: [
                         MaterialModule,
-                        NgIf
-                    ], template: "<mat-card>\n  <mat-card-content>\n    <mat-card-title>Tenants</mat-card-title>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\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 *matHeaderCellDef> Name </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.name }}</td>\n      </ng-container>\n\n      <!-- Users Column -->\n      <ng-container matColumnDef=\"Users\">\n        <th mat-header-cell *matHeaderCellDef> Users </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.users_count }}</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" }]
+                        NgIf,
+                        RouterLink
+                    ], template: "<mat-card>\n  <mat-card-content>\n    <mat-card-title>Tenants</mat-card-title>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\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 *matHeaderCellDef> Name </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.name }}</td>\n      </ng-container>\n\n      <!-- Users Column -->\n      <ng-container matColumnDef=\"Users\">\n        <th mat-header-cell *matHeaderCellDef> Users </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.users_count }}</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          <mat-icon class=\"cursor-pointer\" [routerLink]=\"['/app-admin/tenants', element?.id, 'view']\">\n            visibility\n          </mat-icon>\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: ClientService }] });
 
 class AppAdminHomeComponent {