@skysoftware-co/bayan-hr-widgets-ui 2.0.25 → 2.0.27

package/src/lib/my-calendar-widget/my-calendar-widget.component.ts

@@ -0,0 +1,220 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  ViewChild,
+  computed,
+  effect,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { HRSelfWidgetsService } from '../services/hr-self-widgets.service';
+import {
+  CalendarResponse,
+  ScheduleCalenderVacation,
+  ScheduleRequestsResponse,
+  ScheduleVacationTypes,
+} from '../shared/types/common';
+import { HRTranslatePipe } from '../shared/pipes/translate.pipe';
+import { HRConstantsService } from '../shared/services/constants.service';
+import { HREmployeeCalendarComponent } from '../shared/components/hr-employee-calendar/hr-employee-calendar.component';
+import { faCalendarDays } from '@fortawesome/pro-regular-svg-icons';
+import { HRCardHeaderComponent } from '../shared/components/card-header/card-header.component';
+import moment from 'moment';
+
+@Component({
+  standalone: true,
+  selector: 'hr-my-calendar-widget',
+  templateUrl: './my-calendar-widget.component.html',
+  imports: [HREmployeeCalendarComponent, HRCardHeaderComponent, HRTranslatePipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyCalendarWidgetComponent implements OnInit {
+  readonly baseUrl = input<string>('');
+  readonly headerContainerClass = input<string>('');
+  readonly datasource = input<ScheduleRequestsResponse | null>(null);
+  readonly isLoadingChanged = output<boolean>();
+
+  readonly calendarIcon = faCalendarDays;
+
+  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');
+
+  private readonly selfWidgetsService = inject(HRSelfWidgetsService);
+  private readonly constants = inject(HRConstantsService);
+  private readonly translatePipe = inject(HRTranslatePipe);
+
+  readonly publicHolidayColor = input<string>(this.constants.defaultPublicHolidayColor);
+  readonly dayOffColor = input<string>(this.constants.defaultDayOffColor);
+  readonly eventsColor = input<string>(this.constants.defaultEventsColor);
+
+  @ViewChild(HREmployeeCalendarComponent) hrCalendar!: HREmployeeCalendarComponent;
+
+  readonly minDate: Date;
+  readonly maxDate: Date;
+
+  private readonly baseCalendarData = signal<ScheduleCalenderVacation[]>([]);
+  private readonly hrVacations = signal<ScheduleCalenderVacation[]>([]);
+  private readonly calendarLoaded = signal(false);
+
+  readonly scheduleCalenderVacation = computed<ScheduleCalenderVacation[]>(() => {
+    if (!this.calendarLoaded()) {
+      return [];
+    }
+
+    const pendingVacations: ScheduleCalenderVacation[] =
+      this.datasource()?.PendingVacationRequests?.map(v => ({
+        VacationType: ScheduleVacationTypes.Vacations,
+        Description: v.VacationTypeName,
+        Color: v.Color,
+        VacationDays: { StartDate: v.StartDate, EndDate: v.EndDate },
+      })) ?? [];
+
+    const mergedVacations = this.mergeConsecutiveVacations(
+      [...this.hrVacations(), ...pendingVacations].sort(
+        (a, b) => new Date(a.VacationDays.StartDate).getTime() - new Date(b.VacationDays.StartDate).getTime(),
+      ),
+    );
+
+    const events: ScheduleCalenderVacation[] =
+      this.datasource()?.PendingEventRequests?.map(ev => ({
+        VacationType: ScheduleVacationTypes.Events,
+        Description: ev.Description,
+        Color: this.eventsColor(),
+        VacationDays: { StartDate: ev.StartDate, EndDate: ev.EndDate },
+      })) ?? [];
+
+    return [...mergedVacations, ...this.baseCalendarData(), ...events];
+  });
+
+  private readonly refreshCalendarEffect = effect(() => {
+    if (!this.calendarLoaded()) {
+      return;
+    }
+
+    this.scheduleCalenderVacation();
+    this.refreshCalendar();
+  });
+
+  constructor() {
+    const currentDate = moment().date(1).subtract(1, 'month');
+    this.minDate = new Date(currentDate.year(), currentDate.month(), currentDate.date());
+    this.maxDate = new Date(this.minDate.getFullYear() + 1, this.minDate.getMonth() + 1, 0);
+  }
+
+  ngOnInit(): void {
+    this.loadCalendar();
+  }
+
+  private getCalendar(month: number, year: number, monthsCount: number) {
+    return this.selfWidgetsService.getCalendar(this.baseUrl(), month, year, monthsCount);
+  }
+
+  private loadCalendar(): void {
+    const currentDate = moment().date(1).subtract(1, 'month');
+    const month = currentDate.month() === 0 ? 1 : currentDate.month() + 1;
+    const year = currentDate.year();
+
+    this.isLoadingChanged.emit(true);
+    this.getCalendar(month, year, 12).subscribe({
+      next: (response: any) => {
+        this.isLoadingChanged.emit(false);
+        this.mapCalendarData(response.ResponseData as CalendarResponse);
+      },
+      error: () => {
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+
+  private mapCalendarData(data: CalendarResponse): void {
+    this.baseCalendarData.set([
+      ...data.PublicHolidays.map(ph => ({
+        VacationType: ScheduleVacationTypes.PublicHoliday,
+        Description: ph.Description,
+        Color: this.publicHolidayColor(),
+        VacationDays: { StartDate: ph.StartDate, EndDate: ph.EndDate },
+      })),
+      ...data.OffDays.map(od => ({
+        VacationType: ScheduleVacationTypes.DaysOff,
+        Description: this.translatePipe.transform('DayOff'),
+        Color: this.dayOffColor(),
+        VacationDays: { StartDate: od, EndDate: od },
+      })),
+    ]);
+
+    this.hrVacations.set(
+      (data.Vacations ?? []).map(v => ({
+        VacationType: ScheduleVacationTypes.Vacations,
+        Description: v.VacationTypeName,
+        Color: v.Color,
+        VacationDays: { StartDate: v.StartDate, EndDate: v.EndDate },
+      })),
+    );
+
+    this.calendarLoaded.set(true);
+  }
+
+  private refreshCalendar(): void {
+    setTimeout(() => {
+      if (this.hrCalendar?.calendar) {
+        this.hrCalendar.calendar.instance._refresh();
+        this.hrCalendar.resetCalenderCurrentDate();
+      }
+    }, 100);
+  }
+
+  private mergeConsecutiveVacations(vacations: ScheduleCalenderVacation[]): ScheduleCalenderVacation[] {
+    if (vacations.length === 0) return [];
+
+    const grouped = new Map<string, ScheduleCalenderVacation[]>();
+    for (const v of vacations) {
+      const key = `${v.Description}|${v.Color ?? ''}`;
+      if (!grouped.has(key)) grouped.set(key, []);
+      grouped.get(key)!.push(v);
+    }
+
+    const result: ScheduleCalenderVacation[] = [];
+
+    grouped.forEach(items => {
+      items.sort((a, b) => new Date(a.VacationDays.StartDate).getTime() - new Date(b.VacationDays.StartDate).getTime());
+
+      let merged = { ...items[0], VacationDays: { ...items[0].VacationDays } };
+
+      for (let i = 1; i < items.length; i++) {
+        const current = items[i];
+        const lastEnd = new Date(merged.VacationDays.EndDate);
+        const currentStart = new Date(current.VacationDays.StartDate);
+        const diffDays = (currentStart.getTime() - lastEnd.getTime()) / (1000 * 60 * 60 * 24);
+
+        if (diffDays <= 1) {
+          const currentEnd = new Date(current.VacationDays.EndDate);
+          if (currentEnd.getTime() > lastEnd.getTime()) {
+            merged.VacationDays.EndDate = current.VacationDays.EndDate;
+          }
+        } else {
+          result.push(merged);
+          merged = { ...current, VacationDays: { ...current.VacationDays } };
+        }
+      }
+      result.push(merged);
+    });
+
+    return result.sort(
+      (a, b) => new Date(a.VacationDays.StartDate).getTime() - new Date(b.VacationDays.StartDate).getTime(),
+    );
+  }
+}

package/src/lib/my-main-details-widget/my-main-details-widget.component.html

@@ -0,0 +1,157 @@
+<div [class]="containerClass()">
+  <div [class]="cardBodyClass()">
+    <div [class]="headerRowClass()">
+      <div>
+        @if (employeeMainInfo() != null) {
+          <div [class]="employeeInfoContainerClass()">
+            <bayan-employee-badge
+              [badge]="employeeBadge()"
+              [badgeClass]="badgeClass()"
+              [imageClass]="badgeImageClass()"
+              [width]="badgeWidth()"
+              [height]="badgeHeight()"
+              (employeePhotoError)="handleEmployeePhotoError()"
+            ></bayan-employee-badge>
+
+            <div [class]="employeeDetailsClass()">
+              <div [class]="employeeNameContainerClass()">
+                <div
+                  [class]="employeeNameClass()"
+                  data-bs-toggle="tooltip"
+                  [title]="employeeMainInfo()!.EmployeeNumber + ' | ' + employeeMainInfo()!.EmployeeName"
+                >
+                  {{ employeeMainInfo()!.EmployeeNumber + ' | ' + employeeMainInfo()!.EmployeeName }}
+                </div>
+              </div>
+              @if (employeeMainInfo()!.PositionName != null && employeeMainInfo()!.PositionName != '') {
+                <div [class]="employeePositionClass()" data-bs-toggle="tooltip" [title]="employeeMainInfo()!.PositionName">
+                  {{ employeeMainInfo()!.PositionName }}
+                </div>
+              }
+              @if (employeeMainInfo()!.GradeName != null) {
+                <div [class]="employeeGradeClass()" [title]="employeeMainInfo()!.GradeName">
+                  {{ employeeMainInfo()!.GradeName }}
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+      <div [class]="shortcutsContainerClass()">
+        @for (Icon of shortcutsWithUrls(); track Icon; let i = $index) {
+          <sky-shortcut-icon
+            [shortcut]="Icon"
+            [itemClass]="shortcutItemClass()"
+            [iconContainerClass]="shortcutIconContainerClass()"
+            [iconClass]="shortcutIconClass()"
+            [textClass]="shortcutTextClass()"
+            (onClicked)="shortcutClicked($event)"
+          ></sky-shortcut-icon>
+        }
+      </div>
+    </div>
+    <div [class]="detailsRowClass()" [ngClass]="{ 'flex-wrap': isMobile() || isTablet() }">
+      <div [class]="reportingBlockClass()" [ngClass]="{ 'mb-3': isMobile() }">
+        <div [class]="captionLabelClasses() + ' me-5'">
+          <div>
+            {{ 'ReportingTo' | translate }}
+          </div>
+          <div [class]="captionLabelValueClass()">
+            @if (employeeMainInfo()?.ReportingTo) {
+              {{ employeeMainInfo()?.ReportingTo }}
+            } @else {
+              {{ 'NotAnknown' | translate }}
+            }
+          </div>
+        </div>
+        <div [class]="captionLabelClasses()" [ngClass]="{ 'border-end border-1 pe-4': !isMobile() }">
+          <div>
+            {{ 'ServiceYears' | translate }}
+          </div>
+          <div [class]="captionLabelValueClass()">
+            {{ employeeMainInfo()?.ServiceYears }}
+          </div>
+        </div>
+      </div>
+
+      <div class="flex-grow-1" [ngClass]="{ ' ms-4': !isMobile() && !isTablet(), 'w-100': isTablet() }">
+        <div [class]="vacationBalancesContainerClass()" [ngClass]="{ 'flex-wrap': isMobile(), 'w-100': isTablet() }">
+          @for (vacationBalance of employeeMainInfo()?.VacationBalances; track vacationBalance; let i = $index) {
+            @if (i <= 2 || employeeMainInfo()?.VacationBalances?.length == 4) {
+              <div [class]="vacationBalanceItemClass()" [ngClass]="{ 'mb-2 w-40': isMobile() }">
+                <div [class]="vacationBalanceHeaderClass()">
+                  <div [class]="vacationColorDotClass()">
+                    <div
+                      class="rounded rounded-circle"
+                      style="height: 11px; width: 11px"
+                      [style.background-color]="vacationBalance.VacationTypeColor"
+                    ></div>
+                  </div>
+                  <div [class]="vacationTypeNameClass()">
+                    {{ vacationBalance.VacationTypeName }}
+                  </div>
+                </div>
+                <div [class]="vacationBalanceValueRowClass()">
+                  <div [class]="vacationColorDotClass()">
+                    <div class="rounded rounded-circle invisible" style="height: 11px; width: 11px"></div>
+                  </div>
+                  <div [class]="vacationBalanceValueClass()">
+                    {{ vacationBalance.CurrentBalance | number: '1.2-2' }}
+                    {{ (vacationBalance.CurrentBalance! == 1 ? 'day' : 'days') | translate }}
+                  </div>
+                </div>
+              </div>
+            }
+          }
+
+          @if (employeeMainInfo()?.VacationBalances && employeeMainInfo()!.VacationBalances!.length > 4) {
+            <div [class]="vacationBalanceItemClass()">
+              <div [class]="tooltipTriggerLinkClass()" id="otherVacationBalances">
+                <div [class]="vacationColorDotClass()">
+                  <div
+                    class="rounded rounded-circle"
+                    style="height: 11px; width: 11px"
+                    [style.background-color]="defaultVacationBalanceColor()"
+                  ></div>
+                </div>
+                <div [class]="tooltipTriggerTextClass()">
+                  +{{ employeeMainInfo()!.VacationBalances!.length - 3 }} {{ 'More' | translate }}
+                </div>
+              </div>
+              <div [class]="vacationBalanceValueRowClass()" style="visibility: hidden">
+                <div [class]="vacationColorDotClass()">
+                  <div class="rounded rounded-circle" style="height: 11px; width: 11px"></div>
+                </div>
+                <div class="mx-1 fw-medium fs-14 text-dark-gray">{{ 'More' | translate }}</div>
+              </div>
+              <dx-tooltip [target]="'#otherVacationBalances'" [showEvent]="'mouseenter'" [hideEvent]="'mouseleave'">
+                @for (vacationBalance of employeeMainInfo()!.VacationBalances!; track vacationBalance; let i = $index) {
+                  @if (i > 2) {
+                    <div [class]="tooltipVacationRowClass()">
+                      <div [class]="tooltipVacationNameContainerClass()">
+                        <div [class]="vacationColorDotClass()">
+                          <div
+                            class="rounded rounded-circle"
+                            style="height: 11px; width: 11px"
+                            [style.background-color]="vacationBalance.VacationTypeColor"
+                          ></div>
+                        </div>
+                        <div [class]="tooltipVacationNameClass()">
+                          {{ vacationBalance.VacationTypeName }}
+                        </div>
+                      </div>
+                      <div>
+                        {{ vacationBalance.CurrentBalance | number: '1.2-2' }}
+                        {{ (vacationBalance.CurrentBalance! == 1 ? 'day' : 'days') | translate }}
+                      </div>
+                    </div>
+                  }
+                }
+              </dx-tooltip>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/my-main-details-widget/my-main-details-widget.component.ts

@@ -0,0 +1,179 @@
+import { ChangeDetectionStrategy, Component, OnInit, computed, inject, input, output, signal } from '@angular/core';
+import { DxTooltipModule } from 'devextreme-angular';
+import { DecimalPipe, NgClass } from '@angular/common';
+import { HRSelfWidgetsService } from '../services/hr-self-widgets.service';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { BayanEmployeeBadgeComponent, BayanEmployeeBadgeDTO } from '@skysoftware-co/bayan-components-ui';
+import { SkyShortcutIconComponent, ShortcutIconDTO } from '@skysoftware-co/sky-components-ui';
+import { MyMainDetailsWidgetDetails, MainWidgetShortcut } from '../shared/types/common';
+import { HRConstantsService } from '../shared/services/constants.service';
+import { HRTranslatePipe } from '../shared/pipes/translate.pipe';
+
+@Component({
+  selector: 'hr-my-main-details-widget',
+  standalone: true,
+  imports: [
+    DxTooltipModule,
+    NgClass,
+    FontAwesomeModule,
+    DecimalPipe,
+    BayanEmployeeBadgeComponent,
+    SkyShortcutIconComponent,
+    HRTranslatePipe,
+  ],
+  providers: [HRTranslatePipe],
+  templateUrl: './my-main-details-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyMainDetailsWidgetComponent implements OnInit {
+  private readonly selfWidgetsService = inject(HRSelfWidgetsService);
+  private readonly constants = inject(HRConstantsService);
+  private readonly translatePipe = inject(HRTranslatePipe);
+
+  readonly employeeMainInfo = signal<MyMainDetailsWidgetDetails | null>(null);
+
+  readonly onShortcutClicked = output<ShortcutIconDTO>();
+  readonly isLoadingChanged = output<boolean>();
+
+  readonly badgeClass = input<string>('badge employee-rounded-badge-xl fs-5');
+  readonly badgeImageClass = input<string>('rounded-circle shadow-lg');
+  readonly badgeWidth = input<string>('50px');
+  readonly badgeHeight = input<string>('50px');
+  readonly employeeInfoContainerClass = input<string>('d-flex align-content-center');
+  readonly employeeDetailsClass = input<string>('ms-3');
+  readonly employeeNameContainerClass = input<string>('d-flex align-items-center');
+  readonly employeeNameClass = input<string>('fs-14 text-dark-gray fw-medium text-ellipsis-one-line');
+  readonly employeePositionClass = input<string>('fs-12 fw-normal text-dark-gray text-ellipsis-one-line mb-1');
+  readonly employeeGradeClass = input<string>('fs-12 text-dark-gray');
+
+  readonly containerClass = input<string>('card rounded rounded-4 card-shadow p-16 border-top-0 mb-4');
+  readonly cardBodyClass = input<string>('card-body p-4');
+  readonly headerRowClass = input<string>('d-md-flex justify-content-between align-items-center mt-2 mb-3');
+
+  readonly shortcutsContainerClass = input<string>(
+    'd-flex justify-content-md-end justify-content-sm-start fs-12 fw-normal text-secondary mt-3 mt-md-0',
+  );
+  readonly shortcutItemClass = input<string>('d-flex flex-column align-items-center mx-2 wp-60');
+  readonly shortcutIconContainerClass = input<string>(
+    'd-flex justify-content-center align-items-center rounded-circle-40 cursor-pointer',
+  );
+  readonly shortcutIconClass = input<string>('fs-4');
+  readonly shortcutTextClass = input<string>('text-center mt-1');
+
+  readonly detailsRowClass = input<string>('d-flex mt-4');
+
+  readonly reportingBlockClass = input<string>('d-flex text-secondary align-items-center mb-2 mx-2');
+  readonly captionLabelClasses = input<string>('d-flex flex-column align-self-start fs-14 text-dark-gray');
+  readonly captionLabelValueClass = input<string>('fw-medium mt-2');
+
+  readonly vacationBalancesContainerClass = input<string>('d-flex text-secondary align-items-center mb-2');
+  readonly vacationBalanceItemClass = input<string>('d-flex flex-column me-4');
+  readonly vacationBalanceHeaderClass = input<string>('d-flex align-items-center');
+  readonly vacationColorDotClass = input<string>('vacation-color-container-sm');
+  readonly vacationTypeNameClass = input<string>('mx-2 fs-14 fw-normal text-dark-gray');
+  readonly vacationBalanceValueRowClass = input<string>('d-flex mt-2');
+  readonly vacationBalanceValueClass = input<string>('mx-2 fw-medium fs-14 text-dark-gray');
+
+  readonly tooltipTriggerLinkClass = input<string>('d-flex align-items-center cursor-pointer');
+  readonly tooltipTriggerTextClass = input<string>('mx-2 fs-14 text-dark-gray');
+
+  readonly tooltipVacationRowClass = input<string>('d-flex align-items-center justify-content-around fs-12 mb-2');
+  readonly tooltipVacationNameContainerClass = input<string>('d-flex flex-grow-1 align-items-center me-5');
+  readonly tooltipVacationNameClass = input<string>('mx-2');
+
+  readonly defaultVacationBalanceColor = input<string>(this.constants.defaultVacationBalanceColor);
+
+  readonly defaultVacationColor = input<string>(this.constants.defaultVacationColor);
+
+  readonly baseUrl = input<string>('');
+
+  readonly employeeBadge = signal<BayanEmployeeBadgeDTO>({
+    EmployeePhotoKey: null,
+    EmployeePhotoFailed: false,
+    EmployeeNameInitials: '',
+  });
+
+  readonly isMobile = input<boolean>(false);
+  readonly isTablet = input<boolean>(false);
+  readonly shortcuts = input<ShortcutIconDTO[]>([]);
+
+  readonly shortcutsWithUrls = computed<ShortcutIconDTO[]>(() => {
+    const employeeMainInfo = this.employeeMainInfo();
+    return this.shortcuts().map(item => {
+      const translated: ShortcutIconDTO = {
+        ...item,
+        title: this.translatePipe.transform(item.title),
+      };
+
+      if (translated.shortcutId === MainWidgetShortcut.Attendance && employeeMainInfo?.AttendanceUrl != null) {
+        return { ...translated, navigateUrl: [employeeMainInfo.AttendanceUrl] };
+      }
+
+      if (
+        translated.shortcutId === MainWidgetShortcut.VacationStatement &&
+        employeeMainInfo?.VacationStatementUrl != null
+      ) {
+        return { ...translated, navigateUrl: [employeeMainInfo.VacationStatementUrl] };
+      }
+
+      return translated;
+    });
+  });
+
+  ngOnInit(): void {
+    this.loadEmployeeMainInfo();
+  }
+
+  loadEmployeeMainInfo() {
+    this.isLoadingChanged.emit(true);
+
+    this.getEmployeeMainDetails().subscribe({
+      next: (data: any) => {
+        const responses = data.ResponseData;
+        const vacationBalances = responses.VacationBalances.map((v: any) => ({
+          ...v,
+          VacationTypeColor: v.VacationTypeColor ?? this.defaultVacationColor(),
+        }));
+
+        const employeeMainInfo: MyMainDetailsWidgetDetails = {
+          EmployeeNumber: responses.EmployeeNumber,
+          EmployeeName: responses.EmployeeName,
+          EmployeeNameInitials: responses.EmployeeNameInitials,
+          PositionName: responses.PositionName,
+          GradeName: responses.GradeName,
+          PhotoPath: responses.PhotoPath,
+          ReportingTo: responses.ReportingToEmployeeName,
+          ServiceYears: `${responses.ServicePeriod.Years} ${this.translatePipe.transform('Years')} ${responses.ServicePeriod.Months} ${this.translatePipe.transform('Months')}`,
+          VacationBalances: vacationBalances,
+          AttendanceUrl: responses.AttendanceReportUrl,
+          VacationStatementUrl: responses.VacationStatementReportUrl,
+        };
+        this.employeeMainInfo.set(employeeMainInfo);
+
+        this.employeeBadge.set({
+          EmployeePhotoKey: employeeMainInfo.PhotoPath || null,
+          EmployeeNameInitials: employeeMainInfo.EmployeeNameInitials || '',
+          EmployeePhotoFailed: false,
+        });
+
+        this.isLoadingChanged.emit(false);
+      },
+      error: (error: any) => {
+        this.isLoadingChanged.emit(false);
+        if (error.status == 401) return;
+      },
+    });
+  }
+
+  shortcutClicked(icon: ShortcutIconDTO) {
+    this.onShortcutClicked.emit(icon);
+  }
+
+  handleEmployeePhotoError() {
+    this.employeeBadge.update(badge => ({ ...badge, EmployeePhotoFailed: true }));
+  }
+
+  getEmployeeMainDetails() {
+    return this.selfWidgetsService.getMainDetails(this.baseUrl());
+  }
+}

package/src/lib/my-next-week-vacation-insights-widget/components/next-week-vacation-insights-popup/next-week-vacation-insights-popup.component.html

@@ -0,0 +1,131 @@
+<dx-popup
+  [visible]="popupVisible()"
+  [height]="height()"
+  [minHeight]="'40%'"
+  [maxHeight]="'70%'"
+  [width]="width()"
+  contentTemplate="popup-content"
+  [showCloseButton]="false"
+  shadingColor="rgba(0,0,0,0.4)"
+  titleTemplate="title"
+  [showTitle]="true"
+  (onHidden)="onHidden()"
+>
+  <div *dxTemplate="let data of 'title'">
+    <div class="d-flex justify-content-between align-items-center my-0">
+      <p class="fs-16 fw-meduim text-ellipsis-one-line">
+        <span class="text-dark-gray">{{ popupTitle ? (popupTitle | translate) : ('NextWeekVacationInsights' | translate) }}</span>
+        <span class="mx-2 text-primary">({{ getPopupTitle() | translate }})</span>
+      </p>
+      <div class="py-2" (click)="onPopupClose()">
+        <fa-icon [icon]="xMarkIcon" class="fs-18 text-dark-gray cursor-pointer"></fa-icon>
+      </div>
+    </div>
+  </div>
+
+  <div *dxTemplate="let d of 'popup-content'">
+    <div class="mb-2 d-flex justify-content-end">
+      <dx-text-box
+        [width]="'250px'"
+        mode="search"
+        [value]="searchValue()"
+        [placeholder]="'Search...' | translate"
+        (onValueChanged)="onSearchValueChanged($event)"
+      ></dx-text-box>
+    </div>
+    @if (dataSource()) {
+      <dx-data-grid
+        class="popup-data-grid"
+        [dataSource]="dataSource()"
+        [showBorders]="false"
+        [showRowLines]="false"
+        [showColumnLines]="false"
+        [columnAutoWidth]="true"
+        [wordWrapEnabled]="true"
+        [height]="gridHeight()"
+        [allowColumnReordering]="false"
+        [remoteOperations]="{ paging: true }"
+      >
+        <dxo-data-grid-sorting mode="none"></dxo-data-grid-sorting>
+
+        <dxo-data-grid-scrolling
+          mode="infinite"
+          [useNative]="false"
+          [scrollByContent]="true"
+          [scrollByThumb]="true"
+          showScrollbar="always"
+        ></dxo-data-grid-scrolling>
+
+        <dxo-data-grid-paging [enabled]="true" [pageSize]="pageSize()"></dxo-data-grid-paging>
+
+        <dxi-data-grid-column
+          caption="{{ 'Employee' | translate }}"
+          dataField="EmployeeName"
+          cellTemplate="employeeCellTemplate"
+          [minWidth]="250"
+        ></dxi-data-grid-column>
+
+        @if (popupType() === VacationPopupType.Upcoming) {
+          <dxi-data-grid-column
+            caption="{{ 'StartDate' | translate }}"
+            dataField="VacationStartDate"
+            dataType="date"
+            format="dd/MM/yyyy"
+            [width]="120"
+            alignment="left"
+          ></dxi-data-grid-column>
+          <dxi-data-grid-column
+            caption="{{ 'EndDate' | translate }}"
+            dataField="VacationEndDate"
+            dataType="date"
+            format="dd/MM/yyyy"
+            [width]="120"
+            alignment="left"
+          ></dxi-data-grid-column>
+        } @else {
+          <dxi-data-grid-column
+            caption="{{ 'ReturnDate' | translate }}"
+            dataField="ReturnDate"
+            dataType="date"
+            format="dd/MM/yyyy"
+            [width]="120"
+            alignment="left"
+          ></dxi-data-grid-column>
+        }
+
+        <div *dxTemplate="let cell of 'employeeCellTemplate'">
+          <div class="d-flex align-items-center">
+            <bayan-employee-badge
+              [badge]="getEmployeeBadge(cell.data)"
+              badgeClass="badge employee-rounded-badge-xl fs-6"
+              imageClass="rounded-circle"
+              [width]="'40px'"
+              [height]="'40px'"
+              (employeePhotoError)="handleEmployeePhotoError(cell.data)"
+            ></bayan-employee-badge>
+            <div class="d-flex flex-column ms-1">
+              <div class="d-flex flex-row ms-2">
+                @if (showProperty()) {
+                  <span
+                    class="property-badge cursor-pointer me-1"
+                    [title]="cell.data.PropertyName"
+                    [innerHTML]="cell.data.PropertySymbol"
+                  ></span>
+                }
+                <span
+                  class="text-ellipsis-one-line fs-14 text-dark-gray fw-normal"
+                  [title]="cell.data.EmployeeNumber + ' | ' + cell.data.EmployeeName"
+                  [innerHTML]="cell.data.EmployeeNumber + ' | ' + cell.data.EmployeeName | highlight: searchValue()"
+                ></span>
+              </div>
+              <p
+                class="ms-2 mt-1 text-ellipsis-one-line fs-12 text-dark-gray fw-normal mb-0"
+                [innerHTML]="cell.data.EmployeeAdminUnitName | highlight: searchValue()"
+              ></p>
+            </div>
+          </div>
+        </div>
+      </dx-data-grid>
+    }
+  </div>
+</dx-popup>