@cratis/scene.blueprint.bookings 0.0.0-stage → 4.71.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 { bookingsScreenDefinitions } from '../bookingsScreenSet';
+
+/**
+ * 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 (`bookingsNavigation`).
+ */
+export const bookingsScreens: Screen[] = bookingsScreenDefinitions.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 bookingsTemplateProvenance: 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.bookings' },
+    license: 'MIT',
+    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',
+};

package/templates/calendarTemplate.ts

@@ -0,0 +1,57 @@
+// 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 { BookingsQuery, fromQuery, localeOfData } from '../bookingsQueries';
+import { actionButton, component, goesTo, bookingsMetadata, opensDialog, withBehaviors } from '../bookingsParts';
+
+interface Action { id: string; label: string; emphasis: 'primary' | 'secondary' | 'quiet' | 'danger'; dialog?: string; screen?: string }
+
+interface CalendarOptions {
+    name: string;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    label: string;
+    listLabel: string;
+    events: string;
+    columns: string;
+    titleField: string;
+    actions: Action[];
+}
+
+/**
+ * One calendar: the foundation's `calendarGrid` on a month, a week or as an agenda. The status is told in words as well as by color, the day and view are kept in the
+ * address so a link shares the calendar as it is, and the list beside it names everything in the period.
+ */
+function calendarOf(options: CalendarOptions): ScreenTemplate {
+    const id = options.name;
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: [{ name: 'header' }, { name: 'calendar' }, { name: 'due' }],
+        arrangement: {
+            root: column([slotLeaf('header'), grid([slotLeaf('calendar', { span: 2 }), slotLeaf('due')], 3, 16)], 16),
+            overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('calendar'), slotLeaf('due')], 16) }],
+        },
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: options.title, subtitle: options.subtitle }, {
+                actions: options.actions.map(action => withBehaviors(actionButton(`${id}-${action.id}`, action.label, action.emphasis), action.dialog ? opensDialog(action.dialog) : goesTo(action.screen!))),
+            })],
+            calendar: [component(`${id}-grid`, 'calendarGrid', { label: options.label, events: fromQuery(options.events), date: fromQuery(BookingsQuery.Settings, '0.today'), urlKey: 'day', ...localeOfData })],
+            due: [component(`${id}-list`, 'dataList', { label: options.listLabel, rows: fromQuery(options.events), columns: fromQuery(options.columns), titleField: options.titleField, pageSize: 6, ...localeOfData })],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: bookingsMetadata(options.name, 'Calendar', [TemplateScope.Module, TemplateScope.Feature]),
+    };
+}
+
+/** The bookings calendar: each booking on its day on a month, a week or an agenda; the status is told in words as well as by color, and the list beside it names every booking in the period. */
+export const bookingsCalendarTemplate = calendarOf({
+    name: 'BookingsCalendar', displayName: 'Bookings calendar', description: 'Every booking on the day it falls, on a month, a week or as an agenda, with the status told in words.', title: 'Calendar', subtitle: 'Who has what, and when', label: 'Bookings', listLabel: 'Bookings in this period',
+    events: BookingsQuery.BookingEvents, columns: BookingsQuery.BookingEventColumns, titleField: 'title',
+    actions: [{ id: 'book', label: 'Book a resource', emphasis: 'primary', screen: 'bookings.new' }],
+});

package/templates/formTemplates.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 { DialogTemplate, TemplateScope } from '@cratis/scene.model';
+import { quickCreateDialogTemplate } from '@cratis/scene.blueprint.default';
+import { BookingsQuery, fromQuery, localeOfData } from '../bookingsQueries';
+import { closesDialog, component, bookingsMetadata, withBehaviors } from '../bookingsParts';
+
+/**
+ * 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, sections: string, noun: string, submit: string): DialogTemplate {
+    return {
+        name,
+        slots: quickCreateDialogTemplate.slots,
+        content: {
+            header: [component(`${name}-frame`, 'dialogFrame', { title, subtitle: 'Only what is needed to get started' })],
+            body: [withBehaviors(component(`${name}-form`, 'formScreenBody', {
+                mode: 'create', saveAndNew: false, strings: { formSave: submit }, sections: fromQuery(sections), errors: fromQuery(BookingsQuery.FormErrors, '0'), ...localeOfData,
+            }), closesDialog())],
+            actions: [],
+        },
+        displayName: `Bookings quick create ${noun}`,
+        description: `A short form that creates one ${noun} without leaving the page.`,
+        metadata: bookingsMetadata(name, 'Dialog', [TemplateScope.Slice]),
+    };
+}
+
+/** The quick dialogs of the blueprint. */
+export const bookingsDialogs: DialogTemplate[] = [
+    quickCreateOf('BookingsQuickCreateBooking', 'Quick booking', 'BookingQuickSections', 'booking', 'Book'),
+];

