import { useState } from "react"; import { Box, Button, Typography, Modal, TextField, useTheme, useMediaQuery, } from "@mui/material"; import { DataGrid, GridLoadingOverlay, GridToolbar } from "@mui/x-data-grid"; import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker"; import { fadeIn } from "@root/utils/style/keyframes"; import type { GridColDef } from "@mui/x-data-grid"; import type { PromocodeStatistics } from "@root/model/promocodes"; type StatisticsModalProps = { id: string; setId: (id: string) => void; promocodeStatistics: PromocodeStatistics[] | null | undefined; }; const COLUMNS: GridColDef[] = [ { field: "link", headerName: "Ссылка", width: 320, sortable: false, valueGetter: ({ row }) => row.link, }, { field: "useCount", headerName: "Использований", width: 120, sortable: false, valueGetter: ({ row }) => String(row.useCount), }, { field: "purchasesCount", headerName: "Покупок", width: 70, sortable: false, valueGetter: ({ row }) => String(row.purchasesCount), }, ]; export const StatisticsModal = ({ id, setId, promocodeStatistics, }: StatisticsModalProps) => { const [startDate, setStartDate] = useState(new Date()); const [endDate, setEndDate] = useState(new Date()); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(550)); return ( setId("")} sx={{ "& > .MuiBox-root": { outline: "none" } }} > от date && setStartDate(date)} renderInput={(params) => ( )} InputProps={{ sx: { height: "40px", color: theme.palette.secondary.main, border: "1px solid", borderColor: theme.palette.secondary.main, "& .MuiSvgIcon-root": { color: theme.palette.secondary.main, }, }, }} /> до date && setEndDate(date)} renderInput={(params) => ( )} InputProps={{ sx: { height: "40px", color: theme.palette.secondary.main, border: "1px solid", borderColor: theme.palette.secondary.main, "& .MuiSvgIcon-root": { color: theme.palette.secondary.main, }, }, }} /> ); };