@skysoftware-co/bayan-hr-widgets-ui 1.0.4 → 1.0.5

package/README.md

@@ -30,6 +30,7 @@ This package contains shared HR components used in Bayan HR system, you can find
 components:
 1. My Main Details Widget
 2. My Upcoming Events Widget
+3. My Calendar Widget
 
 ## Dependencies
 This library depends on `@skysoftware-co/bayan-components-ui` package which provides:
@@ -38,6 +39,53 @@ This library depends on `@skysoftware-co/bayan-components-ui` package which prov
 ## Installation
 use npm to install this package by command: @skysoftware-co/bayan-hr-components
 
+## Setup
+
+Before using any component, you need to configure the `HRTranslateService` and provide the `HRTranslatePipe` in your application.
+
+### 1. Set language and lexicon in your App Component
+
+```typescript
+import { Component, inject, OnInit } from '@angular/core';
+import { HRTranslateService } from '@skysoftware-co/bayan-hr-widgets-ui';
+
+@Component({
+  selector: 'app-root',
+  ...
+})
+export class AppComponent implements OnInit {
+  private hrTranslateService = inject(HRTranslateService);
+
+  ngOnInit(): void {
+    // Set the active language (built-in: 'en', 'ar', 'fr')
+    this.hrTranslateService.setLanguage('en');
+
+    // Optionally set a lexicon for additional or override translations
+    this.hrTranslateService.setLexicon({
+      'CustomKey': 'Custom Value',
+      ...
+    });
+  }
+}
+```
+
+### 2. Provide the HRTranslatePipe
+
+Add `HRTranslatePipe` to the `providers` array in your App Component:
+
+```typescript
+import { HRTranslatePipe } from '@skysoftware-co/bayan-hr-widgets-ui';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [...],
+  providers: [HRTranslatePipe],
+  ...
+})
+export class AppComponent { }
+```
+
 ## Constants Service
 
 ### Usage
@@ -52,6 +100,9 @@ This service provides default constant values used across HR components, you can
 |----------|------|---------------|-------------|
 | `defaultVacationBalanceColor` | string | `'#727070'` | Default color for vacation balance indicator |
 | `defaultVacationColor` | string | `'#DCDCDC'` | Default color for vacation type when no color is assigned |
+| `defaultPublicHolidayColor` | string | `'#249EA0'` | Default color for public holidays in calendar |
+| `defaultDayOffColor` | string | `'#FCCF5A'` | Default color for days off in calendar |
+| `defaultEventsColor` | string | `'#e67e0f'` | Default color for events in calendar |
 
 
 ## My Main Details Widget Component
@@ -174,3 +225,47 @@ This component displays upcoming events (birthdays and public holidays) in a car
 ### Output Events
 - `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
 - `viewAllClicked: EventEmitter<void>` - Emitted when view all is clicked (only when `externalViewAll` is true)
+
+
+## My Calendar Widget Component
+
+### Usage
+```html
+<hr-my-calendar-widget
+  [baseUrl]="environment.baseUrl">
+</hr-my-calendar-widget>
+```
+
+This component displays an employee calendar showing vacations, public holidays, days off, and events. It uses DevExtreme Calendar (`DxCalendarModule`) with custom cell templates to render color-coded date ranges. The calendar loads 12 months of data starting from one month before the current date.
+
+### Input Properties
+| Input | Type | Default Value | Description |
+|-------|------|---------------|-------------|
+| `baseUrl` | string | `''` | Base URL for API calls |
+| `headerContainerClass` | string | `''` | Additional CSS class for the header container |
+| `publicHolidayColor` | string | from `HRConstantsService`: `'#249EA0'` | Color for public holidays |
+| `dayOffColor` | string | from `HRConstantsService`: `'#FCCF5A'` | Color for days off |
+| `eventsColor` | string | from `HRConstantsService`: `'#e67e0f'` | Color for events |
+| `legendContainerClass` | string | `'row mb-2'` | Legend container CSS class |
+| `legendRowClass` | string | `'d-flex'` | Legend row CSS class |
+| `legendItemClass` | string | `'d-flex align-items-center'` | Legend item CSS class |
+| `legendDotClass` | string | `'me-1 circle-sm'` | Legend dot CSS class |
+| `legendLabelClass` | string | `'me-1 fs-12'` | Legend label CSS class |
+| `publicHolidayDotClass` | string | `'bg-accent'` | Public holiday dot CSS class |
+| `dayOffDotClass` | string | `'bg-yellow'` | Day off dot CSS class |
+| `eventsDotClass` | string | `'bg-primary'` | Events dot CSS class |
+| `vacationsContainerClass` | string | `'d-flex mt-3'` | Vacations legend container CSS class |
+| `vacationsItemClass` | string | `'d-flex align-items-center'` | Vacations legend item CSS class |
+| `vacationsIconClass` | string | `'fs-8 me-1'` | Vacations icon CSS class |
+| `calendarContainerClass` | string | `'row mt-2 col-12'` | Calendar container CSS class |
+| `calendarClass` | string | `'button-boeder-none'` | Calendar CSS class |
+
+### Output Events
+- `isLoadingChanged: EventEmitter<boolean>` - Emitted when loading state changes
+
+### API Endpoint
+The component calls `GET {baseUrl}/hr/employee-portal/calendar` with query parameters:
+- `Month` - Starting month
+- `Year` - Starting year
+- `MonthsCount` - Number of months to load (default: 12)
+- Header: `api-version: 2`