@allbluecn/web-app 0.5.1 → 0.6.1

package/src/lib/project-display-id.ts

@@ -15,16 +15,25 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
+import { pinyin } from "pinyin-pro";
 import { BUILTIN_INDEPENDENT_DISPLAY_ID } from "./builtin-project";
 
 /**
- * 从项目名提取 displayId：提取字母数字，转大写，取前10位。
- * 中文/符号被忽略；纯中文项目名返回空字符串（需用户手动填）。
+ * 从项目名提取 displayId：字母数字原样保留，汉字转拼音首字母，
+ * 转大写，取前10位。示例："产品需求PRD" → "CPXQPRD"。
  */
 export function extractDisplayId(name: string): string {
-  const matches = name.match(/[A-Za-z0-9]/g)
-  if (!matches || matches.length === 0) return ''
-  return matches.join('').toUpperCase().slice(0, 10)
+  const chars: string[] = [];
+  for (const ch of name) {
+    if (/[A-Za-z0-9]/.test(ch)) {
+      chars.push(ch);
+    } else if (/[\u4e00-\u9fff]/.test(ch)) {
+      const initial = pinyin(ch, { pattern: "first", toneType: "none" });
+      if (initial && /^[a-z]$/i.test(initial)) chars.push(initial);
+    }
+  }
+  if (chars.length === 0) return "";
+  return chars.join("").toUpperCase().slice(0, 10);
 }
 
 /**

package/src/lib/project-module-meta.ts

@@ -0,0 +1,77 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import {
+  ClipboardList,
+  Package2,
+  Palette,
+  FlaskConical,
+  Bug,
+  CircleCheckBig,
+} from "lucide-react";
+import type {
+  ProjectModuleKey,
+  ProjectModuleOverview,
+} from "@/types/project";
+
+// 6 个板块元数据（key 与路由 $module 对应）
+export const PROJECT_MODULE_META: Record<
+  ProjectModuleKey,
+  Omit<ProjectModuleOverview, "count" | "lastUpdatedAt" | "link">
+> = {
+  requirement: {
+    key: "requirement",
+    title: "需求",
+    description: "收集与跟踪产品需求池",
+    icon: ClipboardList,
+  },
+  prd: {
+    key: "prd",
+    title: "PRD",
+    description: "产品需求文档与原型画板",
+    icon: Package2,
+  },
+  design: {
+    key: "design",
+    title: "设计",
+    description: "UI 设计稿与画板资源",
+    icon: Palette,
+  },
+  testcase: {
+    key: "testcase",
+    title: "测例",
+    description: "测试用例与执行计划",
+    icon: FlaskConical,
+  },
+  bug: {
+    key: "bug",
+    title: "BUG",
+    description: "缺陷跟踪与修复进度",
+    icon: Bug,
+  },
+  acceptance: {
+    key: "acceptance",
+    title: "验收",
+    description: "交付验收与上线检查",
+    icon: CircleCheckBig,
+  },
+};
+
+export const PROJECT_MODULE_KEYS = Object.keys(
+  PROJECT_MODULE_META,
+) as ProjectModuleKey[];
+

package/src/lib/utils.d.ts

@@ -1 +1 @@
-export { cn } from '@allbluecn/ui/utils';
+export { cn } from '@/components/ui-shared/utils';

package/src/providers/index.tsx

@@ -28,6 +28,12 @@ import type { Session } from "@/lib/auth/auth-client";
 import { exchangeRemoteTokenFn } from "@/server/serverFns/auth/session";
 import { toast } from "sonner";
 import { createServerI18n } from "@/lib/i18n/server";
+import { registerIconPicker } from "@allbluecn/plugins-core/prd/icon-picker-bridge";
+import { LucideIconPicker } from "@/components/shared/lucide-icon-picker";
+
+// 宿主注入图标选择器实现，供 plugins-core 的 PRD 弹窗等使用（模块级单例）
+registerIconPicker(LucideIconPicker);
+
 
 function DesktopDeepLinkListener() {
   useEffect(() => {

package/src/routeTree.gen.ts

@@ -104,6 +104,8 @@ import { Route as NavWorkspacesWorkspaceIdSettingsRouteRouteImport } from './rou
 import { Route as ApiAttachmentsIdContentRouteImport } from './routes/api/attachments/$id/content'
 import { Route as DesignFilesProjectIdArtboardIdFilenameRouteImport } from './routes/design-files/$projectId/$artboardId/$filename'
 import { Route as NavKnowledgeKbIdDocDocIdRouteRouteImport } from './routes/_nav/knowledge/$kbId/doc/$docId/route'
+import { Route as NavProjectsProjectIdIterationsIndexRouteImport } from './routes/_nav/projects/$projectId/iterations/index'
+import { Route as NavProjectsProjectIdIterationsIterationIdRouteRouteImport } from './routes/_nav/projects/$projectId/iterations/$iterationId/route'
 import { Route as ApiSharePrdPrdIdEventsRouteImport } from './routes/api/share/prd/$prdId/events'
 
 const NavKnowledgeBookmarksIndexLazyRouteImport = createFileRoute(
@@ -836,6 +838,26 @@ const NavKnowledgeLawsEditIdLazyRoute =
   } as any).lazy(() =>
     import('./routes/_nav/knowledge/laws/edit/$id.lazy').then((d) => d.Route),
   )
+const NavProjectsProjectIdIterationsIndexRoute =
+  NavProjectsProjectIdIterationsIndexRouteImport.update({
+    id: '/iterations/',
+    path: '/iterations/',
+    getParentRoute: () => NavProjectsProjectIdRouteRoute,
+  } as any).lazy(() =>
+    import('./routes/_nav/projects/$projectId/iterations/index.lazy').then(
+      (d) => d.Route,
+    ),
+  )
+const NavProjectsProjectIdIterationsIterationIdRouteRoute =
+  NavProjectsProjectIdIterationsIterationIdRouteRouteImport.update({
+    id: '/iterations/$iterationId',
+    path: '/iterations/$iterationId',
+    getParentRoute: () => NavProjectsProjectIdRouteRoute,
+  } as any).lazy(() =>
+    import('./routes/_nav/projects/$projectId/iterations/$iterationId/route.lazy').then(
+      (d) => d.Route,
+    ),
+  )
 const ApiSharePrdPrdIdEventsRoute = ApiSharePrdPrdIdEventsRouteImport.update({
   id: '/api/share/prd/$prdId/events',
   path: '/api/share/prd/$prdId/events',
@@ -944,9 +966,11 @@ export interface FileRoutesByFullPath {
   '/knowledge/summary/': typeof NavKnowledgeSummaryIndexLazyRoute
   '/projects/$projectId/': typeof NavProjectsProjectIdIndexLazyRoute
   '/knowledge/$kbId/doc/$docId': typeof NavKnowledgeKbIdDocDocIdRouteRoute
+  '/projects/$projectId/iterations/$iterationId': typeof NavProjectsProjectIdIterationsIterationIdRouteRoute
   '/api/share/prd/$prdId/events': typeof ApiSharePrdPrdIdEventsRoute
   '/knowledge/compliance/edit/$id': typeof NavKnowledgeComplianceEditIdLazyRoute
   '/knowledge/laws/edit/$id': typeof NavKnowledgeLawsEditIdLazyRoute
+  '/projects/$projectId/iterations/': typeof NavProjectsProjectIdIterationsIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof PublicIndexRouteRoute
@@ -1036,9 +1060,11 @@ export interface FileRoutesByTo {
   '/knowledge/summary': typeof NavKnowledgeSummaryIndexLazyRoute
   '/projects/$projectId': typeof NavProjectsProjectIdIndexLazyRoute
   '/knowledge/$kbId/doc/$docId': typeof NavKnowledgeKbIdDocDocIdRouteRoute
+  '/projects/$projectId/iterations/$iterationId': typeof NavProjectsProjectIdIterationsIterationIdRouteRoute
   '/api/share/prd/$prdId/events': typeof ApiSharePrdPrdIdEventsRoute
   '/knowledge/compliance/edit/$id': typeof NavKnowledgeComplianceEditIdLazyRoute
   '/knowledge/laws/edit/$id': typeof NavKnowledgeLawsEditIdLazyRoute
+  '/projects/$projectId/iterations': typeof NavProjectsProjectIdIterationsIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -1146,9 +1172,11 @@ export interface FileRoutesById {
   '/_nav/knowledge/summary/': typeof NavKnowledgeSummaryIndexLazyRoute
   '/_nav/projects/$projectId/': typeof NavProjectsProjectIdIndexLazyRoute
   '/_nav/knowledge/$kbId/doc/$docId': typeof NavKnowledgeKbIdDocDocIdRouteRoute
+  '/_nav/projects/$projectId/iterations/$iterationId': typeof NavProjectsProjectIdIterationsIterationIdRouteRoute
   '/api/share/prd/$prdId/events': typeof ApiSharePrdPrdIdEventsRoute
   '/_nav/knowledge/compliance/edit/$id': typeof NavKnowledgeComplianceEditIdLazyRoute
   '/_nav/knowledge/laws/edit/$id': typeof NavKnowledgeLawsEditIdLazyRoute
+  '/_nav/projects/$projectId/iterations/': typeof NavProjectsProjectIdIterationsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -1254,9 +1282,11 @@ export interface FileRouteTypes {
     | '/knowledge/summary/'
     | '/projects/$projectId/'
     | '/knowledge/$kbId/doc/$docId'
+    | '/projects/$projectId/iterations/$iterationId'
     | '/api/share/prd/$prdId/events'
     | '/knowledge/compliance/edit/$id'
     | '/knowledge/laws/edit/$id'
+    | '/projects/$projectId/iterations/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -1346,9 +1376,11 @@ export interface FileRouteTypes {
     | '/knowledge/summary'
     | '/projects/$projectId'
     | '/knowledge/$kbId/doc/$docId'
+    | '/projects/$projectId/iterations/$iterationId'
     | '/api/share/prd/$prdId/events'
     | '/knowledge/compliance/edit/$id'
     | '/knowledge/laws/edit/$id'
+    | '/projects/$projectId/iterations'
   id:
     | '__root__'
     | '/_login'
@@ -1455,9 +1487,11 @@ export interface FileRouteTypes {
     | '/_nav/knowledge/summary/'
     | '/_nav/projects/$projectId/'
     | '/_nav/knowledge/$kbId/doc/$docId'
+    | '/_nav/projects/$projectId/iterations/$iterationId'
     | '/api/share/prd/$prdId/events'
     | '/_nav/knowledge/compliance/edit/$id'
     | '/_nav/knowledge/laws/edit/$id'
+    | '/_nav/projects/$projectId/iterations/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -2232,6 +2266,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof NavKnowledgeLawsEditIdLazyRouteImport
       parentRoute: typeof NavKnowledgeLawsRouteRoute
     }
+    '/_nav/projects/$projectId/iterations/': {
+      id: '/_nav/projects/$projectId/iterations/'
+      path: '/iterations'
+      fullPath: '/projects/$projectId/iterations/'
+      preLoaderRoute: typeof NavProjectsProjectIdIterationsIndexRouteImport
+      parentRoute: typeof NavProjectsProjectIdRouteRoute
+    }
+    '/_nav/projects/$projectId/iterations/$iterationId': {
+      id: '/_nav/projects/$projectId/iterations/$iterationId'
+      path: '/iterations/$iterationId'
+      fullPath: '/projects/$projectId/iterations/$iterationId'
+      preLoaderRoute: typeof NavProjectsProjectIdIterationsIterationIdRouteRouteImport
+      parentRoute: typeof NavProjectsProjectIdRouteRoute
+    }
     '/api/share/prd/$prdId/events': {
       id: '/api/share/prd/$prdId/events'
       path: '/api/share/prd/$prdId/events'
@@ -2465,6 +2513,8 @@ interface NavProjectsProjectIdRouteRouteChildren {
   NavProjectsProjectIdStoryIdRouteRoute: typeof NavProjectsProjectIdStoryIdRouteRoute
   NavProjectsProjectIdSettingsRouteRoute: typeof NavProjectsProjectIdSettingsRouteRoute
   NavProjectsProjectIdIndexLazyRoute: typeof NavProjectsProjectIdIndexLazyRoute
+  NavProjectsProjectIdIterationsIterationIdRouteRoute: typeof NavProjectsProjectIdIterationsIterationIdRouteRoute
+  NavProjectsProjectIdIterationsIndexRoute: typeof NavProjectsProjectIdIterationsIndexRoute
 }
 
 const NavProjectsProjectIdRouteRouteChildren: NavProjectsProjectIdRouteRouteChildren =
@@ -2474,6 +2524,10 @@ const NavProjectsProjectIdRouteRouteChildren: NavProjectsProjectIdRouteRouteChil
     NavProjectsProjectIdSettingsRouteRoute:
       NavProjectsProjectIdSettingsRouteRoute,
     NavProjectsProjectIdIndexLazyRoute: NavProjectsProjectIdIndexLazyRoute,
+    NavProjectsProjectIdIterationsIterationIdRouteRoute:
+      NavProjectsProjectIdIterationsIterationIdRouteRoute,
+    NavProjectsProjectIdIterationsIndexRoute:
+      NavProjectsProjectIdIterationsIndexRoute,
   }
 
 const NavProjectsProjectIdRouteRouteWithChildren =

package/src/routes/__root.tsx

@@ -26,8 +26,6 @@ import globalsCss from '@/styles/globals.css?url'
 import type { RouterContext } from '@/lib/router-context'
 import { Providers } from '@/providers'
 import { Toaster } from '@/components/ui/sonner'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { DevtoolsPanel } from '@allblue/devtools'
 import { getSessionFn } from '@/server/serverFns/auth/session'
 import { getLocaleFn } from '@/server/serverFns/locale'
@@ -82,12 +80,6 @@ function RootComponent() {
             <Outlet />
             <ShortcutsPanel />
             <Toaster position="top-center" />
-            {import.meta.env.DEV && (
-              <ReactQueryDevtools initialIsOpen={false} />
-            )}
-            {import.meta.env.DEV && (
-              <TanStackRouterDevtools initialIsOpen={false} />
-            )}
             {import.meta.env.DEV && <DevtoolsPanel />}
           </HotkeysProvider>
         </Providers>

package/src/routes/_nav/knowledge/index.lazy.tsx

@@ -23,7 +23,7 @@ import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { AnimatedGridPattern } from '@/components/magicui/animated-grid-pattern'
 import { BookOpenTextIcon } from '@/components/animated-icons/book-open-text'
-import { KnowledgeIconDisplay } from '@/components/knowledge/knowledge-icon'
+import { LucideIconByName } from '@/components/shared/lucide-icon-picker/lucide-icon-by-name'
 import { KnowledgeFormDialog } from '@/components/knowledge/dialog/knowledge-form-dialog'
 
 type KnowledgeList = ReturnType<typeof import('@/server/serverFns/knowledge')['listKnowledgeFn']> extends Promise<infer T> ? T : never
@@ -81,7 +81,7 @@ function KnowledgeListPage() {
                 <div className="flex-1">
                   <div className="flex items-start justify-between">
                     <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
-                      <KnowledgeIconDisplay name={item.icon} size={20} />
+                      <LucideIconByName name={item.icon} size={20} />
                     </div>
                   </div>
                   <h3 className="mt-4 font-medium text-lg">{item.name}</h3>

package/src/routes/_nav/projects/$projectId/$storyId/route.lazy.tsx

@@ -20,25 +20,44 @@ import { useTranslation } from "react-i18next";
 import { ArrowLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
-import { PROJECT_MODULE_META } from "@/lib/project-mock";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
+import { PROJECT_MODULE_META } from "@/lib/project-module-meta";
 import type { ProjectModuleItem } from "@/types/project";
 
-const STATUS_VARIANT: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
-  已完成: "secondary",
-  已验收: "default",
-  已关闭: "outline",
-  进行中: "default",
-  待处理: "outline",
+const STATE_VARIANT: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
+  done: "secondary",
+  cancelled: "outline",
+  in_progress: "default",
+  todo: "outline",
+  backlog: "outline",
 };
 
 const PRIORITY_VARIANT: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
-  高: "destructive",
-  中: "secondary",
-  低: "outline",
+  urgent: "destructive",
+  high: "destructive",
+  medium: "secondary",
+  low: "outline",
+  none: "outline",
 };
 
-function ModuleRow({ item, t }: { item: ProjectModuleItem; t: (key: string) => string }) {
+const STATE_LABEL_KEYS: Record<string, string> = {
+  backlog: "state.backlog",
+  todo: "state.todo",
+  in_progress: "state.in_progress",
+  done: "state.done",
+  cancelled: "state.cancelled",
+};
+
+const PRIORITY_LABEL_KEYS: Record<string, string> = {
+  urgent: "priority.urgent",
+  high: "priority.high",
+  medium: "priority.medium",
+  low: "priority.low",
+  none: "priority.none",
+};
+
+function ModuleRow({ item, t }: { item: ProjectModuleItem; t: (key: string, opts?: Record<string, unknown>) => string }) {
+  const stateLabel = STATE_LABEL_KEYS[item.state] ?? item.state;
   return (
     <div className="flex items-center gap-4 px-4 py-3 transition-colors hover:bg-accent/40">
       <div className="min-w-0 flex-1">
@@ -47,9 +66,9 @@ function ModuleRow({ item, t }: { item: ProjectModuleItem; t: (key: string) => s
           {t('module.assigneeLabel')}{item.assignee ?? t('module.unassigned')}
         </p>
       </div>
-      <Badge variant={STATUS_VARIANT[item.status] ?? "outline"}>{item.status}</Badge>
+      <Badge variant={STATE_VARIANT[item.state] ?? "outline"}>{t(`story:${stateLabel}`)}</Badge>
       <Badge variant={PRIORITY_VARIANT[item.priority] ?? "outline"} className="hidden sm:inline-flex">
-        {item.priority}
+        {t(`story:${PRIORITY_LABEL_KEYS[item.priority] ?? item.priority}`)}
       </Badge>
       <span className="hidden text-xs text-muted-foreground md:block">
         {new Intl.DateTimeFormat("zh-CN", { month: "short", day: "numeric" }).format(new Date(item.updatedAt))}
@@ -60,7 +79,7 @@ function ModuleRow({ item, t }: { item: ProjectModuleItem; t: (key: string) => s
 }
 
 function ProjectModulePage() {
-  const { t } = useTranslation('projects');
+  const { t } = useTranslation(["projects", "story"]);
   const { project, items, moduleKey } = Route.useLoaderData();
   const meta = PROJECT_MODULE_META[moduleKey];
   const Icon = meta.icon;
@@ -86,25 +105,33 @@ function ProjectModulePage() {
             <p className="text-sm text-muted-foreground">{meta.description}</p>
           </div>
           <div className="ml-auto flex items-center gap-2">
-            <ProjectIconDisplay name={project.icon} size={20} />
+            <LucideIconByName name={project.icon} size={20} />
             <span className="text-sm text-muted-foreground">{project.name}</span>
           </div>
         </div>
 
         <div className="mb-3 flex items-center justify-between">
           <p className="text-sm text-muted-foreground">
-            {t('module.totalItems', { count: items.length })} · {t('module.mockDataLabel')}
+            {t('projects:module.totalItems', { count: items.length })}
           </p>
-          <Badge variant="outline" className="text-muted-foreground">
-            {t('module.mockBadge')}
-          </Badge>
+          {moduleKey === "requirement" && (
+            <Badge variant="outline" className="text-muted-foreground">
+              {t('projects:module.liveBadge')}
+            </Badge>
+          )}
         </div>
 
-        <div className="divide-y rounded-lg border bg-card">
-          {items.map((item) => (
-            <ModuleRow key={item.id} item={item} t={t} />
-          ))}
-        </div>
+        {items.length === 0 ? (
+          <div className="rounded-lg border bg-card px-4 py-10 text-center text-sm text-muted-foreground">
+            {t('projects:module.empty')}
+          </div>
+        ) : (
+          <div className="divide-y rounded-lg border bg-card">
+            {items.map((item) => (
+              <ModuleRow key={item.id} item={item} t={t} />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

package/src/routes/_nav/projects/$projectId/$storyId/route.tsx

@@ -17,10 +17,10 @@
 
 import { createFileRoute, notFound } from "@tanstack/react-router";
 import { getProjectDetailFn } from "@/server/serverFns/project";
+import { listModuleStoriesFn } from "@/server/serverFns/project/module-overview";
 import {
-  listModuleItems,
   PROJECT_MODULE_KEYS,
-} from "@/lib/project-mock";
+} from "@/lib/project-module-meta";
 import type { ProjectModuleKey } from "@/types/project";
 
 export const Route = createFileRoute("/_nav/projects/$projectId/$storyId")({
@@ -32,7 +32,10 @@ export const Route = createFileRoute("/_nav/projects/$projectId/$storyId")({
     const project = await getProjectDetailFn({
       data: { projectId: params.projectId },
     });
-    const items = listModuleItems(params.projectId, moduleKey);
+    const items =
+      moduleKey === "requirement"
+        ? (await listModuleStoriesFn({ data: { projectId: params.projectId } })).items
+        : [];
     return { project, items, moduleKey };
   },
 });

package/src/routes/_nav/projects/$projectId/index.lazy.tsx

@@ -17,17 +17,17 @@
 
 import { createLazyFileRoute, Link, useLoaderData } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
-import { Settings, LayoutGrid, Activity as ActivityIcon } from "lucide-react";
+import { Settings, LayoutGrid, Activity as ActivityIcon, CalendarRange } from "lucide-react";
 import { useTheme } from "next-themes";
 import { UserAvatar } from "@allbluecn/ui";
 import type { AvatarConfig, ShapeType } from "@allbluecn/shared";
 import { Button } from "@/components/ui/button";
 import { AvatarGroup } from "@/components/magicui/components/animate/avatar-group";
 import { GlyphMatrix } from "@/components/magicui/glyph-matrix";
-import { ProjectAnimatedIcon } from "@/components/project/project-animated-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import { ProjectModuleCard } from "@/components/project/project-module-card";
 import { ProjectActivityList } from "@/components/project/project-activity-list";
-import { buildModuleOverview } from "@/lib/project-mock";
+import { PROJECT_MODULE_META, PROJECT_MODULE_KEYS } from "@/lib/project-module-meta";
 import { useMemo } from "react";
 import { formatInTimeZone } from "date-fns-tz";
 import { subDays } from "date-fns";
@@ -63,14 +63,20 @@ function buildContributionData(
 
 function ProjectDetailPage() {
   const { t } = useTranslation('projects');
-  const { project, members, activities } = useLoaderData({
+  const { project, members, activities, moduleOverview } = useLoaderData({
     from: "/_nav/projects/$projectId",
   });
   const { resolvedTheme } = useTheme();
   const glyphColor = resolvedTheme === "dark" ? "#6b7280" : "#9ca3af";
   const timezone = useTimezone();
 
-  const modules = buildModuleOverview(project.id);
+  const modules = PROJECT_MODULE_KEYS.map((key) => ({
+    ...PROJECT_MODULE_META[key],
+    count: moduleOverview[key]?.count ?? 0,
+    lastUpdatedAt: moduleOverview[key]?.lastUpdatedAt
+      ? new Date(moduleOverview[key]!.lastUpdatedAt!)
+      : null,
+  }));
   const contributionData = useMemo(
     () => buildContributionData(activities, timezone),
     [activities, timezone],
@@ -85,16 +91,27 @@ function ProjectDetailPage() {
       </div>
       <div className="relative z-10 mx-auto max-w-6xl px-6 py-6">
         <div className="relative mb-10 mt-2 flex flex-col items-center py-10 text-center">
-          <Button variant="outline" size="sm" asChild className="absolute right-0 top-0">
-            <Link
-              to="/projects/$projectId/settings"
-              params={{ projectId: project.id }}
-            >
-              <Settings className="size-4" />
-              {t('detail.settings')}
-            </Link>
-          </Button>
-          <ProjectAnimatedIcon name={project.icon} size={56} className="mb-4 text-primary" />
+          <div className="absolute right-0 top-0 flex gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link
+                to="/projects/$projectId/iterations"
+                params={{ projectId: project.id }}
+              >
+                <CalendarRange className="size-4" />
+                {t('detail.iterations')}
+              </Link>
+            </Button>
+            <Button variant="outline" size="sm" asChild>
+              <Link
+                to="/projects/$projectId/settings"
+                params={{ projectId: project.id }}
+              >
+                <Settings className="size-4" />
+                {t('detail.settings')}
+              </Link>
+            </Button>
+          </div>
+          <LucideIconByName name={project.icon} size={56} className="mb-4 text-primary" />
           <h1 className="text-3xl font-semibold">{project.name}</h1>
           <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
             {project.description || t('detail.noDescription')}