.3704670284688232:7b4b331f14eea585a720d439c235a077_699fc0e3e98066cf2fce8ab9.69a015c1b6d3747a248143e3.69a015c076b9b550cf58a417:Trae CN.T(2026/2/26 17:43:29)

package.json

@@ -32,14 +32,18 @@
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "uuid": "^9.0.1",
-    "yup": "^0.32.11"
+    "yup": "^0.32.11",
+    "recharts": "^2.12.0",
+    "react-window": "^1.8.10",
+    "html2canvas": "^1.4.1"
   },
   "devDependencies": {
     "@bit-ocean/prettier-config": "^0.0.10",
     "@hookform/devtools": "^4.3.1",
     "@tanstack/react-query-devtools": "^4.2.3",
     "@types/node": "^20.11.28",
     "@types/react": "^18.2.66",
+    "@types/react-window": "^1.8.8",
     "@types/react-dom": "^18.2.22",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

src/App.tsx

@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import clsx from 'clsx'
 import { Authentication, Layout, Loading, Notification } from '@/components'
-import { Home, Note, Archive, Trash, NotFound, Login, Signup, Icons } from '@/pages'
+import { Home, Note, Archive, Trash, Statistics, NotFound, Login, Signup, Icons } from '@/pages'
 
 export default function App(): JSX.Element {
   const { i18n } = useTranslation()
@@ -49,6 +49,10 @@ export default function App(): JSX.Element {
             path="trash"
             element={<Trash />}
           />
+          <Route
+            path="statistics"
+            element={<Statistics />}
+          />
         </Route>
         <Route
           path="/icons"

src/components/Sidebar/index.tsx

@@ -69,6 +69,15 @@ export default function Sidebar(): JSX.Element {
           onClickSidebarItem(ActiveSidebarItem.Trash)
         }}
       />
+      <SidebarItem
+        shouldExpand={sidebarMode === 'expand' || (shouldExpand && sidebarMode === 'collapse')}
+        icon={<Icon.BarChart className="fill-black dark:fill-white" />}
+        title={t('layout:SIDEBAR.TITLE.STATISTICS')}
+        active={activeSidebarItem === ActiveSidebarItem.Statistics}
+        onClick={() => {
+          onClickSidebarItem(ActiveSidebarItem.Statistics)
+        }}
+      />
     </div>
   )
 }

src/components/Svg/BarChart.tsx

@@ -0,0 +1,28 @@
+import { type SvgPropsType } from '.'
+import clsx from 'clsx'
+
+export default function BarChart({
+  width = '24',
+  height = '24',
+  className,
+  onClick
+}: SvgPropsType): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={width}
+      height={height}
+      className={clsx('fill-black', className)}
+      onClick={onClick}
+    >
+      <path
+        d="M0 0h24v24H0V0z"
+        fill="none"
+      />
+      <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 14H8c-.55 0-1-.45-1-1s.45-1 1-1h10c.55 0 1 .45 1 1s-.45 1-1 1zm0-4H8c-.55 0-1-.45-1-1s.45-1 1-1h10c.55 0 1 .45 1 1s-.45 1-1 1zm0-4H8c-.55 0-1-.45-1-1s.45-1 1-1h10c.55 0 1 .45 1 1s-.45 1-1 1z" />
+    </svg>
+  )
+}
+
+// Google Material Icons - BarChart

src/components/Svg/index.ts

@@ -53,6 +53,7 @@ import Link from './Link'
 import LinkOff from './LinkOff'
 import Touch from './Touch'
 import Door from './Door'
