@rolatech/angular-property 20.2.4-beta.1 → 20.2.5

package/fesm2022/{rolatech-angular-property-rolatech-angular-property-CXRHibz5.mjs → rolatech-angular-property-rolatech-angular-property-BwNQMVlJ.mjs}

@@ -10,7 +10,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import * as i1$1 from '@angular/router';
 import { RouterLink, RouterModule, ActivatedRoute, Router, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { ThumbnailComponent, ImagePlaceholderComponent, Skeleton, ToolbarComponent, AbstractLoading, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ListComponent, ContainerComponent, SearchBar, SpinnerComponent, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
+import { ThumbnailComponent, ImagePlaceholderComponent, Skeleton, ToolbarComponent, Loading, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ListComponent, ContainerComponent, SearchBar, SpinnerComponent, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
 import { PropertyService, FeatureService, PropertyOfferService, InvoiceService, FloorplanService, PropertyHighlightsService, TimeZoneService, PaymentService, PropertySearchService, DialogService } from '@rolatech/angular-services';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, isPlatformBrowser, ViewportScroller, KeyValuePipe, Location } from '@angular/common';
@@ -464,7 +464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 args: ['class.rolatech-property-manage-index']
             }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
 
-class PropertyMediaComponent extends AbstractLoading {
+class PropertyMediaComponent extends Loading {
     hasClass = true;
     disableScrollbar = true;
     media = input(...(ngDevMode ? [undefined, { debugName: "media" }] : []));
@@ -1686,7 +1686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             args: [{ selector: 'rolatech-property-pricing', imports: [CommonModule, MatButtonModule, AvailableDatePipe, PricePipe], encapsulation: ViewEncapsulation.None, template: "<div class=\"py-3 flex flex-col gap-3\">\n  <div class=\"flex justify-between items-center\">\n    @if (market() === 'LETTINGS' && rentFrequency() === 'MONTHLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per month</div>\n    }\n    @if (market() === 'LETTINGS' && rentFrequency() === 'WEEKLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per week</div>\n    }\n    @if (market() === 'LETTINGS' && rentFrequency() === 'NOT_SPECIFIED') {\n      <div class=\"text-lg font-bold\" i18n>Rent price</div>\n    }\n    @if (market() === 'SALES') {\n      <div class=\"text-lg font-bold\" i18n>Price</div>\n    }\n    <div class=\"text-xl font-bold\">{{ displayPrice() | price }}</div>\n  </div>\n  <div class=\"flex justify-between items-center\">\n    <div>Available</div>\n    <div>{{ property().availableDate | availableDate }}</div>\n  </div>\n  @if (market() === 'LETTINGS') {\n    <div class=\"flex justify-between items-center\">\n      <span i18n>Holding Deposit</span>\n      <span>{{ holdingDeposit | price }}</span>\n    </div>\n    <div class=\"flex justify-between items-center font-bold\">\n      <span i18n>Security Deposit</span>\n      <span>{{ securityDeposit | price }}</span>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: true }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: false }] }] } });
 
-class PropertyInfoComponent extends AbstractLoading {
+class PropertyInfoComponent extends Loading {
     property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     wish = output();
     inWishList = input(false, ...(ngDevMode ? [{ debugName: "inWishList" }] : []));
@@ -1965,7 +1965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             args: [{ selector: 'rolatech-property-media-skeleton', imports: [Skeleton], template: "<div class=\"py-3\">\n  <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n    <rolatech-skeleton></rolatech-skeleton>\n  </div>\n\n  <div class=\"flex overflow-y-hidden overflow-x-scroll scrollbar-hide pb-4\">\n    @for (dummy of [0, 1, 2, 3]; track dummy) {\n    <div class=\"flex flex-row mt-3 mr-3 rounded-md min-w-32 object-cover aspect-video bg-[--rt-raised-background]\">\n      <rolatech-skeleton></rolatech-skeleton>\n    </div>\n    }\n  </div>\n</div>\n" }]
         }] });
 
-class PropertyInfoSkeleton extends AbstractLoading {
+class PropertyInfoSkeleton extends Loading {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyInfoSkeleton, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: PropertyInfoSkeleton, isStandalone: true, selector: "rolatech-property-info-skeleton", usesInheritance: true, ngImport: i0, template: "<div>\n  <div class=\"flex justify-between items-start gap-3\">\n    <!-- title -->\n    <rolatech-skeleton class=\"w-[80%] h-8 mb-3\"></rolatech-skeleton>\n    <!-- action button -->\n    <rolatech-skeleton class=\"w-6 h-6\"></rolatech-skeleton>\n  </div>\n  <div class=\"font-bold mb-3\">\n    <!-- short info -->\n    <rolatech-skeleton class=\"w-[50%] h-6\"></rolatech-skeleton>\n  </div>\n  <!-- description -->\n  <rolatech-skeleton class=\"w-full aspect-video\"></rolatech-skeleton>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None });
 }
@@ -1974,7 +1974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             args: [{ selector: 'rolatech-property-info-skeleton', imports: [Skeleton], encapsulation: ViewEncapsulation.None, template: "<div>\n  <div class=\"flex justify-between items-start gap-3\">\n    <!-- title -->\n    <rolatech-skeleton class=\"w-[80%] h-8 mb-3\"></rolatech-skeleton>\n    <!-- action button -->\n    <rolatech-skeleton class=\"w-6 h-6\"></rolatech-skeleton>\n  </div>\n  <div class=\"font-bold mb-3\">\n    <!-- short info -->\n    <rolatech-skeleton class=\"w-[50%] h-6\"></rolatech-skeleton>\n  </div>\n  <!-- description -->\n  <rolatech-skeleton class=\"w-full aspect-video\"></rolatech-skeleton>\n</div>\n" }]
         }] });
 
