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

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 { inventoryScreenDefinitions } from '../inventoryScreenSet';
+
+/**
+ * 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 (`inventoryNavigation`).
+ */
+export const inventoryScreens: Screen[] = inventoryScreenDefinitions.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 inventoryTemplateProvenance: 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.inventory' },
+    license: 'MIT',
+    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',
+};

package/templates/dashboardTemplate.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 { dashboardScreenTemplate } from '@cratis/scene.blueprint.default';
+import { InventoryEntityKind, InventoryQuery, currencyOfData, fromQuery, inventoryQueriesOf, localeOfData } from '../inventoryQueries';
+import { component, inventoryMetadata } from '../inventoryParts';
+
+/**
+ * The inventory dashboard (the foundation Dashboard, Operational variant): what is running low and what the stock is worth as key figures, the items
+ * that move most as a chart, the movements of the last days beneath, and the items to reorder beside them. Every region is its own component with its own
+ * loading, empty and error states, so one failed query leaves the others.
+ */
+export const inventoryDashboardTemplate: ScreenTemplate = {
+    name: 'InventoryDashboard',
+    fitsSlot: 'content',
+    slots: dashboardScreenTemplate.slots,
+    arrangement: dashboardScreenTemplate.arrangement,
+    content: {
+        header: [component('inventory-dashboard-header', 'pageHeader', { title: 'Inventory dashboard', subtitle: 'Stock levels and movements this week' })],
+        kpis: [
+            component('inventory-kpi-low', 'statCard', {
+                label: 'Low stock items', value: fromQuery(InventoryQuery.Kpis, '0.value'), change: fromQuery(InventoryQuery.Kpis, '0.change'), goodDirection: 'down', comparison: 'last week', ...localeOfData,
+            }),
+            component('inventory-kpi-value', 'statCard', {
+                label: 'Stock value', value: fromQuery(InventoryQuery.Kpis, '1.value'), change: fromQuery(InventoryQuery.Kpis, '1.change'), format: 'currency', fractionDigits: 0, comparison: 'last week', ...currencyOfData,
+            }),
+            component('inventory-kpi-movements', 'statCard', {
+                label: 'Movements this week', value: fromQuery(InventoryQuery.Kpis, '2.value'), change: fromQuery(InventoryQuery.Kpis, '2.change'), comparison: 'last week', ...localeOfData,
+            }),
+        ],
+        charts: [component('inventory-chart-movers', 'chartWrapper', {
+            title: 'Top movers', kind: 'bar', categories: fromQuery(InventoryQuery.TopMovers, '0.categories'), series: fromQuery(InventoryQuery.TopMovers, '0.series'), ...localeOfData,
+        })],
+        tables: [component('inventory-dashboard-movements', 'dataList', {
+            label: 'Recent movements', rows: fromQuery(InventoryQuery.RecentMovements), columns: fromQuery(inventoryQueriesOf(InventoryEntityKind.Movement).columns), titleField: 'item', pageSize: 5, ...localeOfData,
+        })],
+        aside: [component('inventory-dashboard-low', 'dataList', {
+            label: 'Reorder soon', rows: fromQuery(InventoryQuery.LowStock), columns: fromQuery(inventoryQueriesOf(InventoryEntityKind.Item).columns), titleField: 'name', toneField: 'tone', pageSize: 5, ...localeOfData,
+        })],
+    },
+    displayName: 'Inventory dashboard',
+    description: 'Low stock count, stock value, top movers, recent movements and the items to reorder.',
+    metadata: inventoryMetadata('InventoryDashboard', 'Dashboard', [TemplateScope.Module, TemplateScope.Feature]),
+};

package/templates/formTemplates.ts

