@cratis/scene.blueprint.orders 0.0.0-stage → 4.59.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 { ordersScreenDefinitions } from '../ordersScreenSet';
+
+/**
+ * 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 (`ordersNavigation`).
+ */
+export const ordersScreens: Screen[] = ordersScreenDefinitions.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 ordersTemplateProvenance: 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.orders' },
+    license: 'MIT',
+    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',
+};

package/templates/boardTemplate.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 { ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { boardScreenTemplate } from '@cratis/scene.blueprint.default';
+import { OrdersEntityKind, OrdersQuery, fromQuery, localeOfData, ordersQueriesOf } from '../ordersQueries';
+import { actionButton, component, opensDialog, ordersMetadata, withBehaviors } from '../ordersParts';
+
+/**
+ * The fulfilment board: the foundation `BoardScreen` with a column for each step an order goes through - new, picking, shipped, delivered - and a card for each
+ * order with its customer, delivery date and channel. An order moves to the next step by dragging or by its own Move-to menu, and the columns say in words when
+ * a limit is exceeded.
+ */
+export const fulfilmentBoardTemplate: ScreenTemplate = {
+    name: 'OrdersFulfilmentBoard',
+    fitsSlot: 'content',
+    slots: boardScreenTemplate.slots,
+    arrangement: boardScreenTemplate.arrangement,
+    content: {
+        header: [component('OrdersFulfilmentBoard-header', 'pageHeader', { title: 'Fulfilment', subtitle: 'Drag an order to its next step' }, {
+            actions: [withBehaviors(actionButton('OrdersFulfilmentBoard-new', 'New order', 'primary'), opensDialog('OrdersQuickCreateOrder'))],
+        })],
+        toolbar: [
+            component('OrdersFulfilmentBoard-search', 'globalSearch', { placeholder: 'Search the board', label: 'Search the board' }),
+            component('OrdersFulfilmentBoard-views', 'savedViewsMenu', { views: fromQuery(ordersQueriesOf(OrdersEntityKind.Order).views), savePermission: 'enabled', managePermission: 'enabled' }),
+        ],
+        board: [component('OrdersFulfilmentBoard-columns', 'kanbanBoard', {
+            columns: fromQuery(OrdersQuery.FulfilmentColumns), cards: fromQuery(OrdersQuery.FulfilmentCards), editPermission: 'enabled', label: 'Orders by fulfilment step', ...localeOfData,
+        })],
+    },
+    displayName: 'Orders fulfilment board',
+    description: 'Orders as cards in a column for each fulfilment step, moved by dragging or by menu.',
+    metadata: ordersMetadata('OrdersFulfilmentBoard', 'Board', [TemplateScope.Module, TemplateScope.Feature]),
+};

package/templates/deliveryTemplate.ts

@@ -0,0 +1,31 @@
+// 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 { OrdersQuery, fromQuery, localeOfData } from '../ordersQueries';
+import { actionButton, component, goesTo, ordersMetadata, withBehaviors } from '../ordersParts';
+
+/**
+ * The delivery calendar: the day each open order is due to arrive, on a month, a week or as an agenda (the foundation's `calendarGrid`). The status is told in
+ * words as well as by color, the day and view are kept in the address, and the list beside it names every order due in the period.
+ */
+export const deliveryCalendarTemplate: ScreenTemplate = {
+    name: 'OrdersDeliveryCalendar',
+    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('OrdersDeliveryCalendar-header', 'pageHeader', { title: 'Deliveries', subtitle: 'When each order is due to arrive' }, {
+            actions: [withBehaviors(actionButton('OrdersDeliveryCalendar-orders', 'Open the orders', 'secondary'), goesTo('orders.list'))],
+        })],
+        calendar: [component('OrdersDeliveryCalendar-grid', 'calendarGrid', { label: 'Deliveries', events: fromQuery(OrdersQuery.DeliveryEvents), date: fromQuery(OrdersQuery.Settings, '0.today'), urlKey: 'day', ...localeOfData })],
+        due: [component('OrdersDeliveryCalendar-due', 'dataList', { label: 'Due in this period', rows: fromQuery(OrdersQuery.DeliveryEvents), columns: fromQuery(OrdersQuery.DeliveryColumns), titleField: 'title', pageSize: 6, ...localeOfData })],
+    },
+    displayName: 'Orders delivery calendar',
+    description: 'The day each open order is due to arrive, on a month, a week or as an agenda.',
+    metadata: ordersMetadata('OrdersDeliveryCalendar', 'Calendar', [TemplateScope.Module, TemplateScope.Feature]),
+};

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 { OrdersQuery, fromQuery, localeOfData } from '../ordersQueries';
+import { closesDialog, component, ordersMetadata, withBehaviors } from '../ordersParts';
+
+/**
+ * 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): 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: 'Create' }, sections: fromQuery(sections), errors: fromQuery(OrdersQuery.FormErrors, '0'), ...localeOfData,
+            }), closesDialog())],
+            actions: [],
+        },
+        displayName: `Orders quick create ${noun}`,
+        description: `A short form that creates one ${noun} without leaving the page.`,
+        metadata: ordersMetadata(name, 'Dialog', [TemplateScope.Slice]),
+    };
+}
+
+/** The quick creation of an order. */
+export const ordersDialogs: DialogTemplate[] = [
+    quickCreateOf('OrdersQuickCreateOrder', 'New order', 'OrderQuickSections', 'order'),
+];

