frontPanel/src/pages/Analytics/Analytics.tsx

import { useState } 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 HeaderFull from "@ui_kit/Header/HeaderFull";
import SectionWrapper from "@ui_kit/SectionWrapper";

import { General } from "./General";
import { AnswersStatistics } from "./Answers";
import { Devices } from "./Devices";

import CalendarIcon from "@icons/CalendarIcon";

export default function Analytics() {
  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 />
      <SectionWrapper component={"section"} sx={{ padding: "60px 20px" }}>
        <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>
        <General />
        <AnswersStatistics />
        <Devices />
      </SectionWrapper>
    </>
  );
}