diff --git a/packages/manager/.changeset/pr-10941-added-1726492437722.md b/packages/manager/.changeset/pr-10941-added-1726492437722.md new file mode 100644 index 00000000000..0260524daa2 --- /dev/null +++ b/packages/manager/.changeset/pr-10941-added-1726492437722.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +Allow sorting by amount on billing activity table ([#10941](https://github.com/linode/manager/pull/10941)) diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx index de4a54993dc..2ded859505b 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx @@ -11,15 +11,17 @@ import { Currency } from 'src/components/Currency'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { Link } from 'src/components/Link'; -import OrderBy from 'src/components/OrderBy'; -import Paginate from 'src/components/Paginate'; +import { createDisplayPage } from 'src/components/Paginate'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; -import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper'; import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; +import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty'; +import { TableRowError } from 'src/components/TableRowError/TableRowError'; +import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading'; +import { TableSortCell } from 'src/components/TableSortCell'; import { TextTooltip } from 'src/components/TextTooltip'; import { Typography } from 'src/components/Typography'; import { ISO_DATETIME_NO_TZ_FORMAT } from 'src/constants'; @@ -29,6 +31,8 @@ import { printPayment, } from 'src/features/Billing/PdfGenerator/PdfGenerator'; import { useFlags } from 'src/hooks/useFlags'; +import { useOrder } from 'src/hooks/useOrder'; +import { usePagination } from 'src/hooks/usePagination'; import { useSet } from 'src/hooks/useSet'; import { useAccount } from 'src/queries/account/account'; import { @@ -168,6 +172,9 @@ const AkamaiBillingInvoiceText = ( // ============================================================================= // // ============================================================================= + +const NUM_COLS = 4; + export interface Props { accountActiveSince?: string; } @@ -177,6 +184,10 @@ export const BillingActivityPanel = React.memo((props: Props) => { const { data: profile } = useProfile(); const { data: account } = useAccount(); const { data: regions } = useRegionsQuery(); + + const pagination = usePagination(1, 'billing-activity'); + const { handleOrderChange, order, orderBy } = useOrder(); + const isAkamaiCustomer = account?.billing_source === 'akamai'; const { classes } = useStyles(); const flags = useFlags(); @@ -302,6 +313,65 @@ export const BillingActivityPanel = React.memo((props: Props) => { ); }, [selectedTransactionType, combinedData]); + const data = + selectedTransactionType.value === 'all' ? combinedData : filteredData; + + const orderedPaginatedData = React.useMemo(() => { + const orderedData = data.sort((a, b) => { + if (orderBy === 'total') { + return order === 'asc' ? a.total - b.total : b.total - a.total; + } + // Default: If no valid 'orderBy' is provided, sort the data by date in descending order. + return new Date(b.date).getTime() - new Date(a.date).getTime(); + }); + + const displayPage = createDisplayPage( + pagination.page, + pagination.pageSize + ); + + return displayPage(orderedData); + }, [data, orderBy, order, pagination.page, pagination.pageSize]); + + const renderTableContent = () => { + if (accountPaymentsLoading || accountInvoicesLoading) { + return ; + } + if (accountPaymentsError || accountInvoicesError) { + return ( + + ); + } + if (orderedPaginatedData.length === 0) { + return ( + + ); + } + if (orderedPaginatedData.length > 0) { + return orderedPaginatedData.map((thisItem) => ( + + )); + } + + return null; + }; + return ( @@ -368,96 +438,36 @@ export const BillingActivityPanel = React.memo((props: Props) => { /> - - {({ data: orderedData }) => ( - - {({ - count, - data: paginatedAndOrderedData, - handlePageChange, - handlePageSizeChange, - page, - pageSize, - }) => ( - <> - - - - - Description - - - Date - - - Amount - - - - - - - {paginatedAndOrderedData.map((thisItem) => { - return ( - - ); - })} - - -
- - - )} -
- )} -
+ + + + + Description + + Date + + Amount + + + + + + {renderTableContent()} +
+
);