<commit_before>import { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
    Table,
    TableHead,
    TableBody,
    TableRow,
    TableCell,
    Button,
} from '@material-ui/core';
import OpenInNew from '@material-ui/icons/OpenInNew';
import { formatDateWithLocale } from '../../../component/common/util';
import PageContent from '../../../component/common/PageContent';
import HeaderTitle from '../../../component/common/HeaderTitle';
import ConditionallyRender from '../../../component/common/ConditionallyRender';
import { formatApiPath } from '../../../utils/format-path';

const PORTAL_URL = formatApiPath('api/admin/invoices/portal');

function InvoiceList({
    location,
    fetchInvoices,
    invoices,
}) {

    const [isLoaded, setLoaded] = useState(false);

    useEffect(() => {
        fetchInvoices().finally(() => setLoaded(true));
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <ConditionallyRender condition={invoices.length > 0} 
                    show={
        <PageContent headerContent={<HeaderTitle title="Invoices" actions={
            <Button href={PORTAL_URL} rel="noreferrer" target="_blank" endIcon={<OpenInNew />}>
                Billing portal
            </Button>} />}>
            <div>
                
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>Amount</TableCell>
                            <TableCell>Status</TableCell>
                            <TableCell>Due date</TableCell>
                            <TableCell>PDF</TableCell>
                            <TableCell>Link</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {invoices.map(item => (
                            <TableRow key={item.invoiceURL} style={{backgroundColor: item.status === 'past-due' ? '#ff9194' : 'inherit'}}>
                                <TableCell style={{ textAlign: 'left' }}>
                                    {item.amountFomratted}
                                </TableCell>
                                <TableCell style={{ textAlign: 'left' }}>
                                    {item.status}
                                </TableCell>
                                <TableCell style={{ textAlign: 'left' }}>
                                {formatDateWithLocale(
                                        item.dueDate,
                                        location.locale
                                    )}
                                </TableCell>
                                <TableCell style={{ textAlign: 'left' }}>
                                    <a href={item.invoicePDF}>PDF</a>
                                </TableCell>
                                <TableCell style={{ textAlign: 'left' }}>
                                    <a href={item.invoiceURL} target="_blank" rel="noreferrer">Payment link</a>
                                </TableCell>
                            </TableRow>
                        ))}<commit_msg>fix: add null check for dueDate<commit_after>import { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
    Table,
    TableHead,
    TableBody,
    TableRow,
    TableCell,
    Button,
} from '@material-ui/core';
import OpenInNew from '@material-ui/icons/OpenInNew';
import { formatDateWithLocale } from '../../../component/common/util';
import PageContent from '../../../component/common/PageContent';
import HeaderTitle from '../../../component/common/HeaderTitle';
import ConditionallyRender from '../../../component/common/ConditionallyRender';
import { formatApiPath } from '../../../utils/format-path';

const PORTAL_URL = formatApiPath('api/admin/invoices/portal');

function InvoiceList({
    location,
    fetchInvoices,
    invoices,
}) {

    const [isLoaded, setLoaded] = useState(false);

    useEffect(() => {
        fetchInvoices().finally(() => setLoaded(true));
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <ConditionallyRender condition={invoices.length > 0} 
                    show={
        <PageContent headerContent={<HeaderTitle title="Invoices" actions={
            <Button href={PORTAL_URL} rel="noreferrer" target="_blank" endIcon={<OpenInNew />}>
                Billing portal
            </Button>} />}>
            <div>
                
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>Amount</TableCell>
                            <TableCell>Status</TableCell>
                            <TableCell>Due date</TableCell>
                            <TableCell>PDF</TableCell>
                            <TableCell>Link</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {invoices.map(item => (
                            <TableRow key={item.invoiceURL} style={{backgroundColor: item.status === 'past-due' ? '#ff9194' : 'inherit'}}>
                                <TableCell style={{ textAlign: 'left' }}>
                                    {item.amountFomratted}
                                </TableCell>
                                <TableCell style={{ textAlign: 'left' }}>
                                    {item.status}
                                </TableCell>
                                <TableCell style={{ textAlign: 'left' }}>
                                { item.dueDate && formatDateWithLocale(
                                        item.dueDate,
                                        location.locale
                                    )}
                                </TableCell>
                                <TableCell style={{ textAlign: 'left' }}>
                                    <a href={item.invoicePDF}>PDF</a>
                                </TableCell>
                                <TableCell style={{ textAlign: 'left' }}>
                                    <a href={item.invoiceURL} target="_blank" rel="noreferrer">Payment link</a>
                                </TableCell>
                            </TableRow>
                        ))}
{'fraction_non_alphanumeric': 0.12266079572259789, 'fraction_numerical': 0.0015725743041358703, 'mean_word_length': 1.217573221757322, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 87, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 15, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '398068', 'n_tokens_mistral': 1551, 'n_tokens_neox': 1503, 'n_words': 276}