@nauticana/sail 0.5.0

package/src/component/login/otp_input.ts

@@ -0,0 +1,104 @@
+import {
+  ChangeDetectionStrategy, Component, DestroyRef, OnInit, ViewEncapsulation,
+  computed, effect, inject, input, output, signal,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+/**
+ * OtpInput — pure-presentational numeric OTP keypad with resend countdown.
+ *
+ * Owns no service layer. The parent component sends the OTP (via
+ * BaseAuthService.sendOtp) and subscribes to `codeComplete` / `resend` to
+ * call verifyOtp / resendOtp. See README "Phone / email OTP login".
+ */
+@Component({
+  selector: 'app-otp-input',
+  templateUrl: './otp_input.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [MatButtonModule, MatIconModule],
+})
+export class OtpInputComponent implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly length = input(6);
+  readonly contact = input('');
+  readonly resendCountdownSec = input(30);
+  readonly disabled = input(false);
+
+  readonly codeComplete = output<string>();
+  readonly resend = output<void>();
+
+  readonly digits = signal<string[]>([]);
+  readonly countdown = signal(0);
+  readonly canResend = signal(false);
+
+  private countdownTimer: ReturnType<typeof setInterval> | null = null;
+
+  readonly currentIndex = computed(() => {
+    const d = this.digits();
+    const idx = d.findIndex((v) => v === '');
+    return idx === -1 ? d.length - 1 : idx;
+  });
+
+  readonly keypadKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'back'] as const;
+
+  constructor() {
+    // Reset the digits array whenever `length` input changes.
+    effect(() => { this.digits.set(Array(this.length()).fill('')); });
+    this.destroyRef.onDestroy(() => this.clearTimer());
+  }
+
+  ngOnInit() {
+    this.startCountdown();
+  }
+
+  onKeyPress(key: string) {
+    if (this.disabled()) return;
+    const d = [...this.digits()];
+    const idx = d.findIndex((v) => v === '');
+    if (idx === -1) return;
+    d[idx] = key;
+    this.digits.set(d);
+    if (idx === this.length() - 1) this.codeComplete.emit(d.join(''));
+  }
+
+  onBackspace() {
+    if (this.disabled()) return;
+    const d = [...this.digits()];
+    let idx = d.findIndex((v) => v === '');
+    if (idx === -1) idx = d.length;
+    if (idx > 0) {
+      d[idx - 1] = '';
+      this.digits.set(d);
+    }
+  }
+
+  onResend() {
+    this.resend.emit();
+    this.digits.set(Array(this.length()).fill(''));
+    this.startCountdown();
+  }
+
+  private startCountdown() {
+    this.clearTimer();
+    this.countdown.set(this.resendCountdownSec());
+    this.canResend.set(false);
+    this.countdownTimer = setInterval(() => {
+      const next = this.countdown() - 1;
+      this.countdown.set(next);
+      if (next <= 0) {
+        this.canResend.set(true);
+        this.clearTimer();
+      }
+    }, 1000);
+  }
+
+  private clearTimer() {
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+      this.countdownTimer = null;
+    }
+  }
+}

package/src/component/login/register_component.html

