@things-factory/saas 0.0.0-stage → 10.1.234

package/README.md

@@ -1,3 +1,20 @@
-# Temporary Holding Version
+# @things-factory/saas
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+What the company subscribes to online and pays for again and again — not only SaaS: cloud (AWS, Azure, GCP), domains and
+certificates too — and the software licenses it owns (ADR-0177 in operato-application).
+
+- **Account** — one account we hold with a vendor, the unit a bill comes from (an AWS organization's payer account, a
+  Microsoft 365 tenant, an Adobe Admin Console, a registrar). An account under another (an AWS member account) names its
+  purpose and admins only; the money is the parent's. No password, key or recovery code is kept — only where it is kept.
+- **Subscription** — one thing under an account we decide on and can cancel: a plan with seats, a fixed fee, metered
+  usage with a monthly budget, a commitment, or a license we own (which points at the asset register and carries no
+  amount). What metered usage is made of (EC2, tokens) is the vendor's bill, not a row here.
+- **Seat** — who holds one place of a subscription.
+- **Bill** — what an account was actually billed for a month, one line per subscription. The cost trend is computed from
+  the bills, never stored.
+
+A subscription's money still to come is read by the application from these rows (`saasExpected`), on the day rule the
+recurring cash items use (`@things-factory/accounting` `recurring-schedule`).
+
+Who may do what: `saas.keeping` keeps everything, `saas.reading` reads it, and an account's admins — whatever their
+seat — keep their own accounts' subscriptions, seats and bills (`saas.administering`).

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,5 @@
+import { registerSaasAccount360 } from './entity360/saas-account-360.js';
+export default function bootstrap() {
+    registerSaasAccount360();
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AAExE,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,sBAAsB,EAAE,CAAA;AAC1B,CAAC","sourcesContent":["import { registerSaasAccount360 } from './entity360/saas-account-360.js'\n\nexport default function bootstrap() {\n  registerSaasAccount360()\n}\n"]}

package/dist-client/components/saas-bill-editor.d.ts

@@ -0,0 +1,59 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@operato/data-grist/ox-grist.js';
+import '@operato/popup/ox-popup-actions.js';
+import { LitElement } from 'lit';
+type Subscription = {
+    id: string;
+    name: string;
+    billing: string;
+    status: string;
+};
+type Bill = {
+    id?: string;
+    month: string;
+    billedOn?: string | null;
+    description?: string | null;
+    lines: {
+        subscription?: {
+            id: string;
+        } | null;
+        label?: string | null;
+        amount: number;
+    }[];
+};
+declare const SaasBillEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * One bill of an account for a month (ADR-0177 decisions 5, 9): a line a subscription - a new bill starts with one for each
+ * in use - and lines on none for tax and credits. Saved whole; the cost trend is read from these.
+ */
+export declare class SaasBillEditor extends SaasBillEditor_base {
+    static styles: import("lit").CSSResult[];
+    accountId: string;
+    currency: string;
+    subscriptions: Subscription[];
+    bill?: Bill;
+    saved?: () => void;
+    month: string;
+    billedOn: string;
+    description: string;
+    total: number;
+    gristConfig: any;
+    private initial;
+    private grist;
+    static open(options: {
+        accountId: string;
+        currency: string;
+        subscriptions: Subscription[];
+        bill?: Bill;
+        saved?: () => void;
+    }): import("@operato/layout").PopupHandle<unknown>;
+    connectedCallback(): void;
+    private get lines();
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    private records;
+    private sum;
+    private save;
+}
+export {};

package/dist-client/components/saas-bill-editor.js

@@ -0,0 +1,211 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@operato/data-grist/ox-grist.js';
+import '@operato/popup/ox-popup-actions.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { DataGrist } from '@operato/data-grist';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { notify, openPopup } from '@operato/layout';
+import { closePopup } from '@operato/popup';
+import { CommonPopupStyles } from '@operato/styles';
+import { failureOf } from '@things-factory/asset/dist-client/grid.js';
+import { amountText, fieldWord, shiftMonth, thisMonth } from '../words.js';
+/**
+ * One bill of an account for a month (ADR-0177 decisions 5, 9): a line a subscription - a new bill starts with one for each
+ * in use - and lines on none for tax and credits. Saved whole; the cost trend is read from these.
+ */
+let SaasBillEditor = class SaasBillEditor extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.accountId = '';
+        this.currency = '';
+        this.subscriptions = [];
+        this.month = shiftMonth(thisMonth(), -1);
+        this.billedOn = '';
+        this.description = '';
+        this.total = 0;
+        /* The lines it opens with - set once, so a re-render does not put them back over what was typed. */
+        this.initial = { records: [], total: 0 };
+    }
+    static { this.styles = [
+        CommonPopupStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-surface);
+        min-height: 420px;
+      }
+      .fields {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        padding: var(--spacing-large, 12px);
+      }
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: var(--ui-t-caption, 12px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      label.wide {
+        flex: 1;
+        min-width: 200px;
+      }
+      input {
+        height: 32px;
+        padding: 0 8px;
+        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+        border-radius: var(--md-sys-shape-corner-small, 4px);
+        background: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        font: inherit;
+        font-size: var(--ui-t-body, 14px);
+      }
+      .total {
+        padding: 0 var(--spacing-large, 12px) var(--spacing-medium, 8px);
+        text-align: right;
+        font-size: var(--ui-t-body, 14px);
+      }
+      ox-grist {
+        flex: 1;
+        overflow-y: auto;
+      }
+    `
+    ]; }
+    static open(options) {
+        const title = options.bill ? i18next.t('title.saas-bill-edit', { month: options.bill.month }) : i18next.t('title.saas-bill-new');
+        return openPopup(html `<saas-bill-editor .accountId=${options.accountId} .currency=${options.currency} .subscriptions=${options.subscriptions} .bill=${options.bill} .saved=${options.saved}></saas-bill-editor>`, { backdrop: true, size: 'large', title });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.bill) {
+            this.month = this.bill.month;
+            this.billedOn = this.bill.billedOn ?? '';
+            this.description = this.bill.description ?? '';
+        }
+        const records = this.lines;
+        this.initial = { records, total: records.length };
+        const options = [{ value: '', display: i18next.t('text.saas-bill-line-none') }, ...this.subscriptions.map(one => ({ value: one.id, display: one.name }))];
+        this.gristConfig = {
+            rows: { appendable: true, selectable: { multiple: true } },
+            pagination: { infinite: true },
+            columns: [
+                { type: 'gutter', gutterName: 'sequence' },
+                { type: 'gutter', gutterName: 'row-selector', multiple: true },
+                { type: 'select', name: 'subscriptionId', header: fieldWord('saas-bill-line', 'subscription'), width: 240, record: { editable: true, options } },
+                { type: 'string', name: 'label', header: fieldWord('saas-bill-line', 'label'), width: 160, record: { editable: true } },
+                { type: 'float', name: 'amount', header: fieldWord('saas-bill-line', 'amount') + ` (${this.currency})`, width: 140, record: { editable: true, align: 'right', renderer: (value) => amountText(value) } }
+            ]
+        };
+    }
+    get lines() {
+        return this.bill
+            ? this.bill.lines.map(line => ({ subscriptionId: line.subscription?.id ?? '', label: line.label ?? '', amount: line.amount }))
+            : this.subscriptions.filter(one => one.status !== 'CANCELLED' && one.billing !== 'OWNED').map(one => ({ subscriptionId: one.id, label: '', amount: null }));
+    }
+    render() {
+        return html `
+      <div class="fields">
+        <label>${fieldWord('saas-bill', 'month')} (YYYY-MM)<input type="month" .value=${this.month} @change=${(e) => (this.month = e.target.value)} /></label>
+        <label>${fieldWord('saas-bill', 'billedOn')}<input type="date" .value=${this.billedOn} @change=${(e) => (this.billedOn = e.target.value)} /></label>
+        <label class="wide">${fieldWord('saas-bill', 'description')}<input .value=${this.description} @change=${(e) => (this.description = e.target.value)} /></label>
+      </div>
+      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .data=${this.initial} @field-change=${() => this.sum()}></ox-grist>
+      <div class="total">${i18next.t('text.saas-bill-total', { total: amountText(this.total), currency: this.currency })}</div>
+      <ox-popup-actions>
+        <md-text-button slot="start" @click=${() => this.grist.addRecord({ subscriptionId: '', label: '', amount: null })}>${i18next.t('button.saas-bill-add-line')}</md-text-button>
+        <md-text-button slot="cancel" @click=${() => closePopup(this)}>${i18next.t('button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" @click=${() => this.save()}>${i18next.t('button.save')}</md-filled-button>
+      </ox-popup-actions>
+    `;
+    }
+    firstUpdated() {
+        this.sum();
+    }
+    records() {
+        return (this.grist?.dirtyData?.records ?? this.grist?.data?.records ?? []);
+    }
+    sum() {
+        this.total = this.records()
+            .filter(one => one.__dirty__ !== '-')
+            .reduce((sum, one) => sum + (Number(one.amount) || 0), 0);
+    }
+    async save() {
+        const lines = this.records()
+            .filter(one => one.__dirty__ !== '-' && (one.subscriptionId || one.label || Number(one.amount)))
+            .map(one => ({ subscriptionId: one.subscriptionId || null, label: one.label || null, amount: Number(one.amount) || 0 }));
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($accountId: String!, $bill: SaasBillInput!) {
+            saveSaasBill(accountId: $accountId, bill: $bill) { id }
+          }
+        `,
+                variables: { accountId: this.accountId, bill: { id: this.bill?.id, month: this.month, billedOn: this.billedOn || null, description: this.description || null, lines } }
+            });
+            if (response.errors?.length)
+                throw response;
+            notify({ level: 'info', message: i18next.t('text.saas-bill-saved', { month: this.month }) });
+            this.saved?.();
+            closePopup(this);
+        }
+        catch (error) {
+            notify({ level: 'error', message: failureOf(error) });
+        }
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], SaasBillEditor.prototype, "accountId", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], SaasBillEditor.prototype, "currency", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], SaasBillEditor.prototype, "subscriptions", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], SaasBillEditor.prototype, "bill", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Function)
+], SaasBillEditor.prototype, "saved", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SaasBillEditor.prototype, "month", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SaasBillEditor.prototype, "billedOn", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SaasBillEditor.prototype, "description", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SaasBillEditor.prototype, "total", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SaasBillEditor.prototype, "gristConfig", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], SaasBillEditor.prototype, "grist", void 0);
+SaasBillEditor = __decorate([
+    customElement('saas-bill-editor')
+], SaasBillEditor);
+export { SaasBillEditor };
+//# sourceMappingURL=saas-bill-editor.js.map

