Диаграммы Recharts в React js

import { useEffect, useState } from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  Cell,
  ResponsiveContainer,
  PieChart,
  Pie,
} from "recharts";

const Diagram = () => {

  // данные для Диаграмм
  const data = [
    { name: "Сафари", value: 800 },
    { name: "Гепард", value: 300 },
    { name: "На пол часа", value: 489 },
    { name: "На 1 час", value: 694 },
  ];
  // Список цветов для диаграмм
  const colorList = [
    "#7a45e6",
    "#ff3399",
    "#0fbda0",
    "#3388ff",
    "#ffb851",
    "#ff5151",
    "#5680a6",
    "#ec8be9",
    "#97ba0e",
    "#636d4c",
  ];
  // end Список цветов для диаграмм

// Кастомный Tooltip только для Bar
  const CustomTooltip = ({ active, payload, label }) => {
    if (active && payload && payload.length) {
      const { name, value } = payload[0];
      const index = data.findIndex((item) => item.name === label);
      const color = colorList[index % colorList.length];

      return (
        <div className="custom-tooltip_box">
          <div className="legend_ind-name_box">
            <div
              className="diagram-circle-ind"
              style={{
                backgroundColor: color,
              }}
            ></div>
            <span>{label}</span>
          </div>
          <span>{payload[0].value}</span>
        </div>
      );
    }
    return null;
  };
  // end Кастомный Tooltip только для Bar

  return (
	{/* Столбчатый график */}
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" tick={false} />
        <YAxis />
        <Tooltip
                 radius={[6, 6, 6, 6]}
                 cursor={{ fill: "#eef0fa" }}
                 content={<CustomTooltip />}
        />
        {/* <Legend /> */}
        <Bar
             dataKey="value"
             radius={[6, 6, 6, 6]}
             activeShape={{
             fill: "red",
             }}
             >
          {data.map((entry, index) => (
          <Cell
                key={`cell-${index}`}
                fill={colorList[index % colorList.length]}
                />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
    {/* Подписи под графиком */}
    <div className="custom-legend_box">
      {data.map((entry, index) => (
      <div className="item">
        <div className="legend_ind-name_box">
          <div
               className="diagram-circle-ind"
               style={{
               background: colorList[index % colorList.length],
               }}
               ></div>
          <span className="name">{entry.name}</span>
        </div>
        <span className="value">{entry.value}</span>
      </div>
      ))}
    </div>
    {/* end Подписи под графиком */}
	{/* end Столбчатый график */}
 );
}

import { useEffect, useState } from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  Cell,
  ResponsiveContainer,
  PieChart,
  Pie,
} from "recharts";

const Diagram = () => {

  // данные для Диаграмм
  const data = [
    { name: "Сафари", value: 800 },
    { name: "Гепард", value: 300 },
    { name: "На пол часа", value: 489 },
    { name: "На 1 час", value: 694 },
  ];
  // Список цветов для диаграмм
  const colorList = [
    "#7a45e6",
    "#ff3399",
    "#0fbda0",
    "#3388ff",
    "#ffb851",
    "#ff5151",
    "#5680a6",
    "#ec8be9",
    "#97ba0e",
    "#636d4c",
  ];
  // end Список цветов для диаграмм

  // Кастомный Tooltip с цветным кружком только для Pie
  const CustomTooltip = ({ active, payload }) => {
    if (active && payload && payload.length) {
      const { name, value } = payload[0];
      const index = data.findIndex((item) => item.name === name);
      const color = colorList[index % colorList.length];

      return (
        <div className="custom-tooltip_box">
          <div className="legend_ind-name_box">
            <div
              className="diagram-circle-ind"
              style={{ backgroundColor: color }}
            ></div>
            <span>{name}</span>
          </div>
          <span>{value}</span>
        </div>
      );
    }

    return null;
  };

  return (
	{/* Круговая диаграмма */}
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Tooltip content={<CustomTooltip />} />
        <Pie
             data={data}
             dataKey="value"
             nameKey="name"
             cx="50%"
             cy="50%"
             outerRadius={100}
             innerRadius={60}
             paddingAngle={2}
             cornerRadius={8}
             label={({ value }) => {
          const total = data.reduce(
          (sum, entry) => sum + entry.value,
          0
          );
          const percent = ((value / total) * 100).toFixed(0);
          return `${percent}%`;
          }}
          >
          {data.map((entry, index) => (
          <Cell
                key={`cell-${index}`}
                fill={colorList[index % colorList.length]}
                />
          ))}
        </Pie>
      </PieChart>
    </ResponsiveContainer>
    {/* Подписи под диаграммой */}
    <div className="custom-legend_box">
      {data.map((entry, index) => (
      <div className="item">
        <div className="legend_ind-name_box">
          <div
               className="diagram-circle-ind"
               style={{
               background: colorList[index % colorList.length],
               }}
               ></div>
          <span className="name">{entry.name}</span>
        </div>
        <span className="value">{entry.value}</span>
      </div>
      ))}
    </div>
    {/* end Подписи под диаграммой */}
	{/* end Круговая диаграмма */}
 );
}

// Универсальный кастомный Tooltip для Bar и Pie
  const CustomTooltip = ({ active, payload, label }) => {
    if (active && payload && payload.length) {
      const { name, value } = payload[0];

      // Используем label, если доступен (BarChart), иначе name (PieChart)
      const displayName = label || name;

      // Поиск цвета по названию
      const index = data.findIndex((item) => item.name === displayName);
      const color = colorList[index % colorList.length];

      return (
        <div className="custom-tooltip_box">
          <div className="legend_ind-name_box">
            <div
              className="diagram-circle-ind"
              style={{ backgroundColor: color }}
            ></div>
            <span>{displayName}</span>
          </div>
          <span>{value}</span>
        </div>
      );
    }

    return null;
  };

import { useEffect, useState } from "react";
// import Rub from "../../assets/img/rub.svg?react";
import Trip from "../../assets/img/report/trip.svg?react";
// import Bonus from "../../assets/img/report/bonus.svg?react";
import Pass from "../../assets/img/report/pass-2.svg?react";
import Ins from "../../assets/img/report/ins.svg?react";
import Fine from "../../assets/img/report/fine.svg?react";
import Debt from "../../assets/img/report/debt.svg?react";
import PieIcon from "../../assets/img/report/pie-diag-icon.svg?react";
import BarIcon from "../../assets/img/report/bar-diag-icon.svg?react";
import SelectArrow from "../../assets/img/report/arrow-down-sel.svg?react";

import { useSelector, useDispatch } from "react-redux";
import { getStatsAction } from "../../slices/report-slices/report.slice";
import LoadingSpinner from "../ui/LoaderSpinner/LoaderSpinner";
import { useGlobalFilter } from "../../hooks/useGlobalFilter";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  Cell,
  ResponsiveContainer,
  PieChart,
  Pie,
  Sector,
} from "recharts";

const Report = () => {
  const { stats, query, loading, error } = useSelector((state) => state.report);
  const dispatch = useDispatch();

  // данные для Диаграмм
  const data = [
    { name: "Сафари", value: 800 },
    { name: "Гепард", value: 300 },
    { name: "На пол часа", value: 489 },
    { name: "На 1 час", value: 694 },
    // { name: "Т 5", value: 324 },
    // { name: "Т 6", value: 704 },
    // { name: "Т 7", value: 458 },
    // { name: "Т 8", value: 540 },
    // { name: "Т 9", value: 250 },
    // { name: "Т 10", value: 750 },
    // { name: "Тариф 1", value: 800, fill: "#8884d8" },
    // { name: "Тариф 2", value: 300, fill: "#82ca9d" },
    // { name: "Тариф 3", value: 489, fill: "#ffc658" },
    // { name: "Тариф 4", value: 694, fill: "#ff8042" },
  ];
  // Список цветов для диаграмм
  const colorList = [
    "#7a45e6",
    "#ff3399",
    "#0fbda0",
    "#3388ff",
    "#ffb851",
    "#ff5151",
    "#5680a6",
    "#ec8be9",
    "#97ba0e",
    "#636d4c",
  ];
  // end Список цветов для диаграмм
  useEffect(() => {
    const resizableColumns = document.querySelectorAll(".col-resize");

    let startX, startWidth, resizedElement;

    const initResize = (e, column) => {
      startX = e.clientX;
      startWidth = parseInt(
        document.defaultView.getComputedStyle(column).width
      );
      resizedElement = column;

      document.addEventListener("mousemove", doResize);
      document.addEventListener("mouseup", stopResize);
    };

    const doResize = (e) => {
      const newWidth = startWidth + (e.clientX - startX);
      resizedElement.style.width = newWidth + "px";
    };

    const stopResize = () => {
      document.removeEventListener("mousemove", doResize);
      document.removeEventListener("mouseup", stopResize);
    };

    resizableColumns.forEach((column) => {
      column.addEventListener("mousedown", (e) =>
        initResize(e, column.parentNode)
      );
    });

    return () => {
      document.removeEventListener("mousemove", doResize);
      document.removeEventListener("mouseup", stopResize);
    };
  }, []);

  const { filteredValue } = useGlobalFilter();

  useEffect(() => {
    dispatch(
      getStatsAction(query + `&who=${!filteredValue ? 0 : filteredValue}`)
    );
  }, [query, filteredValue]);

  if (error) {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          height: "100vh",
          justifyContent: "center",
          fontSize: "16px",
        }}
      >
        Не удалось получить отчет. Убедитесь в корректности фильтра 🦒
      </div>
    );
  }

  // Кастомный Tooltip только для Bar
  // const CustomTooltip = ({ active, payload, label }) => {
  //   if (active && payload && payload.length) {
  //     const { name, value } = payload[0];
  //     const index = data.findIndex((item) => item.name === label);
  //     const color = colorList[index % colorList.length];

  //     return (
  //       <div className="custom-tooltip_box">
  //         <div className="legend_ind-name_box">
  //           <div
  //             className="diagram-circle-ind"
  //             style={{
  //               backgroundColor: color,
  //             }}
  //           ></div>
  //           <span>{label}</span>
  //         </div>
  //         <span>{payload[0].value}</span>
  //       </div>
  //     );
  //   }
  //   return null;
  // };
  // end Кастомный Tooltip только для Bar

  // Кастомный Tooltip только для Pie
  // const CustomTooltipPie = ({ active, payload }) => {
  //   if (active && payload && payload.length) {
  //     const { name, value } = payload[0];
  //     const index = data.findIndex((item) => item.name === name);
  //     const color = colorList[index % colorList.length];

  //     return (
  //       <div className="custom-tooltip_box">
  //         <div className="legend_ind-name_box">
  //           <div
  //             className="diagram-circle-ind"
  //             style={{ backgroundColor: color }}
  //           ></div>
  //           <span>{name}</span>
  //         </div>
  //         <span>{value}</span>
  //       </div>
  //     );
  //   }
  //   return null;
  // };
  // end Кастомный Tooltip только для Pie

  // Универсальный кастомный Tooltip для Bar и Pie
  const CustomTooltip = ({ active, payload, label }) => {
    if (active && payload && payload.length) {
      const { name, value } = payload[0];

      // Используем label, если доступен (BarChart), иначе name (PieChart)
      const displayName = label || name;

      // Поиск цвета по названию
      const index = data.findIndex((item) => item.name === displayName);
      const color = colorList[index % colorList.length];

      return (
        <div className="custom-tooltip_box">
          <div className="legend_ind-name_box">
            <div
              className="diagram-circle-ind"
              style={{ backgroundColor: color }}
            ></div>
            <span>{displayName}</span>
          </div>
          <span>{value}</span>
        </div>
      );
    }
    return null;
  };
  // end Универсальный кастомный Tooltip для Bar и Pie

  // Последний
  // const CustomTooltipPie = ({ active, payload }) => {
  //   if (active && payload && payload.length) {
  //     const { name, value } = payload[0];
  //     const total = data.reduce((sum, entry) => sum + entry.value, 0);
  //     const percent = ((value / total) * 100).toFixed(1);
  //     const index = data.findIndex((item) => item.name === name);
  //     const color = colorList[index % colorList.length];

  //     return (
  //       <div className="custom-tooltip_box">
  //         <div className="legend_ind-name_box">
  //           <div
  //             className="diagram-circle-ind"
  //             style={{ backgroundColor: color }}
  //           ></div>
  //           <span>{name}</span>
  //         </div>
  //         <span>{percent}%</span>
  //       </div>
  //     );
  //   }
  //   return null;
  // };

  const [activeIndex, setActiveIndex] = useState(null);
  const onPieEnter = (_, index) => setActiveIndex(index);
  const onPieLeave = () => setActiveIndex(null);

  // Код для смены иконки в кнопки и графика в контейере в зависимости от выбора
  // Стейт для выбранной диаграммы ('bar' или 'pie')
  const [selected, setSelected] = useState("bar");
  // Стейт для показа/скрытия всплывашки
  const [isOpen, setIsOpen] = useState(false);

  // Функция для выбора диаграммы и закрытия всплывашки
  const onSelect = (type) => {
    setSelected(type);
    setIsOpen(false);
  };

  // Выбор иконки для кнопки в зависимости от selected
  const Icon = selected === "bar" ? BarIcon : PieIcon;

  return (
    <>
      {/* end Всплывашка с выбором  */}
      {/* Диаграмма */}
      <div className="diag_container">
        <div className="diag_wrapper">
          <div className="top-box">
            {/* Всплывашка с выбором  */}
            {isOpen && (
              <div className="diag-type_select-cont">
                <div className="item" onClick={() => onSelect("bar")}>
                  <input type="radio" checked={selected === "bar"} readOnly />
                  <div className="lable-box">
                    <BarIcon />
                    <span className="name">Столбчатый график</span>
                  </div>
                </div>

                <div className="item" onClick={() => onSelect("pie")}>
                  <input type="radio" checked={selected === "pie"} readOnly />
                  <div className="lable-box">
                    <PieIcon />
                    <span className="name">Круговая диаграмма</span>
                  </div>
                </div>
              </div>
            )}
            <span className="title">Число выборов</span>
            <div className="btn-select-diag" onClick={() => setIsOpen(!isOpen)}>
              <Icon />
              <SelectArrow />
            </div>
          </div>
          {selected === "bar" && (
            <div className="diag-data_inner">
              {/* <ResponsiveContainer width="100%" height={300}>
            <BarChart data={data}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend content={renderCustomLegend} />
              <Bar dataKey="value">
                {data.map((entry, index) => (
                  <Cell
                    key={`cell-${index}`}
                    fill={colorList[index % colorList.length]}
                  />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer> */}
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={data}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" tick={false} />
                  <YAxis />
                  <Tooltip
                    radius={[6, 6, 6, 6]}
                    cursor={{ fill: "#eef0fa" }}
                    content={<CustomTooltip />}
                  />
                  {/* <Legend /> */}
                  <Bar
                    dataKey="value"
                    // stackId="a"
                    radius={[6, 6, 6, 6]}
                    activeShape={{
                      fill: "red",
                    }}
                    // label={{ position: "top" }}
                  >
                    {data.map((entry, index) => (
                      <Cell
                        key={`cell-${index}`}
                        fill={colorList[index % colorList.length]}
                      />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
              {/* Подписи под графиком */}
              <div className="custom-legend_box">
                {data.map((entry, index) => (
                  <div className="item">
                    <div className="legend_ind-name_box">
                      <div
                        className="diagram-circle-ind"
                        style={{
                          background: colorList[index % colorList.length],
                        }}
                      ></div>
                      <span className="name">{entry.name}</span>
                    </div>
                    <span className="value">{entry.value}</span>
                  </div>
                ))}
              </div>
              {/* end Подписи под графиком */}
            </div>
          )}
          {selected === "pie" && (
            // <></>
            <div className="diag-data_inner">
              <ResponsiveContainer width="100%" height={300}>
                <PieChart>
                  {/* Центральный текст по умолчанию */}
                  {activeIndex === null || activeIndex === -1 ? (
                    <>
                      <text
                        x="50%"
                        y="50%"
                        textAnchor="middle"
                        fill="#333"
                        fontSize={14}
                        fontWeight="bold"
                      >
                        {data.reduce((sum, e) => sum + e.value, 0)}
                      </text>
                      <text
                        x="50%"
                        y="56%"
                        textAnchor="middle"
                        fill="#666"
                        fontSize={14}
                      >
                        100%
                      </text>
                    </>
                  ) : null}

                  <Tooltip content={<CustomTooltip />} />

                  <Pie
                    data={data}
                    dataKey="value"
                    nameKey="name"
                    cx="50%"
                    cy="50%"
                    outerRadius={100}
                    innerRadius={60}
                    paddingAngle={2}
                    cornerRadius={8}
                    onMouseEnter={onPieEnter}
                    onMouseLeave={onPieLeave}
                    activeIndex={activeIndex}
                    activeShape={(props) => {
                      const total = data.reduce((sum, e) => sum + e.value, 0);
                      const percent = ((props.value / total) * 100).toFixed(0);

                      return (
                        <g>
                          <text
                            // x={props.cx}
                            // y={props.cy - 10}
                            x="50%"
                            y="50%"
                            textAnchor="middle"
                            fill="#333"
                            fontSize={14}
                            fontWeight="bold"
                          >
                            {props.value}
                          </text>
                          <text
                            // x={props.cx}
                            // y={props.cy + 12}
                            x="50%"
                            y="56%"
                            textAnchor="middle"
                            fill="#666"
                            fontSize={14}
                          >
                            {percent}%
                          </text>
                          <Sector {...props} outerRadius={110} />
                        </g>
                      );
                    }}
                    label={({ value }) => {
                      const total = data.reduce(
                        (sum, entry) => sum + entry.value,
                        0
                      );
                      const percent = ((value / total) * 100).toFixed(0);
                      return `${percent}%`;
                    }}
                    isAnimationActive={false}
                  >
                    {data.map((entry, index) => (
                      <Cell
                        key={`cell-${index}`}
                        fill={colorList[index % colorList.length]}
                      />
                    ))}
                  </Pie>
                </PieChart>
              </ResponsiveContainer>

              {/* Подписи под графиком */}
              <div className="custom-legend_box">
                {(() => {
                  const total = data.reduce(
                    (sum, entry) => sum + entry.value,
                    0
                  );
                  return data.map((entry, index) => {
                    const percent =
                      total > 0 ? Math.round((entry.value / total) * 100) : 0;
                    return (
                      <div className="item" key={index}>
                        <div className="legend_ind-name_box">
                          <div
                            className="diagram-circle-ind"
                            style={{
                              background: colorList[index % colorList.length],
                            }}
                          ></div>
                          <span className="name">{entry.name}</span>
                        </div>
                        <span className="value">
                          {/* {entry.value}  */}
                          {percent}%
                        </span>
                      </div>
                    );
                  });
                })()}
              </div>
              {/* end Подписи под графиком */}
            </div>
          )}
        </div>
        {/* Круговая диаграмма */}
        <div className="diag_wrapper">
          <span className="title">Число выборов</span>
          <div className="diag-data_inner">
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                {/* Центральный текст по умолчанию */}
                {activeIndex === null || activeIndex === -1 ? (
                  <>
                    <text
                      x="50%"
                      y="50%"
                      textAnchor="middle"
                      fill="#333"
                      fontSize={14}
                      fontWeight="bold"
                    >
                      {data.reduce((sum, e) => sum + e.value, 0)}
                    </text>
                    <text
                      x="50%"
                      y="56%"
                      textAnchor="middle"
                      fill="#666"
                      fontSize={14}
                    >
                      100%
                    </text>
                  </>
                ) : null}

                <Tooltip content={<CustomTooltip />} />

                <Pie
                  data={data}
                  dataKey="value"
                  nameKey="name"
                  cx="50%"
                  cy="50%"
                  outerRadius={100}
                  innerRadius={60}
                  paddingAngle={2}
                  cornerRadius={8}
                  onMouseEnter={onPieEnter}
                  onMouseLeave={onPieLeave}
                  activeIndex={activeIndex}
                  activeShape={(props) => {
                    const total = data.reduce((sum, e) => sum + e.value, 0);
                    const percent = ((props.value / total) * 100).toFixed(0);

                    return (
                      <g>
                        <text
                          // x={props.cx}
                          // y={props.cy - 10}
                          x="50%"
                          y="50%"
                          textAnchor="middle"
                          fill="#333"
                          fontSize={14}
                          fontWeight="bold"
                        >
                          {props.value}
                        </text>
                        <text
                          // x={props.cx}
                          // y={props.cy + 12}
                          x="50%"
                          y="56%"
                          textAnchor="middle"
                          fill="#666"
                          fontSize={14}
                        >
                          {percent}%
                        </text>
                        <Sector {...props} outerRadius={110} />
                      </g>
                    );
                  }}
                  label={({ value }) => {
                    const total = data.reduce(
                      (sum, entry) => sum + entry.value,
                      0
                    );
                    const percent = ((value / total) * 100).toFixed(0);
                    return `${percent}%`;
                  }}
                  isAnimationActive={false}
                >
                  {data.map((entry, index) => (
                    <Cell
                      key={`cell-${index}`}
                      fill={colorList[index % colorList.length]}
                    />
                  ))}
                </Pie>
              </PieChart>
            </ResponsiveContainer>

            {/* Подписи под графиком */}
            <div className="custom-legend_box">
              {data.map((entry, index) => (
                <div className="item">
                  <div className="legend_ind-name_box">
                    <div
                      className="diagram-circle-ind"
                      style={{
                        background: colorList[index % colorList.length],
                      }}
                    ></div>
                    <span className="name">{entry.name}</span>
                  </div>
                  <span className="value">{entry.value}</span>
                </div>
              ))}
            </div>
            {/* end Подписи под графиком */}
          </div>
        </div>
        {/* end Круговая диаграмма */}
      </div>
      {/* end Диаграмма */}
      {/* {loading ? <LoadingSpinner /> : null} */}
      <div className="page-area report-page">
        <div className="informer-bar">
          <div className="scoot-filter-new">
            <span
              className="item active"
              // className={subViewCategory === "ACTIVE" ? "item active" : "item"}
              // onClick={() => setSubViewCategory("ACTIVE")}
            >
              Общий
            </span>
            <span
              className="item"
              // className={subViewCategory === "ARCHIVE" ? "item active" : "item"}
              // onClick={() => setSubViewCategory("ARCHIVE")}
            >
              Тарифы
            </span>
          </div>
          {/* <div className="change-funnel-btn">
            <button
              className="add-new-scooter_btn"
              onClick={() => dispatch(setSubscriptionAddWindow(true))}
            >
              Добавить подписку
            </button>
          </div> */}
        </div>
        <div className="report_wrapper">
          {/* Общие показатели в карточках */}
          <div className="report-cards">
            <div className="item">
              <span className="title">Всего поездок:</span>
              <span className="value">{stats?.report?.totalTrips}</span>
            </div>

            <div className="item">
              <span className="title">Общая сумма:</span>
              <div className="cost">
                <span className="value">{stats?.report?.totalSum} ₽</span>
              </div>
            </div>
            <div className="item">
              <span className="title">Сумма начислений:</span>
              <div className="cost">
                <span className="value">{stats?.report?.chargesAmount} ₽</span>
              </div>
            </div>
            <div className="item">
              <span className="title">Выручка франчайзи:</span>
              <div className="cost">
                <span className="value">
                  {stats?.report?.franchiseRevenue} ₽
                </span>
              </div>
            </div>
            <div className="item">
              <span className="title">Среднее кол-во поездок:</span>
              <span className="value">{stats?.report?.averageTripsCount}</span>
            </div>
            <div className="item">
              <span className="title">Средняя стоимость поездки:</span>
              <div className="cost">
                <span className="value">
                  {stats?.report?.averageTripsPrice} ₽
                </span>
              </div>
            </div>

            {/* <div className="item">
            <span className="title">Общая стоимость:</span>
            <div className="cost">
              <Rub />
              <span className="value">{stats.totalPrice}</span>
            </div>
          </div>

          <div className="item">
            <span className="title">Списано денег за поездки:</span>
            <div className="cost">
              <Rub />
              <span className="value">{stats.moneyForTheTrips}</span>
            </div>
          </div>

          <div className="item">
            <span className="title">Списано денег за подписки:</span>
            <div className="cost">
              <Rub />
              <span className="value">0.00</span>
            </div>
          </div>

          <div className="item">
            <span className="title">Списано бонусов:</span>
            <div className="cost">
              <Rub />
              <span className="value">200.00</span>
            </div>
          </div>

          <div className="item">
            <span className="title">Общая сумма начисления:</span>
            <div className="cost">
              <Rub />
              <span className="value">3500.00</span>
            </div>
          </div> */}
          </div>

          <div className="report-separator">
            <span className="title">По категориям</span>
          </div>

          {/* Карточки-статистика по сегментам */}
          <div className="report-cards-seg">
            <div className="sreports-cards_item add-trip-style">
              <span className="title">
                Поездки: {stats?.report?.categories.trips?.count}
              </span>
              <span className="title">
                Сумма: {stats?.report?.categories.trips?.totalSum}₽
              </span>
              <ul className="sreports-cards_item-list">
                <li>
                  оплачено рублями: {stats?.report?.categories.trips.paidMoney}₽
                </li>
                <li>
                  оплачено бонусами:{" "}
                  {stats?.report?.categories.trips.paidBonuses}₽
                </li>
                <li>не оплачено: {stats?.report?.categories.trips.notPaid}₽</li>

                {/* <li>страховки: 100₽</li> */}
              </ul>
              {/* <span className="title">Выручка: 1400₽</span> */}
              <Trip className="icon sreport-icon-bg-pink" />
            </div>
            <div className="report-cards">
              {/* Страховки */}
              <div className="sreports-cards_item">
                <span className="title">Страховки</span>
                <span className="">продано: 0</span>
                <span className="">сумма: 0.00₽</span>
                <Ins className="icon sreport-icon-bg-blue" />
              </div>
              {/* end Страховки */}

              {/* Подписки */}
              <div className="sreports-cards_item">
                <span className="title">Подписки</span>
                <span className="">
                  продано: {stats?.report?.categories?.subscriptions?.count}
                </span>
                <span className="">
                  сумма: {stats?.report?.categories?.subscriptions?.totalSum}₽
                </span>
                <Pass className="icon sreport-icon-bg-violet" />
              </div>
              {/* end Подписки */}

              {/* Штрафы */}
              <div className="sreports-cards_item">
                <span className="title">Штрафы</span>
                <span className="">
                  оплачено: {stats?.report?.categories.fines?.paidCount}
                </span>
                <span className="">
                  сумма: {stats?.report?.categories.fines?.paidSum}₽
                </span>
                <Fine className="icon sreport-icon-bg-red" />
              </div>
              {/* end Штрафы */}

              {/* Долги */}
              <div className="sreports-cards_item">
                <span className="title">Долги</span>
                <span className="">
                  оплачено: {stats?.report?.categories.debts?.paidCount}
                </span>
                <span className="">
                  сумма: {stats?.report?.categories.debts?.paidSum}₽
                </span>
                <Debt className="icon sreport-icon-bg-red" />
              </div>
              {/* end Долги */}

              {/* Бонусы */}
              {/* <div className="sreports-cards_item">
              <span className="title">Бонусы</span>
              <span className="">списано: 200</span>
              <Bonus className="icon" />
            </div> */}
              {/* end Бонусы */}
            </div>
          </div>
          {/* end Карточки-статистика по сегментам */}
        </div>
      </div>
    </>
  );
};

export default Report;