@cratis/scene.blueprint.approvals 0.0.0-stage → 4.53.1

package/screens/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 { Screen } from '@cratis/scene.model';
+import { LayoutName } from '@cratis/scene.blueprint.default';
+import { approvalsScreenDefinitions } from '../approvalsScreenSet';
+
+/**
+ * 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 (`approvalsNavigation`).
+ */
+export const approvalsScreens: Screen[] = approvalsScreenDefinitions.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 approvalsTemplateProvenance: 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.approvals' },
+    license: 'MIT',
+    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',
+};

package/templates/formTemplates.ts

@@ -0,0 +1,61 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DialogTemplate, ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { formScreenTemplate, quickCreateDialogTemplate } from '@cratis/scene.blueprint.default';
+import { ApprovalsQuery, fromQuery, localeOfData } from '../approvalsQueries';
+import { approvalsMetadata, closesDialog, component, withBehaviors } from '../approvalsParts';
+
+/** The request type editor: what a type asks for, how many steps approve it and who decides each. For administrators. */
+export const requestTypeEditFormTemplate: ScreenTemplate = {
+    name: 'RequestTypeEditForm',
+    fitsSlot: 'content',
+    slots: formScreenTemplate.slots,
+    arrangement: formScreenTemplate.arrangement,
+    content: {
+        header: [component('request-type-header', 'pageHeader', { title: 'Edit request type', subtitle: 'What it asks for and who approves it' })],
+        body: [component('request-type-body', 'formScreenBody', { mode: 'edit', sections: fromQuery(ApprovalsQuery.TypeEditorSections), errors: fromQuery(ApprovalsQuery.FormErrors, '0'), ...localeOfData })],
+        actions: [],
+    },
+    displayName: 'Edit request type',
+    description: 'A form that edits a request type: its name, what it asks for and its approval steps.',
+    metadata: approvalsMetadata('RequestTypeEditForm', 'Form', [TemplateScope.Feature, TemplateScope.Subfeature]),
+};
+
+/**
+ * The decision dialog (the foundation confirm dialog with a comment field): says which decision is being made - approve, reject or request changes -
+ * and asks for a comment that the requester will see. The commit verb is the decision's.
+ */
+export const decisionDialogTemplate: DialogTemplate = {
+    name: 'DecisionDialog',
+    slots: quickCreateDialogTemplate.slots,
+    content: {
+        header: [component('decision-frame', 'dialogFrame', { title: 'Your decision', subtitle: 'Say why - the requester will see it' })],
+        body: [withBehaviors(component('decision-form', 'formScreenBody', {
+            mode: 'create', saveAndNew: false, strings: { formSave: 'Decide' }, sections: fromQuery(ApprovalsQuery.DecisionSections), errors: fromQuery(ApprovalsQuery.FormErrors, '0'), ...localeOfData,
+        }), closesDialog())],
+        actions: [],
+    },
+    displayName: 'Decision',
+    description: 'A confirmation with a decision (approve, reject or request changes) and a comment for the requester.',
+    metadata: approvalsMetadata('DecisionDialog', 'Dialog', [TemplateScope.Slice]),
+};
+
+/** A short form that adds a request type to the list without leaving it. */
+export const requestTypeQuickCreateDialogTemplate: DialogTemplate = {
+    name: 'RequestTypeQuickCreate',
+    slots: quickCreateDialogTemplate.slots,
+    content: {
+        header: [component('request-type-frame', 'dialogFrame', { title: 'New request type', subtitle: 'Only what is needed to get started' })],
+        body: [withBehaviors(component('request-type-quick', 'formScreenBody', {
+            mode: 'create', saveAndNew: false, strings: { formSave: 'Create' }, sections: fromQuery(ApprovalsQuery.TypeEditorSections), errors: fromQuery(ApprovalsQuery.FormErrors, '0'), ...localeOfData,
+        }), closesDialog())],
+        actions: [],
+    },
+    displayName: 'New request type',
+    description: 'A short form that adds a request type without leaving the page.',
+    metadata: approvalsMetadata('RequestTypeQuickCreate', 'Dialog', [TemplateScope.Slice]),
+};
+
+/** The dialogs of the approvals application. */
+export const approvalsDialogTemplates: DialogTemplate[] = [decisionDialogTemplate, requestTypeQuickCreateDialogTemplate];

package/templates/index.ts

