@cratis/scene.blueprint.hr 0.0.0-stage → 4.50.0

package/screens/index.ts

@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Screen } from '@cratis/scene.model';
+import { LayoutName } from '@cratis/scene.blueprint.default';
+import { hrScreenDefinitions } from '../hrScreenSet';
+
+/**
+ * The ready-to-use screens: real `Screen` instances, one for each entry of the manifest's `blueprint.screenSet`, each filling the screen template it names in
+ * the foundation's application shell. A new application that adopts the blueprint gets these, wired into its navigation (`hrNavigation`).
+ */
+export const hrScreens: Screen[] = hrScreenDefinitions.map(definition => ({
+    name: definition.name,
+    layout: LayoutName.AppShell,
+    screenTemplate: definition.template,
+    slotContent: {},
+    forms: [],
+    contributions: [],
+    path: definition.name.split('.'),
+}));

package/templateProvenance.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { TemplateMetadata } from '@cratis/scene.model';
+
+/** The compatibility, attribution and license metadata every template this blueprint ships carries. */
+export const hrTemplateProvenance: Pick<TemplateMetadata, 'compatibility' | 'attribution' | 'license' | 'licenseUrl'> = {
+    compatibility: {
+        scene: '^4.13.0',
+        packages: [{ name: 'Cratis.Blueprint.Default', versionRange: '^1.0.0' }],
+    },
+    attribution: { author: 'Cratis', url: 'https://github.com/Cratis/Scene/tree/main/Source/JavaScript/blueprint.hr' },
+    license: 'MIT',
+    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',
+};

package/templates/formTemplates.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DialogTemplate, TemplateScope } from '@cratis/scene.model';
+import { quickCreateDialogTemplate } from '@cratis/scene.blueprint.default';
+import { HrQuery, fromQuery, localeOfData } from '../hrQueries';
+import { closesDialog, component, hrMetadata, withBehaviors } from '../hrParts';
+
+/**
+ * One quick-create dialog: the foundation `QuickCreateDialog` - a short form opened from a page to make one record without leaving it - with the fields
+ * that thing needs to get started.
+ */
+function quickCreateOf(name: string, title: string, subtitle: string, sections: string, noun: string, create: string): DialogTemplate {
+    return {
+        name,
+        slots: quickCreateDialogTemplate.slots,
+        content: {
+            header: [component(`${name}-frame`, 'dialogFrame', { title, subtitle })],
+            body: [withBehaviors(component(`${name}-form`, 'formScreenBody', {
+                mode: 'create', saveAndNew: false, strings: { formSave: create }, sections: fromQuery(sections), errors: fromQuery(HrQuery.FormErrors, '0'), ...localeOfData,
+            }), closesDialog())],
+            actions: [],
+        },
+        displayName: `HR quick create ${noun}`,
+        description: noun === 'time-off request' ? 'A short form that asks for time off without leaving the page.' : `A short form that creates one ${noun} without leaving the page.`,
+        metadata: hrMetadata(name, 'Dialog', [TemplateScope.Slice]),
+    };
+}
+
+/** Request time off (type, dates, a note), and the quick creation of an employee. */
+export const hrQuickCreateDialogs: DialogTemplate[] = [
+    quickCreateOf('HrRequestTimeOff', 'Request time off', 'Say when and what kind', 'TimeOffQuickSections', 'time-off request', 'Send request'),
+    quickCreateOf('HrQuickCreateEmployee', 'New employee', 'Only what is needed to get started', 'EmployeeQuickSections', 'employee', 'Create'),
+];

package/templates/index.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { hrEmployeeDirectoryTemplate, hrOnboardingListTemplate, hrTimeOffBalanceListTemplate, hrTimeOffListTemplate } from './listTemplates';
+import { hrOrgChartTemplate } from './orgChartTemplate';
+import { hrEmployeePageTemplate, hrOnboardingChecklistTemplate } from './recordTemplates';
+
+export * from './listTemplates';
+export * from './recordTemplates';
+export * from './orgChartTemplate';
+export * from './formTemplates';
+
+/** Every screen template this blueprint provides, in the order the manifest lists them. */
+export const hrScreenTemplates = [
+    hrEmployeeDirectoryTemplate, hrEmployeePageTemplate,
+    hrOrgChartTemplate,
+    hrTimeOffListTemplate, hrTimeOffBalanceListTemplate,
+    hrOnboardingListTemplate, hrOnboardingChecklistTemplate,
+];
+
+export { hrQuickCreateDialogs as hrDialogTemplates } from './formTemplates';

