// SolaceNet Operations Console
// React/TypeScript admin UI for capability management

import React, { useState } from 'react';
import { CapabilityManager } from './components/CapabilityManager';
import { AuditLogViewer } from './components/AuditLogViewer';
import './App.css';

function App() {
  const [activeTab, setActiveTab] = useState<'capabilities' | 'audit'>('capabilities');

  return (
    <div className="container">
      <header>
        <h1>SolaceNet Operations Console</h1>
        <nav className="tabs">
          <button
            className={activeTab === 'capabilities' ? 'active' : ''}
            onClick={() => setActiveTab('capabilities')}
          >
            Capabilities
          </button>
          <button
            className={activeTab === 'audit' ? 'active' : ''}
            onClick={() => setActiveTab('audit')}
          >
            Audit Logs
          </button>
        </nav>
      </header>

      <div className="content">
        {activeTab === 'capabilities' && <CapabilityManager />}
        {activeTab === 'audit' && <AuditLogViewer />}
      </div>
    </div>
  );
}

export default App;