@@ -0,0 +1,60 @@
+// 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 { InventoryQuery, currencyOfData, fromQuery, localeOfData } from '../inventoryQueries';
+import { closesDialog, component, inventoryMetadata, withBehaviors } from '../inventoryParts';
+
+/**
+ * Check in or out, made for a phone held in one hand beside a shelf: one column of large fields, the item first - scanned or searched for in the same field -
+ * then the direction, how many, who has it and when it is due back. The foundation `FormScreen` supplies the sections, validation, Save and the unsaved-changes
+ * guard; what is particular here is that nothing is arranged side by side.
+ */
+export const inventoryCheckInOutTemplate: ScreenTemplate = {
+    name: 'InventoryCheckInOut',
+    fitsSlot: 'content',
+    slots: formScreenTemplate.slots,
+    arrangement: formScreenTemplate.arrangement,
+    content: {
+        header: [component('InventoryCheckInOut-header', 'pageHeader', { title: 'Check in or out', subtitle: 'Scan or search for the item first' })],
+        body: [component('InventoryCheckInOut-body', 'formScreenBody', {
+            mode: 'create', saveAndNew: true, strings: { formSave: 'Record movement' }, sections: fromQuery('CheckInOutSections'), errors: fromQuery(InventoryQuery.FormErrors, '0'), ...currencyOfData,
+        })],
+        actions: [],
+    },
+    displayName: 'Inventory check in and out',
+    description: 'A mobile-first form to scan or search for an item and check it in or out, with who has it and when it is due back.',
+    metadata: inventoryMetadata('InventoryCheckInOut', 'Form', [TemplateScope.Feature, TemplateScope.Subfeature]),
+};
+
+/** The screen templates that are forms. */
+export const inventoryFormTemplates: ScreenTemplate[] = [inventoryCheckInOutTemplate];
+
+/**
+ * One quick-create dialog: the foundation `QuickCreateDialog` - a short form opened from a page to make one record without leaving it - with the fields
+ * that thing needs to get started.
+ */
+function quickCreateOf(name: string, title: string, subtitle: string, sections: string, noun: string, create: string): DialogTemplate {
+    return {
+        name,
+        slots: quickCreateDialogTemplate.slots,
+        content: {
+            header: [component(`${name}-frame`, 'dialogFrame', { title, subtitle })],
+            body: [withBehaviors(component(`${name}-form`, 'formScreenBody', {
+                mode: 'create', saveAndNew: false, strings: { formSave: create }, sections: fromQuery(sections), errors: fromQuery(InventoryQuery.FormErrors, '0'), ...localeOfData,
+            }), closesDialog())],
+            actions: [],
+        },
+        displayName: `Inventory quick create ${noun}`,
+        description: `A short form that ${noun === 'stock adjustment' ? 'adjusts the stock of one item' : `creates one ${noun}`} without leaving the page.`,
+        metadata: inventoryMetadata(name, 'Dialog', [TemplateScope.Slice]),
+    };
+}
+
+/** Adjust stock (an item, a quantity change and a reason), and the quick creation of an item and of a supplier. */
+export const inventoryQuickCreateDialogs: DialogTemplate[] = [
+    quickCreateOf('InventoryAdjustStock', 'Adjust stock', 'Count what is on the shelf and say why it changed', 'AdjustStockSections', 'stock adjustment', 'Adjust'),
+    quickCreateOf('InventoryQuickCreateItem', 'New item', 'Only what is needed to get started', 'ItemQuickSections', 'item', 'Create'),
+    quickCreateOf('InventoryQuickCreateSupplier', 'New supplier', 'Only what is needed to get started', 'SupplierQuickSections', 'supplier', 'Create'),
+];

package/templates/index.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { inventoryDashboardTemplate } from './dashboardTemplate';
+import { inventoryFormTemplates } from './formTemplates';
+import { inventoryItemGalleryTemplate, inventoryItemListTemplate, inventoryMovementListTemplate, inventorySupplierListTemplate } from './listTemplates';
+import { inventoryLocationsTemplate } from './locationsTemplate';
+import { inventoryItemPageTemplate } from './recordTemplates';
+
+export * from './dashboardTemplate';
+export * from './listTemplates';
+export * from './recordTemplates';
+export * from './locationsTemplate';
+export * from './formTemplates';
+
+/** Every screen template this blueprint provides, in the order the manifest lists them. */
+export const inventoryScreenTemplates = [
+    inventoryDashboardTemplate,
+    inventoryItemListTemplate, inventoryItemGalleryTemplate, inventoryItemPageTemplate,
+    inventoryLocationsTemplate,
+    inventoryMovementListTemplate, ...inventoryFormTemplates,
+    inventorySupplierListTemplate,
+];
+
+export { inventoryQuickCreateDialogs as inventoryDialogTemplates } from './formTemplates';

