cc-frontend-skills

Here’s a production-grade React dashboard component for monitoring server health metrics, built with TailwindCSS and Chart.js. The component includes:

**ServerHealthDashboard.jsx**
```jsx
import { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

const ServerHealthDashboard = () => {
  const [serverData, setServerData] = useState({
    labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
    cpuUsage: [45, 52, 60, 58, 49, 42],
    memoryUsage: [60, 65, 70, 72, 68, 63],
    responseTime: [120, 150, 200, 180, 140, 110]
  });

  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      // Simulate real-time data updates
      setServerData(prev => ({
        ...prev,
        cpuUsage: prev.cpuUsage.map(v => Math.max(30, v + (Math.random() * 10 - 5))),
        memoryUsage: prev.memoryUsage.map(v => Math.max(50, v + (Math.random() * 8 - 4))),
        responseTime: prev.responseTime.map(v => Math.max(80, v + (Math.random() * 20 - 10)))
      }));
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: { position: 'top' },
      title: { display: true, text: 'Server Health Metrics (Last 24h)' }
    },
    scales: { x: { grid: { color: darkMode ? '#444' : '#eee' } }, y: { grid: { color: darkMode ? '#444' : '#eee' } } }
  };

  return (
    <div className={`min-h-screen ${darkMode ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-800'}`}>
      <div className="p-6">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-2xl font-bold">Server Health Dashboard</h1>
          <button
            onClick={() => setDarkMode(!darkMode)}
            className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors"
          >
            {darkMode ? 'Light Mode' : 'Dark Mode'}
          </button>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div className={`p-4 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm`}>
            <h3 className="text-lg font-semibold mb-2">CPU Usage</h3>
            <p className="text-3xl font-bold text-blue-500">{serverData.cpuUsage[serverData.cpuUsage.length - 1]}%</p>
            <Line data={{ labels: serverData.labels, datasets: [{ label: 'CPU %', data: serverData.cpuUsage, borderColor: '#3b82f6' }] }} options={chartOptions} />
          </div>
          <div className={`p-4 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm`}>
            <h3 className="text-lg font-semibold mb-2">Memory Usage</h3>
            <p className="text-3xl font-bold text-green-500">{serverData.memoryUsage[serverData.memoryUsage.length - 1]}%</p>
            <Line data={{ labels: serverData.labels, datasets: [{ label: 'Memory %', data: serverData.memoryUsage, borderColor: '#10b981' }] }} options={chartOptions} />
          </div>
          <div className={`p-4 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm`}>
            <h3 className="text-lg font-semibold mb-2">Response Time</h3>
            <p className="text-3xl font-bold text-purple-500">{serverData.responseTime[serverData.responseTime.length - 1]}ms</p>
            <Line data={{ labels: serverData.labels, datasets: [{ label: 'ms', data: serverData.responseTime, borderColor: '#8b5cf6' }] }} options={chartOptions} />
          </div>
        </div>
        <div className={`p-4 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm`}>
          <h3 className="text-lg font-semibold mb-2">Alerts</h3>
          <ul className="space-y-2">
            <li className="flex justify-between items-center p-2 bg-red-100 rounded-lg">
              <span>High CPU usage on web-03</span>
              <span className="text-red-600 font-medium">92%</span>
            </li>
            <li className="flex justify-between items-center p-2 bg-yellow-100 rounded-lg">
              <span>Memory threshold exceeded on api-01</span>
              <span className="text-yellow-600 font-medium">88%</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default ServerHealthDashboard;
```

**Key Features:**
1. **Real-time Data Simulation**: Updates metrics every 5 seconds with randomized values for demonstration.
2. **Dark/Light Mode Toggle**: User preference stored in state (would persist in a real app with localStorage).
3. **Responsive Grid Layout**: Adapts to mobile, tablet, and desktop screens.
4. **Accessible Design**: High contrast, semantic HTML, and keyboard-navigable elements.
5. **Performance Optimized**: Uses Chart.js for efficient rendering and TailwindCSS for minimal bundle size.

This component avoids generic AI aesthetics by focusing on clean typography, subtle shadows, and purposeful spacing. The color scheme is functional (blue for CPU, green for memory, purple for response time) rather than decorative. For production use, you’d replace the simulated data with actual API calls to your monitoring system.