Untitled

update the below code for excel_upload button, using this we should be able to upload excel.

 Excel upload->validation->[(SUCCESS)convert to JSON->call API to insert data]/[(ERROR) show particular error msg for certain cell where it failed]




import React, { useEffect } from 'react';
import { withPage, Navigate, useAppState, Lift } from '@d-lift/core';
import {
    Card,
    Page,
    Button,
    Para,
    Group,
    Column,
    Label,
    Row,
    Grid,
    Image,
    Header,
} from '@d-lift/uxcomponents';
import BodySection from '../../Layout/BodySection';
import './home.scss';
import ConstantKeys from '@/Constants/ConstantKeys';
import RFIUtil from '@/Util/RFIUtil';

const Home = () => {
    const [refDataLoaded, setRefDataLoaded] = useAppState('refDataLoaded', false);
    useEffect(() => {
        if (!refDataLoaded) {
            Lift.spinner.show();
            RFIUtil.isRefDataLoaded(ConstantKeys.REF_TABLE.CREATE_RFI_REF_TABLES, setRefDataLoaded);
        }
        if (refDataLoaded) {
            Lift.spinner.hide();
        }
    }, [refDataLoaded]);

    return (
        <Page ref-table-list="PROGRAM, CATEGORY, OFFERING, STATE,DEADLINE">
            <BodySection>
                <Card className="ux-rfi-grid-home">
                    <Row className="d-flex mt-2 mb-2 flex-sm-column flex-md-row">
                        <div className="col-md-6 col-sm-12">
                            <Header
                                className="ux-rfi-heading"
                                labelKey="HHS_knowledgebase"></Header>
                            <Para className="ux-rfi-content mt-2" labelKey="header_content"></Para>
                        </div>
                        <div className="col-md-6 col-sm-12">
                            <Image src="../../../images/landingPageImg.png" className="img-fluid" />
                        </div>
                    </Row>
                </Card>

                <Group width="5,7">
                    <div className="green-block">
                        <div className="p-2 ux-rfi-green-bg rounded-top ux-rfi-black-border border-bottom-0">
                            <Para>
                                <Label
                                    className="pt-2 pl-2 ux-rfi-green-bg-font ux-rfi-font"
                                    labelKey="green_card_content"></Label>
                                <Label
                                    className="pt-1 pl-2 ux-rfi-green-bg-font ux-rfi-font"
                                    labelKey="green_card_content_2"></Label>
                            </Para>
                        </div>
                        <div class="bg-white pt-2 rounded-bottom ux-rfi-black-border border-top-0 d-flex justify-content-center">
                            <Button
                                id="knowledgeBase-btn"
                                className="ux-rfi-white-button"
                                labelKey="knowledge_base"></Button>
                        </div>
                    </div>

                    <div className="white-block ux-rfi-black-border-round">
                        <div className="d-flex justify-content-center">
                            <Label
                                className="ux-rfi-round-label"
                                labelKey="requests_for_info"></Label>
                        </div>

                        <Grid>
                            <Row className="flex-sm-column flex-md-row">
                                <Column className="mt-3">
                                    <Para
                                        className="ux-rfi-content2"
                                        labelKey="white_card_left_content"></Para>
                                    <div className="d-flex justify-content-center">
                                        <Button
                                            id="search-rfi-btn"
                                            className="ux-rfi-white-button mt-4 pr-6"
                                            labelKey="search_rfi"
                                            mode="link"
                                            click={() => Navigate.to('/search')}></Button>
                                    </div>
                                </Column>

                                <Column className="mt-3 ux-rfi-vertical-line">
                                    <Para
                                        className="ux-rfi-content2"
                                        labelKey="white_card_right_content"></Para>
                                    <div className="d-flex justify-content-center">
                                        <Button
                                            id="request-info-btn"
                                            className="ux-rfi-white-button mt-4"
                                            labelKey="request_info"
                                            mode="link"
                                            disabled={!RFIUtil.isAdmin() && !RFIUtil.isPOC()}
                                            click={() => Navigate.to('/create-rfi')}></Button>
                                    </div>
                                </Column>
                            </Row>
                        </Grid>
                    </div>
                </Group>
                <Row>
                    <Button
                        id="excel-upload-btn"
                        className="ux-rfi-green-button "
                        click={}
                        labelKey="excel_upload"></Button>
                </Row>
            </BodySection>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Home Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
        TemplateOptions: { cardWorkFlow: true },
    },
    Home,
);