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()}
+
+
);