Untitled

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';

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

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

    useEffect(() => {
        if (rfi) {
            loadResponseData(rfi);
            console.log(rfi);
        }
    }, [rfi]);

    useEffect(() => {
        if (responseData) {
            const stats = calculateResponseStats(responseData.questions);
            setResponseStats(stats);

            console.log(stats);
            console.log(responseStats);
        }
    }, [responseData]);

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

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

            console.log(response);
            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 calculateResponseStats = (data) => {
        console.log(data);
        const totalQuestions = data.length;
        const answeredQuestions = data.filter((q) => q?.answers && q?.answers.length > 0).length;
        const percentageAnswered =
            totalQuestions > 0 ? ((answeredQuestions / totalQuestions) * 100).toFixed(2) : 0;
        return `${answeredQuestions} of ${totalQuestions} (${percentageAnswered}%)`;
    };

    return (
        <Page ref-table-list="OFFERING,STATE,PROGRAM,CATEGORY">
            <BodySection>
                {rfi && (
                    <RFIDetails
                        rfi={rfi}
                        responseStats={responseStats}
                    />
                )}
                {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,
);






import React from 'react';
import { Button, Label, Column, Header, Row, Para } from '@d-lift/uxcomponents';
import { Util } from '@d-lift/core';

const RFIDetails = ({ rfi, responseStats }) => {
    return (
        <>
            <div className="ux-rfi-grey-border w-100 mt-3">
                <Header className="pt-3 ux-rfi-font-header" size="2">
                    {rfi.title}
                </Header>
                <Row>
                    <Column className="col-9">
                        <Row className="d-flex flex-wrap">
                            <Para className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal ux-rfi-green-label">
                                {Util.getRefTableDescriptionByCode('OFFERING', rfi.offering)}
                            </Para>
                            <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal">
                                {Util.getRefTableDescriptionByCode('CATEGORY', rfi.category)}
                            </Para>
                            <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal">
                                {Util.getRefTableDescriptionByCode('PROGRAM', rfi.programs)}
                            </Para>
                        </Row>
                    </Column>

                    <Column>
                        <div className="ux-rfi-grey-border">
                            <Label
                                labelKey="requested_by"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">
                                {Util.getRefTableDescriptionByCode('STATE', rfi.state)}
                            </Para>

                            <Label
                                labelKey="due"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">{rfi.dueDt}</Para>

                            <Label
                                labelKey="responses"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font">
                                <Para className="ux-rfi-bold">{responseStats}</Para>
                            </Label>

                            <div className="m-0 p-1">
                                <Button
                                    id="summarizeBtn"
                                    size="small"
                                    className="ux-rfi-green-button"
                                    // click={}
                                    labelKey="summarize_btn"></Button>
                            </div>
                        </div>
                    </Column>
                </Row>
            </div>

            <div className="ux-rfi-grey-border w-100 mt-3">
                <Para className="mt-2 scrollable-content">{rfi.description}</Para>
            </div>
        </>
    );
};

export default RFIDetails;