@@ -0,0 +1,19 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { requestTypeEditFormTemplate } from './formTemplates';
+import { allRequestsTemplate, approvalInboxTemplate, myRequestsTemplate, requestTypesTemplate } from './listTemplates';
+import { requestPageTemplate } from './recordTemplates';
+import { newRequestWizardTemplate } from './wizardTemplate';
+
+export * from './listTemplates';
+export * from './wizardTemplate';
+export * from './recordTemplates';
+export * from './formTemplates';
+
+/** Every screen template this blueprint provides, in the order the manifest lists them. */
+export const approvalsScreenTemplates = [
+    approvalInboxTemplate, myRequestsTemplate, newRequestWizardTemplate, requestPageTemplate, allRequestsTemplate, requestTypesTemplate, requestTypeEditFormTemplate,
+];
+
+export { approvalsDialogTemplates } from './formTemplates';

package/templates/listTemplates.ts

@@ -0,0 +1,116 @@
+// 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 { ApprovalsQuery, fromQuery, localeOfData } from '../approvalsQueries';
+import { actionButton, approvalsMetadata, component, goesTo, opensDialog, opensRecordOnSelect, withBehaviors } from '../approvalsParts';
+
+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;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    searchLabel: string;
+    urlKey: string;
+    rows: string;
+    columns: string;
+    filterFields: string;
+    views: string;
+    columnChoices?: string;
+    selection?: string;
+    rowActions: string[];
+    bulkActions?: string[];
+    recordScreen?: string;
+
+    /** The primary button of the header: its label and what it does. */
+    primary?: { label: string; behaviors: ReturnType<typeof goesTo> };
+
+    /** Draw the rows as cards with their actions as buttons, as an approver decides. */
+    decide?: boolean;
+}
+
+/**
+ * One approvals list: the foundation `ListScreen` with its header, toolbar, filters, list and bulk bar filled. 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 id = options.name;
+    const listId = `${id}-records`;
+    const list = component(listId, 'dataList', {
+        label: options.title, rows: fromQuery(options.rows), columns: fromQuery(options.columns), titleField: 'title', pageSize: options.decide ? 6 : 10, rowActions: options.rowActions, urlKey: options.urlKey,
+        ...(options.decide ? { variant: 'cards', rowActionStyle: 'buttons', toneField: 'tone' } : {}),
+        selectionMode: options.recordScreen || options.decide ? 'single' : 'multiple', ...localeOfData,
+    });
+    const toolbar = [
+        component(`${id}-search`, 'globalSearch', { placeholder: options.searchLabel, label: options.searchLabel, urlKey: `${options.urlKey}q` }),
+        component(`${id}-views`, 'savedViewsMenu', { views: fromQuery(options.views), savePermission: 'enabled', managePermission: 'enabled' }),
+        ...(options.columnChoices ? [component(`${id}-columns`, 'columnChooser', { columns: fromQuery(options.columnChoices) })] : []),
+    ];
+
+    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`), ...(options.primary ? [withBehaviors(actionButton(`${id}-primary`, options.primary.label, 'primary'), options.primary.behaviors)] : [])],
+            })],
+            toolbar,
+            filters: [component(`${id}-filter`, 'filterBuilder', { fields: fromQuery(options.filterFields), ...localeOfData })],
+            list: [options.recordScreen ? withBehaviors(list, opensRecordOnSelect(listId, options.recordScreen)) : options.decide ? withBehaviors(list, opensDialog('DecisionDialog')) : list],
+            bulkBar: options.bulkActions && options.selection && !options.recordScreen && !options.decide ? [component(`${id}-bulk`, 'bulkBar', { selection: fromQuery(options.selection), actions: options.bulkActions })] : [],
+            footer: [],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: approvalsMetadata(options.name, 'List', listScopes),
+    };
+}
+
+/**
+ * The approval inbox: the requests waiting for the signed-in person as cards (the foundation list's Cards variant), each with its type, who asked, the amount or
+ * dates, how long it has waited and **Approve, Reject and Request changes as buttons on the card**. Pressing one opens the decision dialog for that decision,
+ * so a decision always carries a comment. A card's tone says how overdue it is, and the words say the same.
+ */
+export const approvalInboxTemplate = listTemplateOf({
+    name: 'ApprovalInbox', displayName: 'Approval inbox', description: 'The requests waiting for my decision as cards, with Approve, Reject and Request changes inline.',
+    title: 'Inbox', subtitle: 'Waiting for your decision', searchLabel: 'Search the inbox', urlKey: 'inbox', rows: ApprovalsQuery.Inbox, columns: ApprovalsQuery.InboxColumns,
+    filterFields: ApprovalsQuery.InboxFilterFields, views: ApprovalsQuery.InboxViews, rowActions: ['Approve', 'Reject', 'Request changes'], decide: true,
+});
+
+/** The requests I made: draft, submitted, approved and rejected as chips, and a New request button that starts the wizard. Choosing a request opens it. */
+export const myRequestsTemplate = listTemplateOf({
+    name: 'MyRequests', displayName: 'My requests', description: 'The requests I made, with draft, submitted, approved and rejected as chips.',
+    title: 'My requests', subtitle: 'What I asked for and where it stands', searchLabel: 'Search my requests', urlKey: 'requests',
+    rows: ApprovalsQuery.MyRequests, columns: ApprovalsQuery.MyRequestColumns, filterFields: ApprovalsQuery.MyRequestFilterFields, views: ApprovalsQuery.MyRequestViews, columnChoices: ApprovalsQuery.MyRequestColumnChoices,
+    selection: ApprovalsQuery.MyRequestSelection, rowActions: ['Withdraw', 'Delete draft'], bulkActions: ['Withdraw'], recordScreen: 'approvals.requests.page', primary: { label: 'New request', behaviors: goesTo('approvals.requests.new') },
+});
+
+/** Every request of the organisation, with who asked, who decides and where each stands. */
+export const allRequestsTemplate = listTemplateOf({
+    name: 'AllRequests', displayName: 'All requests', description: 'Every request of the organisation with its type, requester, current approver and status.',
+    title: 'All requests', subtitle: 'Every request in the organisation', searchLabel: 'Search all requests', urlKey: 'all',
+    rows: ApprovalsQuery.AllRequests, columns: ApprovalsQuery.AllRequestColumns, filterFields: ApprovalsQuery.AllRequestFilterFields, views: ApprovalsQuery.AllRequestViews, columnChoices: ApprovalsQuery.AllRequestColumnChoices,
+    selection: ApprovalsQuery.AllRequestSelection, rowActions: ['Reassign', 'Cancel'], bulkActions: ['Reassign', 'Cancel'], recordScreen: 'approvals.requests.page',
+});
+
+/** The request types an organisation offers: what each asks for, how many steps approve it and whether it is active. For administrators. Choosing one edits it. */
+export const requestTypesTemplate = listTemplateOf({
+    name: 'RequestTypes', displayName: 'Request types', description: 'The request types an organisation offers, with the steps that approve each and whether it is active.',
+    title: 'Templates', subtitle: 'The request types people can choose from', searchLabel: 'Search request types', urlKey: 'types',
+    rows: ApprovalsQuery.RequestTypes, columns: ApprovalsQuery.RequestTypeColumns, filterFields: ApprovalsQuery.RequestTypeFilterFields, views: ApprovalsQuery.RequestTypeViews, columnChoices: ApprovalsQuery.RequestTypeColumnChoices,
+    selection: ApprovalsQuery.RequestTypeSelection, rowActions: ['Duplicate', 'Deactivate'], bulkActions: ['Deactivate'], recordScreen: 'approvals.templates.edit', primary: { label: 'New request type', behaviors: opensDialog('RequestTypeQuickCreate') },
+});

