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

src/components/ReturnList.js
83 строки5 KB
agent
v15.6.2 — все справочники + корзина + возвраты на кэшировании (useEntityData/cacheApi)
14 июн 2026, 22:17
14 июн 2026, 22:17f953266
import React, { useState, useMemo, useCallback } from 'react';
import { ENTITY_LABELS } from '../config/entities';
import { api } from '../services/api';
import { useEntityData } from '../hooks/useEntityData';

export default function ReturnList({ onCreate, onEdit, isMobile, lookups }) {
  const [filters, setFilters] = useState({ date__gte: '', date__lte: '' });

  const serverFilters = useMemo(() => {
    const params = {};
    if (filters.date__gte) params.date__gte = filters.date__gte;
    if (filters.date__lte) params.date__lte = filters.date__lte;
    return params;
  }, [filters]);

  const { items, loading, refresh } = useEntityData('returns', { serverFilters });

  const totalReturned = items.reduce((s, b) => s + Number(b.amount || 0), 0);

  const handleDelete = async (id) => {
    if (!window.confirm('Переместить возврат в корзину?')) return;
    const deleteReason = window.prompt('Причина удаления (необязательно):') || '';
    try { await api.returns.delete(id, deleteReason); refresh(); } catch (e) { alert(e.message); }
  };

  if (!isMobile) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', background: '#f5f5f5', borderBottom: '1px solid #ddd', flexShrink: 0 }}>
          <h2 style={{ margin: 0, fontSize: 18 }}>{ENTITY_LABELS.returns}</h2>
          <div style={{ display: 'flex', gap: 8 }}>
            <button type="button" className="btn btn-primary" onClick={onCreate}>+ Создать</button>
          </div>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
          {loading ? <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>Загрузка...</div> : items.length === 0 ? <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>Нет возвратов</div> : (
            <div>{items.map(r => (
              <div key={r.id} onClick={() => onEdit(r)} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 16, padding: '12px 16px', background: '#fff', borderBottom: '1px solid #eee', borderRadius: 4, marginBottom: 8 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: '#1976d2' }}>{r.expenseCategoryName}</div>
                  <div style={{ fontSize: 12, color: '#888' }}>Покупка: {r.expenseDate} — {Number(r.expenseAmount).toLocaleString('ru-RU')}</div>
                  {r.note && <div style={{ fontSize: 12, color: '#666', marginTop: 2, fontStyle: 'italic' }}>{r.note}</div>}
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 16, fontWeight: 600, color: '#4caf50' }}>+{Number(r.amount).toLocaleString('ru-RU')}</div>
                  <div style={{ fontSize: 12, color: '#888' }}>{r.accountName}</div>
                </div>
              </div>
            ))}</div>
          )}
        </div>
        <div style={{ padding: '10px 16px', background: '#f5f5f5', borderTop: '1px solid #ddd', fontSize: 13, flexShrink: 0 }}>
          <span style={{ color: '#666' }}>Всего возвращено: {totalReturned.toLocaleString('ru-RU')}</span>
        </div>
      </div>
    );
  }

  // Mobile
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', padding: '12px 16px', background: '#1976d2', color: '#fff', flexShrink: 0 }}>
        <span style={{ flex: 1, textAlign: 'center', fontWeight: 600, fontSize: 17 }}>{ENTITY_LABELS.returns}</span>
        <button type="button" style={{ background: 'none', border: 'none', color: '#fff', fontSize: 24, cursor: 'pointer' }} onClick={onCreate}>+</button>
      </div>
      <div style={{ flex: 1, overflow: 'auto' }}>
        {loading ? <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>Загрузка...</div> : items.length === 0 ? <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>Нет возвратов</div> : (
          items.map(r => (
            <div key={r.id} style={{ padding: '12px 16px', background: '#fff', borderBottom: '1px solid #e8e8e8' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                <span style={{ fontSize: 15, color: '#1976d2', fontWeight: 500 }}>{r.expenseCategoryName}</span>
                <span style={{ fontSize: 16, fontWeight: 600, color: '#4caf50' }}>+{Number(r.amount).toLocaleString('ru-RU')}</span>
              </div>
              <div style={{ fontSize: 12, color: '#888' }}>Покупка: {r.expenseDate} — {Number(r.expenseAmount).toLocaleString('ru-RU')}</div>
              <div style={{ fontSize: 12, color: '#888' }}>{r.accountName}</div>
              {r.note && <div style={{ fontSize: 12, color: '#666', marginTop: 2, fontStyle: 'italic' }}>{r.note}</div>}
            </div>
          ))
        )}
      </div>
    </div>
  );
}