@cratis/scene.blueprint.invoicing 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 { invoicingScreenDefinitions } from '../invoicingScreenSet';
+
+/**
+ * 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 (`invoicingNavigation`).
+ */
+export const invoicingScreens: Screen[] = invoicingScreenDefinitions.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 invoicingTemplateProvenance: 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.invoicing' },
+    license: 'MIT',
+    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',
+};

package/templates/calendarTemplate.ts

@@ -0,0 +1,57 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate, TemplateScope, WidthSizeClass } from '@cratis/scene.model';
+import { column, grid, slotLeaf } from '@cratis/scene.blueprint.default';
+import { InvoicingQuery, fromQuery, localeOfData } from '../invoicingQueries';
+import { actionButton, component, goesTo, invoicingMetadata, opensDialog, withBehaviors } from '../invoicingParts';
+
+interface Action { id: string; label: string; emphasis: 'primary' | 'secondary' | 'quiet' | 'danger'; dialog?: string; screen?: string }
+
+interface CalendarOptions {
+    name: string;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    label: string;
+    listLabel: string;
+    events: string;
+    columns: string;
+    titleField: string;
+    actions: Action[];
+}
+
+/**
+ * One calendar: the foundation's `calendarGrid` on a month, a week or as an agenda. The status is told in words as well as by color, the day and view are kept in the
+ * address so a link shares the calendar as it is, and the list beside it names everything in the period.
+ */
+function calendarOf(options: CalendarOptions): ScreenTemplate {
+    const id = options.name;
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: [{ name: 'header' }, { name: 'calendar' }, { name: 'due' }],
+        arrangement: {
+            root: column([slotLeaf('header'), grid([slotLeaf('calendar', { span: 2 }), slotLeaf('due')], 3, 16)], 16),
+            overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('calendar'), slotLeaf('due')], 16) }],
+        },
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: options.title, subtitle: options.subtitle }, {
+                actions: options.actions.map(action => withBehaviors(actionButton(`${id}-${action.id}`, action.label, action.emphasis), action.dialog ? opensDialog(action.dialog) : goesTo(action.screen!))),
+            })],
+            calendar: [component(`${id}-grid`, 'calendarGrid', { label: options.label, events: fromQuery(options.events), date: fromQuery(InvoicingQuery.Settings, '0.today'), urlKey: 'day', ...localeOfData })],
+            due: [component(`${id}-list`, 'dataList', { label: options.listLabel, rows: fromQuery(options.events), columns: fromQuery(options.columns), titleField: options.titleField, pageSize: 6, ...localeOfData })],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: invoicingMetadata(options.name, 'Calendar', [TemplateScope.Module, TemplateScope.Feature]),
+    };
+}
+
+/** The due-date calendar: the day each invoice falls due on a month, a week or an agenda; the status is told in words as well as by color, and the list beside it names every invoice due in the period. */
+export const invoicingDueDatesTemplate = calendarOf({
+    name: 'InvoicingDueDates', displayName: 'Invoicing due-date calendar', description: 'The day each invoice falls due, on a month, a week or as an agenda, with the status told in words.', title: 'Due dates', subtitle: 'When each invoice falls due', label: 'Invoice due dates', listLabel: 'Due in this period',
+    events: InvoicingQuery.DueDates, columns: InvoicingQuery.DueColumns, titleField: 'title',
+    actions: [{ id: 'invoices', label: 'Open the invoices', emphasis: 'secondary', screen: 'invoicing.list' }],
+});

package/templates/dashboardTemplates.ts