+import BarChart from './BarChart'
 
 export const Icon = {
   Archive,
@@ -102,5 +103,6 @@ export const Icon = {
   Link,
   LinkOff,
   Touch,
-  Door
+  Door,
+  BarChart
 }

src/hooks/index.ts

@@ -5,3 +5,4 @@ export { default as useDetectOutsideClick } from './useOutsideClick'
 export { default as useToggle } from './useToggle'
 export { default as useCopyText } from './useCopyText'
 export { default as useTaskListDataManager } from './useTaskListDataManager'
+export { useStatisticsData } from './useStatisticsData'

src/hooks/useStatisticsData.ts

@@ -0,0 +1,190 @@
+import { useMemo } from 'react'
+import dayjs, { Dayjs } from 'dayjs'
+import { Note, Task } from '@/interfaces'
+
+export interface DailyCompletedTasks {
+  date: string
+  count: number
+  tasks: Task[]
+}
+
+export interface PriorityDistribution {
+  high: number
+  medium: number
+  low: number
+  highTasks: Task[]
+  mediumTasks: Task[]
+  lowTasks: Task[]
+}
+
+export interface TagDistribution {
+  tag: string
+  count: number
+  tasks: Task[]
+}
+
+export interface StatisticsData {
+  dailyCompleted: DailyCompletedTasks[]
+  priorityDistribution: PriorityDistribution
+  tagDistribution: TagDistribution[]
+  totalTasks: number
+  completedTasks: number
+  incompleteTasks: number
+}
+
+function getTaskCompletedDate(task: Task): Dayjs | null {
+  if (task.finishedAt) {
+    return dayjs(task.finishedAt)
+  }
+  return null
+}
+
+function getPriorityLabel(priority: number): string {
+  if (priority >= 2) return 'high'
+  if (priority === 1) return 'medium'
+  return 'low'
+}
+
+function extractTagFromTask(task: Task, note?: Note): string {
+  if (note?.name && note.name.trim()) {
+    const words = note.name.trim().split(/\s+/)
+    if (words.length > 0) {
+      return words[0].length > 15 ? words[0].substring(0, 15) + '...' : words[0]
+    }
+  }
+  if (task.content) {
+    const words = task.content.trim().split(/\s+/)
+    if (words.length > 0) {
+      return words[0].length > 15 ? words[0].substring(0, 15) + '...' : words[0]
+    }
+  }
+  return 'Untitled'
+}
+
+export function useStatisticsData(
+  notes: Note[] | undefined,
+  dateRange: { start: Dayjs; end: Dayjs } | null
+): StatisticsData {
+  return useMemo(() => {
+    if (!notes || notes.length === 0) {
+      return {
+        dailyCompleted: [],
+        priorityDistribution: {
+          high: 0,
+          medium: 0,
+          low: 0,
+          highTasks: [],
+          mediumTasks: [],
+          lowTasks: []
+        },
+        tagDistribution: [],
+        totalTasks: 0,
+        completedTasks: 0,
+        incompleteTasks: 0
+      }
+    }
+
+    const allTasks: Task[] = []
+    const taskNoteMap = new Map<Task, Note>()
+
+    notes.forEach((note) => {
+      note.tasks.forEach((task) => {
+        allTasks.push(task)
+        taskNoteMap.set(task, note)
+      })
+    })
+
+    const completedTasks = allTasks.filter((t) => t.finishedAt !== null)
+    const incompleteTasks = allTasks.filter((t) => t.finishedAt === null)
+
+    const endDate = dateRange?.end ?? dayjs()
+    const startDate = dateRange?.start ?? dayjs().subtract(29, 'day')
+    const daysDiff = endDate.diff(startDate, 'day') + 1
+
+    const dailyCompletedMap = new Map<string, DailyCompletedTasks>()
+    for (let i = 0; i < daysDiff; i++) {
+      const date = startDate.add(i, 'day')
+      const dateStr = date.format('YYYY-MM-DD')
+      dailyCompletedMap.set(dateStr, {
+        date: dateStr,
+        count: 0,
+        tasks: []
+      })
+    }
+
+    completedTasks.forEach((task) => {
+      const completedDate = getTaskCompletedDate(task)
+      if (completedDate) {
+        const dateStr = completedDate.format('YYYY-MM-DD')
+        if (dailyCompletedMap.has(dateStr)) {
+          const existing = dailyCompletedMap.get(dateStr)!
+          existing.count += 1
+          existing.tasks.push(task)
+        }
+      }
+    })
+
+    const dailyCompleted = Array.from(dailyCompletedMap.values())
+
+    const incompleteForPriority = dateRange
+      ? incompleteTasks.filter((t) => {
+          const createdAt = dayjs(t.createdAt)
+          return (
+            createdAt.isAfter(startDate.startOf('day')) && createdAt.isBefore(endDate.endOf('day'))
+          )
+        })
+      : incompleteTasks
+
+    const priorityDistribution: PriorityDistribution = {
+      high: 0,
+      medium: 0,
+      low: 0,
+      highTasks: [],
+      mediumTasks: [],
+      lowTasks: []
+    }
+
+    incompleteForPriority.forEach((task) => {
+      const priority = getPriorityLabel(task.priority)
+      if (priority === 'high') {
+        priorityDistribution.high++
+        priorityDistribution.highTasks.push(task)
+      } else if (priority === 'medium') {
+        priorityDistribution.medium++
+        priorityDistribution.mediumTasks.push(task)
+      } else {
+        priorityDistribution.low++
+        priorityDistribution.lowTasks.push(task)
+      }
+    })
+
+    const tagMap = new Map<string, { count: number; tasks: Task[] }>()
+    incompleteForPriority.forEach((task) => {
+      const note = taskNoteMap.get(task)
+      const tag = extractTagFromTask(task, note)
+      if (!tagMap.has(tag)) {
+        tagMap.set(tag, { count: 0, tasks: [] })
+      }
+      const existing = tagMap.get(tag)!
+      existing.count++
+      existing.tasks.push(task)
+    })
+
+    const tagDistribution: TagDistribution[] = Array.from(tagMap.entries())
+      .map(([tag, data]) => ({
+        tag,
+        count: data.count,
+        tasks: data.tasks
+      }))
+      .sort((a, b) => b.count - a.count)
+
+    return {
+      dailyCompleted,
+      priorityDistribution,
+      tagDistribution,
+      totalTasks: allTasks.length,
+      completedTasks: completedTasks.length,
+      incompleteTasks: incompleteTasks.length
+    }
+  }, [notes, dateRange])
+}

src/i18n/index.ts

@@ -1,9 +1,16 @@
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
-import { zh_cn_app, zh_cn_common, zh_cn_layout, zh_cn_request, zh_cn_note } from './lang/zh-cn'
-import { en_app, en_common, en_layout, en_request, en_note } from './lang/en'
-import { ja_app, ja_common, ja_layout, ja_request, ja_note } from './lang/ja'
-import { fr_app, fr_common, fr_layout, fr_request, fr_note } from './lang/fr'
+import {
+  zh_cn_app,
+  zh_cn_common,
+  zh_cn_layout,
+  zh_cn_request,
+  zh_cn_note,
+  zh_cn_statistics
+} from './lang/zh-cn'
+import { en_app, en_common, en_layout, en_request, en_note, en_statistics } from './lang/en'
+import { ja_app, ja_common, ja_layout, ja_request, ja_note, ja_statistics } from './lang/ja'
+import { fr_app, fr_common, fr_layout, fr_request, fr_note, fr_statistics } from './lang/fr'
 
 enum LanguageType {
   ZH_CN = 'zh_cn',
@@ -18,36 +25,40 @@ const resources = {
     common: en_common,
     layout: en_layout,
     request: en_request,
-    note: en_note
+    note: en_note,
+    statistics: en_statistics
   },
   [LanguageType.ZH_CN]: {
     app: zh_cn_app,
     common: zh_cn_common,
     layout: zh_cn_layout,
     request: zh_cn_request,
-    note: zh_cn_note
+    note: zh_cn_note,
+    statistics: zh_cn_statistics
   },
   [LanguageType.JA]: {
     app: ja_app,
     common: ja_common,
     layout: ja_layout,
     request: ja_request,
-    note: ja_note
+    note: ja_note,
+    statistics: ja_statistics
   },
   [LanguageType.FR]: {
     app: fr_app,
     common: fr_common,
     layout: fr_layout,
     request: fr_request,
-    note: fr_note
+    note: fr_note,
+    statistics: fr_statistics
   }
 }
 
 const defaultNs = 'common'
 
 i18n.use(initReactI18next).init({
   defaultNS: defaultNs,
-  ns: ['app', 'common', 'layout', 'request', 'note'],
+  ns: ['app', 'common', 'layout', 'request', 'note', 'statistics'],
   resources: resources,
   lng: localStorage.getItem('lang') ?? LanguageType.ZH_CN,
   fallbackLng: LanguageType.EN,

src/i18n/lang/en/index.ts

@@ -3,3 +3,4 @@ export { default as en_common } from './common.json'
 export { default as en_layout } from './layout.json'
 export { default as en_request } from './request.json'
 export { default as en_note } from './note.json'
+export { default as en_statistics } from './statistics.json'

src/i18n/lang/en/layout.json

@@ -3,7 +3,8 @@
     "TITLE": {
       "NOTE": "Note",
       "ARCHIVE": "Archive",
-      "TRASH": "Trash"
+      "TRASH": "Trash",
+      "STATISTICS": "Statistics"
     }
   },
   "HEADER": {