@idp.global/catalog 1.2.1 → 2.1.0

package/ts_web/elements/idp-admin-overview.ts

@@ -0,0 +1,388 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import { idpAdminSharedStyles, renderAdminKpi, renderAdminStateCard, formatAdminTimeAgo, type TIdpAdminKpi } from './idp-admin-shared.js';
+import './idp-icon.js';
+import './idp-badge.js';
+import '@design.estate/dees-catalog/dist_ts_web/elements/00group-chart/dees-chart-area/index.js';
+import type {
+  TIdpAdminPage,
+  IIdpAdminUser,
+  IIdpAdminOrg,
+  IIdpAdminSession,
+  IIdpAdminActivity,
+  IIdpAdminPassportDevice,
+  IIdpAdminOverviewData,
+  IIdpAdminNavigateEventDetail,
+} from './idp-admin-shell.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-admin-overview': IdpAdminOverview;
+  }
+}
+
+@customElement('idp-admin-overview')
+export class IdpAdminOverview extends DeesElement {
+  public static demo = () => {
+    const now = Date.now();
+    const hours = Array.from({ length: 24 }, (unused, indexArg) => indexArg);
+    return html`
+      <idp-admin-overview
+        .user=${{ name: 'Alex Mercer', email: 'alex@lossless.com' }}
+        .orgs=${[
+          { id: 'org_foss', name: 'Lossless GmbH', slug: 'lossless', myRole: 'owner' },
+          { id: 'org_task', name: 'Task VC', slug: 'task', myRole: 'admin' },
+        ]}
+        .sessions=${[
+          { id: 's1', deviceName: 'MacBook Pro', browser: 'Safari 18', os: 'macOS', ip: '84.132.10.4', lastActive: now - 120000, createdAt: now - 86400000 * 3, isCurrent: true },
+          { id: 's2', deviceName: 'iPhone 15 Pro', browser: 'Safari', os: 'iOS 18', ip: '84.132.10.4', lastActive: now - 3600000, createdAt: now - 86400000 * 10, isCurrent: false },
+        ]}
+        .activities=${[
+          { id: 'a1', action: 'login_success', description: 'Signed in with passkey', timestamp: now - 300000 },
+          { id: 'a2', action: 'app_authorized', description: 'Granted access to foss.global', timestamp: now - 7200000 },
+        ]}
+        .overviewData=${{
+          chartLabel: 'Approval activity',
+          chartSeries: [
+            { name: 'Approvals', data: hours.map((hourArg) => ({ x: now - (23 - hourArg) * 3600000, y: [22, 18, 14, 10, 8, 7, 9, 14, 22, 38, 52, 64, 71, 74, 70, 65, 58, 52, 45, 38, 32, 28, 25, 23][hourArg] })) },
+            { name: 'OAuth grants', data: hours.map((hourArg) => ({ x: now - (23 - hourArg) * 3600000, y: [16, 12, 9, 7, 6, 5, 7, 11, 18, 30, 42, 50, 56, 58, 56, 52, 47, 41, 36, 30, 26, 23, 20, 18][hourArg] })) },
+          ],
+          threats: [
+            { severity: 'error', title: 'Repeated denied logins', meta: '5 attempts · Lagos, NG · last 1h', action: 'Block IP' },
+            { severity: 'warning', title: 'Stale device key', meta: 'sam@ · Apple Watch · 9 mo old', action: 'Rotate' },
+          ],
+          regions: [
+            { name: 'Berlin, DE', code: 'DE', count: 1284, share: 1, kind: 'home' },
+            { name: 'Amsterdam, NL', code: 'NL', count: 642, share: 0.5 },
+            { name: 'Lagos, NG', code: 'NG', count: 12, share: 0.01, kind: 'risk' },
+          ],
+          feed: [
+            { tone: 'info', text: 'Identity created · did:idp:0x9b12…f034', meta: 'block #9 841 222' },
+            { tone: 'ok', text: 'Anchor confirmed · 12 blocks deep', meta: '2m' },
+          ],
+        }}
+      ></idp-admin-overview>
+    `;
+  };
+  public static demoGroups = ['idp.global v5 composed surfaces'];
+
+  public static styles = [
+    ...idpElementStyles,
+    idpAdminSharedStyles,
+    css`
+      :host {
+        display: block;
+        background: var(--idp-bg);
+        color: var(--idp-fg);
+      }
+      .chart-card dees-chart-area {
+        display: block;
+        min-height: 240px;
+      }
+      .region-row {
+        display: grid;
+        grid-template-columns: 28px 1fr auto;
+        gap: 12px;
+        align-items: center;
+        padding: 8px 0;
+      }
+      .region-code {
+        font-family: var(--idp-mono);
+        font-size: 10px;
+        font-weight: 700;
+        text-align: center;
+        padding: 2px 0;
+        border: 1px solid var(--idp-border);
+        border-radius: 3px;
+        color: var(--idp-fg-3);
+      }
+      .region-code.home {
+        color: var(--idp-accent);
+        border-color: var(--sh-accent-ring);
+        background: var(--idp-accent-soft);
+      }
+      .region-code.risk {
+        color: var(--idp-error);
+        border-color: var(--idp-error-border);
+        background: var(--idp-error-bg);
+      }
+      .region-bar {
+        height: 4px;
+        margin-top: 4px;
+        border-radius: 2px;
+        background: var(--idp-muted);
+        overflow: hidden;
+      }
+      .region-bar-fill {
+        height: 100%;
+        background: var(--idp-accent);
+        opacity: 0.85;
+      }
+      .region-bar-fill.risk {
+        background: var(--idp-error);
+        opacity: 0.8;
+      }
+      .region-count {
+        font-family: var(--idp-mono);
+        font-size: 11.5px;
+        color: var(--idp-fg);
+        min-width: 44px;
+        text-align: right;
+      }
+      .region-list {
+        padding: 4px 16px 8px;
+      }
+      .threat-row {
+        display: grid;
+        grid-template-columns: 6px 1fr auto;
+        gap: 12px;
+        align-items: center;
+        padding: 12px 0;
+        border-bottom: 1px solid var(--idp-border-soft);
+      }
+      .threat-row:last-child {
+        border-bottom: none;
+      }
+      .threat-list {
+        padding: 0 16px;
+      }
+      .threat-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 3px;
+      }
+      .threat-title {
+        font-size: 12.5px;
+        font-weight: 500;
+        color: var(--idp-fg);
+      }
+      .threat-meta {
+        font-family: var(--idp-mono);
+        font-size: 10.5px;
+        color: var(--idp-muted-fg);
+        margin-top: 2px;
+      }
+      .threat-action {
+        padding: 4px 10px;
+        border: 1px solid var(--idp-border);
+        border-radius: 6px;
+        background: var(--idp-bg);
+        color: var(--idp-fg);
+        font-family: var(--idp-font);
+        font-size: 11px;
+        font-weight: 500;
+        white-space: nowrap;
+        cursor: pointer;
+      }
+    `,
+  ];
+
+  @property({ type: Object })
+  public accessor user: IIdpAdminUser = {
+    name: '',
+    email: '',
+  };
+
+  @property({ type: Array })
+  public accessor orgs: IIdpAdminOrg[] = [];
+
+  @property({ type: Array })
+  public accessor sessions: IIdpAdminSession[] = [];
+
+  @property({ type: Array })
+  public accessor activities: IIdpAdminActivity[] = [];
+
+  @property({ type: Array })
+  public accessor passportDevices: IIdpAdminPassportDevice[] = [];
+
+  @property({ type: Boolean, attribute: 'data-loading', reflect: true })
+  public accessor dataLoading = false;
+
+  @property({ type: String, attribute: 'data-error' })
+  public accessor dataError = '';
+
+  @property({ type: Object })
+  public accessor overviewData: IIdpAdminOverviewData | null = null;
+
+  private navigate(pageArg: TIdpAdminPage) {
+    this.dispatchEvent(new CustomEvent<IIdpAdminNavigateEventDetail>('idp-admin-navigate', {
+      detail: { page: pageArg },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private renderDataState(emptyTitleArg: string, emptyDescriptionArg: string, iconArg = 'box'): TemplateResult {
+    if (this.dataLoading) {
+      return renderAdminStateCard('Loading data', 'Fetching the latest account and organisation data.', 'cloud');
+    }
+
+    if (this.dataError) {
+      return renderAdminStateCard('Data unavailable', this.dataError, 'alert');
+    }
+
+    return renderAdminStateCard(emptyTitleArg, emptyDescriptionArg, iconArg);
+  }
+
+  private renderInsights(): TemplateResult {
+    const data = this.overviewData;
+    if (!data?.chartSeries?.length && !data?.threats?.length) {
+      return html``;
+    }
+    const toneColor = (severityArg: string) => severityArg === 'error'
+      ? 'var(--idp-error)'
+      : severityArg === 'warning' ? 'var(--idp-warn)' : 'var(--idp-info)';
+    return html`
+      <div class="primary-grid">
+        ${data?.chartSeries?.length ? html`
+          <div class="card chart-card">
+            <div class="card-head"><span class="card-title">${data.chartLabel || 'Approval activity'}</span></div>
+            <dees-chart-area
+              .label=${data.chartLabel || 'Approval activity'}
+              .yAxisFormatter=${(valueArg: number) => `${Math.round(valueArg)}`}
+              .series=${data.chartSeries.map((seriesArg) => ({
+                name: seriesArg.name,
+                data: seriesArg.data.map((pointArg) => ({ x: pointArg.x, y: pointArg.y })),
+              }))}
+            ></dees-chart-area>
+          </div>
+        ` : html``}
+        ${data?.threats?.length ? html`
+          <div class="card">
+            <div class="card-head"><span class="card-title">Needs attention</span><idp-badge variant="error">${data.threats.length} open</idp-badge></div>
+            <div class="threat-list">
+              ${data.threats.map((threatArg) => html`
+                <div class="threat-row">
+                  <span class="threat-dot" style="background:${toneColor(threatArg.severity)}"></span>
+                  <div><div class="threat-title">${threatArg.title}</div><div class="threat-meta">${threatArg.meta}</div></div>
+                  ${threatArg.action ? html`<button class="threat-action">${threatArg.action}</button>` : html``}
+                </div>
+              `)}
+            </div>
+          </div>
+        ` : html``}
+      </div>
+    `;
+  }
+
+  private renderFooterRows(): TemplateResult {
+    const data = this.overviewData;
+    if (!data?.feed?.length && !data?.regions?.length) {
+      return html``;
+    }
+    const feedColor = (toneArg: string) => toneArg === 'ok'
+      ? 'var(--idp-ok)'
+      : toneArg === 'warn' ? 'var(--idp-warn)' : toneArg === 'error' ? 'var(--idp-error)' : 'var(--idp-info)';
+    return html`
+      <div class="primary-grid">
+        ${data?.feed?.length ? html`
+          <div class="card">
+            <div class="card-head"><span class="card-title">Cardano feed</span><idp-badge variant="accent">live</idp-badge></div>
+            ${data.feed.map((itemArg) => html`
+              <div class="feed-item"><span class="feed-dot" style="--dot-color:${feedColor(itemArg.tone)}"></span><div class="feed-text">${itemArg.text}</div><span class="feed-meta">${itemArg.meta}</span></div>
+            `)}
+          </div>
+        ` : html``}
+        ${data?.regions?.length ? html`
+          <div class="card">
+            <div class="card-head"><span class="card-title">Sign-ins by region</span><span class="feed-meta">last 24h</span></div>
+            <div class="region-list">
+              ${data.regions.map((regionArg) => html`
+                <div class="region-row">
+                  <span class="region-code ${regionArg.kind || ''}">${regionArg.code}</span>
+                  <div>
+                    <div style="display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--idp-fg)">
+                      ${regionArg.name}
+                      ${regionArg.kind === 'risk' ? html`<idp-badge variant="error">flagged</idp-badge>` : html``}
+                      ${regionArg.kind === 'home' ? html`<idp-badge variant="accent">primary</idp-badge>` : html``}
+                    </div>
+                    <div class="region-bar"><div class="region-bar-fill ${regionArg.kind === 'risk' ? 'risk' : ''}" style="width:${Math.round(Math.min(1, Math.max(0, regionArg.share)) * 100)}%"></div></div>
+                  </div>
+                  <span class="region-count">${regionArg.count.toLocaleString()}</span>
+                </div>
+              `)}
+            </div>
+          </div>
+        ` : html``}
+      </div>
+    `;
+  }
+
+  public render(): TemplateResult {
+    const firstName = this.user?.name?.split(' ')[0] || 'there';
+    const activeSessionCount = this.sessions.filter((sessionArg) => sessionArg.isCurrent).length || this.sessions.length;
+    const activePassportCount = this.passportDevices.filter((deviceArg) => deviceArg.status === 'active').length;
+    const kpis: TIdpAdminKpi[] = [
+      {
+        label: 'Organisations',
+        value: String(this.orgs.length),
+        delta: 'live',
+        deltaKind: 'live',
+        spark: [1, 1, 1, 1, 1, 1, 1, Math.max(this.orgs.length, 1)],
+        sparkColor: 'var(--idp-spark-info)',
+        accent: 'var(--idp-chart-1)',
+        sub: 'Memberships visible to this account',
+      },
+      {
+        label: 'Sessions',
+        value: String(this.sessions.length),
+        delta: `${activeSessionCount} active`,
+        deltaKind: 'up',
+        spark: [1, 2, 1, 2, 3, 2, Math.max(this.sessions.length, 1)],
+        sparkColor: 'var(--idp-spark-up)',
+        accent: 'var(--idp-chart-2)',
+        sub: this.sessions.length ? `Latest ${formatAdminTimeAgo(Math.max(...this.sessions.map((sessionArg) => sessionArg.lastActive)))}` : 'No active sessions loaded',
+      },
+      {
+        label: 'Passport devices',
+        value: String(this.passportDevices.length),
+        delta: `${activePassportCount} active`,
+        deltaKind: 'live',
+        spark: [1, 1, 1, Math.max(this.passportDevices.length, 1)],
+        sparkColor: 'var(--idp-spark-info)',
+        accent: 'var(--idp-chart-5)',
+        sub: 'Cryptographic credentials',
+      },
+      {
+        label: 'Activity',
+        value: String(this.activities.length),
+        delta: 'live',
+        deltaKind: 'live',
+        spark: [1, 2, 2, 3, Math.max(this.activities.length, 1)],
+        sparkColor: 'var(--idp-spark-info)',
+        accent: 'var(--idp-info)',
+        sub: 'Recent account events',
+      },
+    ];
+    return html`
+      <header class="page-head">
+        <div>
+          <div class="eyebrow-row"><span class="eyebrow">Account - Overview</span><span class="live-pill"><span class="live-dot"></span>live</span></div>
+          <h1>Good morning, ${firstName}.</h1>
+          <div class="lead">Account-wide operational snapshot using live identity data.</div>
+        </div>
+        <div class="page-actions"><button class="plain-button outline" @click=${() => this.navigate('sessions')}>Review sessions</button><button class="plain-button primary" @click=${() => this.navigate('security')}>Manage security</button></div>
+      </header>
+      <div class="body">
+        <div class="kpis">${kpis.map((kpiArg) => renderAdminKpi(kpiArg))}</div>
+        ${this.dataLoading || this.dataError ? this.renderDataState('No overview data', 'The console has not received live account data yet.', 'activity') : html``}
+        ${this.renderInsights()}
+        <div class="primary-grid">
+          <div class="card">
+            <div class="card-head"><span class="card-title">Recent activity</span><idp-badge>${this.activities.length} events</idp-badge></div>
+            ${this.activities.length ? this.activities.slice(0, 8).map((activityArg) => html`
+              <div class="feed-item"><span class="feed-dot" style="--dot-color:var(--idp-info)"></span><div class="feed-text"><strong>${activityArg.action.replace(/_/g, ' ')}</strong> - ${activityArg.description}</div><span class="feed-meta">${formatAdminTimeAgo(activityArg.timestamp)}</span></div>
+            `) : renderAdminStateCard('No activity yet', 'Activity events will appear here after logins, app changes, and organisation updates.', 'activity')}
+          </div>
+          <div class="card">
+            <div class="card-head"><span class="card-title">Current sessions</span><idp-badge>${this.sessions.length} total</idp-badge></div>
+            ${this.sessions.length ? this.sessions.slice(0, 5).map((sessionArg) => html`
+              <div class="feed-item"><span class="feed-dot" style="--dot-color:${sessionArg.isCurrent ? 'var(--idp-ok)' : 'var(--idp-muted-fg)'}"></span><div class="feed-text"><strong>${sessionArg.deviceName || 'Unknown device'}</strong> - <span class="mono">${sessionArg.browser} ${sessionArg.os}</span></div><span class="feed-meta">${formatAdminTimeAgo(sessionArg.lastActive)}</span></div>
+            `) : renderAdminStateCard('No sessions loaded', 'Active session telemetry is unavailable or there are no sessions.', 'monitor')}
+          </div>
+        </div>
+        ${this.renderFooterRows()}
+      </div>
+    `;
+  }
+}