dss/admin-ui/js/core/landing-page.js

/**
 * admin-ui/js/core/landing-page.js
 * Manages the landing page that displays all available dashboards
 */

const DASHBOARDS = [
  {
    id: 'dashboard',
    category: 'Overview',
    icon: '📊',
    title: 'Dashboard',
    description: 'System overview and key metrics',
    href: '#dashboard'
  },
  {
    id: 'projects',
    category: 'Overview',
    icon: '📁',
    title: 'Projects',
    description: 'Manage and organize projects',
    href: '#projects'
  },
  {
    id: 'services',
    category: 'Tools',
    icon: '⚙️',
    title: 'Services',
    description: 'Manage system services and endpoints',
    href: '#services'
  },
  {
    id: 'quick-wins',
    category: 'Tools',
    icon: '⭐',
    title: 'Quick Wins',
    description: 'Quick optimization opportunities',
    href: '#quick-wins'
  },
  {
    id: 'chat',
    category: 'Tools',
    icon: '💬',
    title: 'Chat',
    description: 'AI-powered chat assistant',
    href: '#chat'
  },
  {
    id: 'tokens',
    category: 'Design System',
    icon: '🎨',
    title: 'Tokens',
    description: 'Design tokens and variables',
    href: '#tokens'
  },
  {
    id: 'components',
    category: 'Design System',
    icon: '🧩',
    title: 'Components',
    description: 'Reusable component library',
    href: '#components'
  },
  {
    id: 'figma',
    category: 'Design System',
    icon: '🎭',
    title: 'Figma',
    description: 'Figma integration and sync',
    href: '#figma'
  },
  {
    id: 'storybook',
    category: 'Design System',
    icon: '📚',
    title: 'Storybook',
    description: 'Component documentation',
    href: 'http://localhost:6006',
    target: '_blank'
  },
  {
    id: 'docs',
    category: 'System',
    icon: '📖',
    title: 'Documentation',
    description: 'System documentation and guides',
    href: '#docs'
  },
  {
    id: 'teams',
    category: 'System',
    icon: '👥',
    title: 'Teams',
    description: 'Team management and permissions',
    href: '#teams'
  },
  {
    id: 'audit',
    category: 'System',
    icon: '✅',
    title: 'Audit',
    description: 'Audit logs and system events',
    href: '#audit'
  },
  {
    id: 'plugins',
    category: 'System',
    icon: '🔌',
    title: 'Plugins',
    description: 'Plugin management system',
    href: '#plugins'
  },
  {
    id: 'settings',
    category: 'System',
    icon: '⚡',
    title: 'Settings',
    description: 'System configuration and preferences',
    href: '#settings'
  }
];

class LandingPage {
  constructor(appElement) {
    this.app = appElement;
    this.landingPage = null;
    this.pageContent = null;
    this.init();
  }

  init() {
    this.landingPage = this.app.querySelector('#landing-page');
    this.pageContent = this.app.querySelector('#page-content');
    
    if (this.landingPage) {
      this.render();
      this.bindEvents();
    }
    
    // Listen for hash changes
    window.addEventListener('hashchange', () => this.handleRouteChange());
    this.handleRouteChange();
  }

  handleRouteChange() {
    const hash = window.location.hash.substring(1) || '';
    const isLanding = hash === '' || hash === 'landing';
    
    if (this.landingPage) {
      this.landingPage.classList.toggle('active', isLanding);
    }
    
    if (this.pageContent) {
      this.pageContent.style.display = isLanding ? 'none' : 'block';
    }
  }

  render() {
    if (!this.landingPage) return;
    
    const categories = this.groupByCategory();
    
    this.landingPage.innerHTML = `
      <div class="landing-hero">
        <h1>Design System Swarm</h1>
        <p>Welcome to your design system management interface. Select a dashboard to get started.</p>
      </div>
      
      <div class="landing-content">
        ${Object.entries(categories)
          .map(([category, dashboards]) => `
            <div class="dashboard-category">
              <h2 class="dashboard-category__title">${category}</h2>
              <div class="dashboard-grid">
                ${dashboards
                  .map(d => `
                    <a href="${d.href}" class="dashboard-card" ${d.target ? `target="${d.target}"` : ''} data-page="${d.id}">
                      <div class="dashboard-card__icon">${d.icon}</div>
                      <div class="dashboard-card__content">
                        <h3 class="dashboard-card__title">${d.title}</h3>
                        <p class="dashboard-card__description">${d.description}</p>
                      </div>
                      <div class="dashboard-card__meta">
                        <span>→</span>
                      </div>
                    </a>
                  `)
                  .join('')}
              </div>
            </div>
          `)
          .join('')}
      </div>
    `;
  }

  groupByCategory() {
    const grouped = {};
    
    DASHBOARDS.forEach(dashboard => {
      if (!grouped[dashboard.category]) {
        grouped[dashboard.category] = [];
      }
      grouped[dashboard.category].push(dashboard);
    });
    
    return grouped;
  }

  bindEvents() {
    const cards = this.landingPage.querySelectorAll('.dashboard-card');
    cards.forEach(card => {
      card.addEventListener('click', (e) => {
        // Allow external links (Storybook) to open normally
        if (card.target === '_blank') {
          return;
        }
        e.preventDefault();
        window.location.hash = card.getAttribute('href').substring(1);
      });
    });
  }
}

export default LandingPage;