@@ -0,0 +1,76 @@
+// 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 { InvoicingEntityKind, InvoicingQuery, currencyOfData, fromQuery, localeOfData, invoicingQueriesOf } from '../invoicingQueries';
+import { actionButton, component, goesTo, invoicingMetadata, opensDialog, withBehaviors } from '../invoicingParts';
+
+interface KeyFigure { id: string; label: string; query: string; index: number; format?: 'currency' | 'percent'; fractionDigits?: number; goodDirection?: 'up' | 'down'; comparison: string }
+interface Chart { id: string; title: string; kind: 'bar' | 'line' | 'donut' | 'funnel'; query: string }
+interface Action { id: string; label: string; emphasis: 'primary' | 'secondary' | 'quiet' | 'danger'; dialog?: string; screen?: string }
+
+interface DashboardOptions {
+    name: string;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    figures: KeyFigure[];
+    charts: Chart[];
+    table: { label: string; rows: string; columns: string; titleField: string; pageSize: number };
+    aside: { kind: 'activity'; label: string; query: string } | { kind: 'checklist'; label: string; query: string };
+    actions: Action[];
+}
+
+/**
+ * One dashboard: the foundation `DashboardScreen` - key figures over two charts, a table beneath and a list beside - with every region its own component with its own
+ * loading, empty and error states, so one failed query leaves the others on the page.
+ */
+function dashboardOf(options: DashboardOptions): ScreenTemplate {
+    const id = options.name;
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: dashboardScreenTemplate.slots,
+        arrangement: dashboardScreenTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: options.title, subtitle: options.subtitle }, {
+                actions: options.actions.map(action => withBehaviors(actionButton(`${id}-${action.id}`, action.label, action.emphasis), action.dialog ? opensDialog(action.dialog) : goesTo(action.screen!))),
+            })],
+            kpis: options.figures.map(figure => component(`${id}-${figure.id}`, 'statCard', {
+                label: figure.label, value: fromQuery(figure.query, `${figure.index}.value`), change: fromQuery(figure.query, `${figure.index}.change`), comparison: figure.comparison,
+                ...(figure.format ? { format: figure.format } : {}), ...(figure.fractionDigits === undefined ? {} : { fractionDigits: figure.fractionDigits }), ...(figure.goodDirection ? { goodDirection: figure.goodDirection } : {}), ...currencyOfData,
+            })),
+            charts: options.charts.map(chart => component(`${id}-${chart.id}`, 'chartWrapper', {
+                title: chart.title, kind: chart.kind, categories: fromQuery(chart.query, '0.categories'), series: fromQuery(chart.query, '0.series'), ...localeOfData,
+            })),
+            tables: [component(`${id}-table`, 'dataList', {
+                label: options.table.label, rows: fromQuery(options.table.rows), columns: fromQuery(options.table.columns), titleField: options.table.titleField, pageSize: options.table.pageSize, ...localeOfData,
+            })],
+            aside: [options.aside.kind === 'activity'
+                ? component(`${id}-aside`, 'activityFeed', { label: options.aside.label, entries: fromQuery(options.aside.query), ...localeOfData })
+                : component(`${id}-aside`, 'checklistSection', { label: options.aside.label, sections: fromQuery(options.aside.query), ...localeOfData })],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: invoicingMetadata(options.name, 'Dashboard', [TemplateScope.Module, TemplateScope.Feature]),
+    };
+}
+
+/** The receivables overview: three key figures over two charts - receivables by age and invoiced against collected - with the invoices beneath and the latest activity beside them. */
+export const invoicingOverviewTemplate = dashboardOf({
+    name: 'InvoicingOverview', displayName: 'Invoicing overview', description: 'Outstanding, overdue and collected this month, receivables by age, invoiced against collected and the invoices to chase.', title: 'Receivables overview', subtitle: 'What is owed and what has come in',
+    figures: [
+        { id: 'outstanding', label: 'Outstanding', query: InvoicingQuery.Kpis, index: 0, format: 'currency', goodDirection: 'down', comparison: 'last month' },
+        { id: 'overdue', label: 'Overdue', query: InvoicingQuery.Kpis, index: 1, format: 'currency', goodDirection: 'down', comparison: 'last month' },
+        { id: 'collected', label: 'Collected this month', query: InvoicingQuery.Kpis, index: 2, format: 'currency', comparison: 'last month' },
+    ],
+    charts: [
+        { id: 'aging', title: 'Receivables by age', kind: 'bar', query: InvoicingQuery.Aging },
+        { id: 'flow', title: 'Invoiced and collected', kind: 'line', query: InvoicingQuery.InvoicedAndCollected },
+    ],
+    table: { label: 'Invoices', titleField: 'number', pageSize: 5, rows: invoicingQueriesOf(InvoicingEntityKind.Invoice).rows, columns: invoicingQueriesOf(InvoicingEntityKind.Invoice).columns },
+    aside: { kind: 'activity', label: 'Latest activity', query: InvoicingQuery.Activity },
+    actions: [{ id: 'new', label: 'New invoice', emphasis: 'primary', dialog: 'InvoicingQuickCreateInvoice' }],
+});