package/templates/listTemplates.ts

@@ -0,0 +1,109 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { InteractionActionKind, InteractionTriggerKind, NotificationLevel, NotifyAction, ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { listScreenTemplate } from '@cratis/scene.blueprint.default';
+import { InventoryEntityKind, fromQuery, inventoryQueriesOf, localeOfData } from '../inventoryQueries';
+import { actionButton, component, goesTo, inventoryMetadata, opensDialog, opensRecordOnSelect, withBehaviors } from '../inventoryParts';
+
+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: InventoryEntityKind;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    searchLabel: string;
+    urlKey: string;
+    /** The primary action of the header: a quick-create dialog to open, or a screen to go to. */
+    primary: { label: string; dialog?: string; screen?: string };
+    rowActions: string[];
+    bulkActions: string[];
+    titleField: string;
+    /** The screen a chosen row opens; the list then selects one row at a time. Absent, rows are selected many at a time for the bulk bar. */
+    recordScreen?: string;
+    /** Rows are not selectable at all: a record of what happened, which nobody edits. */
+    readOnly?: boolean;
+    /** Show the records as cards, each with the picture its `imageField` names. */
+    cards?: { imageField: string };
+    /** Tint a row by the tone in this field (always beside a status column that says the same in words). */
+    toneField?: string;
+}
+
+/**
+ * One Inventory 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 = inventoryQueriesOf(options.entity);
+    const id = options.name;
+    const listId = `${id}-records`;
+    const primary = withBehaviors(actionButton(`${id}-primary`, options.primary.label, 'primary'), options.primary.dialog ? opensDialog(options.primary.dialog) : goesTo(options.primary.screen!));
+    const list = component(listId, 'dataList', {
+        label: options.title, rows: fromQuery(queries.rows), columns: fromQuery(queries.columns), titleField: options.titleField, pageSize: options.cards ? 12 : 10, urlKey: options.urlKey, ...localeOfData,
+        rowActions: options.rowActions,
+        ...(options.readOnly ? {} : { selectionMode: options.recordScreen ? 'single' : 'multiple' }),
+        ...(options.cards ? { variant: 'cards', imageField: options.cards.imageField } : {}),
+        ...(options.toneField ? { toneField: options.toneField } : {}),
+    });
+
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: listScreenTemplate.slots,
+        arrangement: listScreenTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: options.title, subtitle: options.subtitle }, { actions: [exportAction(`${id}-export`), primary] })],
+            toolbar: [
+                component(`${id}-search`, 'globalSearch', { placeholder: options.searchLabel, label: options.searchLabel, urlKey: `${options.urlKey}q` }),
+                component(`${id}-views`, 'savedViewsMenu', { views: fromQuery(queries.views), savePermission: 'enabled', managePermission: 'enabled' }),
+                component(`${id}-columns`, 'columnChooser', { columns: fromQuery(queries.columnChoices) }),
+            ],
+            filters: [component(`${id}-filter`, 'filterBuilder', { fields: fromQuery(queries.filterFields), ...localeOfData })],
+            list: [options.recordScreen ? withBehaviors(list, opensRecordOnSelect(listId, options.recordScreen)) : list],
+            bulkBar: options.recordScreen || options.readOnly ? [] : [component(`${id}-bulk`, 'bulkBar', { selection: fromQuery(queries.selection), actions: options.bulkActions })],
+            footer: [],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: inventoryMetadata(options.name, 'List', listScopes),
+    };
+}
+
+/** The items: what is stored, how much of it and where. Items running low are tinted and say "Low stock" in their status. Choosing a row opens the item. */
+export const inventoryItemListTemplate = listTemplateOf({
+    name: 'InventoryItemList', entity: InventoryEntityKind.Item, displayName: 'Inventory items', description: 'Items with sku, category, location, quantity and status, low stock highlighted, filtered by category, location and status.',
+    title: 'Items', subtitle: 'Everything in stock, low stock highlighted', searchLabel: 'Search items', urlKey: 'items', primary: { label: 'New item', dialog: 'InventoryQuickCreateItem' },
+    rowActions: ['Adjust stock', 'Check out', 'Archive'], bulkActions: [], titleField: 'name', recordScreen: 'inventory.items.record', toneField: 'tone',
+});
+
+/** The items as a gallery: the same records as cards, each with its picture, for finding a thing by how it looks. */
+export const inventoryItemGalleryTemplate = listTemplateOf({
+    name: 'InventoryItemGallery', entity: InventoryEntityKind.Item, displayName: 'Inventory item gallery', description: 'Items as cards with a picture, sku, quantity and status, low stock highlighted.',
+    title: 'Item gallery', subtitle: 'Items by how they look', searchLabel: 'Search items', urlKey: 'gallery', primary: { label: 'New item', dialog: 'InventoryQuickCreateItem' },
+    rowActions: ['Adjust stock', 'Check out', 'Archive'], bulkActions: [], titleField: 'name', recordScreen: 'inventory.items.record', toneField: 'tone', cards: { imageField: 'photo' },
+});
+
+/** The movements: every time stock came in, went out, moved or was corrected, newest first. Nothing in it is edited. */
+export const inventoryMovementListTemplate = listTemplateOf({
+    name: 'InventoryMovementList', entity: InventoryEntityKind.Movement, displayName: 'Inventory movements', description: 'Check ins, check outs, transfers and adjustments with the item, quantity, location and who did it.',
+    title: 'Movements', subtitle: 'What came in, went out and moved', searchLabel: 'Search movements', urlKey: 'movements', primary: { label: 'Check in or out', screen: 'inventory.movements.check' },
+    rowActions: ['View item'], bulkActions: [], titleField: 'item', readOnly: true,
+});
+
+/** The suppliers: who items are bought from, how to reach them and how many items they supply. */
+export const inventorySupplierListTemplate = listTemplateOf({
+    name: 'InventorySupplierList', entity: InventoryEntityKind.Supplier, displayName: 'Inventory suppliers', description: 'Suppliers with their contact, the items they supply and their status.',
+    title: 'Suppliers', subtitle: 'Where the stock comes from', searchLabel: 'Search suppliers', urlKey: 'suppliers', primary: { label: 'New supplier', dialog: 'InventoryQuickCreateSupplier' },
+    rowActions: ['Edit', 'Deactivate'], bulkActions: ['Deactivate'], titleField: 'name',
+});

