@cratis/scene.blueprint.contracts 0.0.0-stage → 4.78.3

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 { contractsScreenDefinitions } from '../contractsScreenSet';
+
+/**
+ * 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 (`contractsNavigation`).
+ */
+export const contractsScreens: Screen[] = contractsScreenDefinitions.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 contractsTemplateProvenance: 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.contracts' },
+    license: 'MIT',
+    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',
+};

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 { ContractsQuery, fromQuery, localeOfData } from '../contractsQueries';
+import { closesDialog, component, contractsMetadata, withBehaviors } from '../contractsParts';
+
+/**
+ * One quick-create dialog: the foundation `QuickCreateDialog` - a short form opened from a page to make one record without leaving it - with the fields
+ * that thing needs to get started.
+ */
+function quickCreateOf(name: string, title: string, sections: string, noun: string, submit: string): DialogTemplate {
+    return {
+        name,
+        slots: quickCreateDialogTemplate.slots,
+        content: {
+            header: [component(`${name}-frame`, 'dialogFrame', { title, subtitle: 'Only what is needed to get started' })],
+            body: [withBehaviors(component(`${name}-form`, 'formScreenBody', {
+                mode: 'create', saveAndNew: false, strings: { formSave: submit }, sections: fromQuery(sections), errors: fromQuery(ContractsQuery.FormErrors, '0'), ...localeOfData,
+            }), closesDialog())],
+            actions: [],
+        },
+        displayName: `Contracts quick create ${noun}`,
+        description: `A short form that creates one ${noun} without leaving the page.`,
+        metadata: contractsMetadata(name, 'Dialog', [TemplateScope.Slice]),
+    };
+}
+
+/** The quick dialogs of the blueprint. */
+export const contractsDialogs: DialogTemplate[] = [
+    quickCreateOf('ContractsQuickCreateContract', 'New contract', 'ContractQuickSections', 'contract', 'Create'),
+];

package/templates/inboxTemplate.ts

@@ -0,0 +1,24 @@
+// 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 { inboxScreenTemplate } from '@cratis/scene.blueprint.default';
+import { ContractsQuery, fromQuery, localeOfData } from '../contractsQueries';
+import { contractsMetadata, component } from '../contractsParts';
+
+/** The review inbox: the contracts that need a review, a signature or a renewal decision, the open message beside them and its history beneath. */
+export const contractsReviewTemplate: ScreenTemplate = {
+    name: 'ContractsReview',
+    fitsSlot: 'content',
+    slots: inboxScreenTemplate.slots,
+    arrangement: inboxScreenTemplate.arrangement,
+    content: {
+        header: [component('ContractsReview-header', 'pageHeader', { title: 'Needs attention', subtitle: 'Review, sign or renew' })],
+        queue: [component('ContractsReview-queue', 'inboxList', { label: 'Needs attention', messages: fromQuery(ContractsQuery.ContractMessages), urlKey: 'msg', ...localeOfData })],
+        message: [component('ContractsReview-message', 'formScreenBody', { mode: 'readOnly', sections: fromQuery(ContractsQuery.ContractMessageSections), values: fromQuery(ContractsQuery.ContractMessageValues, '0'), ...localeOfData })],
+        history: [component('ContractsReview-history', 'activityFeed', { label: 'History', entries: fromQuery(ContractsQuery.ContractMessageHistory), ...localeOfData })],
+    },
+    displayName: 'Contracts review inbox',
+    description: 'What needs review, signature or a renewal decision: the queue grouped by day with unread told in words, the open message and its history.',
+    metadata: contractsMetadata('ContractsReview', 'Inbox', [TemplateScope.Module, TemplateScope.Feature]),
+};

package/templates/index.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { contractsListTemplate } from './listTemplates';
+import { contractPageTemplate } from './recordTemplates';
+import { contractsTimelineTemplate } from './timelineTemplate';
+import { contractsReviewTemplate } from './inboxTemplate';
+
+export * from './listTemplates';
+export * from './recordTemplates';
+export * from './timelineTemplate';
+export * from './inboxTemplate';
+export * from './formTemplates';
+
+/** Every screen template this blueprint provides, in the order the manifest lists them. */
+export const contractsScreenTemplates = [contractsListTemplate, contractPageTemplate, contractsTimelineTemplate, contractsReviewTemplate];
+
+export { contractsDialogs as contractsDialogTemplates } from './formTemplates';

package/templates/listTemplates.ts