package/templates/listTemplates.ts

@@ -0,0 +1,109 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { InteractionActionKind, InteractionTriggerKind, NotificationLevel, NotifyAction, ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { listScreenTemplate } from '@cratis/scene.blueprint.default';
+import { HrEntityKind, fromQuery, hrQueriesOf, localeOfData } from '../hrQueries';
+import { actionButton, component, goesTo, hrMetadata, opensDialog, opensRecordOnSelect, withBehaviors } from '../hrParts';
+
+const listScopes = [TemplateScope.Module, TemplateScope.Feature];
+
+/** The Export button: it tells the user the export has started, which is what the shell does for a long-running action it does not wait on. */
+const exportAction = (id: string) => withBehaviors(actionButton(id, 'Export', 'secondary'), [{
+    bindings: [{
+        trigger: { kind: InteractionTriggerKind.Click },
+        actions: [{ kind: InteractionActionKind.Notify, level: NotificationLevel.Info, message: { text: 'The export has started.' } } as unknown as NotifyAction],
+    }],
+}]);
+
+interface ListOptions {
+    name: string;
+    entity: HrEntityKind;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    searchLabel: string;
+    urlKey: string;
+    /** The primary action of the header: a quick-create dialog to open, or a screen to go to. */
+    primary: { label: string; dialog?: string; screen?: string };
+    rowActions: string[];
+    bulkActions: string[];
+    titleField: string;
+    /** The screen a chosen row opens; the list then selects one row at a time. Absent, rows are selected many at a time for the bulk bar. */
+    recordScreen?: string;
+    /** Rows are not selectable at all: a record of what happened, which nobody edits. */
+    readOnly?: boolean;
+    /** Show the records as cards, each with the picture its `imageField` names. */
+    cards?: { imageField: string };
+    /** Tint a row by the tone in this field (always beside a status column that says the same in words). */
+    toneField?: string;
+}
+
+/**
+ * One HR list: the foundation `ListScreen` with its header, toolbar, filters, list and bulk bar filled for an entity. The slots, arrangement and
+ * every behavior - sort, search, paging and selection in the address, the table collapsing to cards on a phone - are the foundation's.
+ */
+function listTemplateOf(options: ListOptions): ScreenTemplate {
+    const queries = hrQueriesOf(options.entity);
+    const id = options.name;
+    const listId = `${id}-records`;
+    const primary = withBehaviors(actionButton(`${id}-primary`, options.primary.label, 'primary'), options.primary.dialog ? opensDialog(options.primary.dialog) : goesTo(options.primary.screen!));
+    const list = component(listId, 'dataList', {
+        label: options.title, rows: fromQuery(queries.rows), columns: fromQuery(queries.columns), titleField: options.titleField, pageSize: options.cards ? 12 : 10, urlKey: options.urlKey, ...localeOfData,
+        rowActions: options.rowActions,
+        ...(options.readOnly ? {} : { selectionMode: options.recordScreen ? 'single' : 'multiple' }),
+        ...(options.cards ? { variant: 'cards', imageField: options.cards.imageField } : {}),
+        ...(options.toneField ? { toneField: options.toneField } : {}),
+    });
+
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: listScreenTemplate.slots,
+        arrangement: listScreenTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: options.title, subtitle: options.subtitle }, { actions: [exportAction(`${id}-export`), primary] })],
+            toolbar: [
+                component(`${id}-search`, 'globalSearch', { placeholder: options.searchLabel, label: options.searchLabel, urlKey: `${options.urlKey}q` }),
+                component(`${id}-views`, 'savedViewsMenu', { views: fromQuery(queries.views), savePermission: 'enabled', managePermission: 'enabled' }),
+                component(`${id}-columns`, 'columnChooser', { columns: fromQuery(queries.columnChoices) }),
+            ],
+            filters: [component(`${id}-filter`, 'filterBuilder', { fields: fromQuery(queries.filterFields), ...localeOfData })],
+            list: [options.recordScreen ? withBehaviors(list, opensRecordOnSelect(listId, options.recordScreen)) : list],
+            bulkBar: options.recordScreen || options.readOnly ? [] : [component(`${id}-bulk`, 'bulkBar', { selection: fromQuery(queries.selection), actions: options.bulkActions })],
+            footer: [],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: hrMetadata(options.name, 'List', listScopes),
+    };
+}
+
+/** The directory: everyone in the company as cards - photo, name, title, department and how to reach them. Choosing a card opens the employee. */
+export const hrEmployeeDirectoryTemplate = listTemplateOf({
+    name: 'HrEmployeeDirectory', entity: HrEntityKind.Employee, displayName: 'HR employee directory', description: 'Employees as cards with photo, name, title, department and contact, filtered by department, location and status.',
+    title: 'Directory', subtitle: 'Everyone in the company', searchLabel: 'Search people', urlKey: 'people', primary: { label: 'New employee', dialog: 'HrQuickCreateEmployee' },
+    rowActions: ['View profile', 'Send email'], bulkActions: [], titleField: 'name', recordScreen: 'hr.directory.record', cards: { imageField: 'photo' },
+});
+
+/** The time-off requests: who asked for what and when, with the actions a manager takes on one or many at once. */
+export const hrTimeOffListTemplate = listTemplateOf({
+    name: 'HrTimeOffList', entity: HrEntityKind.TimeOff, displayName: 'HR time off', description: 'Time-off requests with the employee, type, dates, days and status, filtered by type, status and period.',
+    title: 'Time off', subtitle: 'Requests to approve and who is away', searchLabel: 'Search requests', urlKey: 'timeoff', primary: { label: 'Request time off', dialog: 'HrRequestTimeOff' },
+    rowActions: ['Approve', 'Decline', 'Cancel'], bulkActions: ['Approve', 'Decline'], titleField: 'employee',
+});
+
+/** The balances: what each employee is entitled to, has taken and has left, with how much of the year is used. Read only. */
+export const hrTimeOffBalanceListTemplate = listTemplateOf({
+    name: 'HrTimeOffBalanceList', entity: HrEntityKind.Balance, displayName: 'HR time-off balances', description: 'Each employee\'s entitlement, days taken and days left, with how much of it is used.',
+    title: 'Balances', subtitle: 'Time off taken and left this year', searchLabel: 'Search balances', urlKey: 'balances', primary: { label: 'Request time off', dialog: 'HrRequestTimeOff' },
+    rowActions: ['View employee'], bulkActions: [], titleField: 'employee', readOnly: true,
+});
+
+/** The onboarding: new hires, when they start, who looks after them and how far along their checklist is. Choosing a row opens the checklist. */
+export const hrOnboardingListTemplate = listTemplateOf({
+    name: 'HrOnboardingList', entity: HrEntityKind.Onboarding, displayName: 'HR onboarding', description: 'New hires with their start date, owner and a progress bar of their checklist.',
+    title: 'Onboarding', subtitle: 'New hires and how far along they are', searchLabel: 'Search new hires', urlKey: 'onboarding', primary: { label: 'New employee', dialog: 'HrQuickCreateEmployee' },
+    rowActions: ['Open checklist', 'Remind owner'], bulkActions: [], titleField: 'name', recordScreen: 'hr.onboarding.record',
+});

