feat: re-arranged org project pages

frontend/src/pages/organization/BillingPage/BillingPage.tsx

@@ -5,6 +5,7 @@ import { OrgPermissionCan } from "@app/components/permissions";
 import { OrgPermissionBillingActions, OrgPermissionSubjects } from "@app/context";
 
 import { BillingTabGroup } from "./components";
+import { PageHeader } from "@app/components/v2";
 
 export const BillingPage = () => {
   const { t } = useTranslation();
@@ -18,10 +19,11 @@ export const BillingPage = () => {
       </Helmet>
       <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
         <div className="w-full max-w-7xl px-6">
-          <div className="my-6">
-            <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
-            <div />
-          </div>
+          <PageHeader
+            title={t("billing.title")}
+            description="View your billing plan, next billing cycle."
+          />
+
           <OrgPermissionCan
             passThrough={false}
             I={OrgPermissionBillingActions.Read}

frontend/src/pages/organization/BillingPage/route.tsx

@@ -5,5 +5,14 @@ import { BillingPage } from "./BillingPage";
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/_org-layout/organization/billing"
 )({
-  component: BillingPage
+  component: BillingPage,
+  beforeLoad: () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Billing"
+        }
+      ]
+    };
+  }
 });