.1470493481763451:784a075923a276e696abf44a8534dc91_69cfc2675b6b7d584ce9c6e9.69cfc3b25b6b7d584ce9c6f7.69cfc3b2b79955e936523e90:Trae CN.T(2026/4/3 21:42:10)

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/SidebarItem/index.tsx

@@ -19,7 +19,7 @@ export default function SidebarItem({
   return (
     <div
       className={clsx(
-        'flex cursor-pointer items-center transition-[background-color,fill,width,border-radius]',
+        'flex cursor-pointer items-center text-gray-800 transition-[background-color,fill,width,border-radius] dark:text-gray-200',
         active
           ? shouldExpand && 'rounded-md bg-emerald-300 dark:bg-emerald-700'
           : shouldExpand && 'rounded-md hover:bg-gray-200 dark:hover:bg-gray-500'

src/components/Sidebar/index.tsx

@@ -44,7 +44,7 @@ export default function Sidebar(): JSX.Element {
     >
       <SidebarItem
         shouldExpand={sidebarMode === 'expand' || (shouldExpand && sidebarMode === 'collapse')}
-        icon={<Icon.Note className="fill-black dark:fill-white" />}
+        icon={<Icon.Note className="fill-current" />}
         title={t('layout:SIDEBAR.TITLE.NOTE')}
         active={activeSidebarItem === ActiveSidebarItem.Note}
         onClick={() => {
@@ -53,7 +53,7 @@ export default function Sidebar(): JSX.Element {
       />
       <SidebarItem
         shouldExpand={sidebarMode === 'expand' || (shouldExpand && sidebarMode === 'collapse')}
-        icon={<Icon.Archive className="fill-black dark:fill-white" />}
+        icon={<Icon.Archive className="fill-current" />}
         title={t('layout:SIDEBAR.TITLE.ARCHIVE')}
         active={activeSidebarItem === ActiveSidebarItem.Archive}
         onClick={() => {
@@ -62,13 +62,22 @@ export default function Sidebar(): JSX.Element {
       />
       <SidebarItem
         shouldExpand={sidebarMode === 'expand' || (shouldExpand && sidebarMode === 'collapse')}
-        icon={<Icon.Trash className="fill-black dark:fill-white" />}
+        icon={<Icon.Trash className="fill-current" />}
         title={t('layout:SIDEBAR.TITLE.TRASH')}
         active={activeSidebarItem === ActiveSidebarItem.Trash}
         onClick={() => {
           onClickSidebarItem(ActiveSidebarItem.Trash)
         }}
       />
+      <SidebarItem
+        shouldExpand={sidebarMode === 'expand' || (shouldExpand && sidebarMode === 'collapse')}
+        icon={<Icon.BarChart className="fill-current" />}
+        title={t('layout:SIDEBAR.TITLE.STATISTICS')}
+        active={activeSidebarItem === ActiveSidebarItem.Statistics}
+        onClick={() => {
+          onClickSidebarItem(ActiveSidebarItem.Statistics)
+        }}
+      />
     </div>
   )
 }

src/components/Svg/Archive.tsx

@@ -13,7 +13,7 @@ export default function Archive({
       viewBox="0 0 24 24"
       width={width}
       height={height}
-      className={clsx('fill-black', className)}
+      className={clsx(className)}
       onClick={onClick}
     >
       <path

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(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/Note.tsx

@@ -13,7 +13,7 @@ export default function Note({
       viewBox="0 0 24 24"
       width={width}
       height={height}
-      className={clsx('fill-black', className)}
+      className={clsx(className)}
       onClick={onClick}
     >
       <g>

src/components/Svg/Trash.tsx

@@ -13,7 +13,7 @@ export default function Trash({
       viewBox="0 0 24 24"
       width={width}
       height={height}
-      className={clsx('fill-black', className)}
+      className={clsx(className)}
       onClick={onClick}
     >
       <g>

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/css/index.css

@@ -16,10 +16,38 @@
   --taskward-theme-color-dark: rgb(54 57 63);
   --taskward-theme-color-darker: rgb(47 49 54);
   --taskward-theme-color-darkest: rgb(32 34 37);
+  --chart-line: #8884d8;
+  --chart-pie-1: #8884d8;
+  --chart-pie-2: #82ca9d;
+  --chart-pie-3: #ffc658;
+  --chart-pie-4: #ff7300;
+  --chart-pie-5: #00c49f;
+  --chart-pie-6: #ffbb28;
+  --chart-pie-7: #ff8042;
+  --chart-pie-8: #0088fe;
+  --chart-bar-high: #ef4444;
+  --chart-bar-medium: #f59e0b;
+  --chart-bar-low: #22c55e;
+  --chart-grid: #e5e7eb;
+  --chart-text: #374151;
 }
 
 .dark {
   color-scheme: dark;
+  --chart-line: #a78bfa;
+  --chart-pie-1: #a78bfa;
+  --chart-pie-2: #6ee7b7;
+  --chart-pie-3: #fcd34d;
+  --chart-pie-4: #fb923c;
+  --chart-pie-5: #34d399;
+  --chart-pie-6: #fbbf24;
+  --chart-pie-7: #fb923c;
+  --chart-pie-8: #60a5fa;
+  --chart-bar-high: #f87171;
+  --chart-bar-medium: #fbbf24;
+  --chart-bar-low: #4ade80;
+  --chart-grid: #4b5563;
+  --chart-text: #d1d5db;
 }
 
 .en {

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'