@things-factory/saas 0.0.0-stage → 10.1.234

package/dist-client/pages/saas-cost-trend.js

@@ -0,0 +1,219 @@
+import { __decorate, __metadata } from "tslib";
+import gql from 'graphql-tag';
+import { css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { navigate, PageView } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { amountText, changeText, shiftMonth, thisMonth } from '../words.js';
+const SERIES = 'key accountId accountName subscriptionId name currency amounts total monthOverMonth yearOverYear';
+/**
+ * 비용 추이 — what the subscriptions cost month by month, from their bills (ADR-0177 decision 9): everything, each account
+ * with its subscriptions under it, each department, in each bill's own currency. What the latest bills are worth telling
+ * comes first. Nothing here is stored; it is read from the bills each time.
+ */
+let SaasCostTrend = class SaasCostTrend extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.from = shiftMonth(thisMonth(), -12);
+        this.to = shiftMonth(thisMonth(), -1);
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        padding: var(--spacing-large, 12px);
+        gap: var(--spacing-large, 12px);
+        font-size: var(--ui-t-body, 14px);
+      }
+      .range {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .range 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;
+      }
+      h3 {
+        margin: 0;
+        font-size: var(--ui-t-title, 16px);
+        font-weight: 600;
+      }
+      ul.alerts {
+        margin: 0;
+        padding-left: 20px;
+        color: var(--md-sys-color-error);
+      }
+      .muted {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .scroll {
+        overflow-x: auto;
+      }
+      table {
+        border-collapse: collapse;
+        white-space: nowrap;
+      }
+      th,
+      td {
+        padding: 6px 8px;
+        border-bottom: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+        text-align: right;
+      }
+      th:first-child,
+      td:first-child {
+        position: sticky;
+        left: 0;
+        text-align: left;
+        background: var(--md-sys-color-surface);
+      }
+      th {
+        color: var(--md-sys-color-on-surface-variant);
+        font-weight: 500;
+      }
+      tr.account td:first-child button {
+        border: none;
+        background: none;
+        color: var(--md-sys-color-primary);
+        font: inherit;
+        cursor: pointer;
+        padding: 0;
+      }
+      tr.sub td:first-child {
+        padding-left: 24px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .up {
+        color: var(--md-sys-color-error);
+      }
+    `
+    ]; }
+    get context() {
+        return { title: i18next.t('title.saas-cost-trend') };
+    }
+    async pageUpdated(changes) {
+        if (this.active && (changes.active || !this.trend))
+            await this.read();
+    }
+    async read() {
+        const response = await client.query({
+            query: gql `
+        query ($from: String!, $to: String!) {
+          saasCostTrend(from: $from, to: $to) {
+            months
+            all { ${SERIES} }
+            accounts { ${SERIES} }
+            subscriptions { ${SERIES} }
+            departments { key departmentId name currency amounts total }
+            alerts { kind accountId accountName subscriptionName month amount limit }
+          }
+        }
+      `,
+            variables: { from: this.from, to: this.to },
+            fetchPolicy: 'network-only'
+        });
+        this.trend = response.data?.saasCostTrend;
+    }
+    change(ratio) {
+        return html `<span class=${ratio && ratio > 0 ? 'up' : ''}>${changeText(ratio)}</span>`;
+    }
+    row(label, one, kind = '') {
+        return html `<tr class=${kind}>
+      <td>${label}</td>
+      <td>${one.currency}</td>
+      ${one.amounts.map((amount) => html `<td>${amount ? amountText(amount) : ''}</td>`)}
+      <td>${amountText(one.total)}</td>
+      ${one.monthOverMonth !== undefined ? html `<td>${this.change(one.monthOverMonth)}</td><td>${this.change(one.yearOverYear)}</td>` : html `<td></td><td></td>`}
+    </tr>`;
+    }
+    head(first) {
+        return html `<tr>
+      <th>${first}</th>
+      <th>${i18next.t('field.saas-trend-currency')}</th>
+      ${this.trend.months.map((month) => html `<th>${month}</th>`)}
+      <th>${i18next.t('field.saas-trend-total')}</th>
+      <th>${i18next.t('field.saas-trend-month-over-month')}</th>
+      <th>${i18next.t('field.saas-trend-year-over-year')}</th>
+    </tr>`;
+    }
+    render() {
+        const trend = this.trend;
+        return html `
+      <div class="range">
+        <input type="month" .value=${this.from} @change=${(e) => ((this.from = e.target.value), this.read())} />
+        ~
+        <input type="month" .value=${this.to} @change=${(e) => ((this.to = e.target.value), this.read())} />
+      </div>
+      ${trend
+            ? html `
+            ${trend.alerts.length
+                ? html `<h3>${i18next.t('text.saas-trend-alerts', { month: trend.alerts[0].month })}</h3>
+                  <ul class="alerts">
+                    ${trend.alerts.map((alert) => html `<li>
+                          ${i18next.t(`text.saas-alert-${alert.kind}`, {
+                    account: alert.accountName,
+                    subscription: alert.subscriptionName ?? '',
+                    amount: amountText(alert.amount),
+                    limit: amountText(alert.limit)
+                })}
+                        </li>`)}
+                  </ul>`
+                : nothing}
+            ${trend.all.length
+                ? html `
+                  <h3>${i18next.t('text.saas-trend-accounts')}</h3>
+                  <div class="scroll">
+                    <table>
+                      ${this.head(i18next.t('field.saas-trend-account'))}
+                      ${trend.all.map((one) => this.row(i18next.t('text.saas-trend-all'), one))}
+                      ${trend.accounts.map((account) => html `
+                          ${this.row(html `<button @click=${() => navigate(`saas-account-page?id=${account.accountId}&tab=bills`)}>${account.name}</button>`, account, 'account')}
+                          ${trend.subscriptions
+                    .filter((sub) => sub.accountId === account.accountId && sub.currency === account.currency)
+                    .map((sub) => this.row(sub.name ?? i18next.t('text.saas-trend-rest'), sub, 'sub'))}
+                        `)}
+                    </table>
+                  </div>
+                  <h3>${i18next.t('text.saas-trend-departments')}</h3>
+                  <div class="scroll">
+                    <table>
+                      ${this.head(i18next.t('field.saas-trend-department'))}
+                      ${trend.departments.map((one) => this.row(one.name ?? i18next.t('text.saas-trend-no-department'), one))}
+                    </table>
+                  </div>
+                `
+                : html `<div class="muted">${i18next.t('text.saas-trend-empty')}</div>`}
+          `
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SaasCostTrend.prototype, "from", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SaasCostTrend.prototype, "to", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SaasCostTrend.prototype, "trend", void 0);
+SaasCostTrend = __decorate([
+    customElement('saas-cost-trend')
+], SaasCostTrend);
+export { SaasCostTrend };
+//# sourceMappingURL=saas-cost-trend.js.map

package/dist-client/pages/saas-cost-trend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saas-cost-trend.js","sourceRoot":"","sources":["../../client/pages/saas-cost-trend.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { amountText, changeText, shiftMonth, thisMonth } from '../words.js'\n\nconst SERIES = 'key accountId accountName subscriptionId name currency amounts total monthOverMonth yearOverYear'\n\n/**\n * 비용 추이 — what the subscriptions cost month by month, from their bills (ADR-0177 decision 9): everything, each account\n * with its subscriptions under it, each department, in each bill's own currency. What the latest bills are worth telling\n * comes first. Nothing here is stored; it is read from the bills each time.\n */\n@customElement('saas-cost-trend')\nexport class SaasCostTrend extends localize(i18next)(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n        padding: var(--spacing-large, 12px);\n        gap: var(--spacing-large, 12px);\n        font-size: var(--ui-t-body, 14px);\n      }\n      .range {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--spacing-medium, 8px);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      .range 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      }\n      h3 {\n        margin: 0;\n        font-size: var(--ui-t-title, 16px);\n        font-weight: 600;\n      }\n      ul.alerts {\n        margin: 0;\n        padding-left: 20px;\n        color: var(--md-sys-color-error);\n      }\n      .muted {\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      .scroll {\n        overflow-x: auto;\n      }\n      table {\n        border-collapse: collapse;\n        white-space: nowrap;\n      }\n      th,\n      td {\n        padding: 6px 8px;\n        border-bottom: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n        text-align: right;\n      }\n      th:first-child,\n      td:first-child {\n        position: sticky;\n        left: 0;\n        text-align: left;\n        background: var(--md-sys-color-surface);\n      }\n      th {\n        color: var(--md-sys-color-on-surface-variant);\n        font-weight: 500;\n      }\n      tr.account td:first-child button {\n        border: none;\n        background: none;\n        color: var(--md-sys-color-primary);\n        font: inherit;\n        cursor: pointer;\n        padding: 0;\n      }\n      tr.sub td:first-child {\n        padding-left: 24px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      .up {\n        color: var(--md-sys-color-error);\n      }\n    `\n  ]\n\n  @state() from = shiftMonth(thisMonth(), -12)\n  @state() to = shiftMonth(thisMonth(), -1)\n  @state() trend?: any\n\n  get context() {\n    return { title: i18next.t('title.saas-cost-trend') }\n  }\n\n  async pageUpdated(changes: any) {\n    if (this.active && (changes.active || !this.trend)) await this.read()\n  }\n\n  private async read() {\n    const response = await client.query({\n      query: gql`\n        query ($from: String!, $to: String!) {\n          saasCostTrend(from: $from, to: $to) {\n            months\n            all { ${SERIES} }\n            accounts { ${SERIES} }\n            subscriptions { ${SERIES} }\n            departments { key departmentId name currency amounts total }\n            alerts { kind accountId accountName subscriptionName month amount limit }\n          }\n        }\n      `,\n      variables: { from: this.from, to: this.to },\n      fetchPolicy: 'network-only'\n    })\n    this.trend = response.data?.saasCostTrend\n  }\n\n  private change(ratio?: number | null) {\n    return html`<span class=${ratio && ratio > 0 ? 'up' : ''}>${changeText(ratio)}</span>`\n  }\n\n  private row(label: unknown, one: any, kind = '') {\n    return html`<tr class=${kind}>\n      <td>${label}</td>\n      <td>${one.currency}</td>\n      ${one.amounts.map((amount: number) => html`<td>${amount ? amountText(amount) : ''}</td>`)}\n      <td>${amountText(one.total)}</td>\n      ${one.monthOverMonth !== undefined ? html`<td>${this.change(one.monthOverMonth)}</td><td>${this.change(one.yearOverYear)}</td>` : html`<td></td><td></td>`}\n    </tr>`\n  }\n\n  private head(first: string) {\n    return html`<tr>\n      <th>${first}</th>\n      <th>${i18next.t('field.saas-trend-currency')}</th>\n      ${this.trend.months.map((month: string) => html`<th>${month}</th>`)}\n      <th>${i18next.t('field.saas-trend-total')}</th>\n      <th>${i18next.t('field.saas-trend-month-over-month')}</th>\n      <th>${i18next.t('field.saas-trend-year-over-year')}</th>\n    </tr>`\n  }\n\n  render() {\n    const trend = this.trend\n    return html`\n      <div class=\"range\">\n        <input type=\"month\" .value=${this.from} @change=${(e: any) => ((this.from = e.target.value), this.read())} />\n        ~\n        <input type=\"month\" .value=${this.to} @change=${(e: any) => ((this.to = e.target.value), this.read())} />\n      </div>\n      ${trend\n        ? html`\n            ${trend.alerts.length\n              ? html`<h3>${i18next.t('text.saas-trend-alerts', { month: trend.alerts[0].month })}</h3>\n                  <ul class=\"alerts\">\n                    ${trend.alerts.map(\n                      (alert: any) =>\n                        html`<li>\n                          ${i18next.t(`text.saas-alert-${alert.kind}`, {\n                            account: alert.accountName,\n                            subscription: alert.subscriptionName ?? '',\n                            amount: amountText(alert.amount),\n                            limit: amountText(alert.limit)\n                          })}\n                        </li>`\n                    )}\n                  </ul>`\n              : nothing}\n            ${trend.all.length\n              ? html`\n                  <h3>${i18next.t('text.saas-trend-accounts')}</h3>\n                  <div class=\"scroll\">\n                    <table>\n                      ${this.head(i18next.t('field.saas-trend-account'))}\n                      ${trend.all.map((one: any) => this.row(i18next.t('text.saas-trend-all'), one))}\n                      ${trend.accounts.map(\n                        (account: any) => html`\n                          ${this.row(html`<button @click=${() => navigate(`saas-account-page?id=${account.accountId}&tab=bills`)}>${account.name}</button>`, account, 'account')}\n                          ${trend.subscriptions\n                            .filter((sub: any) => sub.accountId === account.accountId && sub.currency === account.currency)\n                            .map((sub: any) => this.row(sub.name ?? i18next.t('text.saas-trend-rest'), sub, 'sub'))}\n                        `\n                      )}\n                    </table>\n                  </div>\n                  <h3>${i18next.t('text.saas-trend-departments')}</h3>\n                  <div class=\"scroll\">\n                    <table>\n                      ${this.head(i18next.t('field.saas-trend-department'))}\n                      ${trend.departments.map((one: any) => this.row(one.name ?? i18next.t('text.saas-trend-no-department'), one))}\n                    </table>\n                  </div>\n                `\n              : html`<div class=\"muted\">${i18next.t('text.saas-trend-empty')}</div>`}\n          `\n        : nothing}\n    `\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -0,0 +1 @@
+export default function route(page: string): "saas-account-list" | "saas-cost-trend" | "my-saas-account-list" | "saas-account-page" | undefined;

package/dist-client/route.js

@@ -0,0 +1,16 @@
+/* The pages this module brings to an application that puts them in its menu (ADR-0177). */
+export default function route(page) {
+    switch (page) {
+        case 'saas-account-list':
+        case 'my-saas-account-list':
+            import('./pages/saas-account-list.js');
+            return page;
+        case 'saas-account-page':
+            import('./pages/saas-account-page.js');
+            return page;
+        case 'saas-cost-trend':
+            import('./pages/saas-cost-trend.js');
+            return page;
+    }
+}
+//# sourceMappingURL=route.js.map

package/dist-client/route.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,mBAAmB,CAAC;QACzB,KAAK,sBAAsB;YACzB,MAAM,CAAC,8BAA8B,CAAC,CAAA;YACtC,OAAO,IAAI,CAAA;QAEb,KAAK,mBAAmB;YACtB,MAAM,CAAC,8BAA8B,CAAC,CAAA;YACtC,OAAO,IAAI,CAAA;QAEb,KAAK,iBAAiB;YACpB,MAAM,CAAC,4BAA4B,CAAC,CAAA;YACpC,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["/* The pages this module brings to an application that puts them in its menu (ADR-0177). */\nexport default function route(page: string) {\n  switch (page) {\n    case 'saas-account-list':\n    case 'my-saas-account-list':\n      import('./pages/saas-account-list.js')\n      return page\n\n    case 'saas-account-page':\n      import('./pages/saas-account-page.js')\n      return page\n\n    case 'saas-cost-trend':\n      import('./pages/saas-cost-trend.js')\n      return page\n  }\n}\n"]}