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.
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
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.
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.
Never directly edit BC-Human-Resource-AL/scripts/assets/js/base.js — it’s overwritten on the next React build.
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).
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"BC Human Resource","colors":{"primary":"#041f3d","light":"#3dffc0","dark":"#041f3d"},"logo":{"light":"https://mintcdn.com/haconsultancy-deb296c9/Ia0pESaTTMfXk4ts/images/dark-logo.png?fit=max\u0026auto=format\u0026n=Ia0pESaTTMfXk4ts\u0026q=85\u0026s=a9cc74be17f91df9509eeea50b32c25c","dark":"https://mintcdn.com/haconsultancy-deb296c9/Ia0pESaTTMfXk4ts/images/light-logo.png?fit=max\u0026auto=format\u0026n=Ia0pESaTTMfXk4ts\u0026q=85\u0026s=39979798d56d6d881446f94812ea8105"},"favicon":"https://mintcdn.com/haconsultancy-deb296c9/Ia0pESaTTMfXk4ts/images/favicon.png?fit=max\u0026auto=format\u0026n=Ia0pESaTTMfXk4ts\u0026q=85\u0026s=b3341a3ceaf550a11db382e8c063c8e3","appearance":{"strict":false},"background":{"color":{"light":"#ffffff","dark":"#041f3d"}},"footer":{"socials":{}},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"haconsultancy-deb296c9","hasAudioNarration":false,"actualSubdomain":"haconsultancy-deb296c9","customDomains":["human-resource-docs.ha-consultancy.com"],"gitSource":{"type":"github","owner":"ha-consultancy","repo":"bc-human-resource-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"entitlements":{"AI_CHAT":{"status":"DISABLED"}},"buildId":"6ae9579ca79c9948d24bdfc3:success","clientVersion":"0.0.4087","searchFilterCounts":[{"language":"default","tag":"Admin \u0026 Compliance","count":16},{"language":"default","tag":"User Guide","count":13},{"language":"default","tag":"Configuration Reference","count":6},{"language":"default","tag":"Daily Use","count":6},{"language":"default","tag":"Get Started","count":4},{"language":"default","tag":"Compliance","count":3},{"language":"default","tag":"Frontend Deployment","count":3},{"language":"default","tag":"Reference","count":3},{"language":"default","tag":"Payroll \u0026 Posting","count":2},{"language":"default","tag":"Architecture","count":1}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-metadata","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"comment-mode","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"custom.css","content":"body,html[data-theme=\"light\"] body,html[data-theme=\"light\"] p,html[data-theme=\"light\"] li,html[data-theme=\"light\"] td,html[data-theme=\"light\"] th{color:#1e2f45!important}h1,html[data-theme=\"light\"] h1{color:#041f3d!important}h2,html[data-theme=\"light\"] h2{color:#0a3a6e!important}h3,html[data-theme=\"light\"] h3{color:#0f509a!important}h4,h5,h6,html[data-theme=\"light\"] h4,html[data-theme=\"light\"] h5,html[data-theme=\"light\"] h6{color:#1a6abf!important}html[data-theme=\"light\"] strong,html[data-theme=\"light\"] b{color:#041f3d!important}a,html[data-theme=\"light\"] a{color:#0f509a!important;text-decoration-color:rgba(15, 80, 154, 0.3)}a:hover,html[data-theme=\"light\"] a:hover{color:#041f3d!important;text-decoration-color:#041f3d}html[data-theme=\"light\"] code:not(pre code){color:#0a3a6e!important;background-color:#e8f0fb!important;border-color:#c3d4ee!important}html[data-theme=\"light\"] thead th,html[data-theme=\"light\"] th{color:#041f3d!important;background-color:#eef3fb!important;border-color:#c3d4ee!important}html[data-theme=\"light\"] td{border-color:#d5e1f5!important}html[data-theme=\"light\"] blockquote{border-left-color:#0a3a6e!important;color:#1e2f45!important}html[data-theme=\"light\"] hr{border-color:#c3d4ee!important}html[data-theme=\"light\"] nav a,html[data-theme=\"light\"] [data-sidebar] a{color:#1e2f45!important}html[data-theme=\"light\"] nav a:hover,html[data-theme=\"light\"] [data-sidebar] a:hover{color:#041f3d!important}.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6,html[data-theme=\"dark\"] h1,html[data-theme=\"dark\"] h2,html[data-theme=\"dark\"] h3,html[data-theme=\"dark\"] h4,html[data-theme=\"dark\"] h5,html[data-theme=\"dark\"] h6{color:#3dffc0!important}.dark a,html[data-theme=\"dark\"] a{color:#3dffc0!important}.dark a:hover,html[data-theme=\"dark\"] a:hover{color:#ffffff!important}html[data-theme=\"dark\"] code:not(pre code){color:#3dffc0!important;background-color:rgba(61, 255, 192, 0.08)!important;border-color:rgba(61, 255, 192, 0.2)!important}html[data-theme=\"dark\"] thead th,html[data-theme=\"dark\"] th{color:#3dffc0!important;background-color:rgba(61, 255, 192, 0.06)!important}"}],"page":{"pagePath":"frontend/roster-board","slug":"/frontend/roster-board","pageMetadata":{"title":"Roster Board","description":"Component walkthrough of the React Visual Roster Board — RosterScheduler, Redux state slices, drag-and-drop interactions, and customisation hooks.","href":"/frontend/roster-board"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Component walkthrough of the React Visual Roster Board — RosterScheduler, Redux state slices, drag-and-drop interactions, and customisation hooks.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={code:`code`,li:`li`,ol:`ol`,p:`p`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,..._provideComponents(),...props.components},{Heading,Table,Tip,Warning}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Table)_missingMdxReference(`Table`,true);if(!Tip)_missingMdxReference(`Tip`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`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.`}),`\n`,_jsx(Heading,{level:`2`,id:`where-it-runs`,children:`Where it runs`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Layer`}),_jsx(_components.th,{children:`Object`}),_jsx(_components.th,{children:`Role`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`BC page`}),_jsxs(_components.td,{children:[_jsx(_components.code,{children:`Pag70003175.RosterBoardHAC.al`}),` (page 70003175 “Visual Roster Board”)`]}),_jsx(_components.td,{children:`Hosts the control add-in; implements all data triggers`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Control add-in`}),_jsxs(_components.td,{children:[_jsx(_components.code,{children:`controls/RosterGridHAC.al`}),` (“Roster Scheduler HAC”)`]}),_jsx(_components.td,{children:`Declares the event/procedure contract between AL and JS`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`React entry`}),_jsx(_components.td,{children:_jsx(_components.code,{children:`react-roster-shift-board/src/main.tsx`})}),_jsxs(_components.td,{children:[`Registers `,_jsx(_components.code,{children:`window.InitControls`}),`; mounts `,_jsx(_components.code,{children:`\u003cApp/>`}),` inside the iframe`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Active screen`}),_jsx(_components.td,{children:_jsx(_components.code,{children:`components/roster-scheduler/RosterScheduler.tsx`})}),_jsx(_components.td,{children:`The two-pane scheduler`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Headless loader`}),_jsx(_components.td,{children:_jsx(_components.code,{children:`components/auto-load/AutoLoad.tsx`})}),_jsx(_components.td,{children:`Triggers initial data fetch on mount`})]})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`component-by-component`,children:`Component-by-component`}),`\n`,_jsx(Heading,{level:`3`,id:`autoload`,children:_jsx(_components.code,{children:`AutoLoad`})}),`\n`,_jsx(_components.p,{children:`Invisible component mounted at app start. On mount, dispatches three data fetches in parallel for the default 3-month window:`}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.code,{children:`getAllResourcesAsync(from, to)`}),` — employee directory`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.code,{children:`getShiftCodesAsync()`}),` — shift configurations marked roster-eligible`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.code,{children:`getRosterEntriesAsync(from, to)`}),` — existing assignments in the window`]}),`\n`]}),`\n`,_jsxs(_components.p,{children:[`Stores each result in the `,_jsx(_components.code,{children:`rosterData`}),` Redux slice.`]}),`\n`,_jsx(Heading,{level:`3`,id:`rosterscheduler`,children:_jsx(_components.code,{children:`RosterScheduler`})}),`\n`,_jsxs(_components.p,{children:[`The primary screen. Renders a searchable employee list (left sidebar, every employee is a draggable card via Syncfusion’s `,_jsx(_components.code,{children:`Draggable`}),` utility) and a Syncfusion `,_jsx(_components.code,{children:`ScheduleComponent`}),` grouped by `,_jsx(_components.code,{children:`ShiftCode`}),` (right pane). Supports `,_jsx(_components.code,{children:`Day`}),`, `,_jsx(_components.code,{children:`Week`}),`, `,_jsx(_components.code,{children:`WorkWeek`}),`, and `,_jsx(_components.code,{children:`Month`}),` views.`]}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Action`}),_jsx(_components.th,{children:`What happens`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Drag employee from sidebar onto a shift slot`}),_jsxs(_components.td,{children:[`New roster entry created — calls `,_jsx(_components.code,{children:`saveRosterEntryAsync(empNo, date, shiftCode)`})]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Drag an existing assignment to another date`}),_jsx(_components.td,{children:`Existing entry updated with the same call but including the entry number`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Right-click an entry → Delete`}),_jsxs(_components.td,{children:[`Calls `,_jsx(_components.code,{children:`deleteRosterEntryAsync(entryNo)`})]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Change the view (Day/Week/Month)`}),_jsx(_components.td,{children:`Re-renders client-side from the loaded slice; no refetch`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Navigate to a date outside the loaded window`}),_jsx(_components.td,{children:`Refetches roster entries for the new window`})]})]})]}),`\n`,_jsxs(Tip,{children:[`The shift colour mapping is a local constant (`,_jsx(_components.code,{children:`SHIFT_WINDOWS`}),`) in `,_jsx(_components.code,{children:`roster-scheduler.component.tsx`}),` — adjust there if you want a different palette per shift.`]}),`\n`,_jsx(Heading,{level:`3`,id:`gantt-screen-built-not-active`,children:`Gantt screen (built, not active)`}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.code,{children:`components/project-gantt-chart/`}),` implements a Syncfusion `,_jsx(_components.code,{children:`GanttComponent`}),`-based view of BC project tasks and per-resource planning lines. To re-enable it, mount `,_jsx(_components.code,{children:`\u003cProjectGanttChart/>`}),` from `,_jsx(_components.code,{children:`App.tsx`}),`. Data services and Redux slices are already wired.`]}),`\n`,_jsx(Heading,{level:`2`,id:`state-slices`,children:`State slices`}),`\n`,_jsx(Heading,{level:`3`,id:`rosterdata`,children:_jsx(_components.code,{children:`rosterData`})}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Key`}),_jsx(_components.th,{children:`Type`}),_jsx(_components.th,{children:`Notes`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`loading`})}),_jsx(_components.td,{children:`boolean`}),_jsx(_components.td,{children:`True during initial fetch / refresh`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`error`})}),_jsx(_components.td,{children:`string | null`}),_jsx(_components.td,{children:`Latest error message`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`employees`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`IResource[]`})}),_jsxs(_components.td,{children:[`All employees from `,_jsx(_components.code,{children:`GetResources`})]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`shiftCodes`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`IShiftCode[]`})}),_jsxs(_components.td,{children:[`All shift codes from `,_jsx(_components.code,{children:`GetShiftCodes`})]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`entries`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`IRosterEntry[]`})}),_jsx(_components.td,{children:`Roster entries in the loaded window`})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`projectsdata`,children:_jsx(_components.code,{children:`projectsData`})}),`\n`,_jsx(_components.p,{children:`Manages the Gantt screen’s state: projects, edit-permission flag, and visibility/context for the six modal dialogs.`}),`\n`,_jsx(Heading,{level:`3`,id:`resourcesdata`,children:_jsx(_components.code,{children:`resourcesData`})}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Key`}),_jsx(_components.th,{children:`Type`}),_jsx(_components.th,{children:`Notes`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`resources`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`IResource[]`})}),_jsx(_components.td,{children:`Loaded resources for the Gantt resource panel`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`refreshList`})}),_jsx(_components.td,{children:`Date`}),_jsx(_components.td,{children:`Bump to force remount after a drag-drop`})]})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`domain-types`,children:`Domain types`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Type`}),_jsx(_components.th,{children:`Shape`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`IResource`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`{ resourceNo, resourceName, isGeneric, groupName }`})})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`IShiftCode`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`{ code, name, workingHours }`})})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`IRosterEntry`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`{ entryNo, employeeNo, employeeName, date, shiftCode, workingHours }`})})]})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`customisation`,children:`Customisation`}),`\n`,_jsxs(Warning,{children:[`Never directly edit `,_jsx(_components.code,{children:`BC-Human-Resource-AL/scripts/assets/js/base.js`}),` — it’s overwritten on the next React build.`]}),`\n`,_jsxs(_components.p,{children:[`Partner customisation hooks: localisation strings (add an i18n layer in the React source), shift colour mapping (`,_jsx(_components.code,{children:`SHIFT_WINDOWS`}),` constant), and the default view range (3-month window in `,_jsx(_components.code,{children:`AutoLoad`}),` — change there).`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Roster Board","description":"Component walkthrough of the React Visual Roster Board — RosterScheduler, Redux state slices, drag-and-drop interactions, and customisation hooks.","href":"/frontend/roster-board"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Where it runs","slug":"where-it-runs","depth":2,"children":[]},{"title":"Component-by-component","slug":"component-by-component","depth":2,"children":[{"title":"AutoLoad","slug":"autoload","depth":3,"children":[]},{"title":"RosterScheduler","slug":"rosterscheduler","depth":3,"children":[]},{"title":"Gantt screen (built, not active)","slug":"gantt-screen-built-not-active","depth":3,"children":[]}]},{"title":"State slices","slug":"state-slices","depth":2,"children":[{"title":"rosterData","slug":"rosterdata","depth":3,"children":[]},{"title":"projectsData","slug":"projectsdata","depth":3,"children":[]},{"title":"resourcesData","slug":"resourcesdata","depth":3,"children":[]}]},{"title":"Domain types","slug":"domain-types","depth":2,"children":[]},{"title":"Customisation","slug":"customisation","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"haconsultancy-deb296c9","siteName":"BC Human Resource","title":"Roster Board - BC Human Resource","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-05-18T18:13:11.345Z","originalFileLocation":"frontend/roster-board.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Component walkthrough of the React Visual Roster Board — RosterScheduler, Redux state slices, drag-and-drop interactions, and customisation hooks.\">\u003cmeta data-mint-head name=\"application-name\" content=\"BC Human Resource\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/haconsultancy-deb296c9/_tsgMVGUofIwVBfx/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/haconsultancy-deb296c9/_tsgMVGUofIwVBfx/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/haconsultancy-deb296c9/_tsgMVGUofIwVBfx/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/haconsultancy-deb296c9/_tsgMVGUofIwVBfx/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/haconsultancy-deb296c9/_tsgMVGUofIwVBfx/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/haconsultancy-deb296c9/_tsgMVGUofIwVBfx/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/haconsultancy-deb296c9/_tsgMVGUofIwVBfx/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/haconsultancy-deb296c9/_tsgMVGUofIwVBfx/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/haconsultancy-deb296c9/_tsgMVGUofIwVBfx/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Roster Board - BC Human Resource\">\u003cmeta data-mint-head property=\"og:description\" content=\"Component walkthrough of the React Visual Roster Board — RosterScheduler, Redux state slices, drag-and-drop interactions, and customisation hooks.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"BC Human Resource\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://human-resource-docs.ha-consultancy.com/frontend/roster-board\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://haconsultancy-deb296c9.mintlify.site/_mintlify/api/og/v2?division=Frontend+Deployment\u0026amp;title=Roster+Board\u0026amp;description=Component+walkthrough+of+the+React+Visual+Roster+Board+%E2%80%94+RosterScheduler%2C+Redux+state+slices%2C+drag-and-drop+interactions%2C+and+customisation+hooks.\u0026amp;theme=49f5e2b753595e83039df319\u0026amp;signature=c9631fa868d8cff159a56dc0706890d7f16add98c7c37645c56e3f72a776d488\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Roster Board - BC Human Resource\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Component walkthrough of the React Visual Roster Board — RosterScheduler, Redux state slices, drag-and-drop interactions, and customisation hooks.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://haconsultancy-deb296c9.mintlify.site/_mintlify/api/og/v2?division=Frontend+Deployment\u0026amp;title=Roster+Board\u0026amp;description=Component+walkthrough+of+the+React+Visual+Roster+Board+%E2%80%94+RosterScheduler%2C+Redux+state+slices%2C+drag-and-drop+interactions%2C+and+customisation+hooks.\u0026amp;theme=49f5e2b753595e83039df319\u0026amp;signature=c9631fa868d8cff159a56dc0706890d7f16add98c7c37645c56e3f72a776d488\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/haconsultancy-deb296c9/_tsgMVGUofIwVBfx/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"BC Human Resource\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#041f3d\">\u003clink data-mint-head rel=\"canonical\" href=\"https://human-resource-docs.ha-consultancy.com/frontend/roster-board\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/frontend/roster-board.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://human-resource-docs.ha-consultancy.com/#organization\",\"name\":\"BC Human Resource\",\"url\":\"https://human-resource-docs.ha-consultancy.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/haconsultancy-deb296c9/Ia0pESaTTMfXk4ts/images/dark-logo.png?fit=max\u0026auto=format\u0026n=Ia0pESaTTMfXk4ts\u0026q=85\u0026s=a9cc74be17f91df9509eeea50b32c25c\"}},{\"@type\":\"WebSite\",\"@id\":\"https://human-resource-docs.ha-consultancy.com#website\",\"name\":\"BC Human Resource\",\"url\":\"https://human-resource-docs.ha-consultancy.com\",\"publisher\":{\"@id\":\"https://human-resource-docs.ha-consultancy.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://human-resource-docs.ha-consultancy.com/frontend/roster-board#webpage\",\"url\":\"https://human-resource-docs.ha-consultancy.com/frontend/roster-board\",\"name\":\"Roster Board\",\"description\":\"Component walkthrough of the React Visual Roster Board — RosterScheduler, Redux state slices, drag-and-drop interactions, and customisation hooks.\",\"dateModified\":\"2026-05-18T18:13:11.345Z\",\"isPartOf\":{\"@id\":\"https://human-resource-docs.ha-consultancy.com#website\"},\"breadcrumb\":{\"@id\":\"https://human-resource-docs.ha-consultancy.com/frontend/roster-board#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://human-resource-docs.ha-consultancy.com/frontend/roster-board#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Frontend Deployment\",\"item\":\"https://human-resource-docs.ha-consultancy.com/frontend/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Roster Board\",\"item\":\"https://human-resource-docs.ha-consultancy.com/frontend/roster-board\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://human-resource-docs.ha-consultancy.com/frontend/roster-board#article\",\"headline\":\"Roster Board\",\"name\":\"Roster Board\",\"description\":\"Component walkthrough of the React Visual Roster Board — RosterScheduler, Redux state slices, drag-and-drop interactions, and customisation hooks.\",\"url\":\"https://human-resource-docs.ha-consultancy.com/frontend/roster-board\",\"mainEntityOfPage\":{\"@id\":\"https://human-resource-docs.ha-consultancy.com/frontend/roster-board#webpage\"},\"dateModified\":\"2026-05-18T18:13:11.345Z\",\"publisher\":{\"@id\":\"https://human-resource-docs.ha-consultancy.com/#organization\"},\"isPartOf\":{\"@id\":\"https://human-resource-docs.ha-consultancy.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"BC Human Resource\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"BC Human Resource","nav":{"global":null,"tabs":[{"tab":"User Guide","icon":"book-open","pages":[{"title":"User Guide","href":"/introduction"}]},{"tab":"Admin \u0026 Compliance","icon":"shield-halved","groups":[{"group":"Configuration Reference","icon":"sliders","pages":[{"title":"HR General Setup","href":"/configuration/hr-general-setup"},{"title":"No. Series","href":"/configuration/no-series"},{"title":"Employee Posting Groups","href":"/configuration/posting-groups"},{"title":"Dimensions","href":"/configuration/dimensions"},{"title":"Workflow Setup","href":"/configuration/workflow-setup"},{"title":"Leave Deduction Rules","href":"/configuration/deduction-setup"}]},{"group":"Architecture","icon":"diagram-project","pages":[{"title":"Architecture Overview","href":"/architecture"}]},{"group":"Frontend Deployment","icon":"browser","pages":[{"title":"Frontend Overview","href":"/frontend/overview"},{"title":"BC Integration Contract","description":"The event and procedure contract between the AL hosting page and the React control add-in — treat this as the source of truth when changing either layer.","href":"/frontend/integration"},{"title":"Roster Board","href":"/frontend/roster-board"}]},{"group":"Compliance","icon":"shield-halved","pages":[{"title":"Permissions","description":"The Human Resource HAC permission set in Business Central — what it grants on HR tables and pages, recommended role bundles, and API caller authorisation.","href":"/compliance/permissions"},{"title":"Privacy \u0026 Data Handling","href":"/compliance/privacy"},{"title":"EULA \u0026 Terms","href":"/compliance/eula-and-terms"}]},{"group":"Reference","icon":"book","pages":[{"title":"Glossary","href":"/reference/glossary"},{"title":"Field Prefix Convention","href":"/reference/field-prefix"},{"title":"Object-ID Allocation","href":"/reference/object-id-allocation"}]}]}]},"basePath":"","title":"Roster Board - BC Human Resource","buildId":"dpl_FWZhTb2vab28gFGFH4ojka6qEznQ","deploymentId":"dpl_FWZhTb2vab28gFGFH4ojka6qEznQ","dynamics":[],"chunks":[]}