package/templates/orgChartTemplate.ts

@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { column, slotLeaf } from '@cratis/scene.blueprint.default';
+import { HrQuery, fromQuery, localeOfData } from '../hrQueries';
+import { actionButton, component, goesTo, hrMetadata, withBehaviors } from '../hrParts';
+
+/**
+ * The org chart: the company as a tree - who reports to whom, with each person's title and how many report to them. It follows the ARIA tree pattern, so it is as
+ * usable from a keyboard and a screen reader as with a pointer, and the chosen person is kept in the address, so a link points at a place in the chart.
+ */
+export const hrOrgChartTemplate: ScreenTemplate = {
+    name: 'HrOrgChart',
+    fitsSlot: 'content',
+    slots: [{ name: 'header' }, { name: 'chart' }],
+    arrangement: { root: column([slotLeaf('header'), slotLeaf('chart')], 16) },
+    content: {
+        header: [component('HrOrgChart-header', 'pageHeader', { title: 'Org chart', subtitle: 'Who reports to whom' }, {
+            actions: [withBehaviors(actionButton('HrOrgChart-directory', 'Open the directory', 'secondary'), goesTo('hr.directory'))],
+        })],
+        chart: [component('HrOrgChart-tree', 'orgTree', { nodes: fromQuery(HrQuery.OrgNodes), expandedDepth: 2, urlKey: 'person', strings: { orgTree: 'Org chart', orgReports: '{count} reports' }, ...localeOfData })],
+    },
+    displayName: 'HR org chart',
+    description: 'The company as a tree of who reports to whom, with titles and report counts.',
+    metadata: hrMetadata('HrOrgChart', 'Detail', [TemplateScope.Module, TemplateScope.Feature]),
+};

