312 lines
13 KiB
TypeScript
312 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { StatusDot } from '@/components/status-badge';
|
|
import { ProgressRing } from '@/components/progress-ring';
|
|
import { useUser } from '@/components/user-context';
|
|
import { calculateProgress, getDaysRemaining, isKRActive } from '@/lib/kr-utils';
|
|
import { REASON_CODES, ROLE_LABELS } from '@/lib/constants';
|
|
import type { Project, KR, User } from '@/types/database';
|
|
import {
|
|
FolderKanban,
|
|
Target,
|
|
AlertTriangle,
|
|
Clock,
|
|
ArrowRight,
|
|
AlertCircle,
|
|
HandHelping,
|
|
} from 'lucide-react';
|
|
|
|
interface ProjectWithRelations extends Project {
|
|
owner: User | null;
|
|
pm: User | null;
|
|
}
|
|
|
|
interface KRWithRelations extends KR {
|
|
owner: User | null;
|
|
project: { id: string; name: string; status: string } | null;
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const { currentUser } = useUser();
|
|
const [projects, setProjects] = useState<ProjectWithRelations[]>([]);
|
|
const [krs, setKRs] = useState<KRWithRelations[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
try {
|
|
const [projectsRes, krsRes] = await Promise.all([
|
|
fetch('/api/projects'),
|
|
fetch('/api/krs'),
|
|
]);
|
|
|
|
if (projectsRes.ok) {
|
|
const projectsData = await projectsRes.json();
|
|
setProjects(projectsData);
|
|
}
|
|
|
|
if (krsRes.ok) {
|
|
const krsData = await krsRes.json();
|
|
setKRs(krsData);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch data:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
const activeKRs = krs.filter(isKRActive);
|
|
const redKRs = activeKRs.filter(kr => kr.status === 'red');
|
|
const yellowKRs = activeKRs.filter(kr => kr.status === 'yellow');
|
|
const helpNeededKRs = activeKRs.filter(kr => kr.need_owner_help);
|
|
const urgentKRs = activeKRs.filter(kr => getDaysRemaining(kr.period_end) <= 3 && kr.status !== 'green');
|
|
|
|
const stats = {
|
|
totalProjects: projects.length,
|
|
greenProjects: projects.filter(p => p.status === 'green').length,
|
|
yellowProjects: projects.filter(p => p.status === 'yellow').length,
|
|
redProjects: projects.filter(p => p.status === 'red').length,
|
|
totalKRs: activeKRs.length,
|
|
completedKRs: activeKRs.filter(kr => calculateProgress(kr) >= 1).length,
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 py-8">
|
|
<div className="animate-pulse space-y-6">
|
|
<div className="h-8 bg-slate-200 rounded w-48" />
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
{[1, 2, 3, 4].map(i => (
|
|
<div key={i} className="h-32 bg-slate-200 rounded-lg" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 py-8">
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-slate-800">目标驾驶舱</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
{currentUser?.role === 'owner' ? '全局视角 - 所有项目健康度一览' : `${ROLE_LABELS[currentUser?.role || 'member']}视角`}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">项目总数</p>
|
|
<p className="text-3xl font-bold text-slate-800">{stats.totalProjects}</p>
|
|
</div>
|
|
<FolderKanban className="h-10 w-10 text-slate-300" />
|
|
</div>
|
|
<div className="flex gap-2 mt-3 text-xs">
|
|
<span className="text-emerald-600">{stats.greenProjects} 正常</span>
|
|
<span className="text-amber-600">{stats.yellowProjects} 警告</span>
|
|
<span className="text-rose-600">{stats.redProjects} 风险</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">进行中 KR</p>
|
|
<p className="text-3xl font-bold text-slate-800">{stats.totalKRs}</p>
|
|
</div>
|
|
<Target className="h-10 w-10 text-slate-300" />
|
|
</div>
|
|
<div className="flex gap-2 mt-3 text-xs">
|
|
<span className="text-emerald-600">{stats.completedKRs} 已达标</span>
|
|
<span className="text-slate-500">{stats.totalKRs - stats.completedKRs} 进行中</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className={redKRs.length > 0 ? 'border-rose-200 bg-rose-50/50' : ''}>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">风险 KR</p>
|
|
<p className="text-3xl font-bold text-rose-600">{redKRs.length}</p>
|
|
</div>
|
|
<AlertTriangle className={`h-10 w-10 ${redKRs.length > 0 ? 'text-rose-300' : 'text-slate-300'}`} />
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-3">需要立即关注</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className={helpNeededKRs.length > 0 ? 'border-amber-200 bg-amber-50/50' : ''}>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">需要帮助</p>
|
|
<p className="text-3xl font-bold text-amber-600">{helpNeededKRs.length}</p>
|
|
</div>
|
|
<HandHelping className={`h-10 w-10 ${helpNeededKRs.length > 0 ? 'text-amber-300' : 'text-slate-300'}`} />
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-3">成员请求老板支援</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{(redKRs.length > 0 || urgentKRs.length > 0 || helpNeededKRs.length > 0) && (
|
|
<Card className="mb-8 border-l-4 border-l-rose-500">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
<AlertCircle className="h-5 w-5 text-rose-500" />
|
|
风险预警
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{redKRs.map(kr => (
|
|
<Link key={kr.id} href={`/krs/${kr.id}`} className="block">
|
|
<div className="flex items-center gap-4 p-3 bg-rose-50 rounded-lg hover:bg-rose-100 transition-colors">
|
|
<StatusDot status="red" pulse />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-slate-800 truncate">{kr.title}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{kr.project?.name} | {kr.owner?.name || '未分配'}
|
|
{kr.reason_code && ` | ${REASON_CODES[kr.reason_code]}`}
|
|
</p>
|
|
</div>
|
|
<ProgressRing progress={calculateProgress(kr)} status={kr.status} size={48} />
|
|
</div>
|
|
</Link>
|
|
))}
|
|
|
|
{urgentKRs.filter(kr => kr.status !== 'red').map(kr => (
|
|
<Link key={kr.id} href={`/krs/${kr.id}`} className="block">
|
|
<div className="flex items-center gap-4 p-3 bg-amber-50 rounded-lg hover:bg-amber-100 transition-colors">
|
|
<Clock className="h-5 w-5 text-amber-500" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-slate-800 truncate">{kr.title}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{kr.project?.name} | 剩余 {getDaysRemaining(kr.period_end)} 天
|
|
</p>
|
|
</div>
|
|
<ProgressRing progress={calculateProgress(kr)} status={kr.status} size={48} />
|
|
</div>
|
|
</Link>
|
|
))}
|
|
|
|
{helpNeededKRs.filter(kr => kr.status === 'green').map(kr => (
|
|
<Link key={kr.id} href={`/krs/${kr.id}`} className="block">
|
|
<div className="flex items-center gap-4 p-3 bg-sky-50 rounded-lg hover:bg-sky-100 transition-colors">
|
|
<HandHelping className="h-5 w-5 text-sky-500" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-slate-800 truncate">{kr.title}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{kr.owner?.name} 请求支援
|
|
</p>
|
|
</div>
|
|
<ProgressRing progress={calculateProgress(kr)} status={kr.status} size={48} />
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-lg">项目健康度</CardTitle>
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/projects" className="flex items-center gap-1">
|
|
查看全部 <ArrowRight className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{projects.slice(0, 5).map(project => {
|
|
const projectKRs = krs.filter(kr => kr.project_id === project.id && isKRActive(kr));
|
|
const completedCount = projectKRs.filter(kr => calculateProgress(kr) >= 1).length;
|
|
|
|
return (
|
|
<Link key={project.id} href={`/projects/${project.id}`} className="block">
|
|
<div className="flex items-center gap-4 p-3 rounded-lg hover:bg-slate-100 transition-colors">
|
|
<StatusDot status={project.status} size="lg" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-slate-800">{project.name}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{project.pm?.name || '未指定PM'} | {projectKRs.length} 个 KR
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-sm font-medium">
|
|
{completedCount}/{projectKRs.length}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">已达标</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
|
|
{projects.length === 0 && (
|
|
<p className="text-center text-muted-foreground py-8">暂无项目</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-lg">近期 KR 动态</CardTitle>
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/my-krs" className="flex items-center gap-1">
|
|
我的 KR <ArrowRight className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{activeKRs.slice(0, 5).map(kr => {
|
|
const progress = calculateProgress(kr);
|
|
const daysLeft = getDaysRemaining(kr.period_end);
|
|
|
|
return (
|
|
<Link key={kr.id} href={`/krs/${kr.id}`} className="block">
|
|
<div className="flex items-center gap-4 p-3 rounded-lg hover:bg-slate-100 transition-colors">
|
|
<ProgressRing progress={progress} status={kr.status} size={44} strokeWidth={3} />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-slate-800 truncate">{kr.title}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{kr.project?.name} | {kr.owner?.name || '未分配'}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-sm">
|
|
{kr.current_value}/{kr.target_value} {kr.unit}
|
|
</p>
|
|
<p className={`text-xs ${daysLeft <= 3 ? 'text-amber-600' : 'text-muted-foreground'}`}>
|
|
剩余 {daysLeft} 天
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
|
|
{activeKRs.length === 0 && (
|
|
<p className="text-center text-muted-foreground py-8">暂无进行中的 KR</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|