статистика промокода(без вывода в таблицу)
This commit is contained in:
Tamara
parent
8f7e0bfbdf
commit
ddd345b0d1
@ -29,7 +29,7 @@ export const getStatistic = async (
|
||||
};
|
||||
|
||||
export const getStatisticSchild = async (
|
||||
from: any, to: any): Promise<unknown> => {
|
||||
from: number, to: number): Promise<unknown> => {
|
||||
try {
|
||||
const StatisticResponse = await makeRequest<unknown, unknown>({
|
||||
url: process.env.REACT_APP_DOMAIN + "/customer/quizlogo/stat" ,
|
||||
@ -48,3 +48,20 @@ export const getStatisticSchild = async (
|
||||
return [{ID: 0, Regs: 0, Money: 0, Quizes:[{QuizID: 0, Regs: 0, Money: 0}]}];
|
||||
}
|
||||
};
|
||||
export const getStatisticPromocode = async (from: number, to: number): Promise<unknown> => {
|
||||
try {
|
||||
const StatisticPromo = await makeRequest<unknown, unknown>({
|
||||
url: process.env.REACT_APP_DOMAIN + "/customer/promocode/ltv" ,
|
||||
method: "post",
|
||||
useToken: true,
|
||||
body: {
|
||||
"to": to,
|
||||
"from": from,
|
||||
},
|
||||
});
|
||||
return StatisticPromo;
|
||||
} catch (nativeError) {
|
||||
|
||||
console.log(nativeError)
|
||||
}
|
||||
}
|
||||
@ -19,12 +19,10 @@ import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import ModalUser from "@pages/dashboard/ModalUser";
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import useSchildStatistic from "@root/utils/hooks/useSchildStatistic";
|
||||
import DateFilter from "@pages/dashboard/Content/QuizStatistic/dateFilter";
|
||||
|
||||
export default function StatisticSchild() {
|
||||
const theme = useTheme()
|
||||
const [isOpen, setOpen] = useState<boolean>(false);
|
||||
const [isOpenEnd, setOpenEnd] = useState<boolean>(false);
|
||||
|
||||
const [openUserModal, setOpenUserModal] = useState<boolean>(false);
|
||||
const [activeUserId, setActiveUserId] = useState<string>("");
|
||||
|
||||
@ -32,35 +30,6 @@ export default function StatisticSchild() {
|
||||
const [to, setTo] = useState<Moment | null>(moment(Date.now()));
|
||||
|
||||
const statistic = useSchildStatistic(from, to)
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const onAdornmentClick = () => {
|
||||
setOpen((old) => !old);
|
||||
if (isOpenEnd) {
|
||||
handleCloseEnd();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseEnd = () => {
|
||||
setOpenEnd(false);
|
||||
};
|
||||
|
||||
const handleOpenEnd = () => {
|
||||
setOpenEnd(true);
|
||||
};
|
||||
|
||||
const onAdornmentClickEnd = () => {
|
||||
setOpenEnd((old) => !old);
|
||||
if (isOpen) {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!openUserModal) {
|
||||
setActiveUserId("");
|
||||
@ -82,74 +51,7 @@ export default function StatisticSchild() {
|
||||
return(
|
||||
<LocalizationProvider dateAdapter={AdapterMoment}>
|
||||
<Typography sx={{mt: "20px", mb: "20px"}}>Статистика переходов с шильдика</Typography>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
marginBottom: "5px",
|
||||
fontWeight: 500,
|
||||
color: "4D4D4D",
|
||||
}}
|
||||
>
|
||||
Дата начала
|
||||
</Typography>
|
||||
<DatePicker
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={from}
|
||||
onChange={(date) => date && setFrom(date)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
sx={{ background: "#1F2126", borderRadius: "5px" }}
|
||||
/>
|
||||
)}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "40px",
|
||||
color: theme.palette.secondary.main,
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
marginBottom: "5px",
|
||||
fontWeight: 500,
|
||||
color: "4D4D4D",
|
||||
}}
|
||||
>
|
||||
Дата окончания
|
||||
</Typography>
|
||||
<DatePicker
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={to}
|
||||
onChange={(date) => date && setTo(date)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
sx={{ background: "#1F2126", borderRadius: "5px" }}
|
||||
/>
|
||||
)}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "40px",
|
||||
color: theme.palette.secondary.main,
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<DateFilter from={from} to={to} setFrom={setFrom} setTo={setTo}/>
|
||||
<Table
|
||||
sx={{
|
||||
width: "80%",
|
||||
|
||||
@ -0,0 +1,50 @@
|
||||
import {Table, TableBody, TableCell, TableHead, TableRow, Typography, useTheme} from "@mui/material";
|
||||
import {AdapterMoment} from "@mui/x-date-pickers/AdapterMoment";
|
||||
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import DateFilter from "@pages/dashboard/Content/QuizStatistic/dateFilter";
|
||||
import {useState} from "react";
|
||||
import moment, {Moment} from "moment";
|
||||
import {usePromocodeStatistic} from "@root/utils/hooks/usePromocodeStatistic";
|
||||
|
||||
export default function StstisticPromocode() {
|
||||
const theme = useTheme()
|
||||
const [from, setFrom] = useState<Moment | null>(moment("01.01.2023"));
|
||||
const [to, setTo] = useState<Moment | null>(moment(Date.now()));
|
||||
|
||||
const statisticPromo = usePromocodeStatistic({to, from})
|
||||
|
||||
return(
|
||||
<LocalizationProvider dateAdapter={AdapterMoment}>
|
||||
<Typography>Статистика промокодов</Typography>
|
||||
<DateFilter from={from} to={to} setFrom={setFrom} setTo={setTo}/>
|
||||
<Table
|
||||
sx={{
|
||||
width: "80%",
|
||||
border: "2px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
bgcolor: theme.palette.content.main,
|
||||
color: "white"
|
||||
}}
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow
|
||||
sx={{
|
||||
borderBottom: "2px solid",
|
||||
borderColor: theme.palette.grayLight.main,
|
||||
height: "100px",
|
||||
}}
|
||||
>
|
||||
<TableCell sx={{color: "inherit"}} align="center">Промокод</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">Регистации</TableCell>
|
||||
<TableCell sx={{color: "inherit"}} align="center">Внесено</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{/*<TableCell sx={{color: "inherit"}} align="center">{Registrations}</TableCell>*/}
|
||||
{/*<TableCell sx={{color: "inherit"}} align="center">{Quizes}</TableCell>*/}
|
||||
{/*<TableCell sx={{color: "inherit"}} align="center">{Results}</TableCell>*/}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</LocalizationProvider>
|
||||
)
|
||||
}
|
||||
119
src/pages/dashboard/Content/QuizStatistic/dateFilter.tsx
Normal file
119
src/pages/dashboard/Content/QuizStatistic/dateFilter.tsx
Normal file
@ -0,0 +1,119 @@
|
||||
import {Box, TextField, Typography, useTheme} from "@mui/material";
|
||||
import {useState} from "react";
|
||||
import moment, {Moment} from "moment";
|
||||
import {DatePicker} from "@mui/x-date-pickers";
|
||||
|
||||
interface Props{
|
||||
from: Moment | null,
|
||||
to: Moment | null,
|
||||
setFrom: (a: Moment | null) => void,
|
||||
setTo: (a: Moment | null) => void,
|
||||
}
|
||||
|
||||
export default function DateFilter({to, setTo, from, setFrom}: Props) {
|
||||
const theme = useTheme()
|
||||
const [isOpen, setOpen] = useState<boolean>(false);
|
||||
const [isOpenEnd, setOpenEnd] = useState<boolean>(false);
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const onAdornmentClick = () => {
|
||||
setOpen((old) => !old);
|
||||
if (isOpenEnd) {
|
||||
handleCloseEnd();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseEnd = () => {
|
||||
setOpenEnd(false);
|
||||
};
|
||||
|
||||
const handleOpenEnd = () => {
|
||||
setOpenEnd(true);
|
||||
};
|
||||
|
||||
const onAdornmentClickEnd = () => {
|
||||
setOpenEnd((old) => !old);
|
||||
if (isOpen) {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
return(
|
||||
<>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
marginBottom: "5px",
|
||||
fontWeight: 500,
|
||||
color: "4D4D4D",
|
||||
}}
|
||||
>
|
||||
Дата начала
|
||||
</Typography>
|
||||
<DatePicker
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={from}
|
||||
onChange={(date) => date && setFrom(date)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
sx={{ background: "#1F2126", borderRadius: "5px" }}
|
||||
/>
|
||||
)}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "40px",
|
||||
color: theme.palette.secondary.main,
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
marginBottom: "5px",
|
||||
fontWeight: 500,
|
||||
color: "4D4D4D",
|
||||
}}
|
||||
>
|
||||
Дата окончания
|
||||
</Typography>
|
||||
<DatePicker
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={to}
|
||||
onChange={(date) => date && setTo(date)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
sx={{ background: "#1F2126", borderRadius: "5px" }}
|
||||
/>
|
||||
)}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "40px",
|
||||
color: theme.palette.secondary.main,
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
@ -6,18 +6,16 @@ import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import { useQuizStatistic } from '@root/utils/hooks/useQuizStatistic';
|
||||
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
|
||||
import StatisticSchild from "./StatisticSchild";
|
||||
import makeRequest from "@root/api/makeRequest";
|
||||
import {parseAxiosError} from "@root/utils/parse-error";
|
||||
import DateFilter from "@pages/dashboard/Content/QuizStatistic/dateFilter";
|
||||
import StstisticPromocode from "@pages/dashboard/Content/QuizStatistic/StstisticPromocode";
|
||||
|
||||
export default () => {
|
||||
const theme = useTheme()
|
||||
|
||||
const [isOpen, setOpen] = useState<boolean>(false);
|
||||
const [isOpenEnd, setOpenEnd] = useState<boolean>(false);
|
||||
|
||||
const [from, setFrom] = useState<Moment | null>(null);
|
||||
const [to, setTo] = useState<Moment | null>(moment(Date.now()));
|
||||
|
||||
|
||||
|
||||
const { Registrations, Quizes, Results } = useQuizStatistic({
|
||||
from,
|
||||
to,
|
||||
@ -28,106 +26,9 @@ export default () => {
|
||||
setTo(moment(Date.now()));
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const onAdornmentClick = () => {
|
||||
setOpen((old) => !old);
|
||||
if (isOpenEnd) {
|
||||
handleCloseEnd();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseEnd = () => {
|
||||
setOpenEnd(false);
|
||||
};
|
||||
|
||||
const handleOpenEnd = () => {
|
||||
setOpenEnd(true);
|
||||
};
|
||||
|
||||
const onAdornmentClickEnd = () => {
|
||||
setOpenEnd((old) => !old);
|
||||
if (isOpen) {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
return <>
|
||||
<LocalizationProvider dateAdapter={AdapterMoment}>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
marginBottom: "5px",
|
||||
fontWeight: 500,
|
||||
color: "4D4D4D",
|
||||
}}
|
||||
>
|
||||
Дата начала
|
||||
</Typography>
|
||||
<DatePicker
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={from}
|
||||
onChange={(date) => date && setFrom(date)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
sx={{ background: "#1F2126", borderRadius: "5px" }}
|
||||
/>
|
||||
)}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "40px",
|
||||
color: theme.palette.secondary.main,
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
marginBottom: "5px",
|
||||
fontWeight: 500,
|
||||
color: "4D4D4D",
|
||||
}}
|
||||
>
|
||||
Дата окончания
|
||||
</Typography>
|
||||
<DatePicker
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={to}
|
||||
onChange={(date) => date && setTo(date)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
sx={{ background: "#1F2126", borderRadius: "5px" }}
|
||||
/>
|
||||
)}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "40px",
|
||||
color: theme.palette.secondary.main,
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<DateFilter from={from} to={to} setFrom={setFrom} setTo={setTo}/>
|
||||
<Button
|
||||
sx={{
|
||||
m: '10px 0'
|
||||
@ -166,7 +67,7 @@ export default () => {
|
||||
</Table>
|
||||
|
||||
<StatisticSchild/>
|
||||
|
||||
<StstisticPromocode/>
|
||||
</LocalizationProvider>
|
||||
</>
|
||||
}
|
||||
29
src/utils/hooks/usePromocodeStatistic.ts
Normal file
29
src/utils/hooks/usePromocodeStatistic.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import type { Moment } from "moment";
|
||||
import {getStatisticPromocode} from "@root/api/quizStatistic";
|
||||
|
||||
interface useStatisticProps {
|
||||
to: Moment | null;
|
||||
from: Moment | null;
|
||||
}
|
||||
|
||||
export function usePromocodeStatistic({ to, from }: useStatisticProps) {
|
||||
const formatTo = to?.unix();
|
||||
const formatFrom = from?.unix();
|
||||
|
||||
const [statisticPromo, setStatisticPromo] = useState<any>([])
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const requestStatistics = async () => {
|
||||
|
||||
const gottenData = await getStatisticPromocode(Number(formatTo), Number(formatFrom));
|
||||
setStatisticPromo(gottenData)
|
||||
}
|
||||
|
||||
requestStatistics();
|
||||
}, []);
|
||||
|
||||
return statisticPromo;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user