package/templates/recordTemplates.ts

@@ -0,0 +1,45 @@
+// 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 { ApprovalsQuery, currencyOfData, fromQuery, localeOfData } from '../approvalsQueries';
+import { actionButton, approvalsMetadata, component, opensDialog, withBehaviors } from '../approvalsParts';
+
+/**
+ * The request page: the foundation `RecordPage` with the request's title, its key facts under it - status, who asked, the amount - and the **approval chain**
+ * as the page's first block: the steps in order, who decides each and where it stands. A rejection stops the chain and the steps after it read "Not reached"; the
+ * outcome is said in words above the steps. The request's fields, its **attachments** and its **comments** (the page's activity) follow, and the decision
+ * buttons open the decision dialog.
+ */
+export const requestPageTemplate: ScreenTemplate = {
+    name: 'RequestPage',
+    fitsSlot: 'content',
+    slots: recordPageTemplate.slots,
+    arrangement: recordPageTemplate.arrangement,
+    content: {
+        header: [component('request-header', 'pageHeader', { title: fromQuery(ApprovalsQuery.Request, '0.title'), subtitle: fromQuery(ApprovalsQuery.Request, '0.reference') }, {
+            actions: [
+                withBehaviors(actionButton('request-approve', 'Approve', 'primary'), opensDialog('DecisionDialog')),
+                withBehaviors(actionButton('request-reject', 'Reject', 'secondary'), opensDialog('DecisionDialog')),
+                withBehaviors(actionButton('request-changes', 'Request changes', 'secondary'), opensDialog('DecisionDialog')),
+            ],
+        })],
+        summary: [
+            component('request-status', 'statusChip', { status: fromQuery(ApprovalsQuery.RequestSummary, '0.status'), tone: fromQuery(ApprovalsQuery.RequestSummary, '0.tone') }),
+            component('request-amount', 'statCard', { label: fromQuery(ApprovalsQuery.RequestSummary, '0.amountLabel'), value: fromQuery(ApprovalsQuery.RequestSummary, '0.amount'), format: 'currency', fractionDigits: 0, ...currencyOfData }),
+            component('request-people', 'avatarStack', { people: fromQuery(ApprovalsQuery.RequestSummary, '0.people') }),
+        ],
+        tabs: [component('request-tabs', 'tabSet', { tabs: fromQuery(ApprovalsQuery.RequestTabs), urlKey: 'tab', label: 'Request sections' })],
+        main: [
+            component('request-chain', 'approvalChainStepper', { steps: fromQuery(ApprovalsQuery.Chain), label: 'Approval chain', ...localeOfData }),
+            component('request-form', 'formScreenBody', { mode: 'readOnly', sections: fromQuery(ApprovalsQuery.RequestSections), values: fromQuery(ApprovalsQuery.Request, '0'), ...localeOfData }),
+        ],
+        related: [component('request-attachments', 'dataList', { label: 'Attachments', rows: fromQuery(ApprovalsQuery.Attachments), columns: fromQuery(ApprovalsQuery.AttachmentColumns), titleField: 'name', pageSize: 5, ...localeOfData })],
+        activity: [component('request-comments', 'activityFeed', { label: 'Comments', entries: fromQuery(ApprovalsQuery.Comments), ...localeOfData })],
+        aside: [],
+    },
+    displayName: 'Request page',
+    description: 'One request: summary, approval chain, fields, attachments and comments, and the decision buttons.',
+    metadata: approvalsMetadata('RequestPage', 'Detail', [TemplateScope.Feature, TemplateScope.Subfeature]),
+};