-class PropertyAgentSkeleton extends AbstractLoading {
+class PropertyAgentSkeleton extends Loading {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyAgentSkeleton, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: PropertyAgentSkeleton, isStandalone: true, selector: "rolatech-property-agent-skeleton", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"flex flex-row items-center pb-3\">\n    <div class=\"flex mr-3 gap-2 items-center w-full\">\n      <!-- avatar -->\n      <rolatech-skeleton class=\"w-14 h-14 rounded-full\"></rolatech-skeleton>\n      <rolatech-skeleton class=\"flex-1 h-6\"></rolatech-skeleton>\n    </div>\n  </div>\n  <div class=\"text-sm opacity-70\">\n    <rolatech-skeleton class=\"w-full h-6\"></rolatech-skeleton>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None });
 }
@@ -2001,19 +2001,27 @@ class PropertyDetailsComponent extends BaseComponent {
     selectedOption;
     variants = [];
     features = [];
+    allVideos = signal([], ...(ngDevMode ? [{ debugName: "allVideos" }] : []));
     highlights = [];
     floorplans = [];
     epc;
     timezone = signal('', ...(ngDevMode ? [{ debugName: "timezone" }] : []));
-    get videos() {
-        const p = this.property(); // read signal once
-        if (!p || !p.videos)
+    // get videos(): PropertyVideo[] {
+    //   const v = this.allVideos; // read signal once
+    //   if (!v) return [];
+    //   const tz = this.timezone();
+    //   const provider = tz === 'Asia/Shanghai' ? PropertyVideoProvider.COS : PropertyVideoProvider.YOUTUBE;
+    //   console.log(v);
+    //   return v.filter((v) => v.provider === provider);
+    // }
+    videos = computed(() => {
+        const v = this.allVideos(); // read signal once
+        if (!v)
             return [];
         const tz = this.timezone();
         const provider = tz === 'Asia/Shanghai' ? PropertyVideoProvider.COS : PropertyVideoProvider.YOUTUBE;
-        return p.videos.filter((v) => v.provider === provider);
-    }
-    // results: any[] = [];
+        return v.filter((v) => v.provider === provider);
+    }, ...(ngDevMode ? [{ debugName: "videos" }] : []));
     constructor() {
         super();
         effect(() => {
@@ -2024,6 +2032,7 @@ class PropertyDetailsComponent extends BaseComponent {
     }
     ngOnInit() {
         this.getProperty();
+        this.getVideos();
         this.getFeatures();
         this.getHighlights();
         this.getFloorplans();
@@ -2056,13 +2065,11 @@ class PropertyDetailsComponent extends BaseComponent {
             },
         });
     }
-    findVariant(optionId, valueId) {
-        return this.variants.find((item) => {
-            const exist = item.options.some((i) => i.option.id === optionId && i.value.id === valueId);
-            if (exist) {
-                return item;
-            }
-            return null;
+    getVideos() {
+        this.propertyService.getVideos(this.id).subscribe({
+            next: (res) => {
+                this.allVideos.set(res.data);
+            },
         });
     }
     findUserBaseInfo(userId) {
@@ -2150,7 +2157,7 @@ class PropertyDetailsComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyDetailsComponent, isStandalone: true, selector: "rolatech-property-details", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    @if (loading()) {\n      <rolatech-property-media-skeleton></rolatech-property-media-skeleton>\n\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <rolatech-property-info-skeleton class=\"w-full md:w-2/3\"></rolatech-property-info-skeleton>\n        <rolatech-property-agent-skeleton class=\"w-full md:w-1/3\"></rolatech-property-agent-skeleton>\n      </div>\n    } @else {\n      @if (property(); as property) {\n        <rolatech-property-media [media]=\"property.media ? property.media : []\"></rolatech-property-media>\n        <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n          <div class=\"w-full md:w-2/3\">\n            <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n            </rolatech-property-info>\n            <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n            @if (features.length > 0) {\n              <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n            }\n            @if (highlights.length > 0) {\n              <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n            }\n            @if (floorplans.length > 0) {\n              <rolatech-property-floorplan [floorplans]=\"floorplans\"></rolatech-property-floorplan>\n            }\n            @if (property.location) {\n              <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n            }\n            @if (videos && videos.length > 0) {\n              @for (item of videos; track $index) {\n                <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n              }\n            }\n            @if (epc && epc.currentScore) {\n              <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n            }\n            <div class=\"flex flex-col\">\n              <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n              @for (section of property.sections; track $index) {\n                <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n              }\n              <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n            </div>\n          </div>\n          <div class=\"w-full md:w-1/3\">\n            <rolatech-property-agent-renderer\n              [name]=\"fullname\"\n              [avatar]=\"user?.avatar\"\n              [username]=\"username\"\n            ></rolatech-property-agent-renderer>\n            <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n            <rolatech-property-actions\n              [property]=\"property\"\n              (offer)=\"onOffer($event)\"\n              (deposit)=\"onOffer($event)\"\n              (requestViewing)=\"onRequestViewing($event)\"\n            >\n              @if (user) {\n                <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n              }\n            </rolatech-property-actions>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: PropertyActionsComponent, selector: "rolatech-property-actions", inputs: ["property"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyHighlights, selector: "rolatech-property-highlights", inputs: ["highlights"] }, { kind: "component", type: PropertyEpc, selector: "rolatech-property-epc", inputs: ["epc"] }, { kind: "component", type: PropertyFloorplan, selector: "rolatech-property-floorplan", inputs: ["floorplans"] }, { kind: "component", type: PropertyMediaSkeleton, selector: "rolatech-property-media-skeleton" }, { kind: "component", type: PropertyInfoSkeleton, selector: "rolatech-property-info-skeleton" }, { kind: "component", type: PropertyAgentSkeleton, selector: "rolatech-property-agent-skeleton" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyDetailsComponent, isStandalone: true, selector: "rolatech-property-details", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    @if (loading()) {\n      <rolatech-property-media-skeleton></rolatech-property-media-skeleton>\n\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <rolatech-property-info-skeleton class=\"w-full md:w-2/3\"></rolatech-property-info-skeleton>\n        <rolatech-property-agent-skeleton class=\"w-full md:w-1/3\"></rolatech-property-agent-skeleton>\n      </div>\n    } @else {\n      @if (property(); as property) {\n        <rolatech-property-media [media]=\"property.media ? property.media : []\"></rolatech-property-media>\n        <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n          <div class=\"w-full md:w-2/3\">\n            <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n            </rolatech-property-info>\n            <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n            @if (features.length > 0) {\n              <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n            }\n            @if (highlights.length > 0) {\n              <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n            }\n            @if (floorplans.length > 0) {\n              <rolatech-property-floorplan [floorplans]=\"floorplans\"></rolatech-property-floorplan>\n            }\n            @if (property.location) {\n              <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n            }\n            @if (videos() && videos().length > 0) {\n              @for (item of videos(); track $index) {\n                <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n              }\n            }\n            @if (epc && epc.currentScore) {\n              <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n            }\n            <div class=\"flex flex-col\">\n              <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n              @for (section of property.sections; track $index) {\n                <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n              }\n              <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n            </div>\n          </div>\n          <div class=\"w-full md:w-1/3\">\n            <rolatech-property-agent-renderer\n              [name]=\"fullname\"\n              [avatar]=\"user?.avatar\"\n              [username]=\"username\"\n            ></rolatech-property-agent-renderer>\n            <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n            <rolatech-property-actions\n              [property]=\"property\"\n              (offer)=\"onOffer($event)\"\n              (deposit)=\"onOffer($event)\"\n              (requestViewing)=\"onRequestViewing($event)\"\n            >\n              @if (user) {\n                <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n              }\n            </rolatech-property-actions>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: PropertyActionsComponent, selector: "rolatech-property-actions", inputs: ["property"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyHighlights, selector: "rolatech-property-highlights", inputs: ["highlights"] }, { kind: "component", type: PropertyEpc, selector: "rolatech-property-epc", inputs: ["epc"] }, { kind: "component", type: PropertyFloorplan, selector: "rolatech-property-floorplan", inputs: ["floorplans"] }, { kind: "component", type: PropertyMediaSkeleton, selector: "rolatech-property-media-skeleton" }, { kind: "component", type: PropertyInfoSkeleton, selector: "rolatech-property-info-skeleton" }, { kind: "component", type: PropertyAgentSkeleton, selector: "rolatech-property-agent-skeleton" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyDetailsComponent, decorators: [{
             type: Component,
@@ -2175,7 +2182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         PropertyMediaSkeleton,
                         PropertyInfoSkeleton,
                         PropertyAgentSkeleton,
-                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    @if (loading()) {\n      <rolatech-property-media-skeleton></rolatech-property-media-skeleton>\n\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <rolatech-property-info-skeleton class=\"w-full md:w-2/3\"></rolatech-property-info-skeleton>\n        <rolatech-property-agent-skeleton class=\"w-full md:w-1/3\"></rolatech-property-agent-skeleton>\n      </div>\n    } @else {\n      @if (property(); as property) {\n        <rolatech-property-media [media]=\"property.media ? property.media : []\"></rolatech-property-media>\n        <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n          <div class=\"w-full md:w-2/3\">\n            <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n            </rolatech-property-info>\n            <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n            @if (features.length > 0) {\n              <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n            }\n            @if (highlights.length > 0) {\n              <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n            }\n            @if (floorplans.length > 0) {\n              <rolatech-property-floorplan [floorplans]=\"floorplans\"></rolatech-property-floorplan>\n            }\n            @if (property.location) {\n              <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n            }\n            @if (videos && videos.length > 0) {\n              @for (item of videos; track $index) {\n                <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n              }\n            }\n            @if (epc && epc.currentScore) {\n              <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n            }\n            <div class=\"flex flex-col\">\n              <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n              @for (section of property.sections; track $index) {\n                <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n              }\n              <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n            </div>\n          </div>\n          <div class=\"w-full md:w-1/3\">\n            <rolatech-property-agent-renderer\n              [name]=\"fullname\"\n              [avatar]=\"user?.avatar\"\n              [username]=\"username\"\n            ></rolatech-property-agent-renderer>\n            <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n            <rolatech-property-actions\n              [property]=\"property\"\n              (offer)=\"onOffer($event)\"\n              (deposit)=\"onOffer($event)\"\n              (requestViewing)=\"onRequestViewing($event)\"\n            >\n              @if (user) {\n                <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n              }\n            </rolatech-property-actions>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</rolatech-container>\n" }]
+                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    @if (loading()) {\n      <rolatech-property-media-skeleton></rolatech-property-media-skeleton>\n\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <rolatech-property-info-skeleton class=\"w-full md:w-2/3\"></rolatech-property-info-skeleton>\n        <rolatech-property-agent-skeleton class=\"w-full md:w-1/3\"></rolatech-property-agent-skeleton>\n      </div>\n    } @else {\n      @if (property(); as property) {\n        <rolatech-property-media [media]=\"property.media ? property.media : []\"></rolatech-property-media>\n        <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n          <div class=\"w-full md:w-2/3\">\n            <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n            </rolatech-property-info>\n            <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n            @if (features.length > 0) {\n              <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n            }\n            @if (highlights.length > 0) {\n              <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n            }\n            @if (floorplans.length > 0) {\n              <rolatech-property-floorplan [floorplans]=\"floorplans\"></rolatech-property-floorplan>\n            }\n            @if (property.location) {\n              <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n            }\n            @if (videos() && videos().length > 0) {\n              @for (item of videos(); track $index) {\n                <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n              }\n            }\n            @if (epc && epc.currentScore) {\n              <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n            }\n            <div class=\"flex flex-col\">\n              <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n              @for (section of property.sections; track $index) {\n                <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n              }\n              <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n            </div>\n          </div>\n          <div class=\"w-full md:w-1/3\">\n            <rolatech-property-agent-renderer\n              [name]=\"fullname\"\n              [avatar]=\"user?.avatar\"\n              [username]=\"username\"\n            ></rolatech-property-agent-renderer>\n            <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n            <rolatech-property-actions\n              [property]=\"property\"\n              (offer)=\"onOffer($event)\"\n              (deposit)=\"onOffer($event)\"\n              (requestViewing)=\"onRequestViewing($event)\"\n            >\n              @if (user) {\n                <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n              }\n            </rolatech-property-actions>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</rolatech-container>\n" }]
         }], ctorParameters: () => [] });
 
 const MY_FORMATS$5 = {
@@ -2598,20 +2605,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                     ], encapsulation: ViewEncapsulation.None, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Offers\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  @if (loading) {\n    <div class=\"divide-y divide-[--rt-10-percent-layer] flex flex-col\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n        <rolatech-offer-item-skeleton></rolatech-offer-item-skeleton>\n      }\n    </div>\n  } @else {\n    <rolatech-list>\n      @if (offers() && offers().length > 0) {\n        @for (item of offers(); track item) {\n          <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n        }\n      } @else {\n        <rolatech-empty></rolatech-empty>\n      }\n    </rolatech-list>\n  }\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageIndex]=\"pageIndex()\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPage($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</rolatech-container>\n" }]
         }] });
 
