> ## Documentation Index
> Fetch the complete documentation index at: https://human-resource-docs.ha-consultancy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Roster Board

> Component walkthrough of the React Visual Roster Board — RosterScheduler, Redux state slices, drag-and-drop interactions, and customisation hooks.

The Roster Board is the flagship visualisation of the extension — a drag-and-drop scheduling UI that lets HR build a weekly or monthly shift roster. It runs as a Control Add-in embedded inside BC.

## Where it runs

| Layer           | Object                                                                | Role                                                               |
| --------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------ |
| BC page         | `Pag70003175.RosterBoardHAC.al` (page 70003175 "Visual Roster Board") | Hosts the control add-in; implements all data triggers             |
| Control add-in  | `controls/RosterGridHAC.al` ("Roster Scheduler HAC")                  | Declares the event/procedure contract between AL and JS            |
| React entry     | `react-roster-shift-board/src/main.tsx`                               | Registers `window.InitControls`; mounts `<App/>` inside the iframe |
| Active screen   | `components/roster-scheduler/RosterScheduler.tsx`                     | The two-pane scheduler                                             |
| Headless loader | `components/auto-load/AutoLoad.tsx`                                   | Triggers initial data fetch on mount                               |

## Component-by-component

### `AutoLoad`

Invisible component mounted at app start. On mount, dispatches three data fetches in parallel for the default 3-month window:

1. `getAllResourcesAsync(from, to)` — employee directory
2. `getShiftCodesAsync()` — shift configurations marked roster-eligible
3. `getRosterEntriesAsync(from, to)` — existing assignments in the window

Stores each result in the `rosterData` Redux slice.

### `RosterScheduler`

The primary screen. Renders a searchable employee list (left sidebar, every employee is a draggable card via Syncfusion's `Draggable` utility) and a Syncfusion `ScheduleComponent` grouped by `ShiftCode` (right pane). Supports `Day`, `Week`, `WorkWeek`, and `Month` views.

| Action                                       | What happens                                                                    |
| -------------------------------------------- | ------------------------------------------------------------------------------- |
| Drag employee from sidebar onto a shift slot | New roster entry created — calls `saveRosterEntryAsync(empNo, date, shiftCode)` |
| Drag an existing assignment to another date  | Existing entry updated with the same call but including the entry number        |
| Right-click an entry → Delete                | Calls `deleteRosterEntryAsync(entryNo)`                                         |
| Change the view (Day/Week/Month)             | Re-renders client-side from the loaded slice; no refetch                        |
| Navigate to a date outside the loaded window | Refetches roster entries for the new window                                     |

<Tip>The shift colour mapping is a local constant (`SHIFT_WINDOWS`) in `roster-scheduler.component.tsx` — adjust there if you want a different palette per shift.</Tip>

### Gantt screen (built, not active)

`components/project-gantt-chart/` implements a Syncfusion `GanttComponent`-based view of BC project tasks and per-resource planning lines. To re-enable it, mount `<ProjectGanttChart/>` from `App.tsx`. Data services and Redux slices are already wired.

## State slices

### `rosterData`

| Key          | Type             | Notes                                |
| ------------ | ---------------- | ------------------------------------ |
| `loading`    | boolean          | True during initial fetch / refresh  |
| `error`      | string \| null   | Latest error message                 |
| `employees`  | `IResource[]`    | All employees from `GetResources`    |
| `shiftCodes` | `IShiftCode[]`   | All shift codes from `GetShiftCodes` |
| `entries`    | `IRosterEntry[]` | Roster entries in the loaded window  |

### `projectsData`

Manages the Gantt screen's state: projects, edit-permission flag, and visibility/context for the six modal dialogs.

### `resourcesData`

| Key           | Type          | Notes                                         |
| ------------- | ------------- | --------------------------------------------- |
| `resources`   | `IResource[]` | Loaded resources for the Gantt resource panel |
| `refreshList` | Date          | Bump to force remount after a drag-drop       |

## Domain types

| Type           | Shape                                                                  |
| -------------- | ---------------------------------------------------------------------- |
| `IResource`    | `{ resourceNo, resourceName, isGeneric, groupName }`                   |
| `IShiftCode`   | `{ code, name, workingHours }`                                         |
| `IRosterEntry` | `{ entryNo, employeeNo, employeeName, date, shiftCode, workingHours }` |

## Customisation

<Warning>Never directly edit `BC-Human-Resource-AL/scripts/assets/js/base.js` — it's overwritten on the next React build.</Warning>

Partner customisation hooks: localisation strings (add an i18n layer in the React source), shift colour mapping (`SHIFT_WINDOWS` constant), and the default view range (3-month window in `AutoLoad` — change there).