diff --git a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoice.tsx b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoice.tsx index 4f7746ec44..eee249e339 100644 --- a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoice.tsx +++ b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoice.tsx @@ -1,4 +1,4 @@ -import type { FC, ReactNode } from 'react'; +import type { ComponentProps, FC, ReactNode } from 'react'; import { Typography, styled, @@ -17,7 +17,7 @@ import { BillingInvoiceFooter } from './BillingInvoiceFooter/BillingInvoiceFoote import { StyledAmountCell, StyledSubgrid } from './BillingInvoice.styles.tsx'; import type { DetailedInvoicesSchemaInvoicesItem } from 'openapi'; -const CardLikeAccordion = styled(Accordion)(({ theme }) => ({ +const StyledAccordion = styled(Accordion)(({ theme }) => ({ background: theme.palette.background.paper, borderRadius: theme.shape.borderRadiusLarge, boxShadow: theme.boxShadows.card, @@ -94,6 +94,9 @@ const CardActions = styled('div')(({ theme }) => ({ padding: theme.spacing(1.5, 2, 2), })); +type BillingInvoiceProps = DetailedInvoicesSchemaInvoicesItem & + Pick, 'defaultExpanded'>; + export const BillingInvoice = ({ status, invoiceDate, @@ -102,8 +105,9 @@ export const BillingInvoice = ({ totalAmount, mainLines, usageLines, -}: DetailedInvoicesSchemaInvoicesItem) => { - const currency = mainLines[0]?.currency || usageLines?.[0]?.currency; + defaultExpanded, +}: BillingInvoiceProps) => { + const currency = mainLines?.[0]?.currency || usageLines?.[0]?.currency; const formattedTitle = invoiceDate ? new Date(invoiceDate).toLocaleDateString(undefined, { @@ -112,8 +116,12 @@ export const BillingInvoice = ({ }) : ''; + const hasLimitsColumn = + mainLines?.some((line) => line.limit) || + usageLines?.some((line) => line.limit); + return ( - + } id={`billing-invoice-${formattedTitle}-header`} @@ -151,7 +159,11 @@ export const BillingInvoice = ({ Description - Included + {hasLimitsColumn ? ( + Included + ) : ( + + )} Quantity Amount @@ -160,7 +172,10 @@ export const BillingInvoice = ({ {mainLines.map((line) => ( - + ))} @@ -169,7 +184,10 @@ export const BillingInvoice = ({ Usage {usageLines.map((line) => ( - + ))} @@ -205,6 +223,6 @@ export const BillingInvoice = ({ ) : null} - + ); }; diff --git a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceRow/BillingInvoiceRow.tsx b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceRow/BillingInvoiceRow.tsx index b620ea7df5..692cea40d0 100644 --- a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceRow/BillingInvoiceRow.tsx +++ b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceRow/BillingInvoiceRow.tsx @@ -11,14 +11,6 @@ const StyledCellWithIndicator = styled('div')(({ theme }) => ({ gap: theme.spacing(1), })); -type BillingInvoiceRowProps = { - description: string; - quantity?: number; - amount?: number; - quota?: number; - usage?: number; -}; - const StyledDescriptionCell = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'column', @@ -30,6 +22,10 @@ const StyledSubText = styled(Typography)(({ theme }) => ({ fontSize: theme.typography.body2.fontSize, })); +type BillingInvoiceRowProps = DetailedInvoicesLineSchema & { + showLimits?: boolean; +}; + export const BillingInvoiceRow = ({ quantity, consumption, @@ -39,7 +35,8 @@ export const BillingInvoiceRow = ({ totalAmount, startDate, endDate, -}: DetailedInvoicesLineSchema) => { + showLimits, +}: BillingInvoiceRowProps) => { const percentage = limit && limit > 0 ? Math.min(100, Math.round(((consumption || 0) / limit) * 100)) @@ -68,11 +65,15 @@ export const BillingInvoiceRow = ({ ) : null} - - - {limit !== undefined ? formatLargeNumbers(limit) : '–'} - {percentage !== undefined ? ` (${percentage}%)` : ''} - + {showLimits ? ( + + + {limit !== undefined ? formatLargeNumbers(limit) : '–'} + {percentage !== undefined ? ` (${percentage}%)` : ''} + + ) : ( + + )}
{quantity ? formatLargeNumbers(quantity) : '–'}
{formatCurrency(totalAmount || 0, currency)} diff --git a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoices.tsx b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoices.tsx index 6ffb6bfa54..9741219b9a 100644 --- a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoices.tsx +++ b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoices.tsx @@ -14,16 +14,17 @@ export const BillingInvoices: FC = () => { const { invoices, loading } = useDetailedInvoices(); if (loading) { - return null; + return ; } return ( {invoices.length > 0 ? ( <> - {invoices.map((invoice) => ( + {invoices.map((invoice, index) => ( ))}