@@ -0,0 +1,96 @@
+// 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 { ContractsEntityKind, fromQuery, contractsQueriesOf, localeOfData } from '../contractsQueries';
+import { actionButton, component, goesTo, contractsMetadata, opensDialog, opensDialogOnSelect, opensRecordOnSelect, withBehaviors } from '../contractsParts';
+
+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: ContractsEntityKind;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    searchLabel: string;
+    urlKey: string;
+    /** The primary action of the header: a quick-create dialog to open, or a screen to go to. */
+    primary: { label: string; dialog?: string; screen?: string };
+    rowActions: string[];
+    bulkActions: string[];
+    titleField: string;
+    /** The screen a chosen row opens; the list then selects one row at a time. Absent, rows are selected many at a time for the bulk bar. */
+    recordScreen?: string;
+    /** The side sheet a chosen row opens instead of a record page; the list then selects one row at a time. */
+    recordDialog?: string;
+    /** Group the rows (`variant: grouped`) by this field. */
+    grouped?: { groupBy: string };
+    /** Rows are not selectable at all: a record of what happened, which nobody edits. */
+    readOnly?: boolean;
+    /** Show the records as cards, each with the picture its `imageField` names. */
+    cards?: { imageField?: string };
+    /** Tint a row by the tone in this field (always beside a status column that says the same in words). */
+    toneField?: string;
+}
+
+/**
+ * One list: the foundation `ListScreen` with its header, toolbar, filters, list and bulk bar filled for an entity. The slots, arrangement and
+ * every behavior - sort, search, paging and selection in the address, the table collapsing to cards on a phone - are the foundation's.
+ */
+function listTemplateOf(options: ListOptions): ScreenTemplate {
+    const queries = contractsQueriesOf(options.entity);
+    const id = options.name;
+    const listId = `${id}-records`;
+    const primary = withBehaviors(actionButton(`${id}-primary`, options.primary.label, 'primary'), options.primary.dialog ? opensDialog(options.primary.dialog) : goesTo(options.primary.screen!));
+    const list = component(listId, 'dataList', {
+        label: options.title, rows: fromQuery(queries.rows), columns: fromQuery(queries.columns), titleField: options.titleField, pageSize: options.cards ? 12 : 10, urlKey: options.urlKey, ...localeOfData,
+        rowActions: options.rowActions,
+        ...(options.readOnly ? {} : { selectionMode: options.recordScreen || options.recordDialog ? 'single' : 'multiple' }),
+        ...(options.cards ? { variant: 'cards', ...(options.cards.imageField ? { imageField: options.cards.imageField } : {}) } : {}),
+        ...(options.grouped ? { variant: 'grouped', groupBy: options.grouped.groupBy } : {}),
+        ...(options.toneField ? { toneField: options.toneField } : {}),
+    });
+
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: listScreenTemplate.slots,
+        arrangement: listScreenTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: options.title, subtitle: options.subtitle }, { actions: [exportAction(`${id}-export`), primary] })],
+            toolbar: [
+                component(`${id}-search`, 'globalSearch', { placeholder: options.searchLabel, label: options.searchLabel, urlKey: `${options.urlKey}q` }),
+                component(`${id}-views`, 'savedViewsMenu', { views: fromQuery(queries.views), savePermission: 'enabled', managePermission: 'enabled' }),
+                component(`${id}-columns`, 'columnChooser', { columns: fromQuery(queries.columnChoices) }),
+            ],
+            filters: [component(`${id}-filter`, 'filterBuilder', { fields: fromQuery(queries.filterFields), ...localeOfData })],
+            list: [options.recordScreen ? withBehaviors(list, opensRecordOnSelect(listId, options.recordScreen)) : options.recordDialog ? withBehaviors(list, opensDialogOnSelect(options.recordDialog)) : list],
+            bulkBar: options.recordScreen || options.recordDialog || options.readOnly ? [] : [component(`${id}-bulk`, 'bulkBar', { selection: fromQuery(queries.selection), actions: options.bulkActions })],
+            footer: [],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: contractsMetadata(options.name, 'List', listScopes),
+    };
+}
+
+
+/** The contracts: every contract with its counterparty, type, end date, value and status. Choosing a contract opens it. */
+export const contractsListTemplate = listTemplateOf({
+    name: 'ContractsList',
+    entity: ContractsEntityKind.Contract, displayName: 'Contracts list', description: 'Every contract with its counterparty, type, end date, value and status, filtered by status, type, owner and date.', title: 'Contracts', subtitle: 'Every agreement you are bound by', searchLabel: 'Search contracts', urlKey: 'contracts',
+    primary: { label: 'New contract', dialog: 'ContractsQuickCreateContract' },
+    rowActions: ['Open', 'Start renewal'], bulkActions: [],
+    titleField: 'title', recordScreen: 'contracts.record'
+});

