Untitled

import ConstantKeys from '@/Constants/ConstantKeys';
import webService from '@/Services/WebService';
import { AppContext, Lift, useAppState, Util, Navigate } from '@d-lift/core';
import {
    Button,
    Section,
    LineBreak,
    Checkbox,
    CheckboxGroup,
    DataTable,
    Group,
    Header,
    Label,
    NavLink,
    Textbox,
    UX,
} from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import React from 'react';
import '../my-rfis.scss';
import RFIUtil from '@/Util/RFIUtil';
import App from '@/App/App';

const MyRFIDashboard = ({ myRFIFilter, myRFIData, myRFISubmittedData }) => {
    const getTitleLink = (colData, rowData, index) => {
        return (
            <UX type="section">
                <NavLink className="ux-rfi-link" to="/response">
                    {rowData.title}
                </NavLink>
            </UX>
        );
    };

    const getSubmittedTableTitleLink = () => {
        Navigate.to('/response');
    };

    const getOfferingDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.OFFERING, colData);
    };

    const getStateDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATE, colData);
    };

    const getStatusDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATUS, colData);
    };

    const getRowStyle = (item) => ({
        border: item.status === 'Incomplete' ? '2px solid red' : 'none',
    });

    const getRowClass = (item) => (item.status === 'Incomplete' ? 'incompleteStatus' : '');

    return (
        <>
            <Button
                id="continue-editing-btn"
                className="ux-rfi-yellow-button"
                labelKey="continue_editing_btn"
                click={getSubmittedTableTitleLink}
            />

            <Header className="pt-3 ux-rfi-font-header" size="2">
                RFIs submitted by team {getStateDsc(myRFIFilter?.state)}:
            </Header>

            {myRFIData?.rfiSubmitted ? (
                <DataTable
                    col-data-keys="title,dueDT,offering,programs,category,replies,status"
                    col-default-headers="Title,Opened Due,Offering,Program,Category,Responded,Status"
                    className="dt-container border border-secondary"
                    datacollection="myRFIData.rfiSubmitted"
                    customContent={{
                        Offering: getOfferingDsc,
                        State: getStateDsc,
                        Status: getStatusDsc,
                    }}
                    keyfield="id"
                    hover="false"
                    bordered="true"
                    striped="true"
                    emptymsg-key="no_records"
                    responsive={true}
                />
            ) : (
                <></>
            )}

            <Header
                className="pt-3 ux-rfi-font-header"
                size="2"
                labelKey="require_attention"></Header>

            {myRFIData?.rfiRequireAttention ? (
                <DataTable
                    col-data-keys="dueDT,title,offering"
                    col-default-headers="Due,Title,Offering"
                    className="dt-container border border-secondary"
                    datacollection="myRFIData.rfiRequireAttention"
                    customContent={{
                        Title: getTitleLink,
                        Offering: getOfferingDsc,
                    }}
                    keyfield="id"
                    hover="false"
                    bordered="true"
                    striped="true"
                    emptymsg-key="no_records"
                    responsive={true}
                />
            ) : (
                <></>
            )}
            <Header className="pt-3 ux-rfi-font-header" size="2">
                Responses submitted by team {getStateDsc(myRFIFilter?.state)}:
            </Header>

            <Section>
                {myRFISubmittedData?.map(
                    (item, index) => (
                        <div id={index} key={index}>
                            <div className="ux-rfi-response-container">
                                <LineBreak size={1} />
                                <div className="pr-4 pl-1">
                                    <Button
                                        className="ux-rfi-white-button w-100"
                                        mode="link"
                                        click={getSubmittedTableTitleLink}>
                                        {item.title}
                                    </Button>
                                </div>
                                <div className="p-3">
                                    <DataTable
                                        col-data-keys="question,dueDT,offering,programs,category,replies"
                                        col-default-headers="Question,Due Date,Offering,Programs,Category,Replies"
                                        datacollection={[item]}
                                        className="dt-container bg-white"
                                        emptymsg-key="Empty_message"
                                        keyfield="id"
                                        hover="false"
                                        bordered={true}
                                        striped={false}
                                        responsive={true}
                                        colWidths={5}
                                    />
                                </div>
                            </div>
                            <LineBreak size={1} />
                        </div>
                    )
                )}
            </Section>
        </>
    );
};

MyRFIDashboard.propTypes = {
    myRFIFilter: PropTypes.object.isRequired,
    myRFIData: PropTypes.object.isRequired,
    myRFISubmittedData: PropTypes.array.isRequired,
};

export default MyRFIDashboard;