package/templates/index.ts

@@ -0,0 +1,15 @@
+import { fulfilmentBoardTemplate } from './boardTemplate';
+import { deliveryCalendarTemplate } from './deliveryTemplate';
+import { ordersListTemplate } from './listTemplates';
+import { orderPageTemplate } from './recordTemplates';
+
+export * from './listTemplates';
+export * from './recordTemplates';
+export * from './boardTemplate';
+export * from './deliveryTemplate';
+export * from './formTemplates';
+
+/** Every screen template this blueprint provides, in the order the manifest lists them. */
+export const ordersScreenTemplates = [ordersListTemplate, orderPageTemplate, fulfilmentBoardTemplate, deliveryCalendarTemplate];
+
+export { ordersDialogs as ordersDialogTemplates } from './formTemplates';

package/templates/listTemplates.ts

@@ -0,0 +1,93 @@
+// 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 { OrdersEntityKind, fromQuery, ordersQueriesOf, localeOfData } from '../ordersQueries';
+import { actionButton, component, goesTo, ordersMetadata, opensDialog, opensRecordOnSelect, withBehaviors } from '../ordersParts';
+
+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: OrdersEntityKind;
+    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 orders 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 = ordersQueriesOf(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)) : 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: ordersMetadata(options.name, 'List', listScopes),
+    };
+}
+
+/** The orders: every order with its customer, dates, total and status, filtered by customer, status and channel. Choosing an order opens it. */
+export const ordersListTemplate = listTemplateOf({
+    name: 'OrdersList', entity: OrdersEntityKind.Order, displayName: 'Orders list', description: 'Every order with customer, placed and delivery dates, total and status, filtered by customer, status, channel and date.',
+    title: 'Orders', subtitle: 'Everything customers have ordered', searchLabel: 'Search orders', urlKey: 'orders', primary: { label: 'New order', dialog: 'OrdersQuickCreateOrder' },
+    rowActions: ['Open', 'Cancel order'], bulkActions: [], titleField: 'number', recordScreen: 'orders.record',
+});

package/templates/recordTemplates.ts