package/templates/recordTemplates.ts

@@ -0,0 +1,78 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { recordPageTemplate } from '@cratis/scene.blueprint.default';
+import { ContractsEntityKind, currencyOfData, fromQuery, localeOfData, contractsQueriesOf } from '../contractsQueries';
+import { actionButton, component, goesTo, contractsMetadata, opensDialog, withBehaviors } from '../contractsParts';
+
+interface Fact { id: string; label: string; field: string; format?: 'currency' | 'percent' }
+interface Extra { key: string; label: string; titleField: string; pageSize?: number }
+interface Action { id: string; label: string; emphasis: 'primary' | 'secondary' | 'quiet' | 'danger'; dialog?: string; screen?: string }
+
+interface RecordOptions {
+    name: string;
+    entity: ContractsEntityKind;
+    displayName: string;
+    description: string;
+    titleField: string;
+    backScreen: string;
+    backLabel: string;
+    facts: Fact[];
+    extras: Extra[];
+    actions: Action[];
+}
+
+/**
+ * One record page: the foundation `RecordPage` with the record's own title, its status and key facts at the top, its fields and the lists that belong to it in the
+ * main region, and the activity beside it. What it shows is the record the list handed it the id of.
+ */
+function recordPageOf(options: RecordOptions): ScreenTemplate {
+    const queries = contractsQueriesOf(options.entity);
+    const id = options.name;
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: recordPageTemplate.slots,
+        arrangement: recordPageTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: fromQuery(queries.record, `0.${options.titleField}`), subtitle: fromQuery(queries.record, '0.summary') }, {
+                actions: [
+                    withBehaviors(actionButton(`${id}-back`, options.backLabel, 'secondary'), goesTo(options.backScreen)),
+                    ...options.actions.map(action => withBehaviors(actionButton(`${id}-${action.id}`, action.label, action.emphasis), action.dialog ? opensDialog(action.dialog) : goesTo(action.screen!))),
+                ],
+            })],
+            summary: [
+                component(`${id}-status`, 'statusChip', { status: fromQuery(queries.summary, '0.status'), tone: fromQuery(queries.summary, '0.tone') }),
+                ...options.facts.map(fact => component(`${id}-${fact.id}`, 'statCard', {
+                    label: fact.label, value: fromQuery(queries.summary, `0.${fact.field}`), ...(fact.format ? { format: fact.format } : {}), ...currencyOfData,
+                })),
+            ],
+            tabs: [component(`${id}-tabs`, 'tabSet', { tabs: fromQuery(queries.tabs), urlKey: 'tab', label: `${options.displayName} sections` })],
+            main: [
+                component(`${id}-form`, 'formScreenBody', { mode: 'readOnly', sections: fromQuery(queries.sections), values: fromQuery(queries.record, '0'), ...currencyOfData }),
+                ...options.extras.map(extra => component(`${id}-${extra.key.toLowerCase()}`, 'dataList', {
+                    label: extra.label, rows: fromQuery(`${options.entity}${extra.key}`), columns: fromQuery(`${options.entity}${extra.key}Columns`), titleField: extra.titleField, pageSize: extra.pageSize ?? 8, ...currencyOfData,
+                })),
+            ],
+            related: [],
+            activity: [component(`${id}-activity`, 'activityFeed', { label: 'Activity', entries: fromQuery(queries.activity), ...localeOfData })],
+            aside: [],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: contractsMetadata(options.name, 'Detail', [TemplateScope.Feature, TemplateScope.Subfeature]),
+    };
+}
+
+/** The contract page: the contract number as its title, its status, value, days to its end and notice period at the top, its details, parties, obligations and amendments in the main region, and the activity beside it. */
+export const contractPageTemplate = recordPageOf({
+    name: 'ContractPage', entity: ContractsEntityKind.Contract, displayName: 'Contract page', description: 'One contract: status, value, days to its end and notice period, its details, parties, obligations and amendments, and its activity.', titleField: 'number', backScreen: 'contracts.list', backLabel: 'Back to contracts',
+    facts: [
+        { id: 'value', label: 'Contract value', field: 'value', format: 'currency' },
+        { id: 'days', label: 'Days to end', field: 'daysToEnd' },
+        { id: 'notice', label: 'Notice (days)', field: 'noticeDays' },
+    ],
+    extras: [{ key: 'Parties', label: 'Parties', titleField: 'name' }, { key: 'Obligations', label: 'Obligations', titleField: 'summary' }, { key: 'Amendments', label: 'Amendments', titleField: 'number' }],
+    actions: [],
+});

package/templates/timelineTemplate.ts