package/templates/wizardTemplate.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 } from '@cratis/scene.model';
+import { wizardScreenTemplate } from '@cratis/scene.blueprint.default';
+import { ApprovalsQuery, fromQuery, localeOfData } from '../approvalsQueries';
+import { approvalsMetadata, component } from '../approvalsParts';
+
+/**
+ * The new-request wizard (the foundation `WizardScreen`): **request type**, **details**, **attachments**, then **review and submit**. The type chooses what the
+ * details ask for; an invalid step blocks Next and says why; the step the person has reached and the steps they have done survive a refresh, and a refresh can
+ * never land past a step that was not done. Save draft keeps the request as a draft in My requests. The step's content is the slot named by its id.
+ */
+export const newRequestWizardTemplate: ScreenTemplate = {
+    name: 'NewRequestWizard',
+    fitsSlot: 'content',
+    slots: wizardScreenTemplate.slots,
+    arrangement: wizardScreenTemplate.arrangement,
+    content: {
+        header: [component('request-wizard-header', 'pageHeader', { title: 'New request', subtitle: 'Four short steps' })],
+        progress: [component('request-wizard-progress', 'wizardProgress', { steps: fromQuery(ApprovalsQuery.WizardSteps), urlKey: 'step' }, {
+            type: [component('request-wizard-type', 'formScreenBody', { mode: 'create', sections: fromQuery(ApprovalsQuery.TypeSections), errors: fromQuery(ApprovalsQuery.FormErrors, '0'), ...localeOfData })],
+            details: [component('request-wizard-details', 'formScreenBody', { mode: 'create', sections: fromQuery(ApprovalsQuery.DetailSections), errors: fromQuery(ApprovalsQuery.FormErrors, '0'), ...localeOfData })],
+            attachments: [component('request-wizard-attachments', 'fileUploader', { accept: '.pdf, .png, .jpg, .docx, .xlsx', maxSizeMb: 10, multiple: true, actionPermission: 'enabled' })],
+            review: [component('request-wizard-review', 'formScreenBody', { mode: 'readOnly', sections: fromQuery(ApprovalsQuery.ReviewSections), values: fromQuery(ApprovalsQuery.ReviewValues, '0'), ...localeOfData })],
+        })],
+        step: [],
+        actions: [],
+    },
+    displayName: 'New request',
+    description: 'Request type, details, attachments, then review and submit; the step survives a refresh and a draft can be saved.',
+    metadata: approvalsMetadata('NewRequestWizard', 'Wizard', [TemplateScope.Feature, TemplateScope.Subfeature]),
+};

