Untitled

update the below code for due date calculation, if due date is greater than today's date then give the no. of days left for due date, if the due date is today then display as today, and if the due date is in past then display past due date.

 Nov 15, 2024 (5 days)
 Nov 15, 2024 (today)
 Nov 15, 2024 (past due date)



import React, { useEffect } from 'react';
import { withPage, Lift, useAppState, Util } from '@d-lift/core';
import BodySection from '@/Layout/BodySection';
import webService from '@/Services/WebService';
import Questions from './Components/Questions';
import RFIDetails from './Components/RFIDetails';
import { Page } from '@d-lift/uxcomponents';
import './response.scss';
import Moment from 'moment';

const RFIResponse = () => {
    const [responseData, setResponseData] = useAppState('responseData', false);
    const [rfi, setRfi] = useAppState('rfi');
    const [responseStats, setResponseStats] = useAppState('responseStats', '');
    const [updatedDueDt, setUpdatedDueDt] = useAppState('updatedDueDt', '');

    const updateResponseData = (newResponseData) => {
        setResponseData(newResponseData);
    };

    useEffect(() => {
        if (rfi) {
            loadResponseData(rfi);

            const dueDate = formatDueDate(rfi.dueDT);
            setUpdatedDueDt(dueDate);
        }
    }, [rfi]);

    useEffect(() => {
        if (responseData) {
            const stats = calculateResponseStats(responseData.questions);
            setResponseStats(stats);
        }
    }, [responseData]);

    const loadResponseData = async (rfi) => {
        try {
            Lift.spinner.show();

            const response = await webService.getFullDetails({
                requestBody: { rfiId: rfi?.id },
            });

            if (response) {
                updateResponseData(response);
                Lift.Application.Notification.success('Response Data loaded successfully');
            }
        } catch (error) {
            console.log(error);
            Lift.Application.Notification.error('Failed to load Response Data');
        } finally {
            Lift.spinner.hide();
        }
    };

    const formatDueDate = (dueDT) => {
        const dueDate = Moment(dueDT).format('MMM DD , yyyy');

        const parsedDueDate = new Date(dueDT);
        const today = new Date();
        const timeDifference = today - parsedDueDate;

        const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));

        return `${dueDate} (${daysDifference} days)`;
    };

    const calculateResponseStats = (data) => {
        const totalQuestions = data.length;
        const answeredQuestions = data.filter((q) => q?.answers && q?.answers.length > 0).length;
        const percentageAnswered =
            totalQuestions > 0 ? (answeredQuestions / totalQuestions) * 100 : 0;
        return `${answeredQuestions} of ${totalQuestions} (${percentageAnswered}%)`;
    };

    return (
        <Page ref-table-list="OFFERING,STATE,PROGRAM,CATEGORY">
            <BodySection>
                {rfi && (
                    <RFIDetails
                        rfi={rfi}
                        responseStats={responseStats}
                        updatedDueDt={updatedDueDt}
                    />
                )}
                {responseData && (
                    <Questions
                        responseData={responseData.questions}
                        updateResponseData={updateResponseData}></Questions>
                )}
            </BodySection>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Respond to an RFI page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    RFIResponse,
);