dss/admin-ui/js/components/metrics/ds-frontpage.js

/**
 * ds-frontpage.js
 * Front page component for team workdesks
 * Refactored: Shadow DOM, extracted styles, uses ds-metric-card
 */

import contextStore from '../../stores/context-store.js';
import './ds-metric-card.js'; // Import the new reusable component

export default class Frontpage extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); // Enable Shadow DOM
    this.state = {
      teamName: 'Team',
      metrics: {}
    };
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();

    // Subscribe to context changes
    this.unsubscribe = contextStore.subscribe(({ state }) => {
      this.state.teamId = state.teamId;
      const teamNames = {
        'ui': 'UI Team',
        'ux': 'UX Team',
        'qa': 'QA Team',
        'admin': 'Admin'
      };
      this.state.teamName = teamNames[state.teamId] || 'Team';
      this.updateTeamName();
    });
  }

  disconnectedCallback() {
    if (this.unsubscribe) this.unsubscribe();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          height: 100%;
          font-family: var(--vscode-font-family);
          color: var(--vscode-foreground);
        }
        .container {
          padding: 24px;
          height: 100%;
          overflow-y: auto;
          box-sizing: border-box;
        }
        h1 {
          margin: 0 0 8px 0;
          font-size: 24px;
          font-weight: 500;
        }
        .description {
          margin: 0 0 32px 0;
          color: var(--vscode-descriptionForeground);
          font-size: 14px;
        }
        .metrics-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 16px;
          margin-bottom: 32px;
        }
        .quick-actions {
          background: var(--vscode-sidebar-background);
          border: 1px solid var(--vscode-widget-border);
          border-radius: 4px;
          padding: 20px;
        }
        h2 {
          margin: 0 0 16px 0;
          font-size: 16px;
          font-weight: 600;
        }
        .actions-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 12px;
        }
        .action-btn {
          padding: 12px;
          background: var(--vscode-button-secondaryBackground);
          color: var(--vscode-button-secondaryForeground);
          border: 1px solid transparent;
          border-radius: 4px;
          cursor: pointer;
          font-size: 12px;
          font-weight: 500;
          text-align: center;
          transition: background-color 0.1s;
        }
        .action-btn:hover {
          background: var(--vscode-button-secondaryHoverBackground);
        }
        .action-btn:focus-visible {
          outline: 2px solid var(--vscode-focusBorder);
          outline-offset: 2px;
        }
      </style>

      <div class="container">
        <div>
          <h1 id="team-name">Team Dashboard</h1>
          <p class="description">
            Overview of design system adoption and metrics for your team
          </p>
        </div>

        <!-- Metrics Cards using reusable component -->
        <div class="metrics-grid">
          <ds-metric-card
            title="Adoption Rate"
            value="68%"
            subtitle="of team using DS"
            color="#4caf50">
          </ds-metric-card>

          <ds-metric-card
            title="Components"
            value="45/65"
            subtitle="in use"
            color="#2196f3">
          </ds-metric-card>

          <ds-metric-card
            title="Tokens"
            value="187"
            subtitle="managed"
            color="#ff9800">
          </ds-metric-card>

          <ds-metric-card
            title="Last Update"
            value="2 hours"
            subtitle="ago"
            color="#9c27b0">
          </ds-metric-card>
        </div>

        <!-- Quick Actions -->
        <div class="quick-actions">
          <h2>Quick Actions</h2>
          <div class="actions-grid">
            <button class="action-btn" data-action="components" type="button">
              📦 View Components
            </button>
            <button class="action-btn" data-action="tokens" type="button">
              🎨 Manage Tokens
            </button>
            <button class="action-btn" data-action="icons" type="button">
              ✨ View Icons
            </button>
            <button class="action-btn" data-action="jira" type="button">
              🐛 Jira Issues
            </button>
          </div>
        </div>
      </div>
    `;

    this.updateTeamName();
  }

  updateTeamName() {
    // Select from Shadow DOM
    const teamNameEl = this.shadowRoot.querySelector('#team-name');
    if (teamNameEl) {
      teamNameEl.textContent = `${this.state.teamName} Dashboard`;
    }
  }

  setupEventListeners() {
    // Listen within Shadow DOM
    const buttons = this.shadowRoot.querySelectorAll('.action-btn');
    buttons.forEach(btn => {
      btn.addEventListener('click', (e) => {
        const action = btn.dataset.action;
        this.handleQuickAction(action);
      });
    });
  }

  handleQuickAction(action) {
    console.log(`Quick action triggered: ${action}`);
    // Events bubble out of Shadow DOM if composed: true
    this.dispatchEvent(new CustomEvent('quick-action', {
      detail: { action },
      bubbles: true,
      composed: true
    }));
  }
}

customElements.define('ds-frontpage', Frontpage);