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

src/components/DepositOperations.js

55 строк2 KB

Сергей

v12.1.0-12.1.15. Вошедшие изменения см. в CHANGELOG.md

18 май 2026, 21:10

18 май 2026, 21:108be70c9

import React, { useState } from 'react';
import { ICONS } from '../config/entities';
import DepositOperationsModal from './DepositOperationsModal';
import DepositOperationsMobile from './DepositOperationsMobile';

export default function DepositOperations({ deposit, onUpdate, lookups, isMobile }) {
  const [showModal, setShowModal] = useState(false);

  const txCount = (deposit.transactions || []).length;
  const accrualCount = (deposit.accruals || []).length;

  // Mobile: fullscreen overlay
  if (isMobile && showModal) {
    return (
      <DepositOperationsMobile
        deposit={deposit}
        onUpdate={onUpdate}
        onClose={() => setShowModal(false)}
        lookups={lookups}
      />
    );
  }

  return (
    <>
      <div style={{ marginTop: 15, paddingTop: 15, borderTop: '1px solid #ddd' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <strong>Операции с вкладом</strong>
          <span style={{ fontSize: 12, color: '#666' }}>
            {txCount > 0 || accrualCount > 0
              ? `${txCount} операций, ${accrualCount} начислений`
              : 'Нет операций'}
          </span>
        </div>
        <div
          className="btn btn-primary"
          style={{ cursor: 'pointer', display: 'inline-block' }}
          onClick={() => setShowModal(true)}
        >
          {ICONS.deposits} Открыть операции
        </div>
      </div>

      {/* Desktop: modal */}
      {!isMobile && showModal && (
        <DepositOperationsModal
          deposit={deposit}
          onClose={() => setShowModal(false)}
          onUpdate={onUpdate}
          lookups={lookups}
        />
      )}
    </>
  );
}