src/components/SetupCategoriesModal.js - master - Pitonx/MyFinance

src/components/SetupCategoriesModal.js
114 строк4 KB
Сергей
v5.0.9 - 9.0.0. Вошедшие изменения см. в CHANGELOG.md
06 май 2026, 12:00
06 май 2026, 12:0058f1ca9
import React, { useState } from 'react';
import { api } from '../services/api';

/**
 * Модальное окно первого входа:
 * предлагает импортировать системные категории расходов/доходов.
 */
export default function SetupCategoriesModal({ user, onDone }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSetup = async () => {
    setLoading(true);
    setError('');
    try {
      await api.auth.setupCategories();
      onDone();
    } catch (err) {
      console.error('[SetupCategories] setup error:', err);
      setError('Ошибка при копировании категорий. Попробуйте позже.');
    } finally {
      setLoading(false);
    }
  };

  const handleSkip = async () => {
    setLoading(true);
    setError('');
    try {
      await api.auth.skipCategories();
      onDone();
    } catch (err) {
      console.error('[SetupCategories] skip error:', err);
      setError('Ошибка. Попробуйте позже.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-overlay">
      <div className="auth-window" style={{ maxWidth: 480, width: '90%' }}>
        <div className="auth-title-bar">
          <span style={{ fontSize: 14 }}>📋</span>
          <h1 style={{ fontSize: 13, fontWeight: 600, marginLeft: 8 }}>Настройка справочников</h1>
        </div>
        <div className="auth-body">
          <div style={{ textAlign: 'center', marginBottom: 20 }}>
            <div style={{ fontSize: 40, marginBottom: 8 }}>📋</div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>Добро пожаловать{user?.name ? `, ${user.name}` : ''}!</div>
          </div>

          <div style={{
            marginBottom: 20,
            padding: 14,
            background: '#e3f2fd',
            border: '1px solid #90caf9',
            borderRadius: 4,
            fontSize: 13,
            lineHeight: 1.6,
          }}>
            <strong>Хотите использовать предзаполненный список статей расходов и доходов?</strong>
            <div style={{ marginTop: 8, color: '#455a64' }}>
              В список входят 17 категорий расходов (продукты, транспорт, жильё, здоровье и др.)
              и 8 категорий доходов (зарплата, инвестиции, подработка и др.) с подкатегориями.
              Вы сможете изменить или удалить их в любой момент.
            </div>
          </div>

          {error && (
            <div style={{
              color: '#d32f2f',
              marginBottom: 16,
              textAlign: 'center',
              fontSize: 12,
              padding: 8,
              background: '#ffcdd2',
              borderRadius: 2,
              border: '1px solid #ef9a9a',
            }}>
              {error}
            </div>
          )}

          <div style={{ display: 'flex', gap: 12 }}>
            <button
              className="btn btn-primary"
              style={{ flex: 1, height: 36, fontSize: 13 }}
              onClick={handleSetup}
              disabled={loading}
            >
              {loading ? 'Обработка...' : '✅ Да, использовать'}
            </button>
            <button
              className="btn"
              style={{
                flex: 1,
                height: 36,
                fontSize: 13,
                background: '#fafafa',
                border: '1px solid #e0e0e0',
                color: '#616161',
              }}
              onClick={handleSkip}
              disabled={loading}
            >
              ❌ Нет, я настрою сам(а)
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}