-class PropertyViewingItemComponent {
+class PropertyViewingItemComponent extends Loading {
     viewing = input.required(...(ngDevMode ? [{ debugName: "viewing" }] : []));
     status = PropertyViewingStatus;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingItemComponent, isStandalone: true, selector: "rolatech-property-viewing-item", inputs: { viewing: { classPropertyName: "viewing", publicName: "viewing", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Viewing ID: {{ viewing().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n    </div>\n    @if (viewing().item) {\n      <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n        <div class=\"flex flex-row py-2\">\n          @if (viewing().item.media) {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing().item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n          } @else {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              <rolatech-image-placeholder></rolatech-image-placeholder>\n            </div>\n          }\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ viewing().item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ viewing().item.price | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingItemComponent, isStandalone: true, selector: "rolatech-property-viewing-item", inputs: { viewing: { classPropertyName: "viewing", publicName: "viewing", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (loading()) {\n  <div class=\"flex flex-col p-3\">\n    <div class=\"flex justify-between w-full mb-2\">\n      <rolatech-skeleton class=\"w-52 h-5\"></rolatech-skeleton>\n      <rolatech-skeleton class=\"w-11 h-5\"></rolatech-skeleton>\n    </div>\n    <div class=\"flex flex-row py-2\">\n      <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n        <rolatech-skeleton class=\"w-full h-full\"></rolatech-skeleton>\n      </div>\n      <div class=\"flex w-full justify-between\">\n        <div class=\"flex justify-between w-full\">\n          <div class=\"flex flex-col\">\n            <rolatech-skeleton class=\"w-40 h-4\"></rolatech-skeleton>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <rolatech-skeleton class=\"w-20 h-4\"></rolatech-skeleton>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <rolatech-skeleton class=\"w-8 h-4\"></rolatech-skeleton>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n    <div>\n      <div class=\"flex justify-between w-full mb-2\">\n        <a class=\"flex items-center gap-3\">\n          <span>Viewing ID: {{ viewing().id }}</span>\n        </a>\n        <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n      </div>\n      @if (viewing().item) {\n        <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n          <div class=\"flex flex-row py-2\">\n            @if (viewing().item.media) {\n              <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n                @defer {\n                  <rolatech-thumbnail [src]=\"viewing().item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n                } @placeholder {\n                  <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n                }\n              </div>\n            } @else {\n              <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n                <rolatech-image-placeholder></rolatech-image-placeholder>\n              </div>\n            }\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div class=\"font-bold\">{{ viewing().item.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ viewing().item.price | price }}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "component", type: Skeleton, selector: "rolatech-skeleton" }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-viewing-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, PricePipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Viewing ID: {{ viewing().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n    </div>\n    @if (viewing().item) {\n      <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n        <div class=\"flex flex-row py-2\">\n          @if (viewing().item.media) {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing().item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n          } @else {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              <rolatech-image-placeholder></rolatech-image-placeholder>\n            </div>\n          }\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ viewing().item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ viewing().item.price | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-viewing-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, Skeleton, PricePipe], template: "@if (loading()) {\n  <div class=\"flex flex-col p-3\">\n    <div class=\"flex justify-between w-full mb-2\">\n      <rolatech-skeleton class=\"w-52 h-5\"></rolatech-skeleton>\n      <rolatech-skeleton class=\"w-11 h-5\"></rolatech-skeleton>\n    </div>\n    <div class=\"flex flex-row py-2\">\n      <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n        <rolatech-skeleton class=\"w-full h-full\"></rolatech-skeleton>\n      </div>\n      <div class=\"flex w-full justify-between\">\n        <div class=\"flex justify-between w-full\">\n          <div class=\"flex flex-col\">\n            <rolatech-skeleton class=\"w-40 h-4\"></rolatech-skeleton>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <rolatech-skeleton class=\"w-20 h-4\"></rolatech-skeleton>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <rolatech-skeleton class=\"w-8 h-4\"></rolatech-skeleton>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n    <div>\n      <div class=\"flex justify-between w-full mb-2\">\n        <a class=\"flex items-center gap-3\">\n          <span>Viewing ID: {{ viewing().id }}</span>\n        </a>\n        <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n      </div>\n      @if (viewing().item) {\n        <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n          <div class=\"flex flex-row py-2\">\n            @if (viewing().item.media) {\n              <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n                @defer {\n                  <rolatech-thumbnail [src]=\"viewing().item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n                } @placeholder {\n                  <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n                }\n              </div>\n            } @else {\n              <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n                <rolatech-image-placeholder></rolatech-image-placeholder>\n              </div>\n            }\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div class=\"font-bold\">{{ viewing().item.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ viewing().item.price | price }}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { viewing: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewing", required: true }] }] } });
 
 class PropertyViewingIndexComponent extends BaseComponent {
     propertyService = inject(PropertyService);
-    viewings;
     viewerCategory = PropertyViewerCategory;
     tenantCategory = PropertyApplicantType;
     viewingStatus = PropertyViewingStatus;
@@ -2638,53 +2644,66 @@ class PropertyViewingIndexComponent extends BaseComponent {
             status: 'cancelled',
         },
     ];
+    loading = false;
+    viewings = signal([], ...(ngDevMode ? [{ debugName: "viewings" }] : []));
+    meta;
+    pageEvent;
+    length = 100;
+    pageSize = 15;
+    pageSizeOptions = [5, 10, 25, 100];
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
     ngOnInit() {
-        this.route.queryParams.subscribe(({ status }) => {
-            this.select = this.links.findIndex((item) => item.status === status);
+        const sub = this.route.queryParamMap
+            .pipe(map((p) => {
+            const page = p.get('page') ? Number(p.get('page')) : 1;
+            this.pageIndex.set(Math.max(page - 1, 0));
+            const status = p.get('status') || undefined;
+            let filter = '';
             if (status) {
-                this.filterOptions.status = status.toUpperCase();
-            }
-            else {
-                delete this.filterOptions.status;
+                this.select = this.links.findIndex((item) => item.status === status);
+                filter = `status:${status?.toUpperCase()}`;
             }
-            this.findViewings();
-        });
-    }
-    findViewings() {
-        const options = {
-            sort: 'updatedAt desc',
-        };
-        const filterString = this.convertFilterOptions(this.filterOptions);
-        if (filterString) {
-            options['filter'] = filterString;
-        }
-        this.propertyService.findViewingsByUser(options).subscribe({
+            return {
+                page,
+                filter,
+                limit: p.get('limit') ? Number(p.get('limit')) : 15,
+                sort: p.get('sort') || undefined,
+            };
+        }), 
+        // Cheap deep compare via JSON to avoid spam calls when nothing changed
+        map((o) => JSON.stringify(o)), distinctUntilChanged(), map((s) => JSON.parse(s)), switchMap((params) => {
+            this.loading = true;
+            params['sort'] = 'updatedAt desc';
+            return this.propertyService.findViewingsByUser(params).pipe(finalize(() => (this.loading = false)));
+        }))
+            .subscribe({
             next: (res) => {
-                this.viewings = res.data;
+                this.viewings.set(res.data);
+                this.meta = res.meta;
+                this.length = res.meta.pagination.count;
+                this.loading = false;
+            },
+            error: () => {
+                this.viewings.set([]);
+                this.length = 0;
+                this.loading = false;
             },
         });
-    }
-    findProperties(ids) { }
-    resetFilter() {
-        this.filterOptions = {
-            type: '',
-        };
-        this.filter = false;
-        this.findViewings();
+        // // auto-unsubscribe on destroy
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
     }
     statusCompareFn(t1, t2) {
         return t1 === t2;
     }
-    convertFilterOptions(jsonObj) {
-        return Object.entries(jsonObj)
-            .filter(([key, value]) => value !== '' && value !== undefined)
-            .map(([key, value]) => {
-            return `${key}:${value}`;
-        })
-            .join(',');
+    onPage(e) {
+        this.router.navigate([], {
+            queryParams: { page: e.pageIndex + 1, limit: e.pageSize },
+            queryParamsHandling: 'merge',
+            replaceUrl: true, // optional: avoid stacking history on every page click
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingIndexComponent, isStandalone: true, selector: "rolatech-property-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingIndexComponent, isStandalone: true, selector: "rolatech-property-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings(); as viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item\n          [loading]=\"loading\"\n          [routerLink]=\"['./', item.id]\"\n          [viewing]=\"item\"\n        ></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageIndex]=\"pageIndex()\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPage($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingIndexComponent, decorators: [{
             type: Component,
@@ -2707,7 +2726,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         MatSelectModule,
                         MatButtonModule,
                         PropertyViewingItemComponent,
-                    ], template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n" }]
+                        MatPaginatorModule,
+                    ], template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings(); as viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item\n          [loading]=\"loading\"\n          [routerLink]=\"['./', item.id]\"\n          [viewing]=\"item\"\n        ></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageIndex]=\"pageIndex()\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPage($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</rolatech-container>\n" }]
         }] });
 
 class DuePipe {
@@ -2904,7 +2924,6 @@ class PropertyViewingDetailComponent extends BaseComponent {
     loadingTimeline = false;
     status = PropertyViewingStatus;
     env = inject(APP_CONFIG);
-    property;
     async ngOnInit() {
         this.route.params.subscribe((params) => {
             const id = params['id'];
@@ -2915,19 +2934,10 @@ class PropertyViewingDetailComponent extends BaseComponent {
         this.propertyService.getViewing(id).subscribe({
             next: (res) => {
                 this.viewing = res.data;
-                this.getProperty(this.viewing.propertyId);
                 // this.findAgentInfo();
             },
         });
     }
-    getProperty(propertyId) {
-        this.propertyService.get(propertyId).subscribe({
-            next: (res) => {
-                this.property = res.data;
-                this.getAgentPublicInfo(this.property.agentId);
-            },
-        });
-    }
     getAgentPublicInfo(agentId) {
         this.authUserService.getPublicUserInfo(agentId).subscribe({
             next: (res) => {
@@ -2947,7 +2957,7 @@ class PropertyViewingDetailComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingDetailComponent, isStandalone: true, selector: "rolatech-property-viewing-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        @if (property) {\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', property.id]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ property.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ property.price | price }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        }\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingDetailComponent, isStandalone: true, selector: "rolatech-property-viewing-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      @if (viewing.item) {\n        <div>\n          <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n          <hr class=\"mb-2\" />\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', viewing.item.propertyId]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ viewing.item.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ viewing.item.price | price }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        </div>\n      }\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingDetailComponent, decorators: [{
             type: Component,
@@ -2961,7 +2971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         ToolbarComponent,
                         RouterLink,
                         PricePipe,
-                    ], template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        @if (property) {\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', property.id]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ property.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ property.price | price }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        }\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
+                    ], template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      @if (viewing.item) {\n        <div>\n          <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n          <hr class=\"mb-2\" />\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', viewing.item.propertyId]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ viewing.item.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ viewing.item.price | price }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        </div>\n      }\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
         }] });
 
 class PropertyWishlistComponent extends BaseComponent {
@@ -3009,7 +3019,7 @@ const propertyRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-property-property-index.component-DgcQjaUr.mjs').then((x) => x.PropertyIndexComponent),
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-DepoNMLG.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -4923,7 +4933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 const propertyManageViewingsRoutes = [
     {
         path: '',
-        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-1MXQYu4A.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-BmG4wx99.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -5614,43 +5624,63 @@ class PropertyAgentViewingIndex extends BaseComponent {
         type: '',
         status: '',
     };
-    viewings = [];
+    loading = false;
+    viewings = signal([], ...(ngDevMode ? [{ debugName: "viewings" }] : []));
+    meta;
+    pageEvent;
+    length = 100;
+    pageSize = 15;
+    pageSizeOptions = [5, 10, 25, 100];
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
     ngOnInit() {
-        this.route.queryParams.subscribe(({ status }) => {
-            this.select = this.links.findIndex((item) => item.status === status);
+        const sub = this.route.queryParamMap
+            .pipe(map((p) => {
+            const page = p.get('page') ? Number(p.get('page')) : 1;
+            this.pageIndex.set(Math.max(page - 1, 0));
+            const status = p.get('status') || undefined;
+            let filter = '';
             if (status) {
-                this.filterOptions.status = status.toUpperCase();
-            }
-            else {
-                delete this.filterOptions.status;
+                this.select = this.links.findIndex((item) => item.status === status);
+                filter = `status:${status?.toUpperCase()}`;
             }
-            this.findViewings();
-        });
-    }
-    findViewings() {
-        const options = {
-            sort: 'updatedAt desc',
-        };
-        const filterString = this.convertFilterOptions(this.filterOptions);
-        if (filterString) {
-            options['filter'] = filterString;
-        }
-        this.propertyService.findViewingsByAgent(options).subscribe({
+            return {
+                page,
+                filter,
+                limit: p.get('limit') ? Number(p.get('limit')) : 15,
+                sort: p.get('sort') || undefined,
+            };
+        }), 
+        // Cheap deep compare via JSON to avoid spam calls when nothing changed
+        map((o) => JSON.stringify(o)), distinctUntilChanged(), map((s) => JSON.parse(s)), switchMap((params) => {
+            this.loading = true;
+            params['sort'] = 'updatedAt desc';
+            return this.propertyService.findViewingsByAgent(params).pipe(finalize(() => (this.loading = false)));
+        }))
+            .subscribe({
             next: (res) => {
-                this.viewings = res.data;
+                this.viewings.set(res.data);
+                this.meta = res.meta;
+                this.length = res.meta.pagination.count;
+                this.loading = false;
+            },
+            error: () => {
+                this.viewings.set([]);
+                this.length = 0;
+                this.loading = false;
             },
         });
+        // // auto-unsubscribe on destroy
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
     }
-    convertFilterOptions(jsonObj) {
-        return Object.entries(jsonObj)
-            .filter(([key, value]) => value !== '' && value !== undefined)
-            .map(([key, value]) => {
-            return `${key}:${value}`;
-        })
-            .join(',');
+    onPage(e) {
+        this.router.navigate([], {
+            queryParams: { page: e.pageIndex + 1, limit: e.pageSize },
+            queryParamsHandling: 'merge',
+            replaceUrl: true, // optional: avoid stacking history on every page click
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyAgentViewingIndex, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyAgentViewingIndex, isStandalone: true, selector: "rolatech-property-agent-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) { @if (item.status) {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n  } @else {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n  } }\n</rolatech-tabs>\n<div>\n  @if (viewings) { @for (item of viewings; track $index) {\n  <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyAgentViewingIndex, isStandalone: true, selector: "rolatech-property-agent-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) { @if (item.status) {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n  } @else {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n  } }\n</rolatech-tabs>\n<div>\n  @if (viewings(); as viewings) { @for (item of viewings; track $index) {\n  <rolatech-property-viewing-item\n    [loading]=\"loading\"\n    [routerLink]=\"['./', item.id]\"\n    [viewing]=\"item\"\n  ></rolatech-property-viewing-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</div>\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyAgentViewingIndex, decorators: [{
             type: Component,
@@ -5663,7 +5693,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         RouterModule,
                         EmptyComponent,
                         PropertyViewingItemComponent,
-                    ], template: "<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) { @if (item.status) {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n  } @else {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n  } }\n</rolatech-tabs>\n<div>\n  @if (viewings) { @for (item of viewings; track $index) {\n  <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</div>\n" }]
+                        MatPaginatorModule,
+                    ], template: "<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) { @if (item.status) {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n  } @else {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n  } }\n</rolatech-tabs>\n<div>\n  @if (viewings(); as viewings) { @for (item of viewings; track $index) {\n  <rolatech-property-viewing-item\n    [loading]=\"loading\"\n    [routerLink]=\"['./', item.id]\"\n    [viewing]=\"item\"\n  ></rolatech-property-viewing-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</div>\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n" }]
         }] });
 
 class PropertyAgentViewingDetail extends BaseComponent {
@@ -6018,4 +6049,4 @@ const propertyManageOverviewRoutes = [
  */
 
 export { PropertyOfferTimelineStatus as A, PropertyOfferType as B, PropertyOfferStatus as C, ResidencyStatus as D, EmploymentStatus as E, PropertyApplicantType as F, AdverseCreditStatus as G, BedroomRange as H, PriceRange as I, Market as M, PropertyUtil as P, RentFrequency as R, ViewingTime as V, PropertyViewType as a, PropertyManageItemSkeleton as b, PropertyViewingItemComponent as c, propertyManageOffersRoutes as d, propertyRoutes as e, featureManageRoutes as f, propertyManageRoutes as g, propertyManageViewingsRoutes as h, propertyAgentViewingRoutes as i, propertyAgentOfferRoutes as j, propertyAgentOverviewRoutes as k, lettingManageRoutes as l, propertyManageOverviewRoutes as m, PropertyActionsComponent as n, PropertyItemComponent as o, propertyReviewRoutes as p, PropertyPricingComponent as q, PropertyPriceType as r, PropertyVideoProvider as s, tenantManageRoutes as t, PropertyStatus as u, PropertyType as v, PropertyInventoryStatus as w, PropertyScope as x, PropertyViewingStatus as y, PropertyViewerCategory as z };
-//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-CXRHibz5.mjs.map
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-BwNQMVlJ.mjs.map