Untitled

import { useAppState, withPage } from '@d-lift/core';
import { AppContext, Navigate, PageConfig } from '@d-lift/core';
import { Section, Page, Header, Button, Row, Column, Para, UX, Card } from '@d-lift/uxcomponents';
import React, { useEffect, useState } from 'react';
import ToDoCard from '@/UXModule/Card/ToDoCard/ToDoCard';
import AppealsStatusCard from '@/UXModule/Card/AppealsStatusCard/AppealsStatusCard';

const AppealsDashboardNew = () => {
    const [fileManageAppealsCards, setFileManageAppealsCards] = useAppState(
        'fileManageAppealsCards',
        [],
    );
    const [appealsDetailsCardsData, setAppealsDetailsCardsData] = useAppState(
        'AppealsDetailsCardData',
        [],
    );

    useEffect(() => {
        updateFileManageAppealsCards();
        updateAppealsDetailsCardsData();
    }, []);

    const addFileManageAppealsCardItem = (cardItem) => {
        const nextFileManageAppealCard = [...AppContext.model.getValue('fileManageAppealsCards')];
        nextFileManageAppealCard.push(cardItem);
        AppContext.model.setValue('fileManageAppealsCards', nextFileManageAppealCard);
    };

    const updateFileManageAppealsCards = () => {
        const fileManageCards = [
            {
                heading: 'File_appeal_heading',
                description: 'File_appeal_description',
                type: 'fileAppeal',
                linkText: 'File_appeal_link',
            },
            {
                heading: 'Link_appeal_heading',
                description: 'Link_appeal_description',
                type: 'linkAppeal',
                linkText: 'Link_appeal_link',
            },
            {
                heading: 'Upload_document_heading',
                description: 'Upload_document_description',
                type: 'linkAppeal',
                linkText: 'Upload_document_link',
            },
        ];
        setFileManageAppealsCards(fileManageCards);
    };

    const updateAppealsDetailsCardsData = () => {
        const AppealsDetailsCardData = [
            {
                appealId: '1234567890',
                program: 'TANF',
                status: 'In Progress',
                statusCode: 'IP',
                submittedDate: '01/01/2021 12:00 PM',
            },
            {
                appealId: '1234567891',
                program: 'SNAP',
                status: 'Submitted',
                statusCode: 'SU',
                submittedDate: '01/01/2021 12:00 PM',
            },
            {
                appealId: '1234567892',
                program: 'DSNAP',
                status: 'Submitted',
                statusCode: 'SU',
                submittedDate: '01/01/2021 12:00 PM',
            },
            {
                appealId: '1234567893',
                program: 'childcare',
                status: 'Submitted',
                statusCode: 'SU',
                submittedDate: '01/01/2021 12:00 PM',
            },
        ];

        if (!AppContext.model.getValue('dataLoaded')) return;

        setAppealsDetailsCardsData(AppealsDetailsCardData);

        AppContext.model.setValue(
            'suCount',
            AppealsDetailsCardData.filter((data) => data.statusCode === 'SU').length,
        );
        AppContext.model.setValue(
            'ipCount',
            AppealsDetailsCardData.filter((data) => data.statusCode === 'IP').length,
        );
    };

    const handleFileManageAppealCardClick = (data) => {
        if (data.type === 'fileAppeal') {
            Navigate.to('/Appeals/APLMR');
        }
    };

    const handleAppealDetailsCardClick = (data) => {
        console.log('AppealsDetailsCard clicked:', data);
    };

    const handleActionIconClick = (e, filedAppeal) => {
        console.log('filedAppeal', filedAppeal);
        if (filedAppeal.statusCode === 'IP') {
            console.log("do some thing for 'IP' status");
        } else if (filedAppeal.statusCode === 'SU') {
            console.log("do some thing for 'SU' status");
        }
    };

    return (
        <Page>
            <Section className="container">
                <Row>
                    <Column>
                        <Header labelKey="Appeals_dashboard_header_1" />
                        <Para labelKey="Appeals_dashboard_sub_heading_1"></Para>
                        {fileManageAppealsCards?.map((cardData, index) => (
                            <ToDoCard
                                key={`fileManageAppealsCards_${index}`}
                                className="mb-4"
                                data={cardData}
                                onClick={() => handleFileManageAppealCardClick(cardData)}
                            />
                        ))}
                    </Column>
                    <Column>
                        <Header labelKey="Appeals_dashboard_header_2" />
                        <Para className="mb-3 status-heading">
                            {AppContext.model.getValue('ipCount')}
                        </Para>

                        {appealsDetailsCardsData?.map((cardData, index) => (
                            <AppealsStatusCard
                                key={`AppealsDetailsCardData_${index}`}
                                className="mb-4"
                                data={cardData}
                                onClick={() => handleAppealDetailsCardClick(cardData)}
                                showIf={
                                    cardData.statusCode === 'IP' &&
                                    AppContext.model.getValue('dataLoaded')
                                }
                            />
                        ))}

                        <Card
                            className="mb-4 justify-items"
                            showIf={!AppContext.model.getValue('dataLoaded')}>
                            <Para
                                className="mb-0 status-heading"
                                labelKey="inprogress_empty_text"
                            />
                        </Card>

                        <Para className="mb-3 status-heading">
                            {AppContext.model.getValue('suCount')}
                        </Para>

                        {appealsDetailsCardsData?.map((cardData, index) => (
                            <AppealsStatusCard
                                key={`AppealsStatusCardData_${index}`}
                                className="mb-4"
                                data={cardData}
                                onClick={() => handleAppealDetailsCardClick(cardData)}
                                showIf={
                                    cardData.statusCode === 'SU' &&
                                    AppContext.model.getValue('dataLoaded')
                                }
                            />
                        ))}

                        <Card
                            className="mb-4 justify-items"
                            showIf={!AppContext.model.getValue('dataLoaded')}>
                            <Para className="mb-0 status-heading" labelKey="submitted_empty_text" />
                        </Card>
                    </Column>
                </Row>
            </Section>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Appeals Dashboard Page',
        ContentManager: true,
        PageId: 'APLDB',
    },
    AppealsDashboardNew,
);
update the above code to initialize dataLoaded: true, ipCount: 0, suCount: 0, and update the code usage accordingly