package/dist-client/components/saas-bill-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saas-bill-editor.js","sourceRoot":"","sources":["../../client/components/saas-bill-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/data-grist/ox-grist.js'\nimport '@operato/popup/ox-popup-actions.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { DataGrist } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { closePopup } from '@operato/popup'\nimport { CommonPopupStyles } from '@operato/styles'\nimport { failureOf } from '@things-factory/asset/dist-client/grid.js'\n\nimport { amountText, fieldWord, shiftMonth, thisMonth } from '../words.js'\n\ntype Subscription = { id: string; name: string; billing: string; status: string }\ntype Bill = { id?: string; month: string; billedOn?: string | null; description?: string | null; lines: { subscription?: { id: string } | null; label?: string | null; amount: number }[] }\n\n/**\n * One bill of an account for a month (ADR-0177 decisions 5, 9): a line a subscription - a new bill starts with one for each\n * in use - and lines on none for tax and credits. Saved whole; the cost trend is read from these.\n */\n@customElement('saas-bill-editor')\nexport class SaasBillEditor extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonPopupStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--md-sys-color-surface);\n        min-height: 420px;\n      }\n      .fields {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n        padding: var(--spacing-large, 12px);\n      }\n      label {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        font-size: var(--ui-t-caption, 12px);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      label.wide {\n        flex: 1;\n        min-width: 200px;\n      }\n      input {\n        height: 32px;\n        padding: 0 8px;\n        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n        border-radius: var(--md-sys-shape-corner-small, 4px);\n        background: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n        font: inherit;\n        font-size: var(--ui-t-body, 14px);\n      }\n      .total {\n        padding: 0 var(--spacing-large, 12px) var(--spacing-medium, 8px);\n        text-align: right;\n        font-size: var(--ui-t-body, 14px);\n      }\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n      }\n    `\n  ]\n\n  @property() accountId = ''\n  @property() currency = ''\n  @property({ type: Array }) subscriptions: Subscription[] = []\n  @property({ type: Object }) bill?: Bill\n  @property({ type: Object }) saved?: () => void\n\n  @state() month = shiftMonth(thisMonth(), -1)\n  @state() billedOn = ''\n  @state() description = ''\n  @state() total = 0\n  @state() gristConfig: any\n  /* The lines it opens with - set once, so a re-render does not put them back over what was typed. */\n  private initial: any = { records: [], total: 0 }\n  @query('ox-grist') private grist!: DataGrist\n\n  static open(options: { accountId: string; currency: string; subscriptions: Subscription[]; bill?: Bill; saved?: () => void }) {\n    const title = options.bill ? i18next.t('title.saas-bill-edit', { month: options.bill.month }) : i18next.t('title.saas-bill-new')\n    return openPopup(\n      html`<saas-bill-editor .accountId=${options.accountId} .currency=${options.currency} .subscriptions=${options.subscriptions} .bill=${options.bill} .saved=${options.saved}></saas-bill-editor>`,\n      { backdrop: true, size: 'large', title }\n    )\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.bill) {\n      this.month = this.bill.month\n      this.billedOn = this.bill.billedOn ?? ''\n      this.description = this.bill.description ?? ''\n    }\n    const records = this.lines\n    this.initial = { records, total: records.length }\n    const options = [{ value: '', display: i18next.t('text.saas-bill-line-none') }, ...this.subscriptions.map(one => ({ value: one.id, display: one.name }))]\n    this.gristConfig = {\n      rows: { appendable: true, selectable: { multiple: true } },\n      pagination: { infinite: true },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: true },\n        { type: 'select', name: 'subscriptionId', header: fieldWord('saas-bill-line', 'subscription'), width: 240, record: { editable: true, options } },\n        { type: 'string', name: 'label', header: fieldWord('saas-bill-line', 'label'), width: 160, record: { editable: true } },\n        { type: 'float', name: 'amount', header: fieldWord('saas-bill-line', 'amount') + ` (${this.currency})`, width: 140, record: { editable: true, align: 'right', renderer: (value: number) => amountText(value) } }\n      ]\n    }\n  }\n\n  private get lines() {\n    return this.bill\n      ? this.bill.lines.map(line => ({ subscriptionId: line.subscription?.id ?? '', label: line.label ?? '', amount: line.amount }))\n      : this.subscriptions.filter(one => one.status !== 'CANCELLED' && one.billing !== 'OWNED').map(one => ({ subscriptionId: one.id, label: '', amount: null }))\n  }\n\n  render() {\n    return html`\n      <div class=\"fields\">\n        <label>${fieldWord('saas-bill', 'month')} (YYYY-MM)<input type=\"month\" .value=${this.month} @change=${(e: any) => (this.month = e.target.value)} /></label>\n        <label>${fieldWord('saas-bill', 'billedOn')}<input type=\"date\" .value=${this.billedOn} @change=${(e: any) => (this.billedOn = e.target.value)} /></label>\n        <label class=\"wide\">${fieldWord('saas-bill', 'description')}<input .value=${this.description} @change=${(e: any) => (this.description = e.target.value)} /></label>\n      </div>\n      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .data=${this.initial} @field-change=${() => this.sum()}></ox-grist>\n      <div class=\"total\">${i18next.t('text.saas-bill-total', { total: amountText(this.total), currency: this.currency })}</div>\n      <ox-popup-actions>\n        <md-text-button slot=\"start\" @click=${() => this.grist.addRecord({ subscriptionId: '', label: '', amount: null })}>${i18next.t('button.saas-bill-add-line')}</md-text-button>\n        <md-text-button slot=\"cancel\" @click=${() => closePopup(this)}>${i18next.t('button.cancel')}</md-text-button>\n        <md-filled-button slot=\"confirm\" @click=${() => this.save()}>${i18next.t('button.save')}</md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  firstUpdated() {\n    this.sum()\n  }\n\n  private records(): any[] {\n    return (this.grist?.dirtyData?.records ?? this.grist?.data?.records ?? []) as any[]\n  }\n\n  private sum() {\n    this.total = this.records()\n      .filter(one => one.__dirty__ !== '-')\n      .reduce((sum, one) => sum + (Number(one.amount) || 0), 0)\n  }\n\n  private async save() {\n    const lines = this.records()\n      .filter(one => one.__dirty__ !== '-' && (one.subscriptionId || one.label || Number(one.amount)))\n      .map(one => ({ subscriptionId: one.subscriptionId || null, label: one.label || null, amount: Number(one.amount) || 0 }))\n    try {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation ($accountId: String!, $bill: SaasBillInput!) {\n            saveSaasBill(accountId: $accountId, bill: $bill) { id }\n          }\n        `,\n        variables: { accountId: this.accountId, bill: { id: this.bill?.id, month: this.month, billedOn: this.billedOn || null, description: this.description || null, lines } }\n      })\n      if ((response as any).errors?.length) throw response\n      notify({ level: 'info', message: i18next.t('text.saas-bill-saved', { month: this.month }) })\n      this.saved?.()\n      closePopup(this)\n    } catch (error) {\n      notify({ level: 'error', message: failureOf(error) })\n    }\n  }\n}\n"]}