@@ -0,0 +1,132 @@
+<div class="auth-container">
+  @if (guiConfig.appTitle) {
+    <div class="auth-header">
+      <h1 class="auth-app-title">{{ guiConfig.appTitle }}</h1>
+    </div>
+  }
+  <div class="auth-card register-card">
+    <h2 class="auth-title">Create Your Account</h2>
+    <form [formGroup]="registerForm" (ngSubmit)="register()" class="auth-form">
+
+      <div class="auth-section-label">Account</div>
+
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>First Name</mat-label>
+          <input matInput type="text" formControlName="FirstName" required>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Last Name</mat-label>
+          <input matInput type="text" formControlName="LastName" required>
+        </mat-form-field>
+      </div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Email</mat-label>
+        <input matInput type="email" formControlName="Email" required>
+      </mat-form-field>
+
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Username</mat-label>
+          <input matInput type="text" formControlName="UserName" required>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Password</mat-label>
+          <input matInput type="password" formControlName="Password" required>
+        </mat-form-field>
+      </div>
+
+      <div class="auth-section-label">Plan</div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Subscription plan</mat-label>
+        <mat-select formControlName="PlanID" required>
+          @for (p of plans(); track p.id) {
+            <mat-option [value]="p.id">
+              {{ p.caption }}@if (p.monthlyCost > 0) { — \${{ p.monthlyCost }}/mo }
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      <div class="auth-section-label">Business Information</div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Business/Company Name</mat-label>
+        <input matInput type="text" formControlName="PartnerCaption" required>
+      </mat-form-field>
+
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Phone</mat-label>
+          <input matInput type="tel" formControlName="Phone" required>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Website URL</mat-label>
+          <input matInput type="url" formControlName="DomainURL" required>
+        </mat-form-field>
+      </div>
+
+      <div class="auth-section-label">Location</div>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Address (Street and Number)</mat-label>
+        <input matInput type="text" formControlName="Address" required>
+      </mat-form-field>
+
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>City</mat-label>
+          <input matInput type="text" formControlName="City" required>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>State</mat-label>
+          <input matInput type="text" formControlName="State" required>
+        </mat-form-field>
+      </div>
+
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Zipcode</mat-label>
+          <input matInput type="text" formControlName="Zipcode" required>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Country</mat-label>
+          <input matInput type="text" formControlName="Country" required>
+        </mat-form-field>
+      </div>
+
+      <div class="auth-checkbox">
+        <mat-checkbox formControlName="consentLocation">
+          I consent to geocode my business address for location services
+        </mat-checkbox>
+      </div>
+
+      @if (geocodeStatus() === 'loading') {
+        <div class="geocode-status geocode-loading" role="status">Verifying address...</div>
+      } @else if (geocodeStatus() === 'success') {
+        <div class="geocode-status geocode-success" role="status">Address verified.</div>
+      } @else if (geocodeStatus() === 'error') {
+        <div class="geocode-status geocode-error" role="alert">{{ geocodeError() }}</div>
+      }
+
+      @if (registerError()) {
+        <div class="geocode-status geocode-error" role="alert">{{ registerError() }}</div>
+      }
+
+      <button mat-raised-button class="primary" type="submit"
+        [disabled]="!registerForm.valid || geocodeStatus() !== 'success'">
+        Create Account
+      </button>
+    </form>
+    <div class="auth-actions">
+      <a routerLink="/login/local">Already have an account? Sign in</a>
+    </div>
+  </div>
+</div>

package/src/component/login/register_component.ts

@@ -0,0 +1,184 @@
+import { ChangeDetectionStrategy, Component, inject, effect, DestroyRef, signal, ViewEncapsulation, OnInit } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { BaseAuthService } from '../../service/auth.service';
+import { BillingService } from '../../service/billing.service';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { firstValueFrom, map, merge } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { PartnerRegistration, PublicPlan } from '../../model/appdata';
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register_component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    ReactiveFormsModule,
+    RouterLink,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatSelectModule,
+  ],
+})
+export class RegisterComponent implements OnInit {
+  private auth = inject(BaseAuthService);
+  private billing = inject(BillingService);
+  private fb = inject(FormBuilder);
+  private http = inject(HttpClient);
+  private router = inject(Router);
+  protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
+
+  readonly registerError = signal('');
+  readonly plans = signal<PublicPlan[]>([]);
+
+  readonly registerForm = this.fb.group({
+    FirstName: ['', Validators.required],
+    LastName: ['', Validators.required],
+    UserName: ['', Validators.required],
+    Email: ['', Validators.required],
+    Password: ['', Validators.required],
+    PartnerCaption: ['', Validators.required],
+    Address: ['', Validators.required],
+    City: ['', Validators.required],
+    State: ['', Validators.required],
+    Zipcode: ['', Validators.required],
+    Country: ['', Validators.required],
+    Phone: ['', Validators.required],
+    DomainURL: ['', Validators.required],
+    PlanID: ['FREE', Validators.required],
+    Latitude: [null as number | null],
+    Longitude: [null as number | null],
+    consentLocation: [false, Validators.requiredTrue],
+  });
+
+  readonly geocodeStatus = signal<'idle' | 'loading' | 'success' | 'error'>('idle');
+  readonly geocodeError = signal('');
+
+  private consentLocation = toSignal(
+    this.registerForm.controls.consentLocation.valueChanges,
+    { initialValue: false }
+  );
+
+  private destroyRef = inject(DestroyRef);
+
+  private addressFields = ['Address', 'City', 'State', 'Zipcode', 'Country'] as const;
+
+  protected getGoogleMapsApiKey(): string {
+    return this.guiConfig.googleMapsApiKey ?? '';
+  }
+
+  ngOnInit() {
+    this.billing.listPlans().subscribe({
+      next: (list) => this.plans.set(list ?? []),
+      error: () => this.plans.set([]),
+    });
+  }
+
+  constructor() {
+    effect(() => {
+      const consent = this.consentLocation();
+      if (consent) {
+        this.tryGeocode();
+      } else {
+        this.registerForm.patchValue({ Latitude: null, Longitude: null });
+        this.geocodeStatus.set('idle');
+        this.geocodeError.set('');
+      }
+    });
+
+    merge(
+      ...this.addressFields.map((f) => this.registerForm.controls[f].valueChanges),
+    )
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.registerForm.patchValue({ Latitude: null, Longitude: null });
+        if (this.consentLocation()) {
+          this.tryGeocode();
+        }
+      });
+  }
+
+  private async tryGeocode() {
+    const { Address, City, State, Zipcode, Country } = this.registerForm.getRawValue();
+    if (!Address || !City || !State || !Zipcode || !Country) {
+      this.geocodeStatus.set('idle');
+      this.geocodeError.set('');
+      return;
+    }
+    this.geocodeStatus.set('loading');
+    this.geocodeError.set('');
+    try {
+      const coords = await this.getCoordinates(`${Address}, ${City}, ${State} ${Zipcode}, ${Country}`);
+      this.registerForm.patchValue({ Latitude: coords.lat, Longitude: coords.lng });
+      this.geocodeStatus.set('success');
+    } catch {
+      this.registerForm.patchValue({ Latitude: null, Longitude: null });
+      this.geocodeStatus.set('error');
+      this.geocodeError.set('Could not verify this address. Please check and try again.');
+    }
+  }
+
+  register() {
+    if (this.registerForm.valid) {
+      this.registerError.set('');
+      const formValue = this.registerForm.getRawValue();
+      const partnerReg: PartnerRegistration = {
+        FirstName: formValue.FirstName!,
+        LastName: formValue.LastName!,
+        UserName: formValue.UserName!,
+        Email: formValue.Email!,
+        Password: formValue.Password!,
+        PartnerCaption: formValue.PartnerCaption!,
+        Address: formValue.Address!,
+        City: formValue.City!,
+        State: formValue.State!,
+        Zipcode: formValue.Zipcode!,
+        Country: formValue.Country!,
+        Phone: formValue.Phone!,
+        DomainURL: formValue.DomainURL!,
+        Latitude: formValue.Latitude!,
+        Longitude: formValue.Longitude!,
+        PlanID: formValue.PlanID!,
+      };
+      this.auth.register(partnerReg).subscribe({
+        next: () => this.router.navigate(['/confirm/register']),
+        error: (err) => this.registerError.set(err?.error?.message ?? 'Registration failed. Please try again.'),
+      });
+    }
+  }
+
+  private async getCoordinates(address: string): Promise<{ lat: number; lng: number }> {
+    const apiKey = this.getGoogleMapsApiKey();
+    const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${apiKey}`;
+
+    interface GeocodingResponse {
+      results: { geometry: { location: { lat: number; lng: number } } }[];
+      status: string;
+    }
+    try {
+      const response = await firstValueFrom(
+        this.http.get<GeocodingResponse>(url).pipe(
+          map((data) => {
+            if (data.status === 'OK' && data.results.length > 0) {
+              return data.results[0].geometry.location;
+            } else {
+              throw new Error(`Geocoding failed: ${data.status}`);
+            }
+          }),
+        ),
+      );
+      return response;
+    } catch (error) {
+      throw new Error(`Geocoding failed: ${error}`);
+    }
+  }
+}

package/src/component/login/social_login.html

@@ -0,0 +1,13 @@
+<div class="social-login">
+  @if (googleEnabled) {
+    <div #googleBtn class="social-google"></div>
+  }
+  @if (appleEnabled) {
+    <button type="button" class="social-apple-btn" (click)="onAppleClick()" [disabled]="loading()">
+      Sign in with Apple
+    </button>
+  }
+  @if (errorMessage()) {
+    <div class="auth-error" role="alert">{{ errorMessage() }}</div>
+  }
+</div>

package/src/component/login/social_login.ts

@@ -0,0 +1,120 @@
+import {
+  ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild, ViewEncapsulation,
+  inject, input, output,
+} from '@angular/core';
+import { BaseAsync } from '../abstract/base_async';
+import { BaseAuthService } from '../../service/auth.service';
+import { loadScript } from '../../service/script_loader';
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import {
+  ConsentState, LoginResponseSocial, SignupConsent, SocialProvider,
+} from '../../model/auth';
+
+declare const google: any;
+declare const AppleID: any;
+
+const GSI_URL   = 'https://accounts.google.com/gsi/client';
+const APPLE_URL = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
+
+/**
+ * SocialLoginComponent — renders "Sign in with Google" / "Sign in with Apple"
+ * buttons using each provider's official SDK.
+ *
+ * Flow: click → SDK returns ID token → BaseAuthService.loginSocial(provider,
+ * idToken, signupConsent) → emits loginSuccess / loginError.
+ *
+ * Requires `googleClientId` / `appleServiceId` in SailGuiConfig; providers
+ * without config are hidden (with a console.warn for diagnostics).
+ */
+@Component({
+  selector: 'app-social-login',
+  templateUrl: './social_login.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [],
+})
+export class SocialLoginComponent extends BaseAsync implements OnInit {
+  private readonly auth = inject(BaseAuthService);
+  protected readonly guiConfig: SailGuiConfig =
+    inject(SAIL_GUI_CONFIG, { optional: true }) ?? DEFAULT_CONFIG;
+
+  readonly providers = input<SocialProvider[]>(['google']);
+  readonly consent = input<ConsentState | undefined>(undefined);
+
+  readonly loginSuccess = output<LoginResponseSocial>();
+  readonly loginError = output<Error>();
+
+  @ViewChild('googleBtn', { static: false }) googleBtn?: ElementRef<HTMLDivElement>;
+
+  protected googleEnabled = false;
+  protected appleEnabled = false;
+
+  ngOnInit() {
+    this.googleEnabled = this.providers().includes('google') && !!this.guiConfig.googleClientId;
+    this.appleEnabled  = this.providers().includes('apple')  && !!this.guiConfig.appleServiceId;
+
+    if (this.providers().includes('google') && !this.guiConfig.googleClientId) {
+      console.warn('SocialLoginComponent: googleClientId missing from SailGuiConfig — Google button hidden');
+    }
+    if (this.providers().includes('apple') && !this.guiConfig.appleServiceId) {
+      console.warn('SocialLoginComponent: appleServiceId missing from SailGuiConfig — Apple button hidden');
+    }
+
+    if (this.googleEnabled) this.initGoogle();
+    if (this.appleEnabled)  this.initApple();
+  }
+
+  private async initGoogle() {
+    await loadScript(GSI_URL);
+    google.accounts.id.initialize({
+      client_id: this.guiConfig.googleClientId,
+      callback: (res: { credential: string }) => this.onIdToken('google', res.credential),
+    });
+    // Render into the template anchor once the view is ready.
+    queueMicrotask(() => {
+      if (this.googleBtn?.nativeElement) {
+        google.accounts.id.renderButton(this.googleBtn.nativeElement, { theme: 'outline', size: 'large' });
+      }
+    });
+  }
+
+  private async initApple() {
+    await loadScript(APPLE_URL);
+    AppleID.auth.init({
+      clientId: this.guiConfig.appleServiceId,
+      scope: 'name email',
+      redirectURI: this.guiConfig.appleRedirectUri ?? window.location.origin,
+      usePopup: true,
+    });
+  }
+
+  async onAppleClick() {
+    try {
+      const res = await AppleID.auth.signIn();
+      const token = res?.authorization?.id_token;
+      if (token) this.onIdToken('apple', token);
+    } catch (err: any) {
+      this.loginError.emit(err instanceof Error ? err : new Error(String(err)));
+    }
+  }
+
+  private onIdToken(provider: SocialProvider, idToken: string) {
+    this.run(
+      this.auth.loginSocial(provider, idToken, this.buildSignupConsent()),
+      (resp) => this.loginSuccess.emit(resp),
+      `Sign-in with ${provider} failed.`,
+    );
+    // Also surface errors to the host via output.
+    // (BaseAsync.run already captures errorMessage; the emit is additional.)
+  }
+
+  private buildSignupConsent(): SignupConsent | undefined {
+    const c = this.consent();
+    if (!c) return undefined;
+    return {
+      policyVersion:  c.policyVersion,
+      policyLanguage: c.policyLanguage,
+      consents:       c.consents,
+    };
+  }
+}

package/src/component/navigation/navigation.html

@@ -0,0 +1,49 @@
+<mat-sidenav-container class="sidenav-container">
+    <mat-sidenav #sidenav class="sidenav"
+        [attr.role]="isHandset() ? 'dialog' : 'navigation'"
+        [mode]="isHandset() ? 'over' : 'side'"
+        [opened]="isLoggedIn() && !isHandset()">
+        <mat-toolbar class="primary">
+            <span>Menu</span>
+        </mat-toolbar>
+        @if (isLoggedIn()) {
+            <mat-accordion>
+                @for (menu of menuItems(); track menu.Id) {
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <mat-panel-title>@if (menu.Icon) {<mat-icon>{{menu.Icon}}</mat-icon>}{{menu.Caption}}</mat-panel-title>
+                        </mat-expansion-panel-header>
+                        <mat-nav-list>
+                            @for (item of menu.ApplicationMenuItems; track item.ItemId) {
+                                <a mat-list-item [routerLink]="getRouterLink(item)">
+                                    @if (item.Icon) {<mat-icon>{{item.Icon}}</mat-icon>}
+                                    <span>{{item.Caption}}</span>
+                                </a>
+                            }
+                        </mat-nav-list>
+                    </mat-expansion-panel>
+                }
+            </mat-accordion>
+        }
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <mat-toolbar class="primary">
+            @if (isHandset()) {
+                <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="sidenav.toggle()">
+                    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+                </button>
+            }
+            <ng-content select="[toolbar-title]"></ng-content>
+            <span class="toolbar-spacer"></span>
+            <ng-content select="[toolbar-actions]"></ng-content>
+            @if (isLoggedIn()) {
+                <button mat-button (click)="logout()">Logout</button>
+            } @else if (guiConfig.publicRouteLinks) {
+                @for (link of guiConfig.publicRouteLinks; track link.routerLink) {
+                    <a mat-button [routerLink]="link.routerLink">{{ link.label }}</a>
+                }
+            }
+        </mat-toolbar>
+        <router-outlet></router-outlet>
+    </mat-sidenav-content>
+</mat-sidenav-container>

package/src/component/navigation/navigation.ts

@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal, ViewEncapsulation } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { RouterLink, RouterOutlet } from "@angular/router";
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { map } from 'rxjs/operators';
+import { ApplicationMenu, ApplicationMenuItem } from "../../model/common";
+import { BaseAuthService } from "../../service/auth.service";
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    MatSidenavModule,
+    MatToolbarModule,
+    MatListModule,
+    MatIconModule,
+    MatButtonModule,
+    RouterOutlet,
+    RouterLink,
+    MatExpansionModule,
+  ],
+})
+export class Navigation implements OnInit {
+  private readonly authService = inject(BaseAuthService);
+  private readonly breakpointObserver = inject(BreakpointObserver);
+  protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
+
+  private readonly allMenuItems = signal<ApplicationMenu[]>([]);
+
+  readonly menuItems = computed(() => {
+    const menus = this.allMenuItems();
+    return menus
+      .map(menu => ({
+        ...menu,
+        ApplicationMenuItems: (menu.ApplicationMenuItems ?? [])
+          .filter(item => item.ItemId && this.authService.canAccess(item.ItemId)),
+      }))
+      .filter(menu => menu.ApplicationMenuItems.length > 0);
+  });
+
+  readonly isHandset = toSignal(
+    this.breakpointObserver.observe(Breakpoints.Handset).pipe(map((result) => result.matches)),
+    { initialValue: false },
+  );
+
+  readonly isLoggedIn = this.authService.isLoggedIn;
+
+  ngOnInit() {
+    this.authService.loadStoredSession();
+    this.authService.getMenus().subscribe((menuItems: ApplicationMenu[]) => { this.allMenuItems.set(menuItems); });
+  }
+
+  logout() {
+    this.authService.logout();
+  }
+
+  getRouterLink(item: ApplicationMenuItem): string {
+    return '/' + (item.MenuId ?? '').toLowerCase() + '/' + (item.ItemId ?? '');
+  }
+}