d1a8dd4987
Bổ sung lựa chọn Today vào bộ lọc thời gian của trang Usage & Analytics
(trước đây chỉ có 24h, 7D, 30D, 60D).
Khác biệt với 24h:
- 24h: cuộn 24 giờ trước → hiện tại
- Today: cố định từ 00:00 hôm nay (giờ local) → hiện tại
Thay đổi:
- page.js, UsageStats.js: thêm option Today vào danh sách PERIODS,
đổi grid mobile từ 4 cột sang 5 cột để fit option mới.
- api/usage/stats, api/usage/chart: cho phép giá trị period today.
- usageRepo.js:
+ getUsageStats: dùng nhánh live history khi period = today,
cutoff lấy từ 00:00 hôm nay theo local time.
+ getChartData: thêm 24 bucket theo giờ từ 00:00 → 23:59 hôm nay.
84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
"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 [tabLoading, setTabLoading] = useState(false);
|
|
const [period, setPeriod] = useState("7d");
|
|
|
|
const tabFromUrl = searchParams.get("tab");
|
|
const activeTab = tabFromUrl && ["overview", "logs", "details"].includes(tabFromUrl)
|
|
? tabFromUrl
|
|
: "overview";
|
|
|
|
const handleTabChange = (value) => {
|
|
if (value === activeTab) return;
|
|
setTabLoading(true);
|
|
const params = new URLSearchParams(searchParams);
|
|
params.set("tab", value);
|
|
router.push(`/dashboard/usage?${params.toString()}`, { scroll: false });
|
|
setTimeout(() => setTabLoading(false), 300);
|
|
};
|
|
|
|
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>
|
|
|
|
{tabLoading ? (
|
|
<CardSkeleton />
|
|
) : (
|
|
<>
|
|
{activeTab === "overview" && (
|
|
<Suspense fallback={<CardSkeleton />}>
|
|
<UsageStats period={period} setPeriod={setPeriod} hidePeriodSelector />
|
|
</Suspense>
|
|
)}
|
|
{activeTab === "logs" && <RequestLogger />}
|
|
{activeTab === "details" && <RequestDetailsTab />}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|