Add Usage page in teams layout (chakra) (#4459)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor the settings usage page in the dashboard app.

### Detailed summary
- Refactored usage page to use `SettingsUsagePage` component
- Removed redundant imports and code in `usage.tsx`
- Updated `Page` component to render `SettingsUsagePage`
- Updated `getLayout` and `pageId` in `Page` component

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { useAccount, useAccountUsage } from "@3rdweb-sdk/react/hooks/useApi";
+import { Flex, HStack } from "@chakra-ui/react";
+import { BillingPeriod } from "components/settings/Account/Billing/Period";
+import { BillingPlan } from "components/settings/Account/Billing/Plan";
+import { Usage } from "components/settings/Account/Usage";
+
+export const SettingsUsagePage = () => {
+  const meQuery = useAccount();
+  const usageQuery = useAccountUsage();
+  const account = meQuery.data;
+
+  if (meQuery.isLoading || !account) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <Spinner className="size-10" />
+      </div>
+    );
+  }
+
+  return (
+    <Flex flexDir="column" gap={8}>
+      <Flex direction="column">
+        <h1 className="font-semibold text-3xl tracking-tight mb-2">Usage</h1>
+        <HStack
+          justifyContent="space-between"
+          flexDir={{ base: "column", lg: "row" }}
+          alignItems={{ base: "flex-start", lg: "center" }}
+        >
+          <BillingPlan account={account} />
+          <BillingPeriod account={account} usage={usageQuery.data} />
+        </HStack>
+      </Flex>
+
+      <Usage usage={usageQuery.data} usageLoading={usageQuery.isLoading} />
+    </Flex>
+  );
+};

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/page.tsx

@@ -1,7 +1,12 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import { SettingsUsagePage } from "./UsagePage";
+
 export default function Page() {
   return (
-    <div className="h-full py-6 container flex items-center justify-center">
-      <h1 className="text-4xl tracking-tighter text-muted-foreground">Usage</h1>
-    </div>
+    <ChakraProviderSetup>
+      <div className="container pt-8 pb-10">
+        <SettingsUsagePage />
+      </div>
+    </ChakraProviderSetup>
   );
 }

apps/dashboard/src/pages/dashboard/settings/usage.tsx

@@ -1,53 +1,20 @@
-import { useAccount, useAccountUsage } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, HStack } from "@chakra-ui/react";
 import { AppLayout } from "components/app-layouts/app";
-import { BillingPeriod } from "components/settings/Account/Billing/Period";
-import { BillingPlan } from "components/settings/Account/Billing/Plan";
-import { Usage } from "components/settings/Account/Usage";
 import { SettingsSidebar } from "core-ui/sidebar/settings";
 import { PageId } from "page-id";
-import { Heading } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
+import { SettingsUsagePage } from "../../../app/team/[team_slug]/(team)/~/usage/UsagePage";
 
-const SettingsUsagePage: ThirdwebNextPage = () => {
-  const meQuery = useAccount();
-  const usageQuery = useAccountUsage();
-
-  if (meQuery.isLoading || !meQuery.data) {
-    return null;
-  }
-
-  const account = meQuery.data;
-
-  return (
-    <Flex flexDir="column" gap={8}>
-      <Flex direction="column">
-        <Heading size="title.lg" as="h1">
-          Usage
-        </Heading>
-        <HStack
-          justifyContent="space-between"
-          flexDir={{ base: "column", lg: "row" }}
-          alignItems={{ base: "flex-start", lg: "center" }}
-        >
-          <BillingPlan account={account} />
-          <BillingPeriod account={account} usage={usageQuery.data} />
-        </HStack>
-      </Flex>
-
-      <Usage usage={usageQuery.data} usageLoading={usageQuery.isLoading} />
-    </Flex>
-  );
+const Page: ThirdwebNextPage = () => {
+  return <SettingsUsagePage />;
 };
 
-SettingsUsagePage.getLayout = (page, props) => (
+Page.getLayout = (page, props) => (
   <AppLayout {...props} hasSidebar={true}>
     <SettingsSidebar activePage="usage" />
-
     {page}
   </AppLayout>
 );
 
-SettingsUsagePage.pageId = PageId.SettingsUsage;
+Page.pageId = PageId.SettingsUsage;
 
-export default SettingsUsagePage;
+export default Page;