@skysoftware-co/bayan-hr-widgets-ui 2.0.19 → 2.0.20

package/src/lib/shared/components/hr-employee-calendar/hr-employee-calendar.component.ts

@@ -0,0 +1,193 @@
+import { ChangeDetectionStrategy, Component, ViewChild, inject, input } from '@angular/core';
+import { DxCalendarComponent, DxCalendarModule } from 'devextreme-angular';
+import { ScheduleCalenderVacation, ScheduleVacationTypes, DatePeriod } from '../../types/common';
+import { HRCommonMethodsService } from '../../services/common-methods.service';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faCircle } from '@fortawesome/pro-regular-svg-icons';
+import { HRTranslatePipe } from '../../pipes/translate.pipe';
+
+@Component({
+  standalone: true,
+  selector: 'hr-employee-calendar',
+  templateUrl: './hr-employee-calendar.component.html',
+  imports: [DxCalendarModule, HRTranslatePipe, FontAwesomeModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HREmployeeCalendarComponent {
+  @ViewChild('calendar') calendar!: DxCalendarComponent;
+  readonly showEvents = input<boolean>(false);
+  readonly showUpComingVacations = input<boolean>(false);
+  readonly scheduleCalenderVacation = input<ScheduleCalenderVacation[]>([]);
+  readonly minDate = input<Date>(new Date());
+  readonly maxDate = input<Date>(new Date());
+
+  readonly legendContainerClass = input<string>('row mb-2');
+  readonly legendRowClass = input<string>('d-flex');
+  readonly legendItemClass = input<string>('d-flex align-items-center');
+  readonly legendDotClass = input<string>('me-1 circle-sm');
+  readonly legendLabelClass = input<string>('me-1 fs-12');
+  readonly publicHolidayDotClass = input<string>('bg-accent');
+  readonly dayOffDotClass = input<string>('bg-yellow');
+  readonly eventsDotClass = input<string>('bg-primary');
+  readonly vacationsContainerClass = input<string>('d-flex mt-3');
+  readonly vacationsItemClass = input<string>('d-flex align-items-center');
+  readonly vacationsIconClass = input<string>('fs-8 me-1');
+  readonly calendarContainerClass = input<string>('row mt-2 col-12');
+  readonly calendarClass = input<string>('button-boeder-none');
+
+  squreCheckIcon = faCircle;
+  DaysOffVacationTypes = ScheduleVacationTypes.DaysOff;
+  PublicHolidaysVacationTypes = ScheduleVacationTypes.PublicHoliday;
+  private commonMethods = inject(HRCommonMethodsService);
+
+  customCellTemplate = (cellData: any): string | HTMLElement => {
+    if (cellData.view != 'month') {
+      return this.createDateSpan(cellData);
+    }
+
+    const cellDate = cellData.date;
+
+    let matchedVacation = this.scheduleCalenderVacation().find(vacation =>
+      this.isDateInPeriod(cellDate, vacation.VacationDays),
+    );
+
+    let matchedOffOrPublicHolidayBullet: ScheduleCalenderVacation | undefined = this.scheduleCalenderVacation().find(
+      vacation =>
+        this.isDateInPeriod(cellDate, vacation.VacationDays) &&
+        vacation.VacationType != ScheduleVacationTypes.Vacations &&
+        vacation.VacationType != ScheduleVacationTypes.AddedVacations,
+    );
+
+    if (matchedVacation) {
+      if (
+        this.commonMethods.calculateDaysDifference(
+          matchedVacation.VacationDays.EndDate,
+          matchedVacation.VacationDays.StartDate,
+        ) === 0
+      ) {
+        return this.createDateSpan(cellData, matchedVacation, matchedOffOrPublicHolidayBullet, false, false, false);
+      }
+
+      let isStartRange =
+        this.commonMethods.calculateDaysDifference(cellDate, matchedVacation.VacationDays.StartDate) === 0;
+      let isEndRange = this.commonMethods.calculateDaysDifference(matchedVacation.VacationDays.EndDate, cellDate) === 0;
+
+      return this.createDateSpan(
+        cellData,
+        matchedVacation,
+        matchedOffOrPublicHolidayBullet,
+        true,
+        isStartRange,
+        isEndRange,
+      );
+    }
+
+    return this.createDateSpan(cellData);
+  };
+
+  private createDateSpan = (
+    cellData: any,
+    matchedVacation: ScheduleCalenderVacation | undefined = undefined,
+    matchedOffOrPublicHolidayBullet: ScheduleCalenderVacation | undefined = undefined,
+    isInRange: boolean = false,
+    isStartRange: boolean = false,
+    isEndRange: boolean = false,
+  ) => {
+    const offDayOrPublicHolidaySpan = document.createElement('span');
+    const cellElement = document.createElement('span');
+    cellElement.textContent = cellData.text;
+    cellElement.style.backgroundColor = '';
+    cellElement.style.borderRadius = '15px';
+    cellElement.style.borderWidth = '0';
+    cellElement.style.fontSize = '10px';
+    cellElement.style.margin = '0';
+    cellElement.style.padding = '0';
+    cellElement.style.alignContent = 'center';
+    cellElement.style.position = 'relative';
+
+    if (matchedVacation) {
+      cellElement.title = matchedVacation.Description;
+
+      if (
+        matchedVacation.VacationType != ScheduleVacationTypes.DaysOff &&
+        matchedVacation.VacationType != ScheduleVacationTypes.PublicHoliday &&
+        matchedVacation.VacationType != ScheduleVacationTypes.Events
+      ) {
+        if (matchedVacation.Color) {
+          cellElement.style.backgroundColor = matchedVacation.Color + '99';
+          cellElement.style.color = '#FFFFFF';
+        } else {
+          cellElement.style.backgroundColor = '#DCDCDC';
+          cellElement.style.color = '#000000';
+        }
+
+        if (isInRange) {
+          cellElement.style.width = '100%';
+          cellElement.style.alignContent = 'start';
+
+          if (isStartRange) {
+            cellElement.style.borderEndEndRadius = '0px';
+            cellElement.style.borderStartEndRadius = '0px';
+          }
+
+          if (isEndRange) {
+            cellElement.style.borderStartStartRadius = '0px';
+            cellElement.style.borderEndStartRadius = '0px';
+          }
+
+          if (!isStartRange && !isEndRange) cellElement.style.borderRadius = '0px';
+        }
+      }
+    }
+
+    if (matchedOffOrPublicHolidayBullet) {
+      offDayOrPublicHolidaySpan.style.width = '8px';
+      offDayOrPublicHolidaySpan.style.height = '8px';
+      offDayOrPublicHolidaySpan.className = 'rounded rounded-circle';
+      offDayOrPublicHolidaySpan.style.position = 'absolute';
+      offDayOrPublicHolidaySpan.style.opacity = '1';
+      offDayOrPublicHolidaySpan.style.top = '-5px';
+      offDayOrPublicHolidaySpan.style.right = '0';
+      offDayOrPublicHolidaySpan.title = matchedOffOrPublicHolidayBullet.Description;
+
+      if (matchedVacation) {
+        if (
+          matchedVacation.VacationType != ScheduleVacationTypes.DaysOff &&
+          matchedVacation.VacationType != ScheduleVacationTypes.PublicHoliday &&
+          matchedVacation.VacationType != ScheduleVacationTypes.Events
+        ) {
+          if (isInRange) {
+            offDayOrPublicHolidaySpan.style.right = '8px';
+          }
+        }
+      }
+
+      offDayOrPublicHolidaySpan.style.background = matchedOffOrPublicHolidayBullet.Color || '';
+      offDayOrPublicHolidaySpan.style.marginTop = '2px';
+      cellElement.appendChild(offDayOrPublicHolidaySpan);
+    }
+
+    return cellElement;
+  };
+
+  isDateInPeriod(date: Date, period: DatePeriod) {
+    if (this.commonMethods.calculateDaysDifference(date, period.StartDate) == 0) return true;
+
+    if (this.commonMethods.calculateDaysDifference(date, period.EndDate) == 0) return true;
+
+    let daysDifferenceWithStartDate = this.commonMethods.calculateDaysDifference(date, period.StartDate);
+    let daysDifferenceWithEndDate = this.commonMethods.calculateDaysDifference(period.EndDate, date);
+
+    if (daysDifferenceWithStartDate < 0 || daysDifferenceWithEndDate < 0) return false;
+
+    return true;
+  }
+
+  resetCalenderCurrentDate(currentDate: Date = new Date()) {
+    this.calendar.instance.option('currentDate', currentDate);
+  }
+
+  preventInteraction(event: any): void {
+    event.component.option('value', null);
+  }
+}

package/src/lib/shared/components/info-field/info-field.component.html

@@ -0,0 +1,2 @@
+<div [ngClass]="labelClass()">{{ labelKey() | translate }}</div>
+<div [ngClass]="valueClass()" [title]="displayValue()">{{ displayValue() }}</div>

package/src/lib/shared/components/info-field/info-field.component.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { HRTranslatePipe } from '../../pipes/translate.pipe';
+
+@Component({
+  selector: 'hr-info-field',
+  standalone: true,
+  imports: [CommonModule, HRTranslatePipe],
+  templateUrl: './info-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HRInfoFieldComponent {
+  readonly labelKey = input.required<string>();
+  readonly value = input<string | null | undefined>(null);
+  readonly labelClass = input<string>('field-secondary-label-sm');
+  readonly valueClass = input<string>('fs-14 fw-medium');
+  readonly fallbackValue = input<string>('—');
+
+  readonly displayValue = computed(() => this.value() || this.fallbackValue());
+}

package/src/lib/shared/components/widget-card/widget-card-component.html

@@ -0,0 +1,3 @@
+<div [class]="cardClass()" [style.height.px]="height()" style="overflow: hidden">
+  <ng-container *ngTemplateOutlet="contentTemplate(); context: context()"></ng-container>
+</div>

package/src/lib/shared/components/widget-card/widget-card-component.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, TemplateRef, input } from '@angular/core';
+
+@Component({
+  selector: 'hr-widget-card',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './widget-card-component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WidgetCardComponent {
+  readonly cardClass = input<string>('bg-white shadow-sm p-3 border-1 border');
+  readonly height = input<number>(110);
+
+  readonly contentTemplate = input.required<TemplateRef<any>>();
+  readonly context = input<any>(undefined);
+}

package/src/lib/shared/pipes/translate.pipe.ts

@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { HRTranslateService } from '../services/translate.service';
+
+@Pipe({
+  name: 'translate',
+  standalone: true,
+})
+export class HRTranslatePipe implements PipeTransform {
+  constructor(private readonly payrollTranslateService: HRTranslateService) {}
+
+  transform(key?: string): string {
+    if (!key) return '';
+
+    key = this.payrollTranslateService.translateBuiltIn(key);
+
+    const lexicon = this.payrollTranslateService.getLexicon();
+    let foundKey = Object.keys(lexicon).find(k => k.toLowerCase() === key!.toLowerCase());
+    if (foundKey) return lexicon[foundKey];
+
+    const arrKey = key.split(' ');
+    let keyValue = '';
+    for (let i = 0; i < arrKey.length; i++) {
+      if (i !== 0) keyValue += ' ';
+      foundKey = Object.keys(lexicon).find(k => k.toLowerCase() === arrKey[i].toLowerCase());
+      if (foundKey) {
+        keyValue += lexicon[foundKey];
+      } else {
+        keyValue += arrKey[i];
+      }
+    }
+
+    return keyValue;
+  }
+}

package/src/lib/shared/services/bank-information-cache.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { MyBankInfo } from '../types/common';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BankInformationCacheService {
+  private bankInformationCache$: Observable<MyBankInfo[]> | null = null;
+  private bankInformationCacheBaseUrl = '';
+
+  get(baseUrl: string): Observable<MyBankInfo[]> | null {
+    if (this.bankInformationCacheBaseUrl !== baseUrl) {
+      return null;
+    }
+
+    return this.bankInformationCache$;
+  }
+
+  set(baseUrl: string, value: Observable<MyBankInfo[]>): void {
+    this.bankInformationCacheBaseUrl = baseUrl;
+    this.bankInformationCache$ = value;
+  }
+
+  clear(): void {
+    this.bankInformationCache$ = null;
+    this.bankInformationCacheBaseUrl = '';
+  }
+}

package/src/lib/shared/services/common-methods.service.ts

@@ -0,0 +1,33 @@
+import { DecimalPipe } from '@angular/common';
+import { Injectable } from '@angular/core';
+import { HRTranslateService } from './translate.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HRCommonMethodsService {
+  constructor(private readonly translateService: HRTranslateService) {}
+
+  calculateDaysDifference(dateOne: string | Date, dateTwo: string | Date): number {
+    const resetTime = (inputDate: Date): Date => {
+      const newDate = new Date(inputDate);
+      newDate.setHours(0, 0, 0, 0);
+      return newDate;
+    };
+    const firstDate = resetTime(new Date(dateOne));
+    const secondDate = resetTime(new Date(dateTwo));
+    return (firstDate.getTime() - secondDate.getTime()) / (1000 * 60 * 60 * 24);
+  }
+
+  currencyDecimalFormat(value: number, currencyDecimalsNumber: number): string | null {
+    const currencyDecimalsString = `1.${currencyDecimalsNumber}-${currencyDecimalsNumber}`;
+    const languageCode = this.translateService.getLanguage() || 'en';
+    const decimalPipe = new DecimalPipe(languageCode === 'fr' ? 'fr-FR' : 'en-US');
+
+    if (languageCode === 'fr') {
+      return decimalPipe.transform(value, currencyDecimalsString, 'fr-FR');
+    }
+
+    return decimalPipe.transform(value, currencyDecimalsString);
+  }
+}

package/src/lib/shared/services/constants.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HRConstantsService {
+  defaultVacationBalanceColor: string = '#727070';
+  defaultVacationColor: string = '#DCDCDC';
+  defaultPublicHolidayColor: string = '#249EA0';
+  defaultDayOffColor: string = '#FCCF5A';
+  defaultEventsColor: string = '#e67e0f';
+}

package/src/lib/shared/services/entitlements-cache.service.ts

@@ -0,0 +1,94 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import {
+  EntitlementsIndemnity,
+  EntitlementsMedicalInsurance,
+  EntitlementsTicket,
+  EntitlementsVacation,
+} from '../types/common';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EntitlementsCacheService {
+  private baseUrl = '';
+
+  private vacationDetails$: Observable<EntitlementsVacation[] | null> | null = null;
+  private indemnityDetails$: Observable<EntitlementsIndemnity | null> | null = null;
+  private ticketDetails$: Observable<EntitlementsTicket | null> | null = null;
+  private medicalInsuranceDetails$: Observable<EntitlementsMedicalInsurance | null> | null = null;
+  private overtimeDetails$: Observable<any> | null = null;
+  private socialSecurityDetails$: Observable<any> | null = null;
+
+  getVacationDetails(baseUrl: string): Observable<EntitlementsVacation[] | null> | null {
+    return this.baseUrl === baseUrl ? this.vacationDetails$ : null;
+  }
+
+  setVacationDetails(baseUrl: string, value: Observable<EntitlementsVacation[] | null>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.vacationDetails$ = value;
+  }
+
+  getIndemnityDetails(baseUrl: string): Observable<EntitlementsIndemnity | null> | null {
+    return this.baseUrl === baseUrl ? this.indemnityDetails$ : null;
+  }
+
+  setIndemnityDetails(baseUrl: string, value: Observable<EntitlementsIndemnity | null>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.indemnityDetails$ = value;
+  }
+
+  getTicketDetails(baseUrl: string): Observable<EntitlementsTicket | null> | null {
+    return this.baseUrl === baseUrl ? this.ticketDetails$ : null;
+  }
+
+  setTicketDetails(baseUrl: string, value: Observable<EntitlementsTicket | null>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.ticketDetails$ = value;
+  }
+
+  getMedicalInsuranceDetails(baseUrl: string): Observable<EntitlementsMedicalInsurance | null> | null {
+    return this.baseUrl === baseUrl ? this.medicalInsuranceDetails$ : null;
+  }
+
+  setMedicalInsuranceDetails(baseUrl: string, value: Observable<EntitlementsMedicalInsurance | null>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.medicalInsuranceDetails$ = value;
+  }
+
+  getOvertimeDetails(baseUrl: string): Observable<any> | null {
+    return this.baseUrl === baseUrl ? this.overtimeDetails$ : null;
+  }
+
+  setOvertimeDetails(baseUrl: string, value: Observable<any>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.overtimeDetails$ = value;
+  }
+
+  getSocialSecurityDetails(baseUrl: string): Observable<any> | null {
+    return this.baseUrl === baseUrl ? this.socialSecurityDetails$ : null;
+  }
+
+  setSocialSecurityDetails(baseUrl: string, value: Observable<any>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.socialSecurityDetails$ = value;
+  }
+
+  clear(): void {
+    this.baseUrl = '';
+    this.vacationDetails$ = null;
+    this.indemnityDetails$ = null;
+    this.ticketDetails$ = null;
+    this.medicalInsuranceDetails$ = null;
+    this.overtimeDetails$ = null;
+    this.socialSecurityDetails$ = null;
+  }
+
+  private ensureBaseUrl(baseUrl: string): void {
+    if (this.baseUrl && this.baseUrl !== baseUrl) {
+      this.clear();
+    }
+
+    this.baseUrl = baseUrl;
+  }
+}

package/src/lib/shared/services/job-information-cache.service.ts

@@ -0,0 +1,72 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import {
+  JobInformationContract,
+  JobInformationMain,
+  JobInformationSalary,
+  JobInformationServiceCharge,
+} from '../types/common';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class JobInformationCacheService {
+  private baseUrl = '';
+
+  private mainDetails$: Observable<JobInformationMain | null> | null = null;
+  private contractDetails$: Observable<JobInformationContract | null> | null = null;
+  private salaryDetails$: Observable<JobInformationSalary | null> | null = null;
+  private serviceChargeDetails$: Observable<JobInformationServiceCharge | null> | null = null;
+
+  getMainDetails(baseUrl: string): Observable<JobInformationMain | null> | null {
+    return this.baseUrl === baseUrl ? this.mainDetails$ : null;
+  }
+
+  setMainDetails(baseUrl: string, value: Observable<JobInformationMain | null>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.mainDetails$ = value;
+  }
+
+  getContractDetails(baseUrl: string): Observable<JobInformationContract | null> | null {
+    return this.baseUrl === baseUrl ? this.contractDetails$ : null;
+  }
+
+  setContractDetails(baseUrl: string, value: Observable<JobInformationContract | null>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.contractDetails$ = value;
+  }
+
+  getSalaryDetails(baseUrl: string): Observable<JobInformationSalary | null> | null {
+    return this.baseUrl === baseUrl ? this.salaryDetails$ : null;
+  }
+
+  setSalaryDetails(baseUrl: string, value: Observable<JobInformationSalary | null>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.salaryDetails$ = value;
+  }
+
+  getServiceChargeDetails(baseUrl: string): Observable<JobInformationServiceCharge | null> | null {
+    return this.baseUrl === baseUrl ? this.serviceChargeDetails$ : null;
+  }
+
+  setServiceChargeDetails(baseUrl: string, value: Observable<JobInformationServiceCharge | null>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.serviceChargeDetails$ = value;
+  }
+
+  clear(): void {
+    this.baseUrl = '';
+    this.mainDetails$ = null;
+    this.contractDetails$ = null;
+    this.salaryDetails$ = null;
+    this.serviceChargeDetails$ = null;
+  }
+
+  private ensureBaseUrl(baseUrl: string): void {
+    if (this.baseUrl && this.baseUrl !== baseUrl) {
+      this.clear();
+    }
+
+    this.baseUrl = baseUrl;
+  }
+}

package/src/lib/shared/services/my-team-popup.service.ts

@@ -0,0 +1,34 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { SubordinatesApiResponse } from '../types/common';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MyTeamWidgetsService {
+  private readonly headers = { 'api-version': '1' };
+
+  constructor(private readonly http: HttpClient) {}
+
+  getSubordinates(
+    baseUrl: string,
+    params: {
+      showDirectSubordinatesOnly: boolean;
+      pageIndex: number;
+      pageSize: number;
+      searchValue?: string;
+    },
+  ): Observable<{ ResponseData: SubordinatesApiResponse }> {
+    const httpParams = new HttpParams()
+      .set('p.showDirectSubordinatesOnly', params.showDirectSubordinatesOnly)
+      .set('p.loadOptions.pageIndex', params.pageIndex + 1)
+      .set('p.loadOptions.pageSize', params.pageSize)
+      .set('p.loadOptions.searchValue', params.searchValue ?? '');
+
+    return this.http.get<{ ResponseData: SubordinatesApiResponse }>(`${baseUrl}/hr/widgets/me/team/subordinates`, {
+      params: httpParams,
+      headers: this.headers,
+    });
+  }
+}

package/src/lib/shared/services/personal-information-cache.service.ts

@@ -0,0 +1,77 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { PersonalInfoAddressDetails, PersonalInfoContactDetails, PersonalInfoMainDetails } from '../types/common';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PersonalInformationCacheService {
+  private baseUrl = '';
+
+  private mainDetails$: Observable<PersonalInfoMainDetails> | null = null;
+  private contactDetails$: Observable<PersonalInfoContactDetails> | null = null;
+  private addressDetails$: Observable<PersonalInfoAddressDetails> | null = null;
+  private languages$: Observable<string[]> | null = null;
+  private otherNationalities$: Observable<string[]> | null = null;
+
+  getMainDetails(baseUrl: string): Observable<PersonalInfoMainDetails> | null {
+    return this.baseUrl === baseUrl ? this.mainDetails$ : null;
+  }
+
+  setMainDetails(baseUrl: string, value: Observable<PersonalInfoMainDetails>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.mainDetails$ = value;
+  }
+
+  getContactDetails(baseUrl: string): Observable<PersonalInfoContactDetails> | null {
+    return this.baseUrl === baseUrl ? this.contactDetails$ : null;
+  }
+
+  setContactDetails(baseUrl: string, value: Observable<PersonalInfoContactDetails>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.contactDetails$ = value;
+  }
+
+  getAddressDetails(baseUrl: string): Observable<PersonalInfoAddressDetails> | null {
+    return this.baseUrl === baseUrl ? this.addressDetails$ : null;
+  }
+
+  setAddressDetails(baseUrl: string, value: Observable<PersonalInfoAddressDetails>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.addressDetails$ = value;
+  }
+
+  getLanguages(baseUrl: string): Observable<string[]> | null {
+    return this.baseUrl === baseUrl ? this.languages$ : null;
+  }
+
+  setLanguages(baseUrl: string, value: Observable<string[]>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.languages$ = value;
+  }
+
+  getOtherNationalities(baseUrl: string): Observable<string[]> | null {
+    return this.baseUrl === baseUrl ? this.otherNationalities$ : null;
+  }
+
+  setOtherNationalities(baseUrl: string, value: Observable<string[]>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.otherNationalities$ = value;
+  }
+
+  clear(): void {
+    this.baseUrl = '';
+    this.mainDetails$ = null;
+    this.contactDetails$ = null;
+    this.addressDetails$ = null;
+    this.languages$ = null;
+    this.otherNationalities$ = null;
+  }
+
+  private ensureBaseUrl(baseUrl: string): void {
+    if (this.baseUrl && this.baseUrl !== baseUrl) {
+      this.clear();
+    }
+    this.baseUrl = baseUrl;
+  }
+}

package/src/lib/shared/services/profile-documents-cache-service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DependentDocumentGroup, PersonalDocument } from '../types/common';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProfileDocumentsCacheService {
+  private baseUrl = '';
+
+  private dependentDocuments$: Observable<DependentDocumentGroup[]> | null = null;
+  private personalDocuments$: Observable<PersonalDocument[]> | null = null;
+
+  getDependentDocuments(baseUrl: string): Observable<DependentDocumentGroup[]> | null {
+    return this.baseUrl === baseUrl ? this.dependentDocuments$ : null;
+  }
+
+  setDependentDocuments(baseUrl: string, value: Observable<DependentDocumentGroup[]>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.dependentDocuments$ = value;
+  }
+
+  getPersonalDocuments(baseUrl: string): Observable<PersonalDocument[]> | null {
+    return this.baseUrl === baseUrl ? this.personalDocuments$ : null;
+  }
+
+  setPersonalDocuments(baseUrl: string, value: Observable<PersonalDocument[]>): void {
+    this.ensureBaseUrl(baseUrl);
+    this.personalDocuments$ = value;
+  }
+
+  clear(): void {
+    this.baseUrl = '';
+    this.dependentDocuments$ = null;
+    this.personalDocuments$ = null;
+  }
+
+  private ensureBaseUrl(baseUrl: string): void {
+    if (this.baseUrl && this.baseUrl !== baseUrl) {
+      this.clear();
+    }
+    this.baseUrl = baseUrl;
+  }
+}