File size: 2,250 Bytes
88c4c60 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | "use client";
import { Suspense, useState } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { UsageStats, RequestLogger, CardSkeleton, SegmentedControl } from "@/shared/components";
import RequestDetailsTab from "./components/RequestDetailsTab";
const PERIODS = [
{ value: "today", label: "Today" },
{ value: "24h", label: "24h" },
{ value: "7d", label: "7D" },
{ value: "30d", label: "30D" },
{ value: "60d", label: "60D" },
];
export default function UsagePage() {
return (
<Suspense fallback={<CardSkeleton />}>
<UsageContent />
</Suspense>
);
}
function UsageContent() {
const searchParams = useSearchParams();
const router = useRouter();
const [period, setPeriod] = useState("today");
const tabFromUrl = searchParams.get("tab");
const activeTab = tabFromUrl && ["overview", "logs", "details"].includes(tabFromUrl)
? tabFromUrl
: "overview";
const handleTabChange = (value) => {
if (value === activeTab) return;
const params = new URLSearchParams(searchParams);
params.set("tab", value);
router.push(`/dashboard/usage?${params.toString()}`, { scroll: false });
};
return (
<div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
{/* Tabs + period selector on same row */}
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<SegmentedControl
options={[
{ value: "overview", label: "Overview" },
{ value: "details", label: "Details" },
]}
value={activeTab}
onChange={handleTabChange}
className="w-full sm:w-auto"
/>
{activeTab === "overview" && (
<SegmentedControl
options={PERIODS}
value={period}
onChange={setPeriod}
size="sm"
className="w-full sm:w-auto"
/>
)}
</div>
{activeTab === "overview" && (
<Suspense fallback={<CardSkeleton />}>
<UsageStats period={period} setPeriod={setPeriod} hidePeriodSelector />
</Suspense>
)}
{activeTab === "logs" && <RequestLogger />}
{activeTab === "details" && <RequestDetailsTab />}
</div>
);
}
|