package/templates/locationsTemplate.ts

@@ -0,0 +1,36 @@
+// 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 { masterDetailScreenTemplate } from '@cratis/scene.blueprint.default';
+import { InventoryQuery, fromQuery, localeOfData } from '../inventoryQueries';
+import { actionButton, component, inventoryMetadata, opensDialog, withBehaviors } from '../inventoryParts';
+
+/**
+ * The locations: the foundation `MasterDetail` with the tree of locations - warehouse, aisle, shelf - on the left and, on the right, what is stored in the one
+ * chosen, or in everything beneath it. The tree keeps the chosen location in the address under the parameter the contents list searches by, and a
+ * location's id is its path, so the contents are every row whose location starts with it - and a link or a refresh restores the choice. On a phone the two become a navigation stack. It fills the shell's `content` slot itself
+ * rather than the module workspace's, so a module without a workspace can use it.
+ */
+export const inventoryLocationsTemplate: ScreenTemplate = {
+    name: 'InventoryLocations',
+    fitsSlot: 'content',
+    slots: masterDetailScreenTemplate.slots,
+    arrangement: masterDetailScreenTemplate.arrangement,
+    content: {
+        list: [component('inventory-locations-tree', 'orgTree', {
+            nodes: fromQuery(InventoryQuery.LocationNodes), expandedDepth: 2, urlKey: 'contentsq', strings: { orgTree: 'Locations', orgReports: '{count} locations beneath' }, ...localeOfData,
+        })],
+        details: [
+            component('inventory-locations-header', 'pageHeader', { title: 'Contents', subtitle: 'What is stored in the chosen location and beneath it' }, {
+                actions: [withBehaviors(actionButton('inventory-locations-adjust', 'Adjust stock', 'primary'), opensDialog('InventoryAdjustStock'))],
+            }),
+            component('inventory-locations-contents', 'dataList', {
+                label: 'Location contents', rows: fromQuery(InventoryQuery.LocationContents), columns: fromQuery(InventoryQuery.LocationContentColumns), titleField: 'name', pageSize: 10, toneField: 'tone', urlKey: 'contents', ...localeOfData,
+            }),
+        ],
+    },
+    displayName: 'Inventory locations',
+    description: 'The tree of locations beside what is stored in the chosen location.',
+    metadata: inventoryMetadata('InventoryLocations', 'Workspace', [TemplateScope.Module, TemplateScope.Feature]),
+};

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 { InventoryEntityKind, InventoryQuery, currencyOfData, fromQuery, inventoryQueriesOf, localeOfData } from '../inventoryQueries';
+import { actionButton, component, goesTo, inventoryMetadata, opensDialog, withBehaviors } from '../inventoryParts';
+
+const queries = inventoryQueriesOf(InventoryEntityKind.Item);
+
+/**
+ * The item page: the foundation `RecordPage` with the item's name as its title, Adjust stock and Check out as its actions, its key facts under it, the record's
+ * fields with the supplier's details, the stock of the item in each location and its movement history as related lists, and the cycle counts to do beside it.
+ */
+export const inventoryItemPageTemplate: ScreenTemplate = {
+    name: 'InventoryItemPage',
+    fitsSlot: 'content',
+    slots: recordPageTemplate.slots,
+    arrangement: recordPageTemplate.arrangement,
+    content: {
+        header: [component('InventoryItemPage-header', 'pageHeader', { title: fromQuery(queries.record, '0.name'), subtitle: 'Item' }, {
+            actions: [
+                withBehaviors(actionButton('InventoryItemPage-check', 'Check out', 'secondary'), goesTo('inventory.movements.check')),
+                withBehaviors(actionButton('InventoryItemPage-adjust', 'Adjust stock', 'primary'), opensDialog('InventoryAdjustStock')),
+            ],
+        })],
+        summary: [
+            component('InventoryItemPage-status', 'statusChip', { status: fromQuery(queries.summary, '0.status'), tone: fromQuery(queries.summary, '0.tone') }),
+            component('InventoryItemPage-onhand', 'statCard', { label: 'On hand', value: fromQuery(queries.summary, '0.onHand'), ...localeOfData }),
+            component('InventoryItemPage-reorder', 'statCard', { label: 'Reorder level', value: fromQuery(queries.summary, '0.reorderLevel'), ...localeOfData }),
+            component('InventoryItemPage-value', 'statCard', { label: 'Stock value', value: fromQuery(queries.summary, '0.stockValue'), format: 'currency', fractionDigits: 0, ...currencyOfData }),
+        ],
+        tabs: [component('InventoryItemPage-tabs', 'tabSet', { tabs: fromQuery(InventoryQuery.RecordTabs), urlKey: 'tab', label: 'Item sections' })],
+        main: [component('InventoryItemPage-form', 'formScreenBody', { mode: 'readOnly', sections: fromQuery(queries.sections), values: fromQuery(queries.record, '0'), ...localeOfData })],
+        related: [
+            component('InventoryItemPage-stock', 'dataList', { label: 'Stock by location', rows: fromQuery(queries.stockByLocation), columns: fromQuery('StockByLocationColumns'), titleField: 'location', pageSize: 5, ...localeOfData }),
+            component('InventoryItemPage-movements', 'dataList', { label: 'Movement history', rows: fromQuery(queries.movements), columns: fromQuery(inventoryQueriesOf(InventoryEntityKind.Movement).columns), titleField: 'item', pageSize: 5, ...localeOfData }),
+        ],
+        activity: [component('InventoryItemPage-activity', 'activityFeed', { label: 'Activity', entries: fromQuery(queries.activity), ...localeOfData })],
+        aside: [component('InventoryItemPage-tasks', 'checklistSection', { label: 'Cycle counts', sections: fromQuery(queries.tasks), ...localeOfData })],
+    },
+    displayName: 'Inventory item page',
+    description: 'One item: key facts, its fields and supplier, its stock by location and its movement history.',
+    metadata: inventoryMetadata('InventoryItemPage', 'Detail', [TemplateScope.Feature, TemplateScope.Subfeature]),
+};

