frontend/app/components/DistributionModule.tsx - master - tenisaname/Test_example_docker

frontend/app/components/DistributionModule.tsx
81 строка3 KB
etenkin
first_commit
10 июн 2026, 10:41
10 июн 2026, 10:4185dbc50
"use client";
import { useState } from "react";

interface Props {
  selectedCount: number;
  onCalculate: (amount: number) => Promise<void>;
  onSave: () => Promise<void>;
  hasResult: boolean;
  loading: boolean;
}

export default function DistributionModule({
  selectedCount,
  onCalculate,
  onSave,
  hasResult,
  loading,
}: Props) {
  const [amount, setAmount] = useState("");
  const [error, setError] = useState("");

  async function handleCalculate() {
    const val = parseFloat(amount.replace(",", "."));
    if (isNaN(val) || val <= 0) {
      setError("Введите корректную сумму больше нуля");
      return;
    }
    if (selectedCount === 0) {
      setError("Выберите хотя бы один элемент СПП");
      return;
    }
    setError("");
    await onCalculate(val);
  }

  return (
    <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5 space-y-4">
      <h2 className="text-base font-semibold text-gray-800">Распределение суммы</h2>

      <div className="flex items-center gap-3">
        <div className="relative flex-1">
          <input
            type="text"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder="Введите сумму, ₽"
            className="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm
                       focus:outline-none focus:ring-2 focus:ring-blue-500 pr-8"
          />
          <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">₽</span>
        </div>

        <button
          onClick={handleCalculate}
          disabled={loading}
          className="bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white
                     px-5 py-2.5 rounded-lg text-sm font-medium transition-colors whitespace-nowrap"
        >
          {loading ? "Вычисляю..." : "Выполнить"}
        </button>
      </div>

      {error && <p className="text-red-500 text-xs">{error}</p>}

      <p className="text-xs text-gray-500">
        Выбрано элементов: <span className="font-semibold text-gray-700">{selectedCount}</span>
      </p>

      {hasResult && (
        <button
          onClick={onSave}
          disabled={loading}
          className="w-full bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 text-white
                     py-2.5 rounded-lg text-sm font-medium transition-colors"
        >
          Сохранить вариант в базу данных
        </button>
      )}
    </div>
  );
}