frontend/src/components/DailyTable.jsx - master - keorlov/collsim

frontend/src/components/DailyTable.jsx
62 строки3 KB
Konstantin Orlov
wip
14 июл 2026, 12:10
14 июл 2026, 12:10c8f2d41
import { useState } from "react";

const fmt = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 });

const COLUMNS = [
  { key: "day", label: "День", fmt: (v) => v },
  { key: "inflow_soft", label: "Вход", fmt: (v) => v },
  { key: "cured_today", label: "Cure", fmt: (v) => v },
  { key: "outflow_hard", label: "В hard", fmt: (v) => v },
  { key: "sold_today", label: "Продано", fmt: (v) => v },
  { key: "call_count", label: "Звонки", fmt: (v) => fmt.format(v) },
  { key: "sms_count", label: "SMS", fmt: (v) => fmt.format(v) },
  { key: "waiting_count", label: "Waiting", fmt: (v) => fmt.format(v) },
  { key: "soft_count", label: "Soft", fmt: (v) => fmt.format(v) },
  { key: "hard_count", label: "Hard", fmt: (v) => fmt.format(v) },
  { key: "npl_pct", label: "NPL %", fmt: (v) => v?.toFixed(2) + "%" },
  { key: "cost_of_risk", label: "CoR %", fmt: (v) => (v * 100)?.toFixed(4) + "%" },
  { key: "recovered_today", label: "Взыскано", fmt: (v) => fmt.format(v) + " ₽" },
  { key: "daily_budget_spent", label: "Затраты", fmt: (v) => fmt.format(v) + " ₽" },
  { key: "interest_income_today", label: "NIM", fmt: (v) => fmt.format(v) + " ₽" },
];

export default function DailyTable({ userMetrics, baselineMetrics }) {
  const [strategy, setStrategy] = useState("user");
  if (!userMetrics?.length) return null;

  const metrics = strategy === "user" ? userMetrics : (baselineMetrics || []);

  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        <label className="form-field" style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
          <span className="form-label">Стратегия</span>
          <select value={strategy} onChange={(e) => setStrategy(e.target.value)}>
            <option value="user">Пользовательская</option>
            <option value="baseline">Базовая</option>
          </select>
        </label>
      </div>
      <div className="table-scroll" style={{ maxHeight: 500, overflowY: "auto" }}>
        <table className="stat-table metrics-table" style={{ fontSize: 12 }}>
          <thead>
            <tr>
              {COLUMNS.map((c) => (
                <th key={c.key}>{c.label}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {metrics.map((m) => (
              <tr key={m.day} className={m.day === 0 ? "day-zero-row" : ""}>
                {COLUMNS.map((c) => (
                  <td key={c.key}>{c.fmt(m[c.key] ?? 0)}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}