wallet/src/modals/AnalyticsModal/AnalyticsModal.jsx

import { useState } from "react";
import { useTheme } from "../../contexts/ThemeContext";
import { Tabs, Tab, Modal, Button } from "react-bootstrap";
import FinancialDashboard from "../../components/FinancialDashboard/FinancialDashboard";
import AppointmentDashboard from "../../components/AppointmentDashboard/AppointmentDashboard";
import styles from "./AnalyticsModal.module.css";

const AnalyticsModal = () => {
  const { theme } = useTheme();
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  // const income = 40407.17;
  const expenses = 39985.23;

  const monthdata = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 141, 15, 16, 17, 18, 19, 20, 21,
    22, 23, 24, 25, 26, 27, 2, 29, 30, 31,
  ];

  const monthMaxValue = Math.max(...monthdata);

  const MonthChartData = {
    labels: [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15",
      "16",
      "17",
      "18",
      "19",
      "20",
      "21",
      "22",
      "23",
      "24",
      "25",
      "26",
      "27",
      "28",
      "29",
      "30",
      "31",
    ],
    datasets: [
      {
        data: monthdata,
        backgroundColor: "#3576C3",
        categoryPercentage: 0.5,
        borderRadius: 3,
        responsive: true,
      },
    ],
  };

  const MonthLeftCardData = {
    label: "Total for the period",
    value: expenses,
  };

  const MonthRightCardData = {
    label: "Daily average",
    value: expenses / monthdata.length,
  };

  const MonthChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        display: false,
        beginAtZero: true,
        max: monthMaxValue * 1.1,
      },
      x: {
        grid: {
          display: false,
          drawBorder: false,
        },
        ticks: {
          color: "#6b7280",
          font: {
            size: 12,
            weight: "500",
          },
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        // enabled: true,
        callbacks: {
          // title: function (context) {
          //   // Customize the tooltip title
          //   return `${context[0].label}`;
          // },
          label: function (context) {
            // Customize the tooltip label
            let label = context.dataset.label || "";
            if (label) {
              label += ": ";
            }
            if (context.parsed.y !== null) {
              label += `${context.parsed.y} ₽`;
            }
            return label;
          },
        },
      },
    },
  };
  return (
    <>
      <Button
        variant={theme}
        className="shadow-sm p-2"
        style={{ width: "100%", borderRadius: "15px" }}
        onClick={handleShow}
      >
        Analytics
      </Button>

      <Modal show={show} onHide={handleClose} fullscreen={true}>
        <Modal.Header className="d-flex align-items-center justify-content-between">
          <Button variant={theme} type="button" onClick={handleClose}>
            Close
          </Button>
          <Modal.Title>Analytics</Modal.Title>
          <spacer />
        </Modal.Header>
        <Modal.Body style={{ paddingLeft: "0", paddingRight: "0" }}>
          <Tabs defaultActiveKey="Expenses" id="history-tabs">
            <Tab eventKey="Incomes" title="Incomes"></Tab>
            <Tab eventKey="Expenses" title="Expenses" style={{ padding: "0" }}>
              <div className="d-flex mt-2 justify-content-center">
                <div className="d-flex flex-column p-0 justify-content-center align-items-center w-100">
                  <h3
                    className="mb-0 fw-bolder"
                    style={{ fontSize: "1.1rem", fontWeight: 700 }}
                  >
                    July 2025
                  </h3>
                  <div
                    className="d-flex text-muted small mb-0"
                    style={{ fontSize: "0.8rem" }}
                  >
                    Period: month
                  </div>
                </div>
              </div>
              <hr className="mt-1" />
              <div className={styles.scrollableContent}>
                <FinancialDashboard
                  chartData={MonthChartData}
                  chartOptions={MonthChartOptions}
                  maxValue={monthMaxValue}
                  LeftCardData={MonthLeftCardData}
                  RightCardData={MonthRightCardData}
                />
                <AppointmentDashboard className="m-3" />
              </div>
            </Tab>
          </Tabs>
        </Modal.Body>
      </Modal>
    </>
  );
};
export default AnalyticsModal;