package/templates/index.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { bookingsCalendarTemplate } from './calendarTemplate';
+import { bookingsListTemplate, resourcesListTemplate } from './listTemplates';
+import { bookingPageTemplate } from './recordTemplates';
+import { newBookingWizardTemplate } from './wizardTemplate';
+
+export * from './calendarTemplate';
+export * from './listTemplates';
+export * from './recordTemplates';
+export * from './wizardTemplate';
+export * from './formTemplates';
+
+/** Every screen template this blueprint provides, in the order the manifest lists them. */
+export const bookingsScreenTemplates = [bookingsCalendarTemplate, bookingsListTemplate, bookingPageTemplate, resourcesListTemplate, newBookingWizardTemplate];
+
+export { bookingsDialogs as bookingsDialogTemplates } from './formTemplates';

package/templates/listTemplates.ts

@@ -0,0 +1,106 @@
+// 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 { BookingsEntityKind, fromQuery, bookingsQueriesOf, localeOfData } from '../bookingsQueries';
+import { actionButton, component, goesTo, bookingsMetadata, opensDialog, opensDialogOnSelect, opensRecordOnSelect, withBehaviors } from '../bookingsParts';
+
+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: BookingsEntityKind;
+    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;
+    /** The side sheet a chosen row opens instead of a record page; the list then selects one row at a time. */
+    recordDialog?: string;
+    /** Group the rows (`variant: grouped`) by this field. */
+    grouped?: { groupBy: 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 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 = bookingsQueriesOf(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 || options.recordDialog ? 'single' : 'multiple' }),
+        ...(options.cards ? { variant: 'cards', ...(options.cards.imageField ? { imageField: options.cards.imageField } : {}) } : {}),
+        ...(options.grouped ? { variant: 'grouped', groupBy: options.grouped.groupBy } : {}),
+        ...(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)) : options.recordDialog ? withBehaviors(list, opensDialogOnSelect(options.recordDialog)) : list],
+            bulkBar: options.recordScreen || options.recordDialog || options.readOnly ? [] : [component(`${id}-bulk`, 'bulkBar', { selection: fromQuery(queries.selection), actions: options.bulkActions })],
+            footer: [],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: bookingsMetadata(options.name, 'List', listScopes),
+    };
+}
+
+
+/** The bookings: every booking with its resource, who booked it, when and its status. Choosing a booking opens it. */
+export const bookingsListTemplate = listTemplateOf({
+    name: 'BookingsList',
+    entity: BookingsEntityKind.Booking, displayName: 'Bookings list', description: 'Every booking with its resource, who booked it, date and time and status, filtered by resource, status, person and date.', title: 'Bookings', subtitle: 'Everything that has been booked', searchLabel: 'Search bookings', urlKey: 'bookings',
+    primary: { label: 'Quick booking', dialog: 'BookingsQuickCreateBooking' },
+    rowActions: ['Open', 'Cancel booking'], bulkActions: [],
+    titleField: 'reference', recordScreen: 'bookings.record'
+});
+
+/** The resources: the rooms, equipment and vehicles that can be booked, as cards with their type, capacity, location and whether each is free. */
+export const resourcesListTemplate = listTemplateOf({
+    name: 'ResourcesList',
+    entity: BookingsEntityKind.Resource, displayName: 'Resources list', description: 'The rooms, equipment and vehicles that can be booked, with their capacity, location and whether each is free.', title: 'Resources', subtitle: 'What can be booked', searchLabel: 'Search resources', urlKey: 'resources',
+    primary: { label: 'Book a resource', screen: 'bookings.new' },
+    rowActions: ['Book'], bulkActions: [],
+    titleField: 'name',
+    readOnly: true, cards: {}
+});

package/templates/recordTemplates.ts

