frontPanel/src/pages/Analytics/Analytics.tsx

import { useState, useEffect } from "react";
import {
  Box,
  Button,
  IconButton,
  Paper,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import { LineChart } from "@mui/x-charts";
import moment from "moment";
import { enqueueSnackbar } from "notistack";

import HeaderFull from "@ui_kit/Header/HeaderFull";
import SectionWrapper from "@ui_kit/SectionWrapper";

import { Devices } from "./Devices";

import { getDevicesList } from "@api/statistic";

import CalendarIcon from "@icons/CalendarIcon";

import type { DevicesResponse } from "@api/statistic";

const DEVICES_MOCK: DevicesResponse = {
  device: {
    additionalProp1: 10,
    additionalProp2: 20,
    additionalProp3: 30,
  },
  os: {
    additionalProp1: 20,
    additionalProp2: 78,
    additionalProp3: 2,
  },
  browser: {
    additionalProp1: 55,
    additionalProp2: 11,
    additionalProp3: 3,
  },
};

export default function Analytics() {
  const [devices, setDevices] = useState<DevicesResponse>(DEVICES_MOCK);
  const [isOpen, setOpen] = useState(false);
  const [isOpenEnd, setOpenEnd] = useState(false);

  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  const handleClose = () => {
    setOpen(false);
  };
  const handleOpen = () => {
    setOpen(true);
  };
  const onAdornmentClick = () => {
    setOpen((old) => !old);
    if (isOpenEnd === true) {
      handleCloseEnd();
    }
  };

  const handleCloseEnd = () => {
    setOpenEnd(false);
  };
  const handleOpenEnd = () => {
    setOpenEnd(true);
  };
  const onAdornmentClickEnd = () => {
    setOpenEnd((old) => !old);
    if (isOpen === true) {
      handleClose();
    }
  };

  const now = moment();
  return (
    <>
      <HeaderFull isRequest={true} />
      <SectionWrapper component={"section"} sx={{ paddingTop: "60px" }}>
        <Typography variant={"h4"}>Аналитика</Typography>
        <Box
          sx={{
            display: "flex",
            gap: isMobile ? "15px" : "20px",
            alignItems: "end",
            justifyContent: "space-between",
            padding: "40px 0 20px",
            borderBottom: `1px solid ${theme.palette.grey2.main}`,
          }}
        >
          <Box sx={{ display: "flex", gap: isMobile ? "15px" : "20px" }}>
            <Box>
              <Typography
                sx={{
                  fontSize: "16px",
                  marginBottom: "5px",
                  fontWeight: 500,
                  color: "4D4D4D",
                }}
              >
                Дата начала
              </Typography>
              <DatePicker
                open={isOpen}
                onClose={handleClose}
                onOpen={handleOpen}
                // defaultValue={now}
                sx={{
                  width: isMobile ? "146px" : "169px",

                  "& .MuiOutlinedInput-root": {
                    borderRadius: "10px",
                    fontSize: "16px",
                  },
                  "& .MuiInputBase-input": {
                    padding: "12.5px 14px",
                  },
                }}
                slotProps={{
                  textField: {
                    InputProps: {
                      endAdornment: (
                        <IconButton onClick={onAdornmentClick}>
                          <CalendarIcon />
                        </IconButton>
                      ),
                    },
                  },
                }}
              />
            </Box>
            <Box>
              <Typography
                sx={{
                  fontSize: "16px",
                  marginBottom: "5px",
                  fontWeight: 500,
                  color: "4D4D4D",
                }}
              >
                Дата окончания
              </Typography>
              <DatePicker
                open={isOpenEnd}
                onClose={handleCloseEnd}
                onOpen={handleOpenEnd}
                // defaultValue={now}
                sx={{
                  width: isMobile ? "146px" : "169px",
                  "& .MuiOutlinedInput-root": {
                    borderRadius: "10px",
                    fontSize: "16px",
                  },
                  "& .MuiInputBase-input": {
                    padding: "12.5px 14px",
                  },
                }}
                slotProps={{
                  textField: {
                    InputProps: {
                      endAdornment: (
                        <IconButton onClick={onAdornmentClickEnd}>
                          <CalendarIcon />
                        </IconButton>
                      ),
                    },
                  },
                }}
              />
            </Box>
          </Box>

          <Button
            variant="outlined"
            sx={{
              minWidth: isMobile ? "144px" : "180px",
              px: isMobile ? "31px" : "43px",
              color: theme.palette.brightPurple.main,
              "&:hover": {
                backgroundColor: "#581CA7",
                color: "#FFFFFF",
              },
              "&:active": {
                backgroundColor: "#000000",
                color: "#FFFFFF",
              },
            }}
          >
            Сбросить
          </Button>
        </Box>
        <Box>
          <Paper>
            <Typography>Открыли quiz</Typography>
            <LineChart
              xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
              series={[
                {
                  data: [2, 5.5, 2, 8.5, 1.5, 5],
                },
              ]}
              width={500}
              height={300}
            />
          </Paper>
        </Box>
        <Devices devices={devices} />
      </SectionWrapper>
    </>
  );
}