From 56d27d4c630531d17bd38236cb17297e7fb2b120 Mon Sep 17 00:00:00 2001
From: jnsdls <jonas.daniels@outlook.com>
Date: Mon, 9 Jun 2025 20:52:46 +0000
Subject: [PATCH] [Dashboard] Sort usage categories by total amount in
 descending order (#7314)

# Sort usage categories by total amount

This PR sorts the usage categories displayed on the team usage page by their total amount in descending order. Categories with higher total costs will now appear at the top of the list, making it easier for users to identify their most significant expenses at a glance.

The implementation:
- Creates a `sortedCategories` array by sorting the usage preview data
- Sorts based on the sum of `amountUsdCents` for each category's line items
- Uses the sorted array in the render function instead of the original data

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Enhancements**
  - Usage categories are now displayed in descending order based on their subtotal amounts, making it easier to identify the highest usage categories at a glance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../team/[team_slug]/(team)/~/usage/page.tsx      | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx
index bdd5822c8fb..7e9e00fbdc6 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx
@@ -61,6 +61,19 @@ export default async function Page(props: {
     return total + categoryTotal;
   }, 0);
 
+  // sort the categories by their sub-total
+  const sortedCategories = usagePreview.data.result.sort((a, b) => {
+    const aTotal = a.lineItems.reduce(
+      (sum, item) => sum + item.amountUsdCents,
+      0,
+    );
+    const bTotal = b.lineItems.reduce(
+      (sum, item) => sum + item.amountUsdCents,
+      0,
+    );
+    return bTotal - aTotal;
+  });
+
   return (
     <div className="flex flex-col gap-8">
       {usagePreview.data.planVersion < 5 && (
@@ -112,7 +125,7 @@ export default async function Page(props: {
       </Card>
 
       <div className="space-y-6">
-        {usagePreview.data.result.map((category, index) => (
+        {sortedCategories.map((category, index) => (
           <UsageCategoryDetails
             key={`${category.category}_${index}`}
             category={category}