package/templates/formTemplates.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 { DialogTemplate, TemplateScope } from '@cratis/scene.model';
+import { quickCreateDialogTemplate } from '@cratis/scene.blueprint.default';
+import { InvoicingQuery, fromQuery, localeOfData } from '../invoicingQueries';
+import { closesDialog, component, invoicingMetadata, withBehaviors } from '../invoicingParts';
+
+/**
+ * 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(InvoicingQuery.FormErrors, '0'), ...localeOfData,
+            }), closesDialog())],
+            actions: [],
+        },
+        displayName: `Invoicing quick create ${noun}`,
+        description: `A short form that creates one ${noun} without leaving the page.`,
+        metadata: invoicingMetadata(name, 'Dialog', [TemplateScope.Slice]),
+    };
+}
+
+/** The quick dialogs of the blueprint. */
+export const invoicingDialogs: DialogTemplate[] = [
+    quickCreateOf('InvoicingQuickCreateInvoice', 'New invoice', 'InvoiceQuickSections', 'invoice', 'Create'),
+    quickCreateOf('InvoicingRecordPayment', 'Record a payment', 'InvoicingRecordPaymentSections', 'payment', 'Record payment'),
+];

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 { invoicingOverviewTemplate } from './dashboardTemplates';
+import { invoicesListTemplate, paymentsListTemplate } from './listTemplates';
+import { invoicePageTemplate } from './recordTemplates';
+import { invoicingDueDatesTemplate } from './calendarTemplate';
+
+export * from './dashboardTemplates';
+export * from './listTemplates';
+export * from './recordTemplates';
+export * from './calendarTemplate';
+export * from './formTemplates';
+
+/** Every screen template this blueprint provides, in the order the manifest lists them. */
+export const invoicingScreenTemplates = [invoicingOverviewTemplate, invoicesListTemplate, invoicePageTemplate, paymentsListTemplate, invoicingDueDatesTemplate];
+
+export { invoicingDialogs as invoicingDialogTemplates } from './formTemplates';

package/templates/listTemplates.ts

@@ -0,0 +1,106 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { InteractionActionKind, InteractionTriggerKind, NotificationLevel, NotifyAction, ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { listScreenTemplate } from '@cratis/scene.blueprint.default';
+import { InvoicingEntityKind, fromQuery, invoicingQueriesOf, localeOfData } from '../invoicingQueries';
+import { actionButton, component, goesTo, invoicingMetadata, opensDialog, opensDialogOnSelect, opensRecordOnSelect, withBehaviors } from '../invoicingParts';
+
+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: InvoicingEntityKind;
+    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 = invoicingQueriesOf(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: invoicingMetadata(options.name, 'List', listScopes),
+    };
+}
+
+
+/** The invoices: every invoice with its customer, issue and due dates, amount and status. Choosing an invoice opens it. */
+export const invoicesListTemplate = listTemplateOf({
+    name: 'InvoicesList',
+    entity: InvoicingEntityKind.Invoice, displayName: 'Invoices list', description: 'Every invoice with its customer, issue and due dates, amount and status, filtered by customer, status and date.', title: 'Invoices', subtitle: 'Everything you have billed', searchLabel: 'Search invoices', urlKey: 'invoices',
+    primary: { label: 'New invoice', dialog: 'InvoicingQuickCreateInvoice' },
+    rowActions: ['Open', 'Send reminder'], bulkActions: [],
+    titleField: 'number', recordScreen: 'invoicing.record'
+});
+
+/** The payments: what came in, which invoice it settled, when and by what method. A record of what happened, which nobody edits. */
+export const paymentsListTemplate = listTemplateOf({
+    name: 'PaymentsList',
+    entity: InvoicingEntityKind.Payment, displayName: 'Payments list', description: 'The payments received with the invoice each settled, when and how, filtered by method and date.', title: 'Payments', subtitle: 'What has come in', searchLabel: 'Search payments', urlKey: 'payments',
+    primary: { label: 'Open the invoices', screen: 'invoicing.list' },
+    rowActions: ['Open invoice'], bulkActions: [],
+    titleField: 'reference',
+    readOnly: true
+});

package/templates/recordTemplates.ts