package/templates/recordTemplates.ts

@@ -0,0 +1,75 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { recordPageTemplate } from '@cratis/scene.blueprint.default';
+import { HrEntityKind, HrQuery, fromQuery, hrQueriesOf, localeOfData } from '../hrQueries';
+import { actionButton, component, hrMetadata, opensDialog, withBehaviors } from '../hrParts';
+
+const employee = hrQueriesOf(HrEntityKind.Employee);
+const onboarding = hrQueriesOf(HrEntityKind.Onboarding);
+
+/**
+ * The employee page: the foundation `RecordPage` with the employee's name as its title, the time-off balance as key facts under it, the personal and job
+ * information as the record, the employee's documents and time-off requests as related lists, their history and the open tasks beside it.
+ */
+export const hrEmployeePageTemplate: ScreenTemplate = {
+    name: 'HrEmployeePage',
+    fitsSlot: 'content',
+    slots: recordPageTemplate.slots,
+    arrangement: recordPageTemplate.arrangement,
+    content: {
+        header: [component('HrEmployeePage-header', 'pageHeader', { title: fromQuery(employee.record, '0.name'), subtitle: fromQuery(employee.record, '0.title') }, {
+            actions: [withBehaviors(actionButton('HrEmployeePage-timeoff', 'Request time off', 'primary'), opensDialog('HrRequestTimeOff'))],
+        })],
+        summary: [
+            component('HrEmployeePage-status', 'statusChip', { status: fromQuery(employee.summary, '0.status'), tone: fromQuery(employee.summary, '0.tone') }),
+            component('HrEmployeePage-left', 'statCard', { label: 'Leave left (days)', value: fromQuery(employee.summary, '0.leaveLeft'), ...localeOfData }),
+            component('HrEmployeePage-taken', 'statCard', { label: 'Leave taken (days)', value: fromQuery(employee.summary, '0.leaveTaken'), ...localeOfData }),
+            component('HrEmployeePage-service', 'statCard', { label: 'Years of service', value: fromQuery(employee.summary, '0.years'), ...localeOfData }),
+            component('HrEmployeePage-team', 'avatarStack', { people: fromQuery(employee.summary, '0.people') }),
+        ],
+        tabs: [component('HrEmployeePage-tabs', 'tabSet', { tabs: fromQuery(HrQuery.RecordTabs), urlKey: 'tab', label: 'Employee sections' })],
+        main: [component('HrEmployeePage-form', 'formScreenBody', { mode: 'readOnly', sections: fromQuery(employee.sections), values: fromQuery(employee.record, '0'), ...localeOfData })],
+        related: [
+            component('HrEmployeePage-documents', 'dataList', { label: 'Documents', rows: fromQuery(employee.documents), columns: fromQuery('DocumentColumns'), titleField: 'name', pageSize: 5, ...localeOfData }),
+            component('HrEmployeePage-requests', 'dataList', {
+                label: 'Time off', rows: fromQuery('EmployeeTimeOff'), columns: fromQuery(hrQueriesOf(HrEntityKind.TimeOff).columns), titleField: 'employee', pageSize: 5, ...localeOfData,
+            }),
+        ],
+        activity: [component('HrEmployeePage-activity', 'activityFeed', { label: 'History', entries: fromQuery(employee.activity), ...localeOfData })],
+        aside: [component('HrEmployeePage-tasks', 'checklistSection', { label: 'Open tasks', sections: fromQuery(employee.tasks), ...localeOfData })],
+    },
+    displayName: 'HR employee page',
+    description: 'One employee: personal and job information, documents and time-off balance.',
+    metadata: hrMetadata('HrEmployeePage', 'Detail', [TemplateScope.Feature, TemplateScope.Subfeature]),
+};
+
+/**
+ * The onboarding checklist: a `RecordPage` variant for one new hire. Where an ordinary record page leads with the record's fields, this one leads with the checklist -
+ * sections of tasks (before the first day, the first week, the first month), each task with an owner and a due date and a way to tick it off - and keeps the
+ * key facts of the hire (start date, manager, buddy, equipment) beside it.
+ */
+export const hrOnboardingChecklistTemplate: ScreenTemplate = {
+    name: 'HrOnboardingChecklist',
+    fitsSlot: 'content',
+    slots: recordPageTemplate.slots,
+    arrangement: recordPageTemplate.arrangement,
+    content: {
+        header: [component('HrOnboardingChecklist-header', 'pageHeader', { title: fromQuery(onboarding.record, '0.name'), subtitle: 'Onboarding checklist' })],
+        summary: [
+            component('HrOnboardingChecklist-status', 'statusChip', { status: fromQuery(onboarding.summary, '0.status'), tone: fromQuery(onboarding.summary, '0.tone') }),
+            component('HrOnboardingChecklist-done', 'statCard', { label: 'Tasks done', value: fromQuery(onboarding.summary, '0.done'), ...localeOfData }),
+            component('HrOnboardingChecklist-open', 'statCard', { label: 'Tasks open', value: fromQuery(onboarding.summary, '0.open'), ...localeOfData }),
+            component('HrOnboardingChecklist-owners', 'avatarStack', { people: fromQuery(onboarding.summary, '0.people') }),
+        ],
+        tabs: [],
+        main: [component('HrOnboardingChecklist-tasks', 'checklistSection', { label: 'Onboarding tasks', sections: fromQuery(onboarding.tasks), editPermission: 'enabled', ...localeOfData })],
+        related: [],
+        activity: [component('HrOnboardingChecklist-activity', 'activityFeed', { label: 'History', entries: fromQuery(onboarding.activity), ...localeOfData })],
+        aside: [component('HrOnboardingChecklist-facts', 'formScreenBody', { mode: 'readOnly', sections: fromQuery(onboarding.sections), values: fromQuery(onboarding.record, '0'), ...localeOfData })],
+    },
+    displayName: 'HR onboarding checklist',
+    description: 'One new hire\'s onboarding: checklist sections with an owner and a due date for each task, and the key facts of the hire.',
+    metadata: hrMetadata('HrOnboardingChecklist', 'Detail', [TemplateScope.Feature, TemplateScope.Subfeature]),
+};

