PK ! A7��n import React, { useState, useEffect } from "react";
import tw from "tailwind-styled-components";
import { Link, useParams, useNavigate } from "react-router-dom";
import Images from "../Images";
import { useMutation, useQuery } from "react-query";
import axios from "axios";
import Config from "../Config";
import Loading from "../Components/Loading";
import Table from "../Components/Reports/Table";
import {
Page,
BoxContainer,
BoxTitle,
Underline,
ErrorText,
} from "../Components/Styles/PageStyles";
import NotFoundModel from "../Components/NotFoundModel";
import {
FieldWrapper,
InputGroup,
Label,
SmallBtn,
} from "../Components/Styles/InputStyles";
import { useSelector } from "react-redux";
import { ForUs } from "../Config";
import SingleEntry from "../Components/Reports/SingleEntry";
import { MdAdd } from "react-icons/md";
import { HiUpload } from "react-icons/hi";
import { Field, Form, Formik } from "formik";
import ViewModel from "../Components/Reports/ViewModel";
import { toast } from "react-toastify";
import moment from "moment";
const Reports = () => {
const user = useSelector((state) => state.UserReducer.user);
const [openUploadModel, setOpenUploadModel] = useState(false);
const [openViewModel, setOpenViewModel] = useState(false);
const [selectedItem, setSelectedItem] = useState(null);
const [startDate, setStartDate] = useState(
moment(new Date()).subtract(300, "days").format("YYYY-MM-DD")
);
const [endDate, setEndDate] = useState(
moment(new Date()).format("YYYY-MM-DD")
);
const navigate = useNavigate();
// ----- Getting Initial Data ------
// const fetchFunction = async () =>
// await axios.get(`${Config.nodeApiUrl}/getReports`, Config.AxiosConfig);
// const { isLoading, error, data, refetch, isRefetching } = useQuery(
// "getReports",
// fetchFunction
// );
//------- Get Reports -------
const getReportsFunction = async (values) =>
await axios.post(
`${Config.nodeApiUrl}/customer/getReports`,
values,
Config.AxiosConfig
);
const getReportsSuccess = (res) => {};
const getReportsError = (res) => {};
const {
isLoading: getReportsLoading,
mutate: getReportsMutate,
error,
data,
} = useMutation(getReportsFunction, {
onSuccess: getReportsSuccess,
onError: getReportsError,
});
useEffect(() => {
getReportsMutate({
startDate,
endDate,
});
}, []);
//------- Add Single Entry -------
const SingleEntryPostFunction = async (values) =>
await axios.post(
`${Config.nodeApiUrl}/customer/generateReport`,
values,
Config.AxiosConfig
);
const onSingleEntrySuccess = (res) => {
getReportsMutate({
startDate,
endDate,
});
setOpenUploadModel(false);
toast.success(res?.data?.msg || "Success");
};
const onSingleEntryError = (res) => {
// setOpenUploadModel(false);
toast.error(res?.response?.data?.msg || "An Error Occured");
};
const { isLoading: SingleEntryLoading, mutate: postSingleEntry } =
useMutation(SingleEntryPostFunction, {
onSuccess: onSingleEntrySuccess,
onError: onSingleEntryError,
});
const CampaignList = data?.data?.campaigns?.map((item) => ({
value: item.id,
label: item.name,
}));
const initialValues = {
startDate: moment(new Date()).subtract(300, "days").format("YYYY-MM-DD"),
endDate: moment(new Date()).format("YYYY-MM-DD"),
};
const submitHandler = (values) => {
const newValues = {
startDate: moment(values.startDate).format("YYYY-MM-DD"),
endDate: moment(values.endDate).format("YYYY-MM-DD"),
};
setStartDate(newValues.startDate);
setEndDate(newValues.endDate);
getReportsMutate(newValues);
};
return (
{/* */}
{openUploadModel && (
)}
{openViewModel && (
)}
{!getReportsLoading && (
)}
{getReportsLoading && }
{data?.data?.reports.length == 0 && !getReportsLoading && (
)}
{error && !getReportsLoading && }
);
};
const Uploader = ({ setOpenUploadModel }) => {
return (
);
};
const Filters = ({
initialValues,
submitHandler,
InitialLoading,
user,
setOpenUploadModel,
}) => {
return (
);
};
const TableWrapper = tw.h1`my-10 border rounded-md overflow-auto`;
const FilterContainer = tw.div`
grid grid-cols-2 w-full gap-4 md:flex md:space-x-4 items-end mt-4 md:mt-8 `;
const ApplyBtn = tw.button`${(p) =>
p.$active
? "bg-gray-100"
: ""} border whitespace-nowrap w-40 !mr-auto border-gray-200 flex space-x-1.5 justify-center items-center text-gray-500 rounded-md px-6 cursor-pointer hover:bg-gray-100 h-10 text-sm
`;
const Title = tw.h1`text-xl text-gray-800 whitespace-nowrap font-medium`;
const UploadWrapper = tw.div`
w-full flex justify-end space-x-4 items-center `;
const Button = tw.button`
text-white bg-custom-zambia flex items-center !ml-auto space-x-1 justify-center w-40 h-10 text-xs whitespace-nowrap rounded px-6
`;
export default Reports;