leocrm/frontend/src/pages/SettingsSystem.tsx

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { SettingsMenuOrderPage } from './SettingsMenuOrder';
import { SettingsThemePage } from './SettingsTheme';
import { SettingsPluginsPage } from './SettingsPlugins';

export function SettingsSystemPage() {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState('menu');

  const tabs = [
    { key: 'menu', label: t('settings.menuOrder', 'Menü') },
    { key: 'theme', label: t('settings.theme', 'Theme') },
    { key: 'plugins', label: t('settings.plugins', 'Plugins') },
  ];

  return (
    <div className="space-y-6" data-testid="settings-system-page">
      <h1 className="text-2xl font-bold text-secondary-900">System</h1>

      <div className="border-b border-secondary-200">
        <nav className="flex gap-4" role="tablist" aria-label="System Tabs">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              role="tab"
              aria-selected={activeTab === tab.key}
              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.key
                  ? 'border-primary-500 text-primary-700'
                  : 'border-transparent text-secondary-600 hover:text-secondary-900 hover:border-secondary-300'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      <div role="tabpanel">
        {activeTab === 'menu' && <SettingsMenuOrderPage />}
        {activeTab === 'theme' && <SettingsThemePage />}
        {activeTab === 'plugins' && <SettingsPluginsPage />}
      </div>
    </div>
  );
}