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/Payments/Table";
import { Field, Form, Formik } from "formik";
import NotFoundModel from "../Components/NotFoundModel";
import { useSelector } from "react-redux";
import { MdAdd } from "react-icons/md";
import ViewModel from "../Components/Payments/ViewModel";
import moment from "moment";
import {
Page,
BoxContainer,
BoxTitle,
Underline,
ErrorText,
} from "../Components/Styles/PageStyles";
import {
FieldWrapper,
InputGroup,
Label,
SmallBtn,
} from "../Components/Styles/InputStyles";
const Payment= () => {
const user = useSelector((state) => state.UserReducer.user);
const [selectedItem, setSelectedItem] = useState(null);
const [openViewModel, setOpenViewModel] = useState(false);
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}/admin/payment/list`,
// Config.AxiosConfig
// );
// const { isLoading, error, data, refetch, isRefetching } = useQuery(
// "paymentList",
// fetchFunction
// );
// ------------
const getPaymentListFunction = async (values) =>
await axios.post(
`${Config.nodeApiUrl}/customer/getPayments`,
values,
Config.AxiosConfig
);
const getPaymentListSuccess = (res) => {};
const getPaymentListError = (res) => {};
const {
isLoading: getPaymentListLoading,
mutate: getPaymentListMutate,
error,
data,
} = useMutation(getPaymentListFunction, {
onSuccess: getPaymentListSuccess,
onError: getPaymentListError,
});
//console.log(data?.data?.userPayment)
useEffect(() => {
getPaymentListMutate({
startDate,
endDate,
});
}, []);
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);
getPaymentListMutate(newValues);
};
return (
{openViewModel && (
)}
{!getPaymentListLoading && (
)}
{getPaymentListLoading && }
{(error || data?.data?.length == 0) && !getPaymentListLoading && (
)}
{/* {(error || data?data?.length==0) && !getPaymentListLoading && (
)} */}
);
};
const Filters = ({ initialValues, submitHandler, InitialLoading, user }) => {
return (
);
};
const Uploader = ({ setOpenUploadModel }) => {
return (
{/* */}
);
};
const TableWrapper = tw.h1`my-10 border rounded-md overflow-auto`;
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 w-40 flex items-center space-x-1 justify-center h-10 text-xs whitespace-nowrap rounded`;
const FilterContainer = tw.div`
grid grid-cols-2 w-full max-w-xl gap-4 md:flex md:space-x-4 items-end mt-12 md:mt-8`;
const ApplyBtn = tw.button`${(p) =>
p.$active
? "bg-gray-100"
: ""} border whitespace-nowrap border-gray-200 flex space-x-1.5 justify-center items-center text-gray-500 h-full rounded-md px-6 cursor-pointer hover:bg-gray-100 py-2.5 text-sm`;
export default Payment;