[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 -->

Author: jnsdls

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}