# XWUIHrTimeClock

Compact time-tracking card widget (extends `XWUIComponent`, not a full shell page) that renders a "Time tracking" heading, a status line summarizing In / Out / Today hours from its `data` (`clockIn`, `clockOut`, `todayHours`), and a row of "Clock in" (primary) and "Clock out" (secondary) `XWUIButton`s. Clicking a button calls `hrApi.punch('in' | 'out')` and refreshes the status line with the returned times. Configured via `conf_comp` with `locale` (`en`/`ar`), optional `className`, and an injectable `hrApi` (defaults to `createHrApi()`). Use it as a dashboard tile or embedded punch-clock widget.

## Basic Usage

Mounts the widget against `#app` seeded with a clock-in time and today's hours, in English.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Time-clock card seeded with clockIn '08:12' and todayHours '4h 30m', with working Clock in / Clock out buttons.
```

## Arabic Locale

Switches the heading, status line and button labels to Arabic by setting `locale: 'ar'`.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic Locale
description: Sets locale to ar so the time-clock card renders its labels in Arabic, right-to-left.
```

## Clocked Out

Seeds clock-in, clock-out and today's hours to reflect a finished shift.

```example
file: examples/ClockedOut.ts
html: examples/ClockedOut.html
title: Clocked Out
description: Provides clockIn, clockOut and todayHours together so the status line shows a completed day.
```

```api
```