refactor(dashboard): simplify sidebar and settings hierarchy

Collapse Billing and Organizations into a single Settings category with
three scoped sections (Workspace, Billing, Account). Sidebar top-level
goes from 6 to 4 categories.

Page merges:
- Fold /billing/cost-breakdown into /billing overview; consumption chart
  and usage breakdown table now render below the usage stats. Components
  and utils moved out of the cost-breakdown subdir.
- Merge /organizations/invitations into /organizations/members as a
  tabbed page (?tab=invitations). Invitation files moved into members/.
- Fold /organizations/settings/websites into /organizations/settings via
  a new WorkspaceWebsitesSection embedded in General settings.
- Delete /billing/cost-breakdown, /organizations/invitations, and
  /organizations/settings/websites folders entirely.

Dropdown additions:
- Org selector dropdown now has Workspace settings + Billing quick
  actions with a plan badge.
- Profile dropdown now has a Billing entry.

Fixes:
- Tabs component: internal activeValue state now syncs with the
  controlled value prop via useEffect. Without this, URL-driven tab
  changes left the indicator underline on the wrong tab (the "inverted"
  active state users saw on Members/Invitations).
- Invitations pill tabs are now in a clean sticky toolbar instead of an
  ugly double-bordered wrapper.
- Fix broken Invitation type import to pull from organizationAtoms.

Skeletons:
- Rewrite all settings page skeletons to match their real layouts:
  MembersSkeleton, InvitationsSkeleton, MembersPageSkeleton,
  ApiKeysSkeleton, GeneralSettingsSkeleton, DangerZoneSkeleton,
  OrganizationsListSkeleton.
- All share a SettingsShell wrapper and use RightSidebar.Skeleton for
  the sidebar column.
- Delete orphan list-skeleton.tsx.

Author: izadoesdev

apps/dashboard/app/(main)/billing/components/billing-header.tsx

