56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
import { subDays } from 'date-fns';
|
|
import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
|
|
import { TeamSelector } from '@/app/components/ui/TeamSelector';
|
|
|
|
export default function AnalyticsPage() {
|
|
// 默认日期范围为最近7天
|
|
const today = new Date();
|
|
const [dateRange, setDateRange] = useState({
|
|
from: subDays(today, 7), // 7天前
|
|
to: today // 今天
|
|
});
|
|
|
|
// 添加团队选择状态
|
|
const [selectedTeamId, setSelectedTeamId] = useState<string>();
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8">
|
|
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Analytics</h1>
|
|
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center">
|
|
<TeamSelector
|
|
value={selectedTeamId}
|
|
onChange={setSelectedTeamId}
|
|
className="w-[200px]"
|
|
variant="surface"
|
|
color="blue"
|
|
/>
|
|
<DateRangePicker
|
|
value={dateRange}
|
|
onChange={setDateRange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 如果没有选择团队，显示提示信息 */}
|
|
{!selectedTeamId && (
|
|
<div className="flex items-center justify-center p-8 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
|
<p className="text-gray-500 dark:text-gray-400">
|
|
Please select a team to view analytics
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 如果选择了团队，这里可以显示团队相关的分析数据 */}
|
|
{selectedTeamId && (
|
|
<div className="space-y-6">
|
|
{/* 这里添加实际的分析数据组件 */}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|