package/dist-client/entity360/saas-account-360.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import { type Entity360DoorAnswer, type Entity360Subject } from '@operato/layout';
+export declare function registerSaasAccount360(): void;
+export declare class SaasAccount360 extends LitElement {
+    static styles: import("lit").CSSResult;
+    subject?: Entity360Subject;
+    answer?: Entity360DoorAnswer<any>;
+    payments?: any[] | null;
+    updated(changed: Map<string, unknown>): void;
+    private read;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/entity360/saas-account-360.js

@@ -0,0 +1,231 @@
+import { __decorate, __metadata } from "tslib";
+import gql from 'graphql-tag';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next } from '@operato/i18n';
+import { entity360Name, readEntity360Door, registerEntity360Kind, registerEntity360Section } from '@operato/layout';
+import { navigate } from '@operato/shell';
+import { amountText, wordOf } from '../words.js';
+/*
+ * A subscription account's 360 (ADR-0177 decision 11) - one account read deep: what it is and how it is paid, its last
+ * twelve months against the next three expected, its bills month by month, what is subscribed under it and what moved on
+ * it. Reading first; the account's screen opens from a quiet button beside the heading.
+ */
+export function registerSaasAccount360() {
+    registerEntity360Kind({
+        kind: 'saas-account',
+        typenames: ['SaasAccount'],
+        /* Not yet a record the assistant's conversation follows - the module registers no subject describer for it. */
+        assistantSubject: false,
+        title: ({ value }) => `${i18next.t('title.saas-account-page')} · ${value.name || ''}`,
+        context: ({ value }) => [value.identifier, value.currency].filter(Boolean).join(' · ')
+    });
+    registerEntity360Section('saas-account', { name: 'overview', order: 10, render: subject => html `<saas-account-360 .subject=${subject}></saas-account-360>` });
+}
+const ACCOUNT = gql `
+  query ($id: String!) {
+    saasAccount(id: $id) {
+      id name identifier purpose currency billingDay status closedOn
+      counterparty { id name } paymentAccount { id name } parent { id name } admins { id name }
+      trend { months values sources nextMonths expected currency }
+    }
+    saasSubscriptions(accountId: $id) { id name billing quantity unitPrice amount budget everyMonths renewalOn autoRenew status seatsHeld }
+    saasBills(accountId: $id) { id month billedOn total lines { subscription { id name } label amount } }
+    saasChanges(accountId: $id) { subject field fromValue toValue at changedBy }
+  }
+`;
+let SaasAccount360 = class SaasAccount360 extends LitElement {
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-large, 12px);
+      font-size: var(--ui-t-body, 13px);
+      line-height: 1.5;
+    }
+    dl {
+      margin: 0;
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      gap: var(--spacing-small, 4px) var(--spacing-large, 12px);
+    }
+    dt,
+    th,
+    .muted {
+      color: var(--ui-muted);
+    }
+    dd {
+      margin: 0;
+      overflow-wrap: anywhere;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-variant-numeric: tabular-nums;
+    }
+    th,
+    td {
+      padding: 4px 6px;
+      border-bottom: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+      text-align: right;
+      font-weight: normal;
+    }
+    th:first-child,
+    td:first-child {
+      text-align: left;
+    }
+    td.expected {
+      color: var(--ui-muted);
+      font-style: italic;
+    }
+    ox-grist-sparkline-renderer {
+      height: 48px;
+    }
+    .quiet {
+      border: none;
+      background: none;
+      padding: 0;
+      color: var(--md-sys-color-primary);
+      font: inherit;
+      cursor: pointer;
+    }
+  `; }
+    updated(changed) {
+        if (changed.has('subject'))
+            this.read();
+    }
+    async read() {
+        const id = this.subject?.id;
+        this.answer = undefined;
+        if (!id)
+            return;
+        let response;
+        try {
+            response = await client.query({ query: ACCOUNT, variables: { id }, fetchPolicy: 'no-cache', errorPolicy: 'all' });
+        }
+        catch (e) {
+            response = { data: null, errors: e?.graphQLErrors?.length ? e.graphQLErrors : [{ message: e?.message ?? String(e) }] };
+        }
+        if (this.subject?.id !== id)
+            return;
+        this.answer = readEntity360Door(response, data => (data?.saasAccount ? data : null));
+        this.payments = undefined;
+        try {
+            const paid = await client.query({
+                query: gql `query ($id: String!) { saasPayments(accountId: $id) { id transactionDate amount currency description } }`,
+                variables: { id },
+                fetchPolicy: 'no-cache',
+                errorPolicy: 'all'
+            });
+            if (this.subject?.id === id)
+                this.payments = paid.errors?.length ? null : paid.data?.saasPayments ?? [];
+        }
+        catch {
+            if (this.subject?.id === id)
+                this.payments = null;
+        }
+    }
+    render() {
+        const state = this.answer?.state ?? 'loading';
+        const data = this.answer?.data;
+        const one = data?.saasAccount;
+        const section = (heading, body, action) => html `<ox-entity360-section .heading=${heading} .state=${state} .message=${this.answer?.message ?? ''}>${action ? html `<span slot="actions">${action}</span>` : nothing}${one ? body : nothing}</ox-entity360-section>`;
+        if (!one)
+            return section(i18next.t('title.saas-account-page'), nothing);
+        const trend = one.trend;
+        const subs = data.saasSubscriptions ?? [];
+        const bills = data.saasBills ?? [];
+        const changes = data.saasChanges ?? [];
+        const nextRenewal = subs
+            .filter(sub => sub.status === 'ACTIVE' && sub.renewalOn)
+            .map(sub => sub.renewalOn)
+            .sort()[0];
+        const open = html `<button class="quiet" @click=${() => navigate(`saas-account-page?id=${one.id}`)}>${i18next.t('button.saas-open-account')}</button>`;
+        const party = (value) => (value ? entity360Name({ __typename: 'Counterparty', ...value }, value.name) : '—');
+        return html `
+      ${section(one.name, html `<dl>
+          <dt>${i18next.t('field.saas-account-counterparty')}</dt>
+          <dd>${party(one.counterparty)}</dd>
+          <dt>${i18next.t('field.saas-account-payment-account')}</dt>
+          <dd>${one.paymentAccount?.name ?? '—'}</dd>
+          <dt>${i18next.t('field.saas-account-currency')}</dt>
+          <dd>${one.currency}${one.billingDay ? ` · ${i18next.t('text.saas-account-billing-day', { day: one.billingDay })}` : ''}</dd>
+          <dt>${i18next.t('text.saas-360-next-renewal')}</dt>
+          <dd>${nextRenewal ?? '—'}</dd>
+          <dt>${i18next.t('field.saas-account-admins')}</dt>
+          <dd>${(one.admins ?? []).map((admin) => admin.name).join(', ') || '—'}</dd>
+          <dt>${i18next.t('field.saas-account-status')}</dt>
+          <dd>${wordOf('saas-account-status', one.status)}${one.closedOn ? ` · ${one.closedOn}` : ''}</dd>
+        </dl>`, open)}
+      ${trend
+            ? section(i18next.t('text.saas-360-months'), html `${[...trend.values, ...trend.expected].some((value) => value !== null)
+                ? html `<ox-grist-sparkline-renderer .value=${trend} .column=${{ type: 'sparkline', name: 'trend', record: {} }}></ox-grist-sparkline-renderer>`
+                : nothing}
+              <table>
+                <tr><th>${i18next.t('field.saas-bill-month')}</th><th>${trend.currency}</th></tr>
+                ${trend.months.map((month, i) => html `<tr>
+                      <td>${month} ${trend.sources?.[i] ? html `<span class="muted">${i18next.t(`text.saas-360-source-${trend.sources[i]}`)}</span>` : nothing}</td>
+                      <td>${trend.values[i] === null ? '—' : amountText(trend.values[i])}</td>
+                    </tr>`)}
+                ${trend.nextMonths.map((month, i) => html `<tr><td>${month}</td><td class="expected">${trend.expected[i] === null ? '' : amountText(trend.expected[i])}</td></tr>`)}
+              </table>`)
+            : nothing}
+      ${this.payments
+            ? section(i18next.t('text.saas-360-payments', { vendor: one.counterparty?.name ?? '' }), this.payments.length
+                ? html `<table>
+                  ${this.payments.map(line => html `<tr>
+                      <td>${entity360Name({ __typename: 'Transaction', id: line.id, transactionDate: line.transactionDate, direction: 'EXPENSE' }, line.transactionDate)}</td>
+                      <td class="muted">${line.description ?? ''}</td>
+                      <td>${amountText(line.amount)} ${line.currency !== one.currency ? line.currency : ''}</td>
+                    </tr>`)}
+                </table>`
+                : html `<div class="muted">${i18next.t(one.counterparty ? 'text.saas-360-payments-empty' : 'text.saas-360-payments-no-vendor')}</div>`)
+            : nothing}
+      ${section(i18next.t('text.saas-tab-bills'), bills.length
+            ? html `<table>
+              ${bills.map(bill => html `<tr>
+                  <td>${bill.month}${bill.billedOn ? html ` <span class="muted">${bill.billedOn}</span>` : nothing}</td>
+                  <td class="muted">${(bill.lines ?? []).map((line) => `${line.subscription?.name ?? line.label ?? ''} ${amountText(line.amount)}`).join(' · ')}</td>
+                  <td>${amountText(bill.total)}</td>
+                </tr>`)}
+            </table>`
+            : html `<div class="muted">${i18next.t('text.saas-bills-empty')}</div>`)}
+      ${section(i18next.t('text.saas-tab-subscriptions'), subs.length
+            ? html `<table>
+              ${subs.map(sub => html `<tr>
+                  <td>${sub.name} <span class="muted">${wordOf('saas-billing', sub.billing)} · ${wordOf('saas-subscription-status', sub.status)}</span></td>
+                  <td class="muted">${sub.billing === 'SEAT' ? i18next.t('text.saas-360-seats', { held: sub.seatsHeld ?? 0, quantity: sub.quantity ?? 0 }) : sub.billing === 'USAGE' ? i18next.t('text.saas-360-budget', { budget: amountText(sub.budget) }) : ''}</td>
+                  <td>${sub.billing === 'SEAT' ? amountText((sub.quantity ?? 0) * (sub.unitPrice ?? 0)) : amountText(sub.amount)}</td>
+                </tr>`)}
+            </table>`
+            : html `<div class="muted">${i18next.t('text.saas-subscriptions-empty')}</div>`)}
+      ${section(i18next.t('text.saas-360-changes'), changes.length
+            ? html `<table>
+              ${changes.map(change => html `<tr>
+                  <td>${String(change.at).slice(0, 10)} <span class="muted">${change.changedBy ?? ''}</span></td>
+                  <td>${change.subject} · ${i18next.t(`text.saas-change-field-${change.field}`, { defaultValue: change.field })}</td>
+                  <td>${change.fromValue ?? '—'} → ${change.toValue ?? '—'}</td>
+                </tr>`)}
+            </table>`
+            : html `<div class="muted">${i18next.t('text.saas-360-changes-empty')}</div>`)}
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], SaasAccount360.prototype, "subject", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SaasAccount360.prototype, "answer", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SaasAccount360.prototype, "payments", void 0);
+SaasAccount360 = __decorate([
+    customElement('saas-account-360')
+], SaasAccount360);
+export { SaasAccount360 };
+//# sourceMappingURL=saas-account-360.js.map