package/thumbnails/AllRequests.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="All requests">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#4f46e5"/>
+    <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="#4f46e5"/>
+    <rect x="94" y="70" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="87" width="170" 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="170" 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="170" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/ApprovalInbox.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="Approval inbox">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#4f46e5"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="52" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="88" y="46" width="30" height="6" rx="3" fill="#4f46e5"/>
+    <rect x="88" y="60" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="88" y="100" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="141" y="40" width="52" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="145" y="46" width="30" height="6" rx="3" fill="#4f46e5"/>
+    <rect x="145" y="60" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="145" y="100" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="145" y="140" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="198" y="40" width="52" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="202" y="46" width="30" height="6" rx="3" fill="#4f46e5"/>
+    <rect x="202" y="60" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="202" y="100" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="255" y="40" width="52" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="259" y="46" width="30" height="6" rx="3" fill="#4f46e5"/>
+    <rect x="259" y="60" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="259" y="100" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="259" y="140" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+</svg>

package/thumbnails/DecisionDialog.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="Your decision">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#4f46e5"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="12" y="40" width="296" height="148" fill="#000000" fill-opacity="0.15"/>
+    <rect x="96" y="56" width="128" height="118" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="104" y="64" width="60" height="6" rx="3" fill="#4f46e5"/>
+    <rect x="104" y="82" width="112" height="18" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="104" y="106" width="112" height="18" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="170" y="148" width="46" height="16" rx="4" fill="#4f46e5"/>
+</svg>

package/thumbnails/MyRequests.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="My requests">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#4f46e5"/>
+    <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="#4f46e5"/>
+    <rect x="94" y="70" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="87" width="170" 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="170" 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="170" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/NewRequestWizard.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="New request">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#4f46e5"/>
+    <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="70" height="6" rx="3" fill="#4f46e5"/>
+    <rect x="94" y="64" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="200" y="64" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="98" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="200" y="98" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="132" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="200" y="132" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="240" y="166" width="58" height="16" rx="4" fill="#4f46e5"/>
+</svg>

package/thumbnails/RequestPage.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="Request page">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#4f46e5"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="28" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="76" width="70" height="46" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="160" y="76" width="70" height="46" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="236" y="76" width="72" height="46" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="130" width="150" height="58" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="240" y="130" width="68" height="58" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+</svg>

package/thumbnails/RequestTypeEditForm.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="Edit request type">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#4f46e5"/>
+    <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="70" height="6" rx="3" fill="#4f46e5"/>
+    <rect x="94" y="64" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="200" y="64" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="98" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="200" y="98" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="132" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="200" y="132" width="98" height="22" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="240" y="166" width="58" height="16" rx="4" fill="#4f46e5"/>
+</svg>

package/thumbnails/RequestTypeQuickCreate.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="New request type">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#4f46e5"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="12" y="40" width="296" height="148" fill="#000000" fill-opacity="0.15"/>
+    <rect x="96" y="56" width="128" height="118" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="104" y="64" width="60" height="6" rx="3" fill="#4f46e5"/>
+    <rect x="104" y="82" width="112" height="18" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="104" y="106" width="112" height="18" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="170" y="148" width="46" height="16" rx="4" fill="#4f46e5"/>
+</svg>

package/thumbnails/RequestTypes.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="Request types">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#4f46e5"/>
+    <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="#4f46e5"/>
+    <rect x="94" y="70" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="87" width="170" 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="170" 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="170" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/approvals.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="Approvals blueprint">
+    <rect width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#4f46e5"/>
+    <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="84" y="78" width="224" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="116" width="224" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="154" width="224" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+</svg>