selfrelease
c3232f73c8
- Created useScopeEffect hook that auto-triggers reload on scope change - Replaced useEffect([], []) with useScopeEffect in 20+ pages - Risks/Reports/Dashboard also use useScopeEffect - Removed redundant per-page useCompanyScope where only effect was needed
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useScopeEffect } from "@/lib/company-scope";
|
|
import {Plus } from "lucide-react";
|
|
import { listOKRs } from "@/lib/api-v2";
|
|
import { PageContainer, Badge, Card } from "@/components/shared/PageContainer";
|
|
import { LoadingSpinner } from "@/components/shared/LoadingSpinner";
|
|
import { EmptyState } from "@/components/shared/EmptyState";
|
|
|
|
/** OKR 关键结果项。 */
|
|
interface KeyResult {
|
|
title?: string;
|
|
objective?: string;
|
|
progress?: number;
|
|
}
|
|
|
|
/** OKR 项。 */
|
|
interface OKRItem {
|
|
quarter: string;
|
|
objective: string;
|
|
alignment_score?: number;
|
|
status: string;
|
|
key_results?: KeyResult[];
|
|
}
|
|
|
|
export default function OKRsPage() {
|
|
const [items, setItems] = useState<OKRItem[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useScopeEffect(() => {
|
|
listOKRs()
|
|
.then((resp) => setItems((resp.data as OKRItem[]) ?? []))
|
|
.catch(() => setItems([]))
|
|
.finally(() => setIsLoading(false));
|
|
});
|
|
|
|
return (
|
|
<PageContainer
|
|
title="OKR 管理"
|
|
description="投资人与创始人共同制定 OKR + AI 对齐度评分 + 偏差预警"
|
|
actions={
|
|
<button className="flex items-center gap-1 rounded-md bg-gray-900 px-3 py-1.5 text-sm text-white hover:bg-gray-700">
|
|
<Plus size={16} /> 新建 OKR
|
|
</button>
|
|
}
|
|
>
|
|
{isLoading ? (
|
|
<LoadingSpinner />
|
|
) : items.length === 0 ? (
|
|
<EmptyState description="暂无 OKR" />
|
|
) : (
|
|
<div className="space-y-3">
|
|
{items.map((item, i) => (
|
|
<Card key={i}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Badge color="blue">{item.quarter}</Badge>
|
|
<h3 className="mt-1 font-medium text-gray-900">{item.objective}</h3>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{item.alignment_score != null && (
|
|
<Badge color={item.alignment_score >= 75 ? "green" : "amber"}>
|
|
对齐度 {item.alignment_score}
|
|
</Badge>
|
|
)}
|
|
<Badge color={item.status === "active" ? "green" : "gray"}>{item.status}</Badge>
|
|
</div>
|
|
</div>
|
|
{Array.isArray(item.key_results) && (
|
|
<div className="mt-2 space-y-1">
|
|
{item.key_results.map((kr, ki) => (
|
|
<div key={ki} className="flex items-center gap-2 text-sm text-gray-600">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-gray-400" />
|
|
{String(kr.title ?? kr.objective ?? kr)}
|
|
{kr.progress != null && <span className="text-gray-400">({kr.progress}%)</span>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</PageContainer>
|
|
);
|
|
}
|