package/dist-client/entity360/saas-account-360.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saas-account-360.js","sourceRoot":"","sources":["../../client/entity360/saas-account-360.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { entity360Name, readEntity360Door, registerEntity360Kind, registerEntity360Section, type Entity360DoorAnswer, type Entity360Subject } from '@operato/layout'\nimport { navigate } from '@operato/shell'\n\nimport { amountText, wordOf } from '../words.js'\n\n/*\n * A subscription account's 360 (ADR-0177 decision 11) - one account read deep: what it is and how it is paid, its last\n * twelve months against the next three expected, its bills month by month, what is subscribed under it and what moved on\n * it. Reading first; the account's screen opens from a quiet button beside the heading.\n */\nexport function registerSaasAccount360() {\n  registerEntity360Kind({\n    kind: 'saas-account',\n    typenames: ['SaasAccount'],\n    /* Not yet a record the assistant's conversation follows - the module registers no subject describer for it. */\n    assistantSubject: false,\n    title: ({ value }) => `${i18next.t('title.saas-account-page')} · ${value.name || ''}`,\n    context: ({ value }) => [value.identifier, value.currency].filter(Boolean).join(' · ')\n  })\n  registerEntity360Section('saas-account', { name: 'overview', order: 10, render: subject => html`<saas-account-360 .subject=${subject}></saas-account-360>` })\n}\n\nconst ACCOUNT = gql`\n  query ($id: String!) {\n    saasAccount(id: $id) {\n      id name identifier purpose currency billingDay status closedOn\n      counterparty { id name } paymentAccount { id name } parent { id name } admins { id name }\n      trend { months values sources nextMonths expected currency }\n    }\n    saasSubscriptions(accountId: $id) { id name billing quantity unitPrice amount budget everyMonths renewalOn autoRenew status seatsHeld }\n    saasBills(accountId: $id) { id month billedOn total lines { subscription { id name } label amount } }\n    saasChanges(accountId: $id) { subject field fromValue toValue at changedBy }\n  }\n`\n\n@customElement('saas-account-360')\nexport class SaasAccount360 extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-large, 12px);\n      font-size: var(--ui-t-body, 13px);\n      line-height: 1.5;\n    }\n    dl {\n      margin: 0;\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      gap: var(--spacing-small, 4px) var(--spacing-large, 12px);\n    }\n    dt,\n    th,\n    .muted {\n      color: var(--ui-muted);\n    }\n    dd {\n      margin: 0;\n      overflow-wrap: anywhere;\n    }\n    table {\n      width: 100%;\n      border-collapse: collapse;\n      font-variant-numeric: tabular-nums;\n    }\n    th,\n    td {\n      padding: 4px 6px;\n      border-bottom: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));\n      text-align: right;\n      font-weight: normal;\n    }\n    th:first-child,\n    td:first-child {\n      text-align: left;\n    }\n    td.expected {\n      color: var(--ui-muted);\n      font-style: italic;\n    }\n    ox-grist-sparkline-renderer {\n      height: 48px;\n    }\n    .quiet {\n      border: none;\n      background: none;\n      padding: 0;\n      color: var(--md-sys-color-primary);\n      font: inherit;\n      cursor: pointer;\n    }\n  `\n\n  @property({ attribute: false }) subject?: Entity360Subject\n  @state() answer?: Entity360DoorAnswer<any>\n  /* What left the bank for the vendor - the bank's door, read apart so a reader without it still sees the rest. */\n  @state() payments?: any[] | null\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('subject')) this.read()\n  }\n\n  private async read() {\n    const id = this.subject?.id\n    this.answer = undefined\n    if (!id) return\n    let response: any\n    try {\n      response = await client.query({ query: ACCOUNT, variables: { id }, fetchPolicy: 'no-cache', errorPolicy: 'all' } as any)\n    } catch (e: any) {\n      response = { data: null, errors: e?.graphQLErrors?.length ? e.graphQLErrors : [{ message: e?.message ?? String(e) }] }\n    }\n    if (this.subject?.id !== id) return\n    this.answer = readEntity360Door(response, data => (data?.saasAccount ? data : null))\n    this.payments = undefined\n    try {\n      const paid: any = await client.query({\n        query: gql`query ($id: String!) { saasPayments(accountId: $id) { id transactionDate amount currency description } }`,\n        variables: { id },\n        fetchPolicy: 'no-cache',\n        errorPolicy: 'all'\n      } as any)\n      if (this.subject?.id === id) this.payments = paid.errors?.length ? null : paid.data?.saasPayments ?? []\n    } catch {\n      if (this.subject?.id === id) this.payments = null\n    }\n  }\n\n  render() {\n    const state = this.answer?.state ?? 'loading'\n    const data = this.answer?.data\n    const one = data?.saasAccount\n    const section = (heading: string, body: unknown, action?: unknown) =>\n      html`<ox-entity360-section .heading=${heading} .state=${state} .message=${this.answer?.message ?? ''}>${action ? html`<span slot=\"actions\">${action}</span>` : nothing}${one ? body : nothing}</ox-entity360-section>`\n    if (!one) return section(i18next.t('title.saas-account-page'), nothing)\n\n    const trend = one.trend\n    const subs: any[] = data.saasSubscriptions ?? []\n    const bills: any[] = data.saasBills ?? []\n    const changes: any[] = data.saasChanges ?? []\n    const nextRenewal = subs\n      .filter(sub => sub.status === 'ACTIVE' && sub.renewalOn)\n      .map(sub => sub.renewalOn)\n      .sort()[0]\n    const open = html`<button class=\"quiet\" @click=${() => navigate(`saas-account-page?id=${one.id}`)}>${i18next.t('button.saas-open-account')}</button>`\n    const party = (value?: { id: string; name: string }) => (value ? entity360Name({ __typename: 'Counterparty', ...value }, value.name) : '—')\n\n    return html`\n      ${section(\n        one.name,\n        html`<dl>\n          <dt>${i18next.t('field.saas-account-counterparty')}</dt>\n          <dd>${party(one.counterparty)}</dd>\n          <dt>${i18next.t('field.saas-account-payment-account')}</dt>\n          <dd>${one.paymentAccount?.name ?? '—'}</dd>\n          <dt>${i18next.t('field.saas-account-currency')}</dt>\n          <dd>${one.currency}${one.billingDay ? ` · ${i18next.t('text.saas-account-billing-day', { day: one.billingDay })}` : ''}</dd>\n          <dt>${i18next.t('text.saas-360-next-renewal')}</dt>\n          <dd>${nextRenewal ?? '—'}</dd>\n          <dt>${i18next.t('field.saas-account-admins')}</dt>\n          <dd>${(one.admins ?? []).map((admin: any) => admin.name).join(', ') || '—'}</dd>\n          <dt>${i18next.t('field.saas-account-status')}</dt>\n          <dd>${wordOf('saas-account-status', one.status)}${one.closedOn ? ` · ${one.closedOn}` : ''}</dd>\n        </dl>`,\n        open\n      )}\n      ${trend\n        ? section(\n            i18next.t('text.saas-360-months'),\n            html`${[...trend.values, ...trend.expected].some((value: number | null) => value !== null)\n                ? html`<ox-grist-sparkline-renderer .value=${trend} .column=${{ type: 'sparkline', name: 'trend', record: {} }}></ox-grist-sparkline-renderer>`\n                : nothing}\n              <table>\n                <tr><th>${i18next.t('field.saas-bill-month')}</th><th>${trend.currency}</th></tr>\n                ${trend.months.map(\n                  (month: string, i: number) =>\n                    html`<tr>\n                      <td>${month} ${trend.sources?.[i] ? html`<span class=\"muted\">${i18next.t(`text.saas-360-source-${trend.sources[i]}`)}</span>` : nothing}</td>\n                      <td>${trend.values[i] === null ? '—' : amountText(trend.values[i])}</td>\n                    </tr>`\n                )}\n                ${trend.nextMonths.map((month: string, i: number) => html`<tr><td>${month}</td><td class=\"expected\">${trend.expected[i] === null ? '' : amountText(trend.expected[i])}</td></tr>`)}\n              </table>`\n          )\n        : nothing}\n      ${this.payments\n        ? section(\n            i18next.t('text.saas-360-payments', { vendor: one.counterparty?.name ?? '' }),\n            this.payments.length\n              ? html`<table>\n                  ${this.payments.map(\n                    line => html`<tr>\n                      <td>${entity360Name({ __typename: 'Transaction', id: line.id, transactionDate: line.transactionDate, direction: 'EXPENSE' }, line.transactionDate)}</td>\n                      <td class=\"muted\">${line.description ?? ''}</td>\n                      <td>${amountText(line.amount)} ${line.currency !== one.currency ? line.currency : ''}</td>\n                    </tr>`\n                  )}\n                </table>`\n              : html`<div class=\"muted\">${i18next.t(one.counterparty ? 'text.saas-360-payments-empty' : 'text.saas-360-payments-no-vendor')}</div>`\n          )\n        : nothing}\n      ${section(\n        i18next.t('text.saas-tab-bills'),\n        bills.length\n          ? html`<table>\n              ${bills.map(\n                bill => html`<tr>\n                  <td>${bill.month}${bill.billedOn ? html` <span class=\"muted\">${bill.billedOn}</span>` : nothing}</td>\n                  <td class=\"muted\">${(bill.lines ?? []).map((line: any) => `${line.subscription?.name ?? line.label ?? ''} ${amountText(line.amount)}`).join(' · ')}</td>\n                  <td>${amountText(bill.total)}</td>\n                </tr>`\n              )}\n            </table>`\n          : html`<div class=\"muted\">${i18next.t('text.saas-bills-empty')}</div>`\n      )}\n      ${section(\n        i18next.t('text.saas-tab-subscriptions'),\n        subs.length\n          ? html`<table>\n              ${subs.map(\n                sub => html`<tr>\n                  <td>${sub.name} <span class=\"muted\">${wordOf('saas-billing', sub.billing)} · ${wordOf('saas-subscription-status', sub.status)}</span></td>\n                  <td class=\"muted\">${sub.billing === 'SEAT' ? i18next.t('text.saas-360-seats', { held: sub.seatsHeld ?? 0, quantity: sub.quantity ?? 0 }) : sub.billing === 'USAGE' ? i18next.t('text.saas-360-budget', { budget: amountText(sub.budget) }) : ''}</td>\n                  <td>${sub.billing === 'SEAT' ? amountText((sub.quantity ?? 0) * (sub.unitPrice ?? 0)) : amountText(sub.amount)}</td>\n                </tr>`\n              )}\n            </table>`\n          : html`<div class=\"muted\">${i18next.t('text.saas-subscriptions-empty')}</div>`\n      )}\n      ${section(\n        i18next.t('text.saas-360-changes'),\n        changes.length\n          ? html`<table>\n              ${changes.map(\n                change => html`<tr>\n                  <td>${String(change.at).slice(0, 10)} <span class=\"muted\">${change.changedBy ?? ''}</span></td>\n                  <td>${change.subject} · ${i18next.t(`text.saas-change-field-${change.field}`, { defaultValue: change.field })}</td>\n                  <td>${change.fromValue ?? '—'} → ${change.toValue ?? '—'}</td>\n                </tr>`\n              )}\n            </table>`\n          : html`<div class=\"muted\">${i18next.t('text.saas-360-changes-empty')}</div>`\n      )}\n    `\n  }\n}\n"]}

package/dist-client/index.d.ts

@@ -0,0 +1,3 @@
+export { SaasBillEditor } from './components/saas-bill-editor.js';
+export { registerSaasAccount360 } from './entity360/saas-account-360.js';
+export { trendTitle } from './words.js';