package/thumbnails/InventoryAdjustStock.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="Inventory adjust stock">
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <rect x="184" y="140" width="54" height="20" rx="4" fill="#d5d9df"/>
+</svg>

package/thumbnails/InventoryCheckInOut.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="Inventory check in and out">
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <rect x="94" y="66" width="98" height="24" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="60" width="30" height="4" rx="2" fill="#9aa3b2"/>
+    <rect x="202" y="66" width="98" height="24" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="202" y="60" width="30" height="4" rx="2" fill="#9aa3b2"/>
+    <rect x="94" y="102" width="98" height="24" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="96" width="30" height="4" rx="2" fill="#9aa3b2"/>
+    <rect x="202" y="102" width="98" height="24" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="202" y="96" width="30" height="4" rx="2" fill="#9aa3b2"/>
+    <rect x="94" y="160" width="50" height="20" rx="4" fill="#0f766e"/>
+    <rect x="150" y="160" width="50" height="20" rx="4" fill="#d5d9df"/>
+</svg>

package/thumbnails/InventoryDashboard.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="Inventory dashboard">
+    <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="#0f766e"/>
+    <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="108" height="52" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="200" y="78" width="108" height="52" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="138" width="224" height="50" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="92" y="108" width="12" height="18" rx="2" fill="#0f766e"/>
+    <rect x="110" y="100" width="12" height="26" rx="2" fill="#0f766e"/>
+    <rect x="128" y="92" width="12" height="34" rx="2" fill="#0f766e"/>
+</svg>

