`frontend/src/components/Header.js`

57 lines
import React from 'react'

const Header = ({ user, stats, onLogout }) => {
  const getHealthIcon = (stats) => {
    const memUsage = stats.system?.memoryUsage || 0
    const cpuUsage = stats.system?.cpuUsage || 0
    
    if (memUsage > 90 || cpuUsage > 90) return '🔴'
    if (memUsage > 70 || cpuUsage > 70) return '🟡'
    return '🟢'
  }

  return (
    <div className="header">
      <div className="header-left">
        <h1>Admin Dashboard</h1>
        <div className="header-stats">
          <div className="stat-item">
            <span className="stat-value">{stats.userActivity?.activeUsers || 0}</span> active users
          </div>
          <div className="stat-item">
            <span className="stat-value">{stats.alerts?.today || 0}</span> alerts today
          </div>
          <div className="stat-item">
            {getHealthIcon(stats)} system status
          </div>
          <div className="stat-item">
            <span className="stat-value">{stats.conversations?.today || 0}</span> conversations
          </div>
        </div>
      </div>
      
      <div className="header-right">
        <div className="user-info">
          <div className="user-avatar">
            {user?.username?.charAt(0)?.toUpperCase() || 'A'}
          </div>
          <div>
            <div className="user-name">{user?.username || 'Admin'}</div>
            <div style={{ fontSize: '12px', color: '#64748b' }}>
              {user?.role || 'Administrator'}
            </div>
          </div>
        </div>
        
        <button 
          onClick={onLogout}
          className="logout-btn"
        >
          Logout
        </button>
      </div>
    </div>
  )
}

export default Header