webtrigon-accounts/src/pages/accounts/accounts.tsx

import { IonButton, IonContent, IonDatetime, IonInput, IonPage } from '@ionic/react';
import { ReactComponent as CogIcon } from 'ionicons/dist/svg/cog-outline.svg';
import { ReactComponent as LineChartIcon } from 'ionicons/dist/svg/stats-chart.svg';
import styles from './accounts.module.scss';
import itemCardStyles from '../../components/item-card/itemCard.module.scss';
import { ItemCard } from '../../components/item-card/itemCard';
import { format } from 'date-fns';

const sampleInvoiceData = [{
    invoice: {
        id: '2021-22/50',
        date: new Date().toString(),
        status: 'due',
    },
    client: {
        name: 'Swasti',
        logo: 'https://cais.usc.edu/wp-content/uploads/2019/08/swasti-logo-2.23.png',
        project: {
            name: 'DiceFlow',
            contract: {
                name: 'Retainer contract',
                amount: '₹ 5,00,000',
            },
        }
    }
}, {
    invoice: {
        id: '2021-22/51',
        date: new Date().toString(),
        status: 'over due',
    },
    client: {
        name: 'TechM',
        logo: 'https://files.techmahindra.com/static/img/brandkit/logo/Logo-True-Colors-original.png',
        project: {
            name: 'Telecom Italia',
            contract: {
                name: 'Phase 1',
                amount: '₹ 20,00,000',
            },
        }
    }
}]

const Accounts: React.FC = () => {
    const pendingInvoiceForm =
    <section className={itemCardStyles.form}>
        <div className={itemCardStyles.inputHolder}>
            <label> Payment Date </label>
            <IonDatetime mode={'ios'} placeholder={'DD/MM/YYYY'} displayFormat={'DD/MM/YYYY'}></IonDatetime>
        </div>

        <div className={itemCardStyles.inputHolder}>
            <label> Reference No. </label>
            <IonInput placeholder={'Enter here'}></IonInput>
        </div>

        <div className={itemCardStyles.buttonsHolder}>
            <IonButton fill={'outline'} color="dark" className={itemCardStyles.cancel} shape={'round'}> Cancel Invoice </IonButton>
            <IonButton fill={'solid'} className={itemCardStyles.approve + ' ' + itemCardStyles.disabled} shape={'round'}> Paid </IonButton>
        </div>
    </section>

    return (
        <IonPage>
            <IonContent>
                <header className={styles.pageHeader}>
                    <h4> Accounts </h4>
                    <button> <CogIcon /> </button>
                </header>

                <section className={styles.dataBoard}>

                    <section className={styles.segments}>
                        <button className={styles.active}> Sep </button>
                        <button> 1Q </button>
                        <button> 6M </button>
                        <button> 1FY </button>
                    </section>

                    <ul className={styles.statisticalDetails}>
                        <li>
                            <label> <LineChartIcon /> <span> Expenses </span> </label>
                            <h3> ₹ 5,00,000 </h3>
                        </li>

                        <li>
                            <label> <LineChartIcon /> <span> Income </span> </label>
                            <h3> ₹ 20,00,000 </h3>
                        </li>
                    </ul>

                    <ul className={styles.quickDraw}>
                        <li>
                            <button>  </button>
                            <label> Add Expense </label>
                        </li>
                        <li>
                            <button>  </button>
                            <label> Add Invoice </label>
                        </li>
                        <li>
                            <button>  </button>
                            <label> E-Statement </label>
                        </li>
                        <li>
                            <button>  </button>
                            <label> Reports </label>
                        </li>
                        <li>
                            <button>  </button>
                            <label> Projection </label>
                        </li>
                    </ul>
                </section>

                <div className={styles.dashboardContainer}>
                    <div className={styles.dashboardContainerSegment}>
                        <header>
                            <h5> Pending Invoices </h5>
                            <a> See All </a>
                        </header>

                        {sampleInvoiceData.map((invoice, key) => {
                            return <ItemCard key={key} 
                            leftImage={invoice.client.logo}
                            heading={{ name: 'Invoice ID', value: invoice.invoice.id }}
                            value={invoice.client.project.contract.amount}
                            description={invoice.client.project.contract.name}
                            rightText={{
                                name: invoice.invoice.status,
                                type: invoice.invoice.status === 'due' ? 'warning' : 'danger'
                            }}
                            details={[{
                                name: 'Invoice ID',
                                value: invoice.invoice.id,
                            }, {
                                name: 'Invoice Date',
                                value:  format(new Date(invoice.invoice.date), 'dd MMMM yyyy')
                            }, {
                                name: 'Client',
                                value: invoice.client.name
                            }, {
                                name: 'Project',
                                value: invoice.client.project.name
                            }, {
                                name: 'Contract',
                                value: invoice.client.project.contract.name
                            }, {
                                name: 'Invoice Amount',
                                value: invoice.client.project.contract.amount
                            }]}
                            form={pendingInvoiceForm}
                            />
                        })}
                    </div>
                </div>

            </IonContent>
        </IonPage>
    );
};

export default Accounts;