mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-24 17:51:14 +02:00
705462f0cf
## About the changes Creating the first version of the Dark theme Refactor: colors variables Refactor: use theme variable instead - this change will help us to use MuiCssBaseline, and we can use classes directly for easy customization when we can't identify MUI classes Refactor: adjusting some files components - i’ve touched also the structure of some files, not only the colors variables (but only to adjust the style, not functionality) Fix: dark mode persistence on refresh (by Nuno) Feat: dark mode sees light logos, and light mode sees dark logos (by Nuno) --------- Co-authored-by: Nuno Góis <github@nunogois.com>
123 lines
5.3 KiB
TypeScript
123 lines
5.3 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import {
|
|
Table,
|
|
TableHead,
|
|
TableBody,
|
|
TableRow,
|
|
TableCell,
|
|
Button,
|
|
} from '@mui/material';
|
|
import OpenInNew from '@mui/icons-material/OpenInNew';
|
|
import { PageContent } from 'component/common/PageContent/PageContent';
|
|
import { PageHeader } from 'component/common/PageHeader/PageHeader';
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
import { formatApiPath } from 'utils/formatPath';
|
|
import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
|
|
import { IInvoice } from 'interfaces/invoice';
|
|
import { useLocationSettings } from 'hooks/useLocationSettings';
|
|
import { formatDateYMD } from 'utils/formatDate';
|
|
|
|
const PORTAL_URL = formatApiPath('api/admin/invoices/portal');
|
|
|
|
const InvoiceList = () => {
|
|
const { refetchInvoices, invoices } = useInvoices();
|
|
const [isLoaded, setLoaded] = useState(false);
|
|
const { locationSettings } = useLocationSettings();
|
|
|
|
useEffect(() => {
|
|
refetchInvoices();
|
|
setLoaded(true);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
return (
|
|
<ConditionallyRender
|
|
condition={invoices.length > 0}
|
|
show={
|
|
<PageContent
|
|
header={
|
|
<PageHeader
|
|
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: IInvoice) => (
|
|
<TableRow
|
|
key={item.invoiceURL}
|
|
style={{
|
|
backgroundColor:
|
|
item.status === 'past-due'
|
|
? 'error.dark'
|
|
: 'inherit',
|
|
}}
|
|
>
|
|
<TableCell
|
|
style={{ textAlign: 'left' }}
|
|
>
|
|
{item.amountFormatted}
|
|
</TableCell>
|
|
<TableCell
|
|
style={{ textAlign: 'left' }}
|
|
>
|
|
{item.status}
|
|
</TableCell>
|
|
<TableCell
|
|
style={{ textAlign: 'left' }}
|
|
>
|
|
{item.dueDate &&
|
|
formatDateYMD(
|
|
item.dueDate,
|
|
locationSettings.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>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</PageContent>
|
|
}
|
|
elseShow={<div>{isLoaded && 'No invoices to show.'}</div>}
|
|
/>
|
|
);
|
|
};
|
|
export default InvoiceList;
|