@@ -0,0 +1,54 @@
+// 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 { timelineScreenTemplate } from '@cratis/scene.blueprint.default';
+import { ContractsQuery, fromQuery, localeOfData } from '../contractsQueries';
+import { actionButton, component, goesTo, contractsMetadata, withBehaviors } from '../contractsParts';
+
+interface TimelineOptions {
+    name: string;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    label: string;
+    listLabel: string;
+    searchLabel: string;
+    items: string;
+    columns: string;
+    back: { label: string; screen: string };
+}
+
+/**
+ * One timeline: the foundation `TimelineScreen` with every item as a bar in a lane, how far along it is, the milestones, what waits on what, and a conflict told in
+ * words when one lane's bars overlap. The scale is kept in the address; on a phone the schedule is the table, and the same items are listed beneath.
+ */
+function timelineOf(options: TimelineOptions): ScreenTemplate {
+    const id = options.name;
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: timelineScreenTemplate.slots,
+        arrangement: timelineScreenTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: options.title, subtitle: options.subtitle }, {
+                actions: [withBehaviors(actionButton(`${id}-back`, options.back.label, 'secondary'), goesTo(options.back.screen))],
+            })],
+            toolbar: [component(`${id}-search`, 'globalSearch', { placeholder: options.searchLabel, label: options.searchLabel, urlKey: 'timelineq' })],
+            timeline: [component(`${id}-grid`, 'timelineGrid', {
+                label: options.label, items: fromQuery(options.items), today: fromQuery(ContractsQuery.Settings, '0.today'), firstDay: fromQuery(ContractsQuery.Settings, '0.firstDay'), urlKey: 'scale', ...localeOfData,
+            })],
+            list: [component(`${id}-list`, 'dataList', { label: options.listLabel, rows: fromQuery(options.items), columns: fromQuery(options.columns), titleField: 'title', pageSize: 8, ...localeOfData })],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: contractsMetadata(options.name, 'Timeline', [TemplateScope.Module, TemplateScope.Feature]),
+    };
+}
+
+/** The contracts timeline: each live contract as a bar in a lane for its counterparty, how far through its term it is, and a milestone for each notice date; the list beneath names the same terms. */
+export const contractsTimelineTemplate = timelineOf({
+    name: 'ContractsTimeline', displayName: 'Contracts timeline', description: 'Every live contract as a bar from start to end in a lane for each counterparty, with how far through it is and the notice dates that matter.', title: 'Timeline', subtitle: 'Terms and notice dates by counterparty', label: 'Contract terms', listLabel: 'Terms',
+    searchLabel: 'Search the timeline', items: ContractsQuery.ContractTimelineItems, columns: ContractsQuery.ContractTimelineColumns, back: { label: 'Open the contracts', screen: 'contracts.list' },
+});

package/thumbnails/ContractPage.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="ContractPage">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#b45309"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="160" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="236" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="78" width="150" height="110" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="242" y="78" width="66" height="110" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="90" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="107" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="124" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="141" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="250" y="90" width="50" height="6" rx="3" fill="#b45309"/>
+    <rect x="250" y="107" width="50" height="6" rx="3" fill="#b45309"/>
+    <rect x="250" y="124" width="50" height="6" rx="3" fill="#b45309"/>
+</svg>

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

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

package/thumbnails/ContractsReview.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="ContractsReview">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#b45309"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="90" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="182" y="40" width="126" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="90" y="50" width="78" height="26" rx="4" fill="#eef0f3" stroke="#d5d9df"/>
+    <rect x="94" y="58" width="40" height="5" rx="3" fill="#b45309"/>
+    <rect x="90" y="82" width="78" height="26" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="90" width="40" height="5" rx="3" fill="#b45309"/>
+    <rect x="90" y="114" width="78" height="26" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="122" width="40" height="5" rx="3" fill="#b45309"/>
+    <rect x="90" y="146" width="78" height="26" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="154" width="40" height="5" rx="3" fill="#b45309"/>
+    <rect x="194" y="52" width="100" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="194" y="70" width="100" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="194" y="88" width="100" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="194" y="106" width="100" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/ContractsTimeline.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="ContractsTimeline">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#b45309"/>
+    <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="96" y="52" width="90" height="14" rx="4" fill="#b45309"/>
+    <rect x="130" y="76" width="120" height="14" rx="4" fill="#9aa3b2"/>
+    <rect x="110" y="100" width="80" height="14" rx="4" fill="#b45309"/>
+    <rect x="170" y="124" width="110" height="14" rx="4" fill="#9aa3b2"/>
+    <rect x="100" y="148" width="60" height="14" rx="4" fill="#b45309"/>
+</svg>

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