@@ -0,0 +1,43 @@
+// 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 { OrdersEntityKind, OrdersQuery, fromQuery, localeOfData, ordersQueriesOf, currencyOfData } from '../ordersQueries';
+import { actionButton, component, goesTo, ordersMetadata, withBehaviors } from '../ordersParts';
+
+const order = ordersQueriesOf(OrdersEntityKind.Order);
+
+/**
+ * The order page: the foundation `RecordPage` with the order number as its title, its status, total and days to delivery as key facts, the order's fields, its
+ * lines and shipments in the main region, and the activity beside it.
+ */
+export const orderPageTemplate: ScreenTemplate = {
+    name: 'OrderPage',
+    fitsSlot: 'content',
+    slots: recordPageTemplate.slots,
+    arrangement: recordPageTemplate.arrangement,
+    content: {
+        header: [component('OrderPage-header', 'pageHeader', { title: fromQuery(order.record, '0.number'), subtitle: fromQuery(order.record, '0.summary') }, {
+            actions: [withBehaviors(actionButton('OrderPage-back', 'Back to orders', 'secondary'), goesTo('orders.list'))],
+        })],
+        summary: [
+            component('OrderPage-status', 'statusChip', { status: fromQuery(order.summary, '0.status'), tone: fromQuery(order.summary, '0.tone') }),
+            component('OrderPage-total', 'statCard', { label: 'Order total', value: fromQuery(order.summary, '0.total'), format: 'currency', ...currencyOfData }),
+            component('OrderPage-items', 'statCard', { label: 'Items', value: fromQuery(order.summary, '0.items'), ...localeOfData }),
+            component('OrderPage-days', 'statCard', { label: 'Days to delivery', value: fromQuery(order.summary, '0.daysToDelivery'), ...localeOfData }),
+        ],
+        tabs: [component('OrderPage-tabs', 'tabSet', { tabs: fromQuery(OrdersQuery.RecordTabs), urlKey: 'tab', label: 'Order sections' })],
+        main: [
+            component('OrderPage-form', 'formScreenBody', { mode: 'readOnly', sections: fromQuery(order.sections), values: fromQuery(order.record, '0'), ...currencyOfData }),
+            component('OrderPage-lines', 'dataList', { label: 'Order lines', rows: fromQuery(OrdersQuery.Lines), columns: fromQuery(OrdersQuery.LineColumns), titleField: 'name', pageSize: 8, ...currencyOfData }),
+            component('OrderPage-shipments', 'dataList', { label: 'Shipments', rows: fromQuery(OrdersQuery.Shipments), columns: fromQuery(OrdersQuery.ShipmentColumns), titleField: 'reference', ...localeOfData }),
+        ],
+        related: [],
+        activity: [component('OrderPage-activity', 'activityFeed', { label: 'Activity', entries: fromQuery(order.activity), ...localeOfData })],
+        aside: [],
+    },
+    displayName: 'Order page',
+    description: 'One order: key facts, its lines and shipments, and its activity.',
+    metadata: ordersMetadata('OrderPage', 'Detail', [TemplateScope.Feature, TemplateScope.Subfeature]),
+};

package/thumbnails/OrderPage.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="OrderPage">
+    <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="#ea580c"/>
+    <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/OrdersDeliveryCalendar.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="OrdersDeliveryCalendar">
+    <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>

package/thumbnails/OrdersFulfilmentBoard.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="OrdersFulfilmentBoard">
+    <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="#ea580c"/>
+    <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="#ea580c"/>
+    <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="88" y="140" 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="#ea580c"/>
+    <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="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="#ea580c"/>
+    <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="202" y="140" 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="#ea580c"/>
+    <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"/>
+</svg>

package/thumbnails/OrdersList.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="OrdersList">
+    <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="#ea580c"/>
+    <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="#ea580c"/>
+    <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="#ea580c"/>
+    <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="#ea580c"/>
+    <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="#ea580c"/>
+    <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="#ea580c"/>
+    <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="#ea580c"/>
+    <rect x="242" y="170" width="52" height="5" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/OrdersQuickCreateOrder.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="OrdersQuickCreateOrder">
+    <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="#ea580c"/>
+    <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="#ea580c"/>
+    <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="#ea580c"/>
+    <rect x="184" y="140" width="54" height="20" rx="4" fill="#d5d9df"/>
+</svg>

package/thumbnails/orders.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="Orders 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="#ea580c"/>
+    <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>