@@ -6,22 +6,22 @@ import { PageHeader } from "../../websites/_components/page-header";
 
 const PAGE_TITLES: Record<string, { title: string; description: string }> = {
 	"/billing": {
-		title: "Usage & Metrics",
-		description: "Monitor your usage and billing metrics",
+		title: "Billing Overview",
+		description: "Current plan, usage, and payment method for this workspace",
 	},
 	"/billing/plans": {
-		title: "Plans & Pricing",
-		description: "Manage your subscription and billing plan",
+		title: "Plans",
+		description: "Compare plans and change your subscription",
 	},
 	"/billing/history": {
-		title: "Payment History",
-		description: "View your billing history and invoices",
+		title: "Invoices",
+		description: "Past invoices and payment history",
 	},
 };
 
 const DEFAULT_TITLE = {
-	title: "Billing & Subscription",
-	description: "Manage your subscription, usage, and billing preferences",
+	title: "Billing",
+	description: "Manage this workspace's subscription, usage, and invoices",
 };
 
 export function BillingHeader() {

…eakdown/components/consumption-chart.tsx …billing/components/consumption-chart.tsxapps/dashboard/app/(main)/billing/cost-breakdown/components/consumption-chart.tsx renamed to apps/dashboard/app/(main)/billing/components/consumption-chart.tsx apps/dashboard/app/(main)/billing/cost-breakdown/components/consumption-chart.tsx renamed to apps/dashboard/app/(main)/billing/components/consumption-chart.tsx

@@ -288,7 +288,7 @@ function BilledOverageRow({
 					)}
 					<Link
 						className="font-medium text-primary text-xs hover:underline"
-						href="/billing/cost-breakdown"
+						href="#breakdown"
 					>
 						View breakdown
 					</Link>

…own/components/usage-breakdown-table.tsx …ing/components/usage-breakdown-table.tsxapps/dashboard/app/(main)/billing/cost-breakdown/components/usage-breakdown-table.tsx renamed to apps/dashboard/app/(main)/billing/components/usage-breakdown-table.tsx apps/dashboard/app/(main)/billing/cost-breakdown/components/usage-breakdown-table.tsx renamed to apps/dashboard/app/(main)/billing/components/usage-breakdown-table.tsx

@@ -1,26 +1,69 @@
 "use client";
 
-import { ArrowSquareOutIcon } from "@phosphor-icons/react";
-import { CalendarIcon } from "@phosphor-icons/react";
-import { CrownIcon } from "@phosphor-icons/react";
-import { PlusIcon } from "@phosphor-icons/react";
-import { PuzzlePieceIcon } from "@phosphor-icons/react";
-import { TrendUpIcon } from "@phosphor-icons/react";
-import { XIcon } from "@phosphor-icons/react";
-import { useCustomer } from "autumn-js/react";
-import Link from "next/link";
-import { useMemo } from "react";
 import { EmptyState } from "@/components/empty-state";
 import { useBillingContext } from "@/components/providers/billing-provider";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import dayjs from "@/lib/dayjs";
+import { orpc } from "@/lib/orpc";
+import type { UsageResponse } from "@databuddy/shared/types/billing";
+import {
+	ArrowSquareOutIcon,
+	CalendarIcon,
+	CrownIcon,
+	PlusIcon,
+	PuzzlePieceIcon,
+	TrendUpIcon,
+	XIcon,
+} from "@phosphor-icons/react";
+import { useQuery } from "@tanstack/react-query";
+import { useCustomer } from "autumn-js/react";
+import Link from "next/link";
+import { Suspense, useMemo, useState } from "react";
 import { CancelSubscriptionDialog } from "./components/cancel-subscription-dialog";
+import { ConsumptionChart } from "./components/consumption-chart";
 import { CreditCardDisplay } from "./components/credit-card-display";
 import { ErrorState } from "./components/empty-states";
 import { OverviewSkeleton } from "./components/overview-skeleton";
+import { UsageBreakdownTable } from "./components/usage-breakdown-table";
 import { UsageRow } from "./components/usage-row";
 import { useBilling, useBillingData } from "./hooks/use-billing";
+import type { OverageInfo } from "./utils/billing-utils";
+
+interface OrgUsageData {
+	balance?: number | null;
+	includedUsage?: number | null;
+	unlimited: boolean;
+}
+
+function getDefaultDateRange() {
+	const end = new Date();
+	const start = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
+	return {
+		startDate: start.toISOString().split("T")[0],
+		endDate: end.toISOString().split("T")[0],
+	};
+}
+
+function calculateOverageInfo(
+	balance: number,
+	includedUsage: number,
+	unlimited: boolean
+): OverageInfo {
+	if (unlimited || balance >= 0) {
+		return {
+			hasOverage: false,
+			overageEvents: 0,
+			includedEvents: includedUsage,
+		};
+	}
+	return {
+		hasOverage: true,
+		overageEvents: Math.abs(balance),
+		includedEvents: includedUsage,
+	};
+}
 
 function isSSOPlan(plan: { id: string; name: string }): boolean {
 	const id = plan.id.toLowerCase();
@@ -59,6 +102,33 @@ export default function BillingPage() {
 	const { plans, usage, customer, isLoading, error, refetch } =
 		useBillingData();
 	const { attach } = useCustomer();
+	const [dateRange, setDateRange] = useState(getDefaultDateRange);
+
+	const { data: breakdownUsageRaw, isLoading: isBreakdownLoading } = useQuery({
+		...orpc.billing.getUsage.queryOptions({
+			input: {
+				startDate: dateRange.startDate,
+				endDate: dateRange.endDate,
+			},
+		}),
+	});
+	const breakdownUsageData = breakdownUsageRaw as UsageResponse | undefined;
+
+	const { data: orgUsageRaw } = useQuery({
+		...orpc.organizations.getUsage.queryOptions(),
+	});
+	const orgUsage = orgUsageRaw as OrgUsageData | undefined;
+
+	const overageInfo = useMemo(() => {
+		if (!orgUsage) {
+			return null;
+		}
+		return calculateOverageInfo(
+			orgUsage.balance ?? 0,
+			orgUsage.includedUsage ?? 0,
+			orgUsage.unlimited
+		);
+	}, [orgUsage]);
 	const {
 		onCancelClick,
 		onCancelConfirm,
@@ -140,7 +210,7 @@ export default function BillingPage() {
 					planName={cancelTarget?.name ?? ""}
 				/>
 
-				{/* Main Content - Usage Stats */}
+				{/* Main Content - Usage Stats + Breakdown */}
 				<div className="shrink-0 lg:h-full lg:min-h-0 lg:overflow-y-auto">
 					{usageStats.length === 0 ? (
 						<EmptyState
@@ -151,15 +221,34 @@ export default function BillingPage() {
 							variant="minimal"
 						/>
 					) : (
-						<div className="divide-y">
-							{usageStats.map((feature) => (
-								<UsageRow
-									feature={feature}
-									isMaxPlan={isMaxPlan}
-									key={feature.id}
+						<>
+							<div className="divide-y">
+								{usageStats.map((feature) => (
+									<UsageRow
+										feature={feature}
+										isMaxPlan={isMaxPlan}
+										key={feature.id}
+									/>
+								))}
+							</div>
+							<Suspense fallback={<Skeleton className="h-64 w-full" />}>
+								<ConsumptionChart
+									isLoading={isBreakdownLoading}
+									onDateRangeChange={(start, end) =>
+										setDateRange({ startDate: start, endDate: end })
+									}
+									overageInfo={overageInfo}
+									usageData={breakdownUsageData}
 								/>
-							))}
-						</div>
+							</Suspense>
+							<Suspense fallback={<Skeleton className="h-64 w-full" />}>
+								<UsageBreakdownTable
+									isLoading={isBreakdownLoading}
+									overageInfo={overageInfo}
+									usageData={breakdownUsageData}
+								/>
+							</Suspense>
+						</>
 					)}
 				</div>
 

apps/dashboard/app/(main)/billing/components/usage-row.tsx

@@ -12,6 +12,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { type Organization, useOrganizations } from "@/hooks/use-organizations";
 import { OrganizationAvatarEditor } from "./organization-avatar-editor";
+import { WorkspaceWebsitesSection } from "./workspace-websites-section";
 
 export function GeneralSettings({
 	organization,
@@ -161,6 +162,8 @@ export function GeneralSettings({
 							</div>
 						</div>
 					</section>
+
+					<WorkspaceWebsitesSection organization={organization} />
 				</div>
 
 				{/* Save Footer */}