freedakgmail
484 lines
21 KiB
TypeScript
484 lines
21 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { SiteHeader } from "@/components/site-header"
|
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { UserPlus, Network, Map, Calendar, Users, ArrowRight, Clock, Search, BookOpen, BarChart3 } from "lucide-react"
|
|
import { useFamily } from "@/context/family-context"
|
|
import { useMemo, useState, useEffect, useRef } from "react"
|
|
import { StatisticsCharts } from "@/components/dashboard/statistics-charts"
|
|
import { format } from "date-fns"
|
|
import { useSession } from "next-auth/react"
|
|
import { useSearchParams } from "next/navigation"
|
|
|
|
interface ActivityLog {
|
|
id: string
|
|
action: string
|
|
entityType: string
|
|
entityId?: string | null
|
|
entityName?: string | null
|
|
timestamp: string
|
|
user?: {
|
|
name?: string | null
|
|
email?: string | null
|
|
}
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const { treeData, isLoading, currentTree } = useFamily()
|
|
const { data: session } = useSession()
|
|
const [recentActivities, setRecentActivities] = useState<ActivityLog[]>([])
|
|
|
|
// 加载最近的操作日志
|
|
useEffect(() => {
|
|
if (currentTree?.id && session?.user?.id) {
|
|
fetch(`/api/trees/${currentTree.id}/activity-logs?limit=10`)
|
|
.then(res => {
|
|
if (!res.ok) {
|
|
throw new Error('获取活动日志失败')
|
|
}
|
|
return res.json()
|
|
})
|
|
.then(data => {
|
|
if (data.logs) {
|
|
setRecentActivities(data.logs)
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('获取活动日志失败:', err)
|
|
setRecentActivities([])
|
|
})
|
|
} else {
|
|
setRecentActivities([])
|
|
}
|
|
}, [currentTree?.id, session?.user?.id])
|
|
|
|
// 计算统计数据
|
|
const stats = useMemo(() => {
|
|
const members = Object.values(treeData.members)
|
|
const totalMembers = members.length
|
|
|
|
// 计算最大代数（处理空数组的情况）
|
|
const generations = members.map(m => m.generation || 0)
|
|
const maxGeneration = generations.length > 0 ? Math.max(...generations) : 0
|
|
|
|
// 计算最早出生年份
|
|
const birthYears = members
|
|
.map(m => m.birthDate ? new Date(m.birthDate).getFullYear() : null)
|
|
.filter(y => y !== null) as number[]
|
|
const earliestYear = birthYears.length > 0 ? Math.min(...birthYears) : new Date().getFullYear()
|
|
const yearsSpan = birthYears.length > 0 ? new Date().getFullYear() - earliestYear : 0
|
|
|
|
return {
|
|
totalMembers,
|
|
maxGeneration,
|
|
yearsSpan,
|
|
earliestYear
|
|
}
|
|
}, [treeData])
|
|
|
|
// 获取最近的成员（按ID排序，取最新的5个）
|
|
const recentMembers = useMemo(() => {
|
|
return Object.values(treeData.members)
|
|
.sort((a, b) => parseInt(b.id) - parseInt(a.id))
|
|
.slice(0, 5)
|
|
}, [treeData])
|
|
|
|
// 获取本月纪念日（生日和忌日）
|
|
const monthlyAnniversaries = useMemo(() => {
|
|
const currentMonth = new Date().getMonth() + 1
|
|
const members = Object.values(treeData.members)
|
|
|
|
const anniversaries: Array<{
|
|
member: any
|
|
type: 'birth' | 'death'
|
|
date: string
|
|
day: number
|
|
}> = []
|
|
|
|
members.forEach(member => {
|
|
// 检查生日
|
|
if (member.birthDate) {
|
|
const birthMonth = new Date(member.birthDate).getMonth() + 1
|
|
const birthDay = new Date(member.birthDate).getDate()
|
|
if (birthMonth === currentMonth) {
|
|
anniversaries.push({
|
|
member,
|
|
type: 'birth',
|
|
date: member.birthDate,
|
|
day: birthDay
|
|
})
|
|
}
|
|
}
|
|
|
|
// 检查忌日
|
|
if (member.deathDate) {
|
|
const deathMonth = new Date(member.deathDate).getMonth() + 1
|
|
const deathDay = new Date(member.deathDate).getDate()
|
|
if (deathMonth === currentMonth) {
|
|
anniversaries.push({
|
|
member,
|
|
type: 'death',
|
|
date: member.deathDate,
|
|
day: deathDay
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
// 按日期排序
|
|
return anniversaries.sort((a, b) => a.day - b.day).slice(0, 5)
|
|
}, [treeData])
|
|
return (
|
|
<div className="flex min-h-screen flex-col bg-background font-sans">
|
|
<SiteHeader />
|
|
|
|
<main className="flex-1 container mx-auto py-8 px-4 md:px-6">
|
|
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-serif font-bold text-foreground">
|
|
{currentTree?.name || '家族族谱'}
|
|
</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
{currentTree?.description || '记录家族历史，传承家族文化'}
|
|
{stats.maxGeneration > 0 && ` · 第 ${stats.maxGeneration} 代传人`}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Link href="/tree">
|
|
<Button variant="outline" className="gap-2 bg-transparent">
|
|
<Network className="h-4 w-4" />
|
|
查看世系图
|
|
</Button>
|
|
</Link>
|
|
<Link href="/members/new">
|
|
<Button className="gap-2 bg-primary text-primary-foreground hover:bg-primary/90">
|
|
<UserPlus className="h-4 w-4" />
|
|
添加成员
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<StatCard
|
|
title="家族成员"
|
|
value={stats.totalMembers.toString()}
|
|
subtitle={`记录在册的家族成员`}
|
|
icon={<Users className="h-4 w-4" />}
|
|
/>
|
|
<StatCard
|
|
title="记录年代"
|
|
value={`${stats.yearsSpan} 年`}
|
|
subtitle={`始于 ${stats.earliestYear} 年`}
|
|
icon={<Clock className="h-4 w-4" />}
|
|
/>
|
|
<StatCard
|
|
title="繁衍代数"
|
|
value={`${stats.maxGeneration} 代`}
|
|
subtitle={`当前最高世代`}
|
|
icon={<Network className="h-4 w-4" />}
|
|
/>
|
|
</div>
|
|
|
|
<Tabs defaultValue="recent" className="w-full">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<TabsList className="bg-muted/50">
|
|
<TabsTrigger value="recent">最近更新</TabsTrigger>
|
|
<TabsTrigger value="anniversaries">近期纪念日</TabsTrigger>
|
|
<TabsTrigger value="statistics">统计图表</TabsTrigger>
|
|
<TabsTrigger value="migration">迁徙记录</TabsTrigger>
|
|
</TabsList>
|
|
<Link href="/members">
|
|
<Button variant="ghost" size="sm" className="text-muted-foreground gap-1">
|
|
查看全部 <ArrowRight className="h-3 w-3" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<TabsContent value="recent" className="mt-0">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<Card className="lg:col-span-2 border-none shadow-sm bg-card/50 backdrop-blur">
|
|
<CardHeader>
|
|
<CardTitle className="font-serif">近期修谱动态</CardTitle>
|
|
<CardDescription>记录家族成员的最新变动与修订</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScrollArea className="h-[400px] pr-4">
|
|
<div className="space-y-4">
|
|
{recentActivities.length > 0 ? (
|
|
recentActivities.map((activity, i) => (
|
|
<div key={activity.id} className="flex gap-3 group hover:bg-muted/30 p-2 rounded-lg transition-colors">
|
|
<div className="relative flex flex-col items-center">
|
|
<div className="h-full w-px bg-border group-last:hidden"></div>
|
|
<div className={`absolute top-2 h-2 w-2 rounded-full ring-4 ring-background ${
|
|
activity.action === 'create' ? 'bg-green-500' :
|
|
activity.action === 'update' ? 'bg-blue-500' :
|
|
activity.action === 'delete' ? 'bg-red-500' :
|
|
'bg-purple-500'
|
|
}`}></div>
|
|
</div>
|
|
<div className="pb-2 flex-1">
|
|
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
|
<span className={`text-xs px-2 py-0.5 rounded-full ${
|
|
activity.action === 'create' ? 'bg-green-100 text-green-700' :
|
|
activity.action === 'update' ? 'bg-blue-100 text-blue-700' :
|
|
activity.action === 'delete' ? 'bg-red-100 text-red-700' :
|
|
'bg-purple-100 text-purple-700'
|
|
}`}>
|
|
{activity.action === 'create' ? '创建' :
|
|
activity.action === 'update' ? '更新' :
|
|
activity.action === 'delete' ? '删除' : '导入'}
|
|
</span>
|
|
<span className="font-medium">{activity.entityName || '未知'}</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{format(new Date(activity.timestamp), 'MM-dd HH:mm')}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{activity.action === 'create' && '新增了家族成员'}
|
|
{activity.action === 'update' && '更新了成员信息'}
|
|
{activity.action === 'delete' && '删除了成员'}
|
|
{activity.action === 'import' && '导入了家族数据'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="text-center text-muted-foreground py-8">
|
|
暂无修谱记录
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="space-y-6">
|
|
<Card className="border-none shadow-sm bg-primary/5">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-primary font-serif">
|
|
<Calendar className="h-5 w-5" />
|
|
本月祭祖/纪念
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4">
|
|
{monthlyAnniversaries.length > 0 ? (
|
|
monthlyAnniversaries.map((anniversary, index) => {
|
|
const yearsAgo = new Date().getFullYear() - new Date(anniversary.date).getFullYear()
|
|
return (
|
|
<Link href={`/members/${anniversary.member.id}`} key={`${anniversary.member.id}-${anniversary.type}`}>
|
|
<div className="flex items-center gap-4 p-3 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
|
|
<div className="flex flex-col items-center justify-center w-12 h-12 rounded bg-primary/10 text-primary font-serif">
|
|
<span className="text-xs">
|
|
{new Date(anniversary.date).getMonth() + 1}月
|
|
</span>
|
|
<span className="font-bold text-lg">{anniversary.day}</span>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-medium">
|
|
{anniversary.member.fullName} {anniversary.type === 'birth' ? '诞辰' : '忌日'}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
第 {anniversary.member.generation} 世 · 距今 {yearsAgo} 年
|
|
{anniversary.type === 'death' && ' · 已故'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
})
|
|
) : (
|
|
<div className="text-center text-muted-foreground py-8 text-sm">
|
|
本月暂无纪念日
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* 近期纪念日标签页 */}
|
|
<TabsContent value="anniversaries" className="mt-0">
|
|
<Card className="border-none shadow-sm bg-card/50 backdrop-blur">
|
|
<CardHeader>
|
|
<CardTitle className="font-serif">近期纪念日</CardTitle>
|
|
<CardDescription>未来三个月内的生日和忌日</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{(() => {
|
|
const now = new Date()
|
|
const threeMonthsLater = new Date(now.getFullYear(), now.getMonth() + 3, now.getDate())
|
|
const members = Object.values(treeData.members)
|
|
const upcomingEvents: Array<{
|
|
member: any
|
|
type: 'birth' | 'death'
|
|
date: Date
|
|
originalDate: string
|
|
}> = []
|
|
|
|
members.forEach(member => {
|
|
// 生日
|
|
if (member.birthDate) {
|
|
const birthDate = new Date(member.birthDate)
|
|
const thisYearBirth = new Date(now.getFullYear(), birthDate.getMonth(), birthDate.getDate())
|
|
if (thisYearBirth >= now && thisYearBirth <= threeMonthsLater) {
|
|
upcomingEvents.push({
|
|
member,
|
|
type: 'birth',
|
|
date: thisYearBirth,
|
|
originalDate: member.birthDate
|
|
})
|
|
}
|
|
}
|
|
|
|
// 忌日
|
|
if (member.deathDate) {
|
|
const deathDate = new Date(member.deathDate)
|
|
const thisYearDeath = new Date(now.getFullYear(), deathDate.getMonth(), deathDate.getDate())
|
|
if (thisYearDeath >= now && thisYearDeath <= threeMonthsLater) {
|
|
upcomingEvents.push({
|
|
member,
|
|
type: 'death',
|
|
date: thisYearDeath,
|
|
originalDate: member.deathDate
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
upcomingEvents.sort((a, b) => a.date.getTime() - b.date.getTime())
|
|
|
|
return upcomingEvents.length > 0 ? (
|
|
upcomingEvents.map((event, index) => {
|
|
const yearsAgo = now.getFullYear() - new Date(event.originalDate).getFullYear()
|
|
return (
|
|
<Link href={`/members/${event.member.id}`} key={`${event.member.id}-${event.type}-${index}`}>
|
|
<Card className="hover:border-primary transition-colors cursor-pointer">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex flex-col items-center justify-center w-14 h-14 rounded-lg bg-primary/10 text-primary font-serif">
|
|
<span className="text-xs">{event.date.getMonth() + 1}月</span>
|
|
<span className="font-bold text-lg">{event.date.getDate()}</span>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-medium text-sm">
|
|
{event.member.fullName} {event.type === 'birth' ? '诞辰' : '忌日'}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
第 {event.member.generation} 世 · {yearsAgo} 年
|
|
{event.type === 'death' && ' · 已故'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
)
|
|
})
|
|
) : (
|
|
<div className="col-span-full text-center py-12 text-muted-foreground">
|
|
未来三个月暂无纪念日
|
|
</div>
|
|
)
|
|
})()}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* 统计图表标签页 */}
|
|
<TabsContent value="statistics" className="mt-0">
|
|
<StatisticsCharts members={Object.values(treeData.members)} />
|
|
</TabsContent>
|
|
|
|
{/* 迁徙记录标签页 */}
|
|
<TabsContent value="migration" className="mt-0">
|
|
<Card className="border-none shadow-sm bg-card/50 backdrop-blur">
|
|
<CardHeader>
|
|
<CardTitle className="font-serif">家族迁徙记录</CardTitle>
|
|
<CardDescription>记录家族成员的籍贯分布</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-6">
|
|
{useMemo(() => {
|
|
const members = Object.values(treeData.members)
|
|
const locationGroups: Record<string, any[]> = {}
|
|
|
|
members.forEach(member => {
|
|
if (member.ancestralHome) {
|
|
if (!locationGroups[member.ancestralHome]) {
|
|
locationGroups[member.ancestralHome] = []
|
|
}
|
|
locationGroups[member.ancestralHome].push(member)
|
|
}
|
|
})
|
|
|
|
const sortedLocations = Object.entries(locationGroups)
|
|
.sort((a, b) => b[1].length - a[1].length)
|
|
|
|
return sortedLocations.length > 0 ? (
|
|
sortedLocations.map(([location, locationMembers]) => (
|
|
<div key={location} className="border-l-4 border-primary pl-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-lg font-serif font-bold">{location}</h3>
|
|
<span className="text-sm text-muted-foreground">
|
|
{locationMembers.length} 人
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
|
|
{locationMembers.map((member: any) => (
|
|
<Link href={`/members/${member.id}`} key={member.id}>
|
|
<div className="px-3 py-2 bg-muted rounded hover:bg-muted/80 transition-colors">
|
|
<p className="text-sm font-medium truncate">{member.fullName}</p>
|
|
<p className="text-xs text-muted-foreground">第 {member.generation} 世</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
暂无迁徙记录
|
|
</div>
|
|
)
|
|
}, [treeData])}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StatCard({
|
|
title,
|
|
value,
|
|
subtitle,
|
|
icon,
|
|
}: { title: string; value: string; subtitle: string; icon: React.ReactNode }) {
|
|
return (
|
|
<Card className="border-none shadow-sm bg-card/50 backdrop-blur transition-all hover:bg-card hover:shadow-md">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between space-y-0 pb-2">
|
|
<p className="text-sm font-medium text-muted-foreground">{title}</p>
|
|
<div className="text-muted-foreground bg-muted p-2 rounded-full">{icon}</div>
|
|
</div>
|
|
<div className="flex flex-col mt-2">
|
|
<span className="text-3xl font-serif font-bold text-foreground">{value}</span>
|
|
<p className="text-xs text-muted-foreground mt-1">{subtitle}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|