package/thumbnails/HrEmployeeDirectory.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HR employee directory">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#9333ea"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="88" y="44" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="90" y="82" width="40" height="5" rx="3" fill="#9333ea"/>
+    <rect x="90" y="94" width="52" height="5" rx="3" fill="#9aa3b2"/>
+    <rect x="160" y="40" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="164" y="44" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="166" y="82" width="40" height="5" rx="3" fill="#9333ea"/>
+    <rect x="166" y="94" width="52" height="5" rx="3" fill="#9aa3b2"/>
+    <rect x="236" y="40" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="240" y="44" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="242" y="82" width="40" height="5" rx="3" fill="#9333ea"/>
+    <rect x="242" y="94" width="52" height="5" rx="3" fill="#9aa3b2"/>
+    <rect x="84" y="116" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="88" y="120" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="90" y="158" width="40" height="5" rx="3" fill="#9333ea"/>
+    <rect x="90" y="170" width="52" height="5" rx="3" fill="#9aa3b2"/>
+    <rect x="160" y="116" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="164" y="120" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="166" y="158" width="40" height="5" rx="3" fill="#9333ea"/>
+    <rect x="166" y="170" width="52" height="5" rx="3" fill="#9aa3b2"/>
+    <rect x="236" y="116" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="240" y="120" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="242" y="158" width="40" height="5" rx="3" fill="#9333ea"/>
+    <rect x="242" y="170" width="52" height="5" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/HrEmployeePage.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HR employee page">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#9333ea"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="90" y="47" width="46" height="16" rx="3" fill="#d5d9df"/>
+    <rect x="144" y="47" width="46" height="16" rx="3" fill="#d5d9df"/>
+    <rect x="198" y="47" width="46" height="16" rx="3" fill="#d5d9df"/>
+    <rect x="252" y="47" width="46" height="16" rx="3" fill="#d5d9df"/>
+    <rect x="84" y="78" width="140" height="110" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="92" y="90" width="120" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="92" y="107" width="98" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="92" y="124" width="120" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="92" y="141" width="98" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="92" y="158" width="120" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="232" y="78" width="76" height="52" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="232" y="136" width="76" height="52" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+</svg>