@@ -0,0 +1,78 @@
+// 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 { BookingsEntityKind, currencyOfData, fromQuery, localeOfData, bookingsQueriesOf } from '../bookingsQueries';
+import { actionButton, component, goesTo, bookingsMetadata, opensDialog, withBehaviors } from '../bookingsParts';
+
+interface Fact { id: string; label: string; field: string; format?: 'currency' | 'percent' }
+interface Extra { key: string; label: string; titleField: string; pageSize?: number }
+interface Action { id: string; label: string; emphasis: 'primary' | 'secondary' | 'quiet' | 'danger'; dialog?: string; screen?: string }
+
+interface RecordOptions {
+    name: string;
+    entity: BookingsEntityKind;
+    displayName: string;
+    description: string;
+    titleField: string;
+    backScreen: string;
+    backLabel: string;
+    facts: Fact[];
+    extras: Extra[];
+    actions: Action[];
+}
+
+/**
+ * One record page: the foundation `RecordPage` with the record's own title, its status and key facts at the top, its fields and the lists that belong to it in the
+ * main region, and the activity beside it. What it shows is the record the list handed it the id of.
+ */
+function recordPageOf(options: RecordOptions): ScreenTemplate {
+    const queries = bookingsQueriesOf(options.entity);
+    const id = options.name;
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: recordPageTemplate.slots,
+        arrangement: recordPageTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: fromQuery(queries.record, `0.${options.titleField}`), subtitle: fromQuery(queries.record, '0.summary') }, {
+                actions: [
+                    withBehaviors(actionButton(`${id}-back`, options.backLabel, 'secondary'), goesTo(options.backScreen)),
+                    ...options.actions.map(action => withBehaviors(actionButton(`${id}-${action.id}`, action.label, action.emphasis), action.dialog ? opensDialog(action.dialog) : goesTo(action.screen!))),
+                ],
+            })],
+            summary: [
+                component(`${id}-status`, 'statusChip', { status: fromQuery(queries.summary, '0.status'), tone: fromQuery(queries.summary, '0.tone') }),
+                ...options.facts.map(fact => component(`${id}-${fact.id}`, 'statCard', {
+                    label: fact.label, value: fromQuery(queries.summary, `0.${fact.field}`), ...(fact.format ? { format: fact.format } : {}), ...currencyOfData,
+                })),
+            ],
+            tabs: [component(`${id}-tabs`, 'tabSet', { tabs: fromQuery(queries.tabs), urlKey: 'tab', label: `${options.displayName} sections` })],
+            main: [
+                component(`${id}-form`, 'formScreenBody', { mode: 'readOnly', sections: fromQuery(queries.sections), values: fromQuery(queries.record, '0'), ...currencyOfData }),
+                ...options.extras.map(extra => component(`${id}-${extra.key.toLowerCase()}`, 'dataList', {
+                    label: extra.label, rows: fromQuery(`${options.entity}${extra.key}`), columns: fromQuery(`${options.entity}${extra.key}Columns`), titleField: extra.titleField, pageSize: extra.pageSize ?? 8, ...currencyOfData,
+                })),
+            ],
+            related: [],
+            activity: [component(`${id}-activity`, 'activityFeed', { label: 'Activity', entries: fromQuery(queries.activity), ...localeOfData })],
+            aside: [],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: bookingsMetadata(options.name, 'Detail', [TemplateScope.Feature, TemplateScope.Subfeature]),
+    };
+}
+
+/** The booking page: the booking reference as its title, its status, date, hours and people at the top, its details, attendees and extras in the main region, and the activity beside it. */
+export const bookingPageTemplate = recordPageOf({
+    name: 'BookingPage', entity: BookingsEntityKind.Booking, displayName: 'Booking page', description: 'One booking: status, date, hours and people, its details, attendees and extras, and its activity.', titleField: 'reference', backScreen: 'bookings.list', backLabel: 'Back to bookings',
+    facts: [
+        { id: 'date', label: 'Date', field: 'date' },
+        { id: 'hours', label: 'Hours', field: 'hours' },
+        { id: 'people', label: 'People', field: 'people' },
+    ],
+    extras: [{ key: 'Attendees', label: 'Attendees', titleField: 'name' }, { key: 'Extras', label: 'Extras', titleField: 'item' }],
+    actions: [],
+});

package/templates/wizardTemplate.ts

@@ -0,0 +1,29 @@
+// 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 { wizardScreenTemplate } from '@cratis/scene.blueprint.default';
+import { BookingsQuery, currencyOfData, fromQuery, localeOfData } from '../bookingsQueries';
+import { bookingsMetadata, component } from '../bookingsParts';
+
+/** The new-booking wizard: what you need, when you need it, a few details, then a review. The step the person has reached survives a refresh and an invalid step blocks Next and says why. */
+export const newBookingWizardTemplate: ScreenTemplate = {
+    name: 'NewBookingWizard',
+    fitsSlot: 'content',
+    slots: wizardScreenTemplate.slots,
+    arrangement: wizardScreenTemplate.arrangement,
+    content: {
+        header: [component('NewBookingWizard-header', 'pageHeader', { title: 'New booking', subtitle: 'Four short steps' })],
+        progress: [component('NewBookingWizard-progress', 'wizardProgress', { steps: fromQuery(BookingsQuery.BookingWizardSteps), urlKey: 'step' }, {
+            resource: [component('NewBookingWizard-resource', 'formScreenBody', { mode: 'create', sections: fromQuery(BookingsQuery.BookingResourceSections), errors: fromQuery(BookingsQuery.FormErrors, '0'), ...localeOfData })],
+            when: [component('NewBookingWizard-when', 'formScreenBody', { mode: 'create', sections: fromQuery(BookingsQuery.BookingWhenSections), errors: fromQuery(BookingsQuery.FormErrors, '0'), ...localeOfData })],
+            details: [component('NewBookingWizard-details', 'formScreenBody', { mode: 'create', sections: fromQuery(BookingsQuery.BookingDetailSections), errors: fromQuery(BookingsQuery.FormErrors, '0'), ...localeOfData })],
+            review: [component('NewBookingWizard-review', 'formScreenBody', { mode: 'readOnly', sections: fromQuery(BookingsQuery.BookingReviewSections), values: fromQuery(BookingsQuery.BookingReviewValues, '0'), ...currencyOfData })],
+        })],
+        step: [],
+        actions: [],
+    },
+    displayName: 'New booking wizard',
+    description: 'Resource, time, details, then review and book; the step survives a refresh and an invalid step blocks Next and says why.',
+    metadata: bookingsMetadata('NewBookingWizard', 'Wizard', [TemplateScope.Feature, TemplateScope.Subfeature]),
+};

