@cratis/scene.blueprint.hr 4.53.1 → 4.59.0

package/hrParts.ts

@@ -16,7 +16,7 @@ export const hrCategory = 'Business / HR';
 export const thumbnailOf = (templateName: string): string => `thumbnails/${templateName}.svg`;
 
 /** The metadata of a screen template of this blueprint: provenance, a type from the vocabulary, the category, a thumbnail and the levels it applies at. */
-export const hrMetadata = (name: string, type: 'Dashboard' | 'List' | 'Board' | 'Detail' | 'Form' | 'Dialog' | 'Workspace', scopes: TemplateScope[]): TemplateMetadata =>
+export const hrMetadata = (name: string, type: 'Dashboard' | 'List' | 'Board' | 'Detail' | 'Form' | 'Dialog' | 'Workspace' | 'Calendar', scopes: TemplateScope[]): TemplateMetadata =>
     ({ ...hrTemplateProvenance, type, category: hrCategory, thumbnail: thumbnailOf(name), scopes });
 
 /** A button of the foundation: a verb, its emphasis, and the permission rule every action declares (spec Part B 1.5). */

package/hrQueries.ts

@@ -15,6 +15,9 @@ export const HrQuery = {
     Settings: 'HrSettings',
     RecordTabs: 'HrRecordTabs',
     OrgNodes: 'OrgNodes',
+    TeamCalendarEvents: 'TeamCalendarEvents',
+    TeamCalendarFilterFields: 'TeamCalendarFilterFields',
+    TeamCalendarColumns: 'TeamCalendarColumns',
     FormErrors: 'HrFormErrors',
 } as const;
 

package/hrScreenSet.ts

@@ -19,6 +19,7 @@ export const hrScreenDefinitions: HrScreenDefinition[] = [
     { name: 'hr.org', title: 'Org chart', template: 'HrOrgChart', order: 1, description: 'Who reports to whom, as a tree.' },
     { name: 'hr.timeoff', title: 'Time off', template: 'HrTimeOffList', order: 2, description: 'Time-off requests to approve, with who is away and for how long.' },
     { name: 'hr.timeoff.balances', title: 'Balances', template: 'HrTimeOffBalanceList', parent: 'hr.timeoff', description: 'What each employee has taken and has left.' },
+    { name: 'hr.timeoff.calendar', title: 'Team calendar', template: 'HrTeamCalendar', parent: 'hr.timeoff', description: 'Who is away and when, on a month, a week or as an agenda.' },
     { name: 'hr.onboarding', title: 'Onboarding', template: 'HrOnboardingList', order: 3, description: 'New hires and how far along their onboarding is.' },
     { name: 'hr.onboarding.record', title: 'Onboarding checklist', template: 'HrOnboardingChecklist', parent: 'hr.onboarding', description: 'One new hire\'s checklist: sections of tasks, each with an owner and a due date.' },
 ];

package/navigation.ts