package/thumbnails/HrOnboardingChecklist.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HR onboarding checklist">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#9333ea"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="90" y="47" width="46" height="16" rx="3" fill="#d5d9df"/>
+    <rect x="144" y="47" width="46" height="16" rx="3" fill="#d5d9df"/>
+    <rect x="198" y="47" width="46" height="16" rx="3" fill="#d5d9df"/>
+    <rect x="252" y="47" width="46" height="16" rx="3" fill="#d5d9df"/>
+    <rect x="84" y="78" width="140" height="110" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="92" y="90" width="120" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="92" y="107" width="98" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="92" y="124" width="120" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="92" y="141" width="98" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="92" y="158" width="120" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="232" y="78" width="76" height="52" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="232" y="136" width="76" height="52" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+</svg>

package/thumbnails/HrOnboardingList.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HR onboarding">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#9333ea"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="48" width="60" height="6" rx="3" fill="#9333ea"/>
+    <rect x="94" y="70" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="87" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="104" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="121" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="138" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="155" width="168" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/HrOrgChart.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HR org chart">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#9333ea"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="66" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="90" y="54" width="54" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="90" y="71" width="44" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="90" y="88" width="54" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="90" y="105" width="44" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="90" y="122" width="54" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="90" y="139" width="44" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="158" y="40" width="150" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="166" y="48" width="60" height="6" rx="3" fill="#9333ea"/>
+    <rect x="166" y="70" width="134" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="166" y="87" width="109" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="166" y="104" width="134" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="166" y="121" width="109" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="166" y="138" width="134" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="166" y="155" width="109" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/HrQuickCreateEmployee.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HR quick create employee">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#9333ea"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="148" rx="4" fill="#e6e9ee"/>
+    <rect x="114" y="62" width="164" height="108" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="124" y="70" width="60" height="6" rx="3" fill="#9333ea"/>
+    <rect x="124" y="88" width="144" height="14" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="124" y="108" width="144" height="14" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="124" y="140" width="54" height="20" rx="4" fill="#9333ea"/>
+    <rect x="184" y="140" width="54" height="20" rx="4" fill="#d5d9df"/>
+</svg>

package/thumbnails/HrRequestTimeOff.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HR request time off">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#9333ea"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="148" rx="4" fill="#e6e9ee"/>
+    <rect x="114" y="62" width="164" height="108" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="124" y="70" width="60" height="6" rx="3" fill="#9333ea"/>
+    <rect x="124" y="88" width="144" height="14" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="124" y="108" width="144" height="14" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="124" y="140" width="54" height="20" rx="4" fill="#9333ea"/>
+    <rect x="184" y="140" width="54" height="20" rx="4" fill="#d5d9df"/>
+</svg>

package/thumbnails/HrTimeOffBalanceList.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HR time-off balances">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#9333ea"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="48" width="60" height="6" rx="3" fill="#9333ea"/>
+    <rect x="94" y="70" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="87" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="104" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="121" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="138" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="155" width="168" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/HrTimeOffList.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HR time off">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#9333ea"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="48" width="60" height="6" rx="3" fill="#9333ea"/>
+    <rect x="94" y="70" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="87" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="104" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="121" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="138" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="155" width="168" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/hr.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HR People and Time Off blueprint">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#9333ea"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="160" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="236" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="78" width="224" height="110" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="90" width="200" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="107" width="164" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="124" width="200" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="141" width="164" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="158" width="200" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.