Untitled

import { Section } from "@/components/pagelayout";
import { useApp } from "@/providers";
import { useAllFeeDeposits } from "@/services/fee-deposit.service";
import { Box, Button, Flex, Spacer, Stack, Text } from "@chakra-ui/react";
import dayjs from "dayjs";
import { sumBy } from "lodash";
import { useMemo } from "react";
import { FaArrowRight } from "react-icons/fa";
import { HiOutlineCurrencyRupee } from "react-icons/hi";

export default function StudentFees() {

    //custom-hook
    const { currentUserCourse } = useApp()

    //react-query
    const { data: feeDeposits, data2, allData, isLoading: loadingFeeDeposits, refetch: refetchFeeDeposits } = useAllFeeDeposits({ userCourseId: currentUserCourse?._id, paginateData: false }, currentUserCourse?._id ? true : false);
    const { data: penalty, isLoading: loadingPenalty } = useStudentTotalPenalty({ userCourseId: currentUserCourse?._id }, currentUserCourse?._id ? true : false)
    const { data: studentFees, isLoading: loadingStudentFees } = useStudentFees({ userCourseId: currentUserCourse?._id }, currentUserCourse?._id ? true : false);

    const totalPaidAmount = useMemo(() => {
        return sumBy(feeDeposits?.filter((f: any) => f.feeType === "ACADEMIC"), 'amount') || 0;
    }, [feeDeposits])

    const totalNextDueAmount = useMemo(() => {

        const dueInstallments = studentFees?.installments?.map((installment: any) => {
            const { dueDate } = installment;
            const dueDateDayjs = dayjs(dueDate)
            const isBefore = dueDateDayjs.isBefore(dayjs(), 'day');
            const isSame = dueDateDayjs.isSame(dayjs(), 'day');
            if (isBefore || isSame) {
                return installment;
            }
            return null;
        })?.filter((installment: any) => Boolean(installment))

        const total = sumBy(dueInstallments, 'amount') || 0;
        const dueAmount = (total + Number(penalty?.totalPenalty || 0)) - totalPaidAmount;
        return dueAmount < 0 ? 0 : dueAmount

    }, [studentFees, totalPaidAmount, penalty])

    return <>
        <Section rounded={"md"}>
            <Flex border={"2px solid"} borderColor={"green.400"} bg={"green.50"} align={"center"} px={5} py={2} rounded={"md"}>
                <Box fontSize={"40px"} color={"green.500"}><HiOutlineCurrencyRupee /></Box>
                <Stack gap={0} ml={4}>
                    <Text color={"gray.600"}>Pending Fees</Text>
                    <Text fontSize={"22px"} fontWeight={"semibold"}>₹ {totalNextDueAmount}</Text>
                </Stack>
                <Spacer />
                <Button colorScheme="green" w={200} rightIcon={<FaArrowRight />}>Please Pay</Button>
            </Flex>
        </Section>
        <Section rounded={"md"}></Section>
    </>
}