feat(catalog): add admin dashboard components

ts_web/elements/idp-dashboard-window.ts

@@ -3,6 +3,7 @@ import { idpElementStyles } from './tokens.js';
 import './idp-badge.js';
 import './idp-button.js';
 import './idp-icon.js';
+import './idp-data-table.js';
 
 type TDashboardStat = {
   label: string;
@@ -24,7 +25,7 @@ declare global {
 
 @customElement('idp-dashboard-window')
 export class IdpDashboardWindow extends DeesElement {
-  public static demo = () => html`<idp-dashboard-window dark></idp-dashboard-window>`;
+  public static demo = () => html`<idp-dashboard-window></idp-dashboard-window>`;
   public static demoGroups = ['idp.global v3 composed surfaces'];
 
   public static styles = [
@@ -139,7 +140,7 @@ export class IdpDashboardWindow extends DeesElement {
         place-items: center;
         border-radius: 4px;
         background: var(--idp-accent);
-        color: #fff;
+        color: var(--idp-accent-fg);
         font-family: var(--idp-mono);
         font-size: 10px;
         font-weight: 700;
@@ -340,51 +341,6 @@ export class IdpDashboardWindow extends DeesElement {
         font-size: 13px;
         font-weight: 600;
       }
-      table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-      th, td {
-        padding: 10px 16px;
-        border-bottom: 1px solid var(--idp-border-soft);
-        text-align: left;
-        font-size: 12.5px;
-      }
-      th {
-        color: color-mix(in srgb, var(--idp-muted-fg), transparent 35%);
-        font-family: var(--idp-mono);
-        font-size: 10px;
-        font-weight: 600;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
-      .user {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .row-avatar {
-        width: 22px;
-        height: 22px;
-        display: inline-grid;
-        place-items: center;
-        border: 1px solid var(--idp-border);
-        border-radius: 50%;
-        background: var(--idp-card-2);
-        color: var(--idp-accent-hover);
-        font-family: var(--idp-mono);
-        font-size: 9.5px;
-        font-weight: 700;
-      }
-      .row-name {
-        color: var(--idp-fg);
-        font-weight: 500;
-      }
-      .row-email, .dim {
-        color: var(--idp-muted-fg);
-        font-family: var(--idp-mono);
-        font-size: 11px;
-      }
       .feed-item {
         display: grid;
         grid-template-columns: 14px 1fr auto;
@@ -450,9 +406,6 @@ export class IdpDashboardWindow extends DeesElement {
           align-items: flex-start;
           flex-direction: column;
         }
-        th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4) {
-          display: none;
-        }
       }
     `,
   ];
@@ -522,8 +475,25 @@ export class IdpDashboardWindow extends DeesElement {
   }
 
   public render(): TemplateResult {
+    const approvalRows = this.approvals.map((rowArg) => ({
+      cells: [
+        html`
+          <div class="identity-cell">
+            <span class="identity-avatar">${rowArg[0].slice(0, 2).toUpperCase()}</span>
+            <div>
+              <div class="identity-primary">${rowArg[0]}</div>
+              <div class="identity-secondary">${rowArg[1]}</div>
+            </div>
+          </div>
+        `,
+        rowArg[2],
+        rowArg[3],
+        html`<idp-badge variant=${rowArg[5] as any}>${rowArg[4]}</idp-badge>`,
+      ],
+    }));
+
     return html`
-      <div class="dash" theme="dark">
+      <div class="dash">
         <div class="chrome">
           <span class="tdot red"></span><span class="tdot yellow"></span><span class="tdot green"></span>
           <span class="url"><idp-icon name="lock" size="11" style="color: var(--idp-ok)"></idp-icon> console.idp.global / dashboard</span>
@@ -561,22 +531,23 @@ export class IdpDashboardWindow extends DeesElement {
               ${this.stats.map((statArg) => this.renderStat(statArg))}
             </div>
             <div class="grid">
-              <section class="card">
-                <div class="card-head"><span class="card-title">Recent approvals</span><idp-badge>142 total</idp-badge></div>
-                <table>
-                  <thead><tr><th>User</th><th>Action</th><th>Device</th><th>Status</th></tr></thead>
-                  <tbody>
-                    ${this.approvals.map((rowArg) => html`
-                      <tr>
-                        <td><div class="user"><span class="row-avatar">${rowArg[0].slice(0, 2).toUpperCase()}</span><div><div class="row-name">${rowArg[0]}</div><div class="row-email">${rowArg[1]}</div></div></div></td>
-                        <td>${rowArg[2]}</td>
-                        <td><span class="dim">${rowArg[3]}</span></td>
-                        <td><idp-badge variant=${rowArg[5] as any}>${rowArg[4]}</idp-badge></td>
-                      </tr>
-                    `)}
-                  </tbody>
-                </table>
-              </section>
+              <idp-data-table
+                title="Recent approvals"
+                badge="142 total"
+                selected-tab="all"
+                .tabs=${[
+                  { id: 'all', label: 'All' },
+                  { id: 'pending', label: 'Pending' },
+                  { id: 'denied', label: 'Denied' },
+                ]}
+                .columns=${[
+                  { label: 'User' },
+                  { label: 'Action' },
+                  { label: 'Device', mono: true, hideBelow: 'mobile' },
+                  { label: 'Status' },
+                ]}
+                .rows=${approvalRows}
+              ></idp-data-table>
               <section class="card">
                 <div class="card-head"><span class="card-title">Cardano feed</span><idp-badge variant="accent"><span class="live-dot"></span>live</idp-badge></div>
                 ${this.feed.map((itemArg) => html`