package/thumbnails/InventoryItemGallery.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="Inventory item gallery">
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <rect x="242" y="170" width="52" height="5" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/InventoryItemList.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="Inventory items">
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <rect x="94" y="70" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="87" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="104" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="121" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="138" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="155" width="168" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/InventoryItemPage.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="Inventory item page">
+    <rect x="0" y="0" width="320" height="200" rx="8" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#0f766e"/>
+    <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/InventoryLocations.svg

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

package/thumbnails/InventoryMovementList.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="Inventory movements">
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <rect x="94" y="70" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="87" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="104" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="121" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="138" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="155" width="168" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/InventoryQuickCreateItem.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="Inventory quick create item">
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <rect x="184" y="140" width="54" height="20" rx="4" fill="#d5d9df"/>
+</svg>

package/thumbnails/InventoryQuickCreateSupplier.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="Inventory quick create supplier">
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <rect x="184" y="140" width="54" height="20" rx="4" fill="#d5d9df"/>
+</svg>

package/thumbnails/InventorySupplierList.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="Inventory suppliers">
+    <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="#0f766e"/>
+    <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="#0f766e"/>
+    <rect x="94" y="70" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="87" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="104" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="121" width="168" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="138" width="206" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="155" width="168" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/inventory.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="Inventory and Assets 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="#0f766e"/>
+    <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>