@@ -0,0 +1,79 @@
+// 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 { InvoicingEntityKind, currencyOfData, fromQuery, localeOfData, invoicingQueriesOf } from '../invoicingQueries';
+import { actionButton, component, goesTo, invoicingMetadata, opensDialog, withBehaviors } from '../invoicingParts';
+
+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: InvoicingEntityKind;
+    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 = invoicingQueriesOf(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: invoicingMetadata(options.name, 'Detail', [TemplateScope.Feature, TemplateScope.Subfeature]),
+    };
+}
+
+/** The invoice page: the invoice number as its title, its status, total, paid amount and balance due at the top, its fields, lines and payments in the main region, and the activity beside it. */
+export const invoicePageTemplate = recordPageOf({
+    name: 'InvoicePage', entity: InvoicingEntityKind.Invoice, displayName: 'Invoice page', description: 'One invoice: status, total, paid and balance due, its details, lines and payments, and its activity.', titleField: 'number', backScreen: 'invoicing.list', backLabel: 'Back to invoices',
+    facts: [
+        { id: 'total', label: 'Invoice total', field: 'total', format: 'currency' },
+        { id: 'paid', label: 'Paid', field: 'paid', format: 'currency' },
+        { id: 'balance', label: 'Balance due', field: 'balance', format: 'currency' },
+        { id: 'days', label: 'Days to due date', field: 'daysToDue' },
+    ],
+    extras: [{ key: 'Lines', label: 'Invoice lines', titleField: 'description' }, { key: 'Payments', label: 'Payments', titleField: 'reference' }],
+    actions: [{ id: 'pay', label: 'Record payment', emphasis: 'primary', dialog: 'InvoicingRecordPayment' }],
+});

package/thumbnails/InvoicePage.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="InvoicePage">
+    <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="#16a34a"/>
+    <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="#16a34a"/>
+    <rect x="250" y="107" width="50" height="6" rx="3" fill="#16a34a"/>
+    <rect x="250" y="124" width="50" height="6" rx="3" fill="#16a34a"/>
+</svg>

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

package/thumbnails/InvoicingDueDates.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="InvoicingDueDates">
+    <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="#16a34a"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="90" y="70" width="26" height="24" rx="4" fill="#16a34a"/>
+    <rect x="120" y="70" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="150" y="70" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="180" y="70" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="210" y="70" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="240" y="70" width="26" height="24" rx="4" fill="#16a34a"/>
+    <rect x="270" y="70" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="90" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="120" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="150" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="180" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="210" y="98" width="26" height="24" rx="4" fill="#16a34a"/>
+    <rect x="240" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="270" y="98" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="90" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="120" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="150" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="180" y="126" width="26" height="24" rx="4" fill="#16a34a"/>
+    <rect x="210" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="240" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="270" y="126" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="90" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="120" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="150" y="154" width="26" height="24" rx="4" fill="#16a34a"/>
+    <rect x="180" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="210" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="240" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+    <rect x="270" y="154" width="26" height="24" rx="4" fill="#eef0f3"/>
+</svg>

package/thumbnails/InvoicingOverview.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="InvoicingOverview">
+    <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="#16a34a"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="70" height="34" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="160" y="40" width="70" height="34" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="236" y="40" width="70" height="34" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="82" width="150" height="106" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="242" y="82" width="66" height="106" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="100" y="191" width="16" height="14" rx="4" fill="#16a34a"/>
+    <rect x="124" y="161" width="16" height="34" rx="4" fill="#16a34a"/>
+    <rect x="148" y="176" width="16" height="24" rx="4" fill="#16a34a"/>
+    <rect x="172" y="131" width="16" height="54" rx="4" fill="#16a34a"/>
+    <rect x="196" y="146" width="16" height="44" rx="4" fill="#16a34a"/>
+</svg>

package/thumbnails/InvoicingQuickCreateInvoice.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="InvoicingQuickCreateInvoice">
+    <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="#16a34a"/>
+    <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="#16a34a"/>
+    <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="#16a34a"/>
+</svg>

package/thumbnails/InvoicingRecordPayment.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="InvoicingRecordPayment">
+    <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="#16a34a"/>
+    <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="#16a34a"/>
+    <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="#16a34a"/>
+</svg>

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

package/thumbnails/invoicing.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="Invoicing 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="#16a34a"/>
+    <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>