# XWUIHrAttendanceHistory

Self-service "My attendance" widget that extends `XWUIComponent` and renders a titled card (localized "My attendance" / "حضوري") containing a small `XWUIDataGrid`. The grid is driven directly by `data.rows` (an `AttendanceRow[]`) and shows four columns - Date, In (`timeIn`), Out (`timeOut`), and Status - so an employee can review their recent clock-in/clock-out log. Data is passed in by the caller (no API fetch); configuration is limited to `className` and `locale` (`'en' | 'ar'`). Use it inside an employee dashboard or profile to display attendance rows you already have.

## Basic Usage

Renders the attendance card with three supplied `rows` in the data grid - including a no-show day (null in/out, "--" status) and two Present days with in/out times.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: `new XWUIHrAttendanceHistory(app, { rows: [...] })` - passes three AttendanceRow records and renders the Date/In/Out/Status grid inside the "My attendance" card.
```

## A week of attendance

Feeds five `AttendanceRow` records (present, late, absent, half-day) into the inner data grid.

```example
file: examples/WeekOfAttendance.ts
html: examples/WeekOfAttendance.html
title: A week of attendance
description: Five attendance rows spanning present/late/absent/half-day, including null times for the absent day.
```

## Arabic locale (RTL)

Passes `{ locale: 'ar' }`, switching the card heading to `حضوري` above the grid.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic locale (RTL)
description: Attendance rows with locale 'ar', so the heading renders as حضوري.
```

```api
```