Untitled

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';
import * as XLSX from 'xlsx';

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]);

    const handleExcelUpload = (event) => {
        const file = event.target.files[0];
        const reader = new FileReader();
        
        reader.onload = (e) => {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const sheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[sheetName];
            const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
            
            validateAndProcessData(jsonData);
        };
        
        reader.readAsArrayBuffer(file);
    };

    const validateAndProcessData = (data) => {
        let errors = [];
        let validData = [];
        
        // Assuming the first row is the header
        const headers = data[0];
        
        data.slice(1).forEach((row, rowIndex) => {
            let rowData = {};
            let rowValid = true;
            
            headers.forEach((header, colIndex) => {
                if (header === "ExpectedColumn" && !row[colIndex]) { // Replace "ExpectedColumn" with your column name
                    errors.push(`Error in row ${rowIndex + 2}, column ${header}: Value is required.`);
                    rowValid = false;
                }
                rowData[header] = row[colIndex];
            });
            
            if (rowValid) {
                validData.push(rowData);
            }
        });
        
        if (errors.length > 0) {
            showErrors(errors);
        } else {
            callApiWithData(validData);
        }
    };

    const showErrors = (errors) => {
        errors.forEach((error) => {
            console.error(error); // Display or log the error appropriately
        });
    };

    const callApiWithData = (data) => {
        // Replace with your API call
        fetch('/your-api-endpoint', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(result => {
            console.log('Success:', result);
            // Handle success
        })
        .catch(error => {
            console.error('Error:', error);
            // Handle error
        });
    };

    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 className="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"
                        labelKey="excel_upload"
                        click={() => document.getElementById('excel-file-input').click()}
                    />
                    <input
                        type="file"
                        id="excel-file-input"
                        style={{ display: 'none' }}
                        accept=".xlsx, .xls"
                        onChange={handleExcelUpload}
                    />
                </Row>
            </BodySection>
        </Page>
    );
};

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