@@ -31,7 +31,7 @@ export const hrStructure: ApplicationStructure = (() => {
 
 /**
  * The navigation of the application the blueprint is: the topbar names the module, and the module's sidebar - which overrides the application's - lists
- * the four places an HR team goes: Directory, Org chart, Time off (with its requests and its balances beneath it) and Onboarding.
+ * the four places an HR team goes: Directory, Org chart, Time off (with its requests, the team calendar and its balances beneath it) and Onboarding.
  */
 export const hrNavigation: NavigationModel = {
     application: {
@@ -49,6 +49,7 @@ export const hrNavigation: NavigationModel = {
                 {
                     id: 'timeoff', title: 'Time off', target: { module: hrModule, feature: 'timeoff' }, children: [
                         { id: 'requests', title: 'Requests', target: { module: hrModule, feature: 'timeoff' } },
+                        { id: 'calendar', title: 'Team calendar', target: { module: hrModule, feature: 'timeoff.calendar' } },
                         { id: 'balances', title: 'Balances', target: { module: hrModule, feature: 'timeoff.balances' } },
                     ],
                 },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.blueprint.hr",
-    "version": "4.53.1",
+    "version": "4.59.0",
     "description": "People, the org chart, time off and onboarding for an HR team.",
     "keywords": [
         "cratis",
@@ -51,16 +51,16 @@
         "up": "yarn g:up"
     },
     "dependencies": {
-        "@cratis/scene.blueprint.default": "4.53.1",
-        "@cratis/scene.engine": "4.53.1",
-        "@cratis/scene.model": "4.53.1",
-        "@cratis/scene.react": "4.53.1"
+        "@cratis/scene.blueprint.default": "4.59.0",
+        "@cratis/scene.engine": "4.59.0",
+        "@cratis/scene.model": "4.59.0",
+        "@cratis/scene.react": "4.59.0"
     },
     "devDependencies": {
-        "@cratis/scene.blueprint.default": "4.53.1",
-        "@cratis/scene.engine": "4.53.1",
-        "@cratis/scene.model": "4.53.1",
-        "@cratis/scene.react": "4.53.1",
+        "@cratis/scene.blueprint.default": "4.59.0",
+        "@cratis/scene.engine": "4.59.0",
+        "@cratis/scene.model": "4.59.0",
+        "@cratis/scene.react": "4.59.0",
         "@primereact/core": "11.2.0",
         "@primereact/headless": "11.2.0",
         "primeicons": "8.0.2",

package/sampleData/hr-nordic.json

@@ -9,7 +9,8 @@
             "rows": [
                 {
                     "locale": "nb-NO",
-                    "currency": "NOK"
+                    "currency": "NOK",
+                    "calendarDay": "2026-10-19"
                 }
             ]
         },
@@ -1654,6 +1655,154 @@
             "rows": [
                 {}
             ]
+        },
+        {
+            "shape": "TeamCalendarEvents",
+            "rows": [
+                {
+                    "id": "req-1",
+                    "title": "Silje Andersen",
+                    "start": "2026-10-26",
+                    "end": "2026-10-30",
+                    "category": "Ferie · Venter",
+                    "tone": "warning",
+                    "person": "Silje Andersen"
+                },
+                {
+                    "id": "req-2",
+                    "title": "Emil Johansen",
+                    "start": "2026-11-02",
+                    "end": "2026-11-04",
+                    "category": "Ferie · Venter",
+                    "tone": "warning",
+                    "person": "Emil Johansen"
+                },
+                {
+                    "id": "req-3",
+                    "title": "Thea Pedersen",
+                    "start": "2026-10-19",
+                    "end": "2026-10-19",
+                    "category": "Avspasering · Godkjent",
+                    "tone": "success",
+                    "person": "Thea Pedersen"
+                },
+                {
+                    "id": "req-4",
+                    "title": "Nora Karlsen",
+                    "start": "2026-09-01",
+                    "end": "2026-12-31",
+                    "category": "Permisjon · Godkjent",
+                    "tone": "success",
+                    "person": "Nora Karlsen"
+                },
+                {
+                    "id": "req-5",
+                    "title": "Oskar Nilsen",
+                    "start": "2026-12-21",
+                    "end": "2026-12-31",
+                    "category": "Ferie · Venter",
+                    "tone": "warning",
+                    "person": "Oskar Nilsen"
+                },
+                {
+                    "id": "req-6",
+                    "title": "Lars Strand",
+                    "start": "2026-10-12",
+                    "end": "2026-10-14",
+                    "category": "Sykefravær · Godkjent",
+                    "tone": "success",
+                    "person": "Lars Strand"
+                },
+                {
+                    "id": "req-8",
+                    "title": "Maja Bakken",
+                    "start": "2026-10-05",
+                    "end": "2026-10-09",
+                    "category": "Ferie · Godkjent",
+                    "tone": "success",
+                    "person": "Maja Bakken"
+                },
+                {
+                    "id": "req-9",
+                    "title": "Jonas Eriksen",
+                    "start": "2026-10-23",
+                    "end": "2026-10-23",
+                    "category": "Avspasering · Venter",
+                    "tone": "warning",
+                    "person": "Jonas Eriksen"
+                },
+                {
+                    "id": "req-10",
+                    "title": "Henriette Vik",
+                    "start": "2026-11-09",
+                    "end": "2026-11-13",
+                    "category": "Ferie · Venter",
+                    "tone": "warning",
+                    "person": "Henriette Vik"
+                },
+                {
+                    "id": "req-11",
+                    "title": "Kristian Moen",
+                    "start": "2026-12-28",
+                    "end": "2026-12-31",
+                    "category": "Ferie · Godkjent",
+                    "tone": "success",
+                    "person": "Kristian Moen"
+                },
+                {
+                    "id": "req-12",
+                    "title": "Henrik Lund",
+                    "start": "2026-10-21",
+                    "end": "2026-10-22",
+                    "category": "Ferie · Venter",
+                    "tone": "warning",
+                    "person": "Henrik Lund"
+                }
+            ]
+        },
+        {
+            "shape": "TeamCalendarColumns",
+            "rows": [
+                {
+                    "field": "person",
+                    "header": "Ansatt"
+                },
+                {
+                    "field": "category",
+                    "header": "Fravær"
+                },
+                {
+                    "field": "start",
+                    "header": "Fra",
+                    "kind": "date"
+                },
+                {
+                    "field": "end",
+                    "header": "Til",
+                    "kind": "date"
+                }
+            ]
+        },
+        {
+            "shape": "TeamCalendarFilterFields",
+            "rows": [
+                {
+                    "name": "person",
+                    "label": "Ansatt",
+                    "type": "text"
+                },
+                {
+                    "name": "category",
+                    "label": "Fravær",
+                    "type": "select",
+                    "options": [
+                        "Ferie",
+                        "Sykefravær",
+                        "Permisjon",
+                        "Avspasering"
+                    ]
+                }
+            ]
         }
     ]
 }

package/templates/index.ts

@@ -3,18 +3,20 @@
 
 import { hrEmployeeDirectoryTemplate, hrOnboardingListTemplate, hrTimeOffBalanceListTemplate, hrTimeOffListTemplate } from './listTemplates';
 import { hrOrgChartTemplate } from './orgChartTemplate';
+import { hrTeamCalendarTemplate } from './teamCalendarTemplate';
 import { hrEmployeePageTemplate, hrOnboardingChecklistTemplate } from './recordTemplates';
 
 export * from './listTemplates';
 export * from './recordTemplates';
 export * from './orgChartTemplate';
+export * from './teamCalendarTemplate';
 export * from './formTemplates';
 
 /** Every screen template this blueprint provides, in the order the manifest lists them. */
 export const hrScreenTemplates = [
     hrEmployeeDirectoryTemplate, hrEmployeePageTemplate,
     hrOrgChartTemplate,
-    hrTimeOffListTemplate, hrTimeOffBalanceListTemplate,
+    hrTimeOffListTemplate, hrTimeOffBalanceListTemplate, hrTeamCalendarTemplate,
     hrOnboardingListTemplate, hrOnboardingChecklistTemplate,
 ];
 

package/templates/teamCalendarTemplate.ts

@@ -0,0 +1,33 @@
+// 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, WidthSizeClass } from '@cratis/scene.model';
+import { column, grid, slotLeaf } from '@cratis/scene.blueprint.default';
+import { HrQuery, fromQuery, localeOfData } from '../hrQueries';
+import { actionButton, component, hrMetadata, opensDialog, withBehaviors } from '../hrParts';
+
+/**
+ * The team calendar: who is away and when, on a month, a week or as an agenda (the foundation's `calendarGrid`). A request spans the days it asks for, the kind of
+ * leave is told in words as well as by color, and the day and view are kept in the address, so a link shares the calendar as it is. A filter narrows it to a person
+ * or a kind of leave, and the list beside it names everyone away in the period.
+ */
+export const hrTeamCalendarTemplate: ScreenTemplate = {
+    name: 'HrTeamCalendar',
+    fitsSlot: 'content',
+    slots: [{ name: 'header' }, { name: 'filters' }, { name: 'calendar' }, { name: 'away' }],
+    arrangement: {
+        root: column([slotLeaf('header'), slotLeaf('filters'), grid([slotLeaf('calendar', { span: 2 }), slotLeaf('away')], 3, 16)], 16),
+        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('filters'), slotLeaf('calendar'), slotLeaf('away')], 16) }],
+    },
+    content: {
+        header: [component('HrTeamCalendar-header', 'pageHeader', { title: 'Team calendar', subtitle: 'Who is away and when' }, {
+            actions: [withBehaviors(actionButton('HrTeamCalendar-request', 'Request time off', 'primary'), opensDialog('HrRequestTimeOff'))],
+        })],
+        filters: [component('HrTeamCalendar-filter', 'filterBuilder', { fields: fromQuery(HrQuery.TeamCalendarFilterFields) })],
+        calendar: [component('HrTeamCalendar-grid', 'calendarGrid', { label: 'Team calendar', events: fromQuery(HrQuery.TeamCalendarEvents), date: fromQuery(HrQuery.Settings, '0.calendarDay'), urlKey: 'day', ...localeOfData })],
+        away: [component('HrTeamCalendar-away', 'dataList', { label: 'Away in this period', rows: fromQuery(HrQuery.TeamCalendarEvents), columns: fromQuery(HrQuery.TeamCalendarColumns), titleField: 'person', pageSize: 6, ...localeOfData })],
+    },
+    displayName: 'HR team calendar',
+    description: 'Who is away and when, on a month, a week or as an agenda, with the kind of leave told in words.',
+    metadata: hrMetadata('HrTeamCalendar', 'Calendar', [TemplateScope.Module, TemplateScope.Feature]),
+};

package/thumbnails/HrTeamCalendar.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="HrTeamCalendar">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="0" y="0" width="320" height="22" fill="#0f766e"/>
+    <rect x="0" y="22" width="56" height="178" fill="#e3e5ea"/>
+    <rect x="64" y="30" width="90" height="12" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="64" y="48" width="170" height="140" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="64" y="48" width="170" height="14" fill="#e3e5ea"/>
+    <path d="M64 90H234M64 118H234M64 146H234M98 62V188M132 62V188M166 62V188M200 62V188" stroke="#d5d9df"/>
+    <rect x="68" y="96" width="60" height="6" rx="2" fill="#16a34a"/>
+    <rect x="136" y="124" width="26" height="6" rx="2" fill="#d97706"/>
+    <rect x="102" y="152" width="94" height="6" rx="2" fill="#16a34a"/>
+    <rect x="244" y="48" width="66" height="140" rx="3" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="250" y="58" width="54" height="5" rx="2" fill="#d5d9df"/>
+    <rect x="250" y="70" width="54" height="5" rx="2" fill="#d5d9df"/>
+    <rect x="250" y="82" width="54" height="5" rx="2" fill="#d5d9df"/>
+</svg>