family_budget/frontend/src/pages/SettingsPage.tsx

import { useState } from 'react';
import { AccountsList } from '../components/AccountsList';
import { CategoriesList } from '../components/CategoriesList';
import { RulesList } from '../components/RulesList';
import { DataSection } from '../components/DataSection';

type Tab = 'accounts' | 'categories' | 'rules' | 'data';

export function SettingsPage() {
  const [tab, setTab] = useState<Tab>('accounts');

  return (
    <div className="page">
      <div className="page__header">
        <div>
          <p className="page__eyebrow">Справочники</p>
          <h1 className="page__title">Настройки</h1>
        </div>
      </div>

      <div className="tabs">
        <button
          className={`tabs__button ${tab === 'accounts' ? 'tabs__button--active' : ''}`}
          onClick={() => setTab('accounts')}
        >
          Счета
        </button>
        <button
          className={`tabs__button ${tab === 'categories' ? 'tabs__button--active' : ''}`}
          onClick={() => setTab('categories')}
        >
          Категории
        </button>
        <button
          className={`tabs__button ${tab === 'rules' ? 'tabs__button--active' : ''}`}
          onClick={() => setTab('rules')}
        >
          Правила
        </button>
        <button
          className={`tabs__button ${tab === 'data' ? 'tabs__button--active' : ''}`}
          onClick={() => setTab('data')}
        >
          Данные
        </button>
      </div>

      <div className="tabs__content">
        {tab === 'accounts' && <AccountsList />}
        {tab === 'categories' && <CategoriesList />}
        {tab === 'rules' && <RulesList />}
        {tab === 'data' && <DataSection />}
      </div>
    </div>
  );
}