package/thumbnails/BookingPage.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="BookingPage">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#db2777"/>
+    <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="150" height="110" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="242" y="78" width="66" height="110" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="90" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="107" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="124" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="141" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="250" y="90" width="50" height="6" rx="3" fill="#db2777"/>
+    <rect x="250" y="107" width="50" height="6" rx="3" fill="#db2777"/>
+    <rect x="250" y="124" width="50" height="6" rx="3" fill="#db2777"/>
+</svg>

package/thumbnails/BookingsCalendar.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="BookingsCalendar">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#db2777"/>
+    <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="90" y="70" width="26" height="24" rx="4" fill="#db2777"/>
+    <rect x="120" y="70" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="150" y="70" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="180" y="70" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="210" y="70" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="240" y="70" width="26" height="24" rx="4" fill="#db2777"/>
+    <rect x="270" y="70" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="90" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="120" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="150" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="180" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="210" y="98" width="26" height="24" rx="4" fill="#db2777"/>
+    <rect x="240" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="270" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="90" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="120" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="150" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="180" y="126" width="26" height="24" rx="4" fill="#db2777"/>
+    <rect x="210" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="240" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="270" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="90" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="120" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="150" y="154" width="26" height="24" rx="4" fill="#db2777"/>
+    <rect x="180" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="210" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="240" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="270" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+</svg>

package/thumbnails/BookingsList.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="BookingsList">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#db2777"/>
+    <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="#db2777"/>
+    <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="#db2777"/>
+    <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="#db2777"/>
+    <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="#db2777"/>
+    <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="#db2777"/>
+    <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="#db2777"/>
+    <rect x="242" y="170" width="52" height="5" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/BookingsQuickCreateBooking.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="BookingsQuickCreateBooking">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#db2777"/>
+    <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="#e4e7ec"/>
+    <rect x="120" y="56" width="152" height="120" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="130" y="66" width="70" height="7" rx="3" fill="#db2777"/>
+    <rect x="130" y="86" width="132" height="14" rx="4" fill="#eef0f3"/>
+    <rect x="130" y="108" width="132" height="14" rx="4" fill="#eef0f3"/>
+    <rect x="130" y="130" width="132" height="14" rx="4" fill="#eef0f3"/>
+    <rect x="206" y="152" width="56" height="16" rx="4" fill="#db2777"/>
+</svg>

package/thumbnails/NewBookingWizard.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="NewBookingWizard">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#db2777"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="24" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <circle cx="100" cy="52" r="6" fill="#db2777"/>
+    <circle cx="160" cy="52" r="6" fill="#db2777"/>
+    <circle cx="220" cy="52" r="6" fill="#d5d9df"/>
+    <circle cx="280" cy="52" r="6" fill="#d5d9df"/>
+    <rect x="84" y="72" width="224" height="90" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="96" y="84" width="120" height="8" rx="3" fill="#9aa3b2"/>
+    <rect x="96" y="102" width="190" height="14" rx="4" fill="#eef0f3"/>
+    <rect x="96" y="126" width="190" height="14" rx="4" fill="#eef0f3"/>
+    <rect x="236" y="168" width="72" height="18" rx="4" fill="#db2777"/>
+</svg>

package/thumbnails/ResourcesList.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="ResourcesList">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#db2777"/>
+    <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="#db2777"/>
+    <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="#db2777"/>
+    <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="#db2777"/>
+    <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="#db2777"/>
+    <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="#db2777"/>
+    <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="#db2777"/>
+    <rect x="242" y="170" width="52" height="5" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/bookings.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="Bookings blueprint">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#db2777"/>
+    <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>