vitalitymailg/shorturl-analytics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

project selector

Browse Source
This commit is contained in:
William Tso
2025-04-01 20:03:15 +08:00
parent 0a881fd180
commit 326a6c6d63
2 changed files with 335 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/(app)/analytics/page.tsx
View File

@@ -4,6 +4,7 @@ import { useState } from 'react';
import { subDays } from 'date-fns';
import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
import { TeamSelector } from '@/app/components/ui/TeamSelector';
import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
export default function AnalyticsPage() {
// 默认日期范围为最近7天
@@ -15,6 +16,9 @@ export default function AnalyticsPage() {
// 添加团队选择状态 - 使用数组支持多选
const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
// 添加项目选择状态 - 使用数组支持多选
const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
return (
<div className="container mx-auto px-4 py-8">
@@ -28,6 +32,13 @@ export default function AnalyticsPage() {
className="w-[250px]"
multiple={true}
/>
<ProjectSelector
value={selectedProjectIds}
onChange={(value) => setSelectedProjectIds(Array.isArray(value) ? value : [value])}
className="w-[250px]"
multiple={true}
teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
/>
<DateRangePicker
value={dateRange}
onChange={setDateRange}
@@ -35,31 +46,45 @@ export default function AnalyticsPage() {
</div>
</div>
{/* 如果没有选择团队，显示提示信息 */}
{selectedTeamIds.length === 0 && (
{/* 如果没有选择团队或项目，显示提示信息 */}
{selectedTeamIds.length === 0 && selectedProjectIds.length === 0 && (
<div className="flex items-center justify-center p-8 bg-gray-50 rounded-lg">
<p className="text-gray-500">
Please select one or more teams to view analytics
Please select teams or projects to view analytics
</p>
</div>
)}
{/* 如果选择了团队，这里可以显示团队相关的分析数据 */}
{/* 显示团队相关的分析数据 */}
{selectedTeamIds.length > 0 && (
<div className="space-y-6">
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4">
Analytics for {selectedTeamIds.length} selected {selectedTeamIds.length === 1 ? 'team' : 'teams'}
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* You can map through selectedTeamIds and display data for each team */}
{selectedTeamIds.map((teamId) => (
<div key={teamId} className="p-4 border rounded-md">
<h3 className="font-medium text-gray-800">Team ID: {teamId}</h3>
<p className="text-gray-500 mt-2">Team analytics will appear here</p>
</div>
))}
</div>
<div className="bg-white rounded-lg shadow p-6 mb-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4">
Team Analytics ({selectedTeamIds.length} selected)
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{selectedTeamIds.map((teamId) => (
<div key={teamId} className="p-4 border rounded-md">
<h3 className="font-medium text-gray-800">Team ID: {teamId}</h3>
<p className="text-gray-500 mt-2">Team analytics will appear here</p>
</div>
))}
</div>
</div>
)}
{/* 显示项目相关的分析数据 */}
{selectedProjectIds.length > 0 && (
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4">
Project Analytics ({selectedProjectIds.length} selected)
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{selectedProjectIds.map((projectId) => (
<div key={projectId} className="p-4 border rounded-md">
<h3 className="font-medium text-gray-800">Project ID: {projectId}</h3>
<p className="text-gray-500 mt-2">Project analytics will appear here</p>
</div>
))}
</div>
</div>
)}