OCR + reportistica

2026-06-16 12:45:42 +02:00 · 2026-03-27 13:54:07 +01:00
parent cbeedc2d2f
commit bb2060c1ae
26 changed files with 5503 additions and 237 deletions
@@ -1,5 +1,5 @@
 {
-  "name": "pecflow-frontend",
+  "name": "pechub-frontend",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
@@ -251,6 +251,15 @@
        "@babel/core": "^7.0.0-0"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@babel/template": {
      "version": "7.28.6",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -2797,6 +2806,69 @@
        "@babel/types": "^7.28.2"
      }
    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
    "node_modules/@types/estree": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -3378,6 +3450,127 @@
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
      "license": "MIT"
    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/date-fns": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
@@ -3406,6 +3599,12 @@
        }
      }
    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
    "node_modules/deep-eql": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
@@ -3445,6 +3644,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3601,6 +3810,12 @@
        "@types/estree": "^1.0.0"
      }
    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
    "node_modules/expect-type": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
@@ -3861,6 +4076,15 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -4000,6 +4224,12 @@
      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
      "license": "MIT"
    },
+    "node_modules/lodash": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "license": "MIT"
+    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -4184,7 +4414,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -4465,6 +4694,23 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
    "node_modules/prosemirror-changeset": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.4.0.tgz",
@@ -4763,6 +5009,12 @@
        "react-dom": ">=16"
      }
    },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4852,6 +5104,21 @@
        "react-dom": ">=16.8"
      }
    },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/react-style-singleton": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -4874,6 +5141,22 @@
        }
      }
    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4897,6 +5180,38 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/recharts": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
+      "integrity": "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
    "node_modules/resolve": {
      "version": "1.22.11",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -5161,6 +5476,12 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
    "node_modules/tinybench": {
      "version": "2.9.0",
      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -5396,6 +5717,28 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
    "node_modules/vite": {
      "version": "5.4.21",
      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -1,11 +1,11 @@
 {
-  "name": "pecflow-frontend",
+  "name": "pechub-frontend",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "pecflow-frontend",
+      "name": "pechub-frontend",
      "version": "1.0.0",
      "dependencies": {
        "@radix-ui/react-avatar": "^1.1.1",
@@ -42,6 +42,7 @@
        "react-hook-form": "^7.53.0",
        "react-hot-toast": "^2.4.1",
        "react-router-dom": "^6.26.2",
+        "recharts": "^2.13.0",
        "tailwind-merge": "^2.5.2",
        "zustand": "^5.0.0"
      },
@@ -306,6 +307,15 @@
        "@babel/core": "^7.0.0-0"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@babel/template": {
      "version": "7.28.6",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -3548,6 +3558,69 @@
        "@babel/types": "^7.28.2"
      }
    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
    "node_modules/@types/estree": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -4129,6 +4202,127 @@
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
      "license": "MIT"
    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/date-fns": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
@@ -4157,6 +4351,12 @@
        }
      }
    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
    "node_modules/deep-eql": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
@@ -4196,6 +4396,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4352,6 +4562,12 @@
        "@types/estree": "^1.0.0"
      }
    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
    "node_modules/expect-type": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
@@ -4627,6 +4843,15 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -4766,6 +4991,12 @@
      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
      "license": "MIT"
    },
+    "node_modules/lodash": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "license": "MIT"
+    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -4950,7 +5181,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -5231,6 +5461,23 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
    "node_modules/prosemirror-changeset": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.4.0.tgz",
@@ -5529,6 +5776,12 @@
        "react-dom": ">=16"
      }
    },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -5618,6 +5871,21 @@
        "react-dom": ">=16.8"
      }
    },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/react-style-singleton": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -5640,6 +5908,22 @@
        }
      }
    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5663,6 +5947,38 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/recharts": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
+      "integrity": "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
    "node_modules/resolve": {
      "version": "1.22.11",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -5927,6 +6243,12 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
    "node_modules/tinybench": {
      "version": "2.9.0",
      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -6162,6 +6484,28 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
    "node_modules/vite": {
      "version": "5.4.21",
      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -48,6 +48,7 @@
    "react-hot-toast": "^2.4.1",
    "react-router-dom": "^6.26.2",
    "tailwind-merge": "^2.5.2",
+    "recharts": "^2.13.0",
    "zustand": "^5.0.0"
  },
  "devDependencies": {
@@ -12,6 +12,7 @@ import { VirtualBoxesPage } from '@/pages/VirtualBoxes/VirtualBoxesPage'
 import { NotificationsPage } from '@/pages/Notifications/NotificationsPage'
 import { MultiTenantPage } from '@/pages/MultiTenant/MultiTenantPage'
 import { SearchPage } from '@/pages/Search/SearchPage'
+import { ReportsPage } from '@/pages/Reports/ReportsPage'

 /**
 * Routing principale dell'applicazione PEChub.
@@ -80,6 +81,9 @@ export default function App() {
          {/* Ricerca avanzata full-text */}
          <Route path="/search" element={<SearchPage />} />

+          {/* Dashboard e Reportistica */}
+          <Route path="/reports" element={<ReportsPage />} />
+
          {/* Profilo utente */}
          <Route path="/settings" element={<SettingsPage />} />

@@ -0,0 +1,99 @@
+/**
+ * API client per la Dashboard e Reportistica (Fase 7).
+ */
+
+import { apiClient } from './client'
+
+// ─── Tipi ─────────────────────────────────────────────────────────────────────
+
+export interface KpiSummary {
+  received_today: number
+  sent_today: number
+  received_7d: number
+  sent_7d: number
+  received_30d: number
+  sent_30d: number
+  anomalie_attive: number
+  tasso_consegna: number
+  caselle_in_errore: number
+  messaggi_non_letti: number
+  totale_messaggi: number
+}
+
+export interface DailyStat {
+  day: string   // "YYYY-MM-DD"
+  received: number
+  sent: number
+}
+
+export interface OutboundStateStat {
+  state: string
+  count: number
+}
+
+export interface MailboxStat {
+  mailbox_id: string
+  email_address: string
+  display_name: string | null
+  status: string
+  received_total: number
+  sent_total: number
+  anomalie: number
+  non_letti: number
+  last_sync_at: string | null
+}
+
+export interface ReportSummaryResponse {
+  generated_at: string
+  period_days: number
+  kpi: KpiSummary
+  daily_stats: DailyStat[]
+  outbound_states: OutboundStateStat[]
+  mailbox_stats: MailboxStat[]
+}
+
+// ─── API ──────────────────────────────────────────────────────────────────────
+
+export const reportsApi = {
+  /**
+   * Recupera il riepilogo KPI + grafici per la dashboard.
+   * @param days  Numero di giorni per la serie storica (default 7)
+   */
+  getSummary: async (days = 7): Promise<ReportSummaryResponse> => {
+    const res = await apiClient.get<ReportSummaryResponse>('/reports/summary', {
+      params: { days },
+    })
+    return res.data
+  },
+
+  /**
+   * Scarica il report in formato CSV.
+   * Il browser riceverà un file da scaricare.
+   */
+  exportCsv: (params?: {
+    date_from?: string
+    date_to?: string
+    mailbox_id?: string
+  }) => {
+    const url = new URL('/api/v1/reports/export', window.location.origin)
+    url.searchParams.set('format', 'csv')
+    if (params?.date_from) url.searchParams.set('date_from', params.date_from)
+    if (params?.date_to) url.searchParams.set('date_to', params.date_to)
+    if (params?.mailbox_id) url.searchParams.set('mailbox_id', params.mailbox_id)
+    return url.toString()
+  },
+
+  /**
+   * Scarica il report in formato PDF.
+   */
+  exportPdf: (params?: {
+    date_from?: string
+    date_to?: string
+  }) => {
+    const url = new URL('/api/v1/reports/export', window.location.origin)
+    url.searchParams.set('format', 'pdf')
+    if (params?.date_from) url.searchParams.set('date_from', params.date_from)
+    if (params?.date_to) url.searchParams.set('date_to', params.date_to)
+    return url.toString()
+  },
+}
@@ -2,13 +2,17 @@
 * API client per le impostazioni del tenant.
 *
 * Endpoint:
- *   GET  /api/v1/settings  → legge configurazione (admin)
- *   PUT  /api/v1/settings  → aggiorna configurazione (admin)
+ *   GET  /api/v1/settings                  -> legge configurazione (admin)
+ *   PUT  /api/v1/settings                  -> aggiorna configurazione (admin)
+ *   GET  /api/v1/settings/indexing/stats   -> statistiche indicizzazione
+ *   GET  /api/v1/settings/indexing/status  -> stato job reindex
+ *   POST /api/v1/settings/indexing/reindex -> avvia reindex
+ *   DELETE /api/v1/settings/indexing/reindex -> cancella reindex
 */

 import { apiClient } from './client'

-// ─── Tipi ──────────────────────────────────────────────────────────────────
+// ─── Tipi impostazioni generali ────────────────────────────────────────────

 export type ArchivalMode = 'mock' | 'production'

@@ -37,7 +41,38 @@ export interface TenantSettingsUpdate {
  archival_notes?: string
 }

-// ─── Client ────────────────────────────────────────────────────────────────
+// ─── Tipi indicizzazione full-text ─────────────────────────────────────────
+
+export interface IndexingStats {
+  total_messages: number
+  indexed_messages: number
+  unindexed_messages: number
+  coverage_pct: number       // 0-100
+
+  attachments_total: number
+  attachments_extracted: number
+  attachments_pct: number    // 0-100
+}
+
+export type ReindexMode = 'full' | 'differential'
+export type JobStatus = 'idle' | 'running' | 'completed' | 'failed' | 'cancelled'
+
+export interface IndexingJobStatus {
+  status: JobStatus
+  mode: ReindexMode | null
+  total: number
+  processed: number
+  progress_pct: number
+
+  started_at: string | null    // ISO datetime
+  finished_at: string | null   // ISO datetime
+  started_by: string | null    // email
+  elapsed_seconds: number | null
+  is_stale: boolean            // running da piu' di 2 ore
+  error: string | null
+}
+
+// ─── Client impostazioni generali ──────────────────────────────────────────

 export const settingsApi = {
  /**
@@ -57,4 +92,97 @@ export const settingsApi = {
    const { data } = await apiClient.put<TenantSettingsResponse>('/settings', payload)
    return data
  },
+
+  // ── Indicizzazione full-text ──────────────────────────────────────────────
+
+  /**
+   * Restituisce le statistiche di copertura dell'indicizzazione.
+   * @param tenantId - (solo super_admin) UUID del tenant target
+   */
+  getIndexingStats: async (tenantId?: string): Promise<IndexingStats> => {
+    const params = tenantId ? { tenant_id: tenantId } : undefined
+    const { data } = await apiClient.get<IndexingStats>('/settings/indexing/stats', { params })
+    return data
+  },
+
+  /**
+   * Restituisce lo stato del job di reindex in corso (o idle se nessuno).
+   * @param tenantId - (solo super_admin) UUID del tenant target
+   */
+  getIndexingStatus: async (tenantId?: string): Promise<IndexingJobStatus> => {
+    const params = tenantId ? { tenant_id: tenantId } : undefined
+    const { data } = await apiClient.get<IndexingJobStatus>('/settings/indexing/status', { params })
+    return data
+  },
+
+  /**
+   * Avvia un job di reindex in background.
+   * @param mode - 'differential' (solo NULL) o 'full' (tutti i messaggi)
+   * @param tenantId - (solo super_admin) UUID del tenant target
+   */
+  startReindex: async (mode: ReindexMode, tenantId?: string): Promise<IndexingJobStatus> => {
+    const params = tenantId ? { tenant_id: tenantId } : undefined
+    const { data } = await apiClient.post<IndexingJobStatus>(
+      '/settings/indexing/reindex',
+      { mode },
+      { params }
+    )
+    return data
+  },
+
+  /**
+   * Cancella il job di reindex in corso.
+   * @param tenantId - (solo super_admin) UUID del tenant target
+   */
+  cancelReindex: async (tenantId?: string): Promise<IndexingJobStatus> => {
+    const params = tenantId ? { tenant_id: tenantId } : undefined
+    const { data } = await apiClient.delete<IndexingJobStatus>(
+      '/settings/indexing/reindex',
+      { params }
+    )
+    return data
+  },
+
+  // ── Scansione allegati ────────────────────────────────────────────────────
+
+  /**
+   * Restituisce lo stato del job di scansione allegati (idle se nessuno).
+   * @param tenantId - (solo super_admin) UUID del tenant target
+   */
+  getRescanStatus: async (tenantId?: string): Promise<IndexingJobStatus> => {
+    const params = tenantId ? { tenant_id: tenantId } : undefined
+    const { data } = await apiClient.get<IndexingJobStatus>(
+      '/settings/indexing/rescan-status',
+      { params }
+    )
+    return data
+  },
+
+  /**
+   * Avvia un job di scansione allegati in background.
+   * @param force - false: solo allegati senza testo estratto; true: tutti
+   * @param tenantId - (solo super_admin) UUID del tenant target
+   */
+  startRescan: async (force: boolean = false, tenantId?: string): Promise<IndexingJobStatus> => {
+    const params = tenantId ? { tenant_id: tenantId } : undefined
+    const { data } = await apiClient.post<IndexingJobStatus>(
+      '/settings/indexing/rescan',
+      { force },
+      { params }
+    )
+    return data
+  },
+
+  /**
+   * Cancella il job di scansione allegati in corso.
+   * @param tenantId - (solo super_admin) UUID del tenant target
+   */
+  cancelRescan: async (tenantId?: string): Promise<IndexingJobStatus> => {
+    const params = tenantId ? { tenant_id: tenantId } : undefined
+    const { data } = await apiClient.delete<IndexingJobStatus>(
+      '/settings/indexing/rescan',
+      { params }
+    )
+    return data
+  },
 }
@@ -51,6 +51,7 @@ import {
  Building2,
  Trash2,
  Search,
+  BarChart2,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useAuth } from '@/hooks/useAuth'
@@ -344,10 +345,10 @@ export function Sidebar() {
          </div>
        )}

-        {/* ── Ricerca avanzata ── */}
+        {/* ── Ricerca avanzata + Dashboard ── */}
        <div>
          <div className="border-t border-gray-700 mx-4 mb-3" />
-          <div className="px-2">
+          <div className="px-2 space-y-0.5">
            <NavLink
              to="/search"
              className={({ isActive }) =>
@@ -364,6 +365,22 @@ export function Sidebar() {
              <Search className="h-4 w-4 flex-shrink-0" />
              {!collapsed && <span>Ricerca</span>}
            </NavLink>
+            <NavLink
+              to="/reports"
+              className={({ isActive }) =>
+                cn(
+                  'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-blue-600 text-white'
+                    : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                  collapsed && 'justify-center px-2',
+                )
+              }
+              title={collapsed ? 'Dashboard / Report' : undefined}
+            >
+              <BarChart2 className="h-4 w-4 flex-shrink-0" />
+              {!collapsed && <span>Dashboard</span>}
+            </NavLink>
          </div>
        </div>

@@ -0,0 +1,528 @@
+/**
+ * ReportsPage – Dashboard e Reportistica (Fase 7).
+ *
+ * Visualizza:
+ * - 6 KPI cards (ricevute oggi, inviate oggi, anomalie, tasso consegna,
+ *               caselle in errore, messaggi non letti)
+ * - Selettore periodo (7 / 30 giorni)
+ * - Grafico a barre: PEC ricevute vs inviate per giorno
+ * - Grafico a torta: distribuzione stati messaggi outbound
+ * - Tabella: dettaglio per casella
+ * - Pulsanti export CSV e PDF
+ */
+
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+} from 'recharts'
+import {
+  Inbox,
+  Send,
+  AlertTriangle,
+  CheckCircle2,
+  ServerCrash,
+  MailOpen,
+  Download,
+  FileText,
+  RefreshCw,
+  BarChart2,
+} from 'lucide-react'
+import { format, parseISO } from 'date-fns'
+import { it } from 'date-fns/locale'
+import { reportsApi } from '@/api/reports.api'
+import { cn } from '@/lib/utils'
+
+// ─── Costanti ─────────────────────────────────────────────────────────────────
+
+const PERIOD_OPTIONS = [
+  { label: '7 giorni', value: 7 },
+  { label: '30 giorni', value: 30 },
+  { label: '90 giorni', value: 90 },
+]
+
+const STATE_COLORS: Record<string, string> = {
+  delivered:         '#22c55e',
+  accepted:          '#3b82f6',
+  sent:              '#8b5cf6',
+  anomaly:           '#ef4444',
+  failed:            '#dc2626',
+  queued:            '#f59e0b',
+  draft:             '#6b7280',
+  unknown:           '#9ca3af',
+}
+
+const STATE_LABELS: Record<string, string> = {
+  delivered:         'Consegnata',
+  accepted:          'Accettata',
+  sent:              'Inviata',
+  anomaly:           'Anomalia',
+  failed:            'Fallita',
+  queued:            'In coda',
+  draft:             'Bozza',
+  unknown:           'Sconosciuto',
+}
+
+const STATUS_BADGE: Record<string, string> = {
+  active:  'bg-green-100 text-green-800',
+  paused:  'bg-yellow-100 text-yellow-800',
+  error:   'bg-red-100 text-red-800',
+  deleted: 'bg-gray-100 text-gray-600',
+}
+
+// ─── Componente KPI card ──────────────────────────────────────────────────────
+
+interface KpiCardProps {
+  title: string
+  value: string | number
+  subtitle?: string
+  icon: React.ReactNode
+  color: string
+  alert?: boolean
+}
+
+function KpiCard({ title, value, subtitle, icon, color, alert }: KpiCardProps) {
+  return (
+    <div
+      className={cn(
+        'bg-white rounded-xl border p-5 flex items-start gap-4',
+        alert && 'border-red-300 bg-red-50',
+      )}
+    >
+      <div className={cn('p-2.5 rounded-lg flex-shrink-0', color)}>
+        {icon}
+      </div>
+      <div className="min-w-0">
+        <p className="text-sm text-gray-500 font-medium truncate">{title}</p>
+        <p className={cn('text-2xl font-bold mt-0.5', alert ? 'text-red-700' : 'text-gray-900')}>
+          {value}
+        </p>
+        {subtitle && (
+          <p className="text-xs text-gray-400 mt-0.5">{subtitle}</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ─── Tooltip grafico barre ────────────────────────────────────────────────────
+
+function CustomBarTooltip({ active, payload, label }: any) {
+  if (!active || !payload?.length) return null
+  return (
+    <div className="bg-white border rounded-lg shadow-lg p-3 text-sm">
+      <p className="font-semibold text-gray-700 mb-1">{label}</p>
+      {payload.map((p: any) => (
+        <p key={p.dataKey} style={{ color: p.fill }}>
+          {p.name}: <strong>{p.value}</strong>
+        </p>
+      ))}
+    </div>
+  )
+}
+
+// ─── Tooltip grafico torta ────────────────────────────────────────────────────
+
+function CustomPieTooltip({ active, payload }: any) {
+  if (!active || !payload?.length) return null
+  const item = payload[0]
+  return (
+    <div className="bg-white border rounded-lg shadow-lg p-3 text-sm">
+      <p className="font-semibold" style={{ color: item.payload.fill }}>
+        {STATE_LABELS[item.name] ?? item.name}
+      </p>
+      <p className="text-gray-700">Totale: <strong>{item.value}</strong></p>
+    </div>
+  )
+}
+
+// ─── Pagina principale ────────────────────────────────────────────────────────
+
+export function ReportsPage() {
+  const [days, setDays] = useState(7)
+
+  const { data, isLoading, isError, refetch, isFetching } = useQuery({
+    queryKey: ['reports-summary', days],
+    queryFn: () => reportsApi.getSummary(days),
+    staleTime: 2 * 60 * 1000,
+    refetchOnWindowFocus: false,
+  })
+
+  // ── Formatta le date per l'asse X del grafico ────────────────────────────
+  const chartData = (data?.daily_stats ?? []).map((s) => ({
+    giorno: format(parseISO(s.day), 'dd/MM', { locale: it }),
+    Ricevute: s.received,
+    Inviate: s.sent,
+  }))
+
+  const pieData = (data?.outbound_states ?? [])
+    .filter((s) => s.count > 0)
+    .map((s) => ({
+      name: s.state,
+      value: s.count,
+      fill: STATE_COLORS[s.state] ?? '#9ca3af',
+    }))
+
+  const kpi = data?.kpi
+  const generatedAt = data?.generated_at
+    ? format(parseISO(data.generated_at), "dd/MM/yyyy HH:mm", { locale: it })
+    : null
+
+  // ── URL export con token auth (il browser apre con i cookie di sessione) ──
+  const handleExport = (format: 'csv' | 'pdf') => {
+    const url = format === 'csv'
+      ? reportsApi.exportCsv()
+      : reportsApi.exportPdf()
+
+    // Apre il link in una nuova scheda; il token JWT viene inviato
+    // automaticamente grazie all'interceptor axios, ma per i download
+    // diretti usiamo fetch con il token dallo store.
+    const token = localStorage.getItem('access_token')
+    if (!token) {
+      window.open(url, '_blank')
+      return
+    }
+    fetch(url, { headers: { Authorization: `Bearer ${token}` } })
+      .then((res) => {
+        if (!res.ok) throw new Error('Errore download')
+        return res.blob()
+      })
+      .then((blob) => {
+        const ext = format === 'csv' ? 'csv' : 'pdf'
+        const ts = new Date().toISOString().slice(0, 16).replace('T', '_').replace(':', '')
+        const filename = `pechub_report_${ts}.${ext}`
+        const a = document.createElement('a')
+        a.href = URL.createObjectURL(blob)
+        a.download = filename
+        a.click()
+        URL.revokeObjectURL(a.href)
+      })
+      .catch(() => alert('Errore durante il download del report'))
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+
+  return (
+    <div className="flex flex-col h-full overflow-y-auto bg-gray-50">
+      {/* ── Intestazione ── */}
+      <div className="sticky top-0 z-10 bg-white border-b px-6 py-4 flex flex-col sm:flex-row sm:items-center gap-3">
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          <BarChart2 className="h-6 w-6 text-blue-600 flex-shrink-0" />
+          <div className="min-w-0">
+            <h1 className="text-xl font-bold text-gray-900">Dashboard</h1>
+            {generatedAt && (
+              <p className="text-xs text-gray-400">Aggiornato il {generatedAt}</p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {/* Selettore periodo */}
+          <div className="flex rounded-lg border bg-white overflow-hidden text-sm">
+            {PERIOD_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => setDays(opt.value)}
+                className={cn(
+                  'px-3 py-1.5 font-medium transition-colors',
+                  days === opt.value
+                    ? 'bg-blue-600 text-white'
+                    : 'text-gray-600 hover:bg-gray-50',
+                )}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Aggiorna */}
+          <button
+            onClick={() => refetch()}
+            disabled={isFetching}
+            className="p-2 rounded-lg border bg-white text-gray-600 hover:bg-gray-50 disabled:opacity-50 transition-colors"
+            title="Aggiorna dati"
+          >
+            <RefreshCw className={cn('h-4 w-4', isFetching && 'animate-spin')} />
+          </button>
+
+          {/* Export CSV */}
+          <button
+            onClick={() => handleExport('csv')}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-white text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+          >
+            <Download className="h-4 w-4" />
+            CSV
+          </button>
+
+          {/* Export PDF */}
+          <button
+            onClick={() => handleExport('pdf')}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-white text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+          >
+            <FileText className="h-4 w-4" />
+            PDF
+          </button>
+        </div>
+      </div>
+
+      {/* ── Contenuto ── */}
+      <div className="flex-1 p-6 space-y-6 max-w-7xl mx-auto w-full">
+
+        {/* ── Loading / Errore ── */}
+        {isLoading && (
+          <div className="flex items-center justify-center h-64 text-gray-500">
+            <RefreshCw className="h-6 w-6 animate-spin mr-2" />
+            Caricamento dati...
+          </div>
+        )}
+
+        {isError && (
+          <div className="bg-red-50 border border-red-200 rounded-xl p-6 text-center text-red-700">
+            Errore nel caricamento dei dati. Riprova.
+          </div>
+        )}
+
+        {data && (
+          <>
+            {/* ── Riga KPI ── */}
+            <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4">
+              <KpiCard
+                title="Ricevute oggi"
+                value={kpi!.received_today}
+                subtitle={`${kpi!.received_7d} negli ultimi 7gg`}
+                icon={<Inbox className="h-5 w-5 text-blue-600" />}
+                color="bg-blue-50"
+              />
+              <KpiCard
+                title="Inviate oggi"
+                value={kpi!.sent_today}
+                subtitle={`${kpi!.sent_7d} negli ultimi 7gg`}
+                icon={<Send className="h-5 w-5 text-indigo-600" />}
+                color="bg-indigo-50"
+              />
+              <KpiCard
+                title="Anomalie attive"
+                value={kpi!.anomalie_attive}
+                icon={<AlertTriangle className="h-5 w-5 text-orange-600" />}
+                color="bg-orange-50"
+                alert={kpi!.anomalie_attive > 0}
+              />
+              <KpiCard
+                title="Tasso consegna"
+                value={`${kpi!.tasso_consegna}%`}
+                icon={<CheckCircle2 className="h-5 w-5 text-green-600" />}
+                color="bg-green-50"
+              />
+              <KpiCard
+                title="Caselle in errore"
+                value={kpi!.caselle_in_errore}
+                icon={<ServerCrash className="h-5 w-5 text-red-600" />}
+                color="bg-red-50"
+                alert={kpi!.caselle_in_errore > 0}
+              />
+              <KpiCard
+                title="Non letti"
+                value={kpi!.messaggi_non_letti}
+                icon={<MailOpen className="h-5 w-5 text-purple-600" />}
+                color="bg-purple-50"
+              />
+            </div>
+
+            {/* ── Grafici ── */}
+            <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+
+              {/* Grafico a barre (2/3) */}
+              <div className="xl:col-span-2 bg-white rounded-xl border p-5">
+                <h2 className="text-base font-semibold text-gray-800 mb-4">
+                  Attivita PEC – ultimi {days} giorni
+                </h2>
+                {chartData.length === 0 ? (
+                  <div className="h-52 flex items-center justify-center text-gray-400 text-sm">
+                    Nessun dato nel periodo selezionato
+                  </div>
+                ) : (
+                  <ResponsiveContainer width="100%" height={220}>
+                    <BarChart
+                      data={chartData}
+                      margin={{ top: 4, right: 12, left: 0, bottom: 0 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                      <XAxis
+                        dataKey="giorno"
+                        tick={{ fontSize: 11, fill: '#6b7280' }}
+                        tickLine={false}
+                        axisLine={false}
+                      />
+                      <YAxis
+                        tick={{ fontSize: 11, fill: '#6b7280' }}
+                        tickLine={false}
+                        axisLine={false}
+                        allowDecimals={false}
+                      />
+                      <Tooltip content={<CustomBarTooltip />} />
+                      <Legend
+                        wrapperStyle={{ fontSize: 12, paddingTop: 8 }}
+                      />
+                      <Bar
+                        dataKey="Ricevute"
+                        fill="#3b82f6"
+                        radius={[3, 3, 0, 0]}
+                        maxBarSize={24}
+                      />
+                      <Bar
+                        dataKey="Inviate"
+                        fill="#8b5cf6"
+                        radius={[3, 3, 0, 0]}
+                        maxBarSize={24}
+                      />
+                    </BarChart>
+                  </ResponsiveContainer>
+                )}
+              </div>
+
+              {/* Grafico a torta (1/3) */}
+              <div className="bg-white rounded-xl border p-5">
+                <h2 className="text-base font-semibold text-gray-800 mb-4">
+                  Stato messaggi outbound
+                </h2>
+                {pieData.length === 0 ? (
+                  <div className="h-52 flex items-center justify-center text-gray-400 text-sm">
+                    Nessun messaggio outbound
+                  </div>
+                ) : (
+                  <>
+                    <ResponsiveContainer width="100%" height={160}>
+                      <PieChart>
+                        <Pie
+                          data={pieData}
+                          cx="50%"
+                          cy="50%"
+                          innerRadius={45}
+                          outerRadius={72}
+                          paddingAngle={2}
+                          dataKey="value"
+                        >
+                          {pieData.map((entry, index) => (
+                            <Cell key={index} fill={entry.fill} />
+                          ))}
+                        </Pie>
+                        <Tooltip content={<CustomPieTooltip />} />
+                      </PieChart>
+                    </ResponsiveContainer>
+                    {/* Legenda manuale */}
+                    <div className="mt-2 space-y-1">
+                      {pieData.map((entry) => (
+                        <div key={entry.name} className="flex items-center justify-between text-xs">
+                          <div className="flex items-center gap-1.5">
+                            <span
+                              className="inline-block h-2.5 w-2.5 rounded-full flex-shrink-0"
+                              style={{ backgroundColor: entry.fill }}
+                            />
+                            <span className="text-gray-600">
+                              {STATE_LABELS[entry.name] ?? entry.name}
+                            </span>
+                          </div>
+                          <span className="font-semibold text-gray-800">{entry.value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* ── Tabella caselle ── */}
+            {data.mailbox_stats.length > 0 && (
+              <div className="bg-white rounded-xl border">
+                <div className="px-5 py-4 border-b">
+                  <h2 className="text-base font-semibold text-gray-800">
+                    Dettaglio per casella
+                  </h2>
+                </div>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="bg-gray-50 border-b">
+                        <th className="text-left px-5 py-3 font-semibold text-gray-600">Casella</th>
+                        <th className="text-center px-4 py-3 font-semibold text-gray-600">Stato</th>
+                        <th className="text-right px-4 py-3 font-semibold text-gray-600">Ricevute</th>
+                        <th className="text-right px-4 py-3 font-semibold text-gray-600">Inviate</th>
+                        <th className="text-right px-4 py-3 font-semibold text-gray-600">Anomalie</th>
+                        <th className="text-right px-4 py-3 font-semibold text-gray-600">Non letti</th>
+                        <th className="text-right px-5 py-3 font-semibold text-gray-600">Ultima sync</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100">
+                      {data.mailbox_stats.map((mb) => (
+                        <tr key={mb.mailbox_id} className="hover:bg-gray-50 transition-colors">
+                          <td className="px-5 py-3">
+                            <div className="font-medium text-gray-900 truncate max-w-xs">
+                              {mb.display_name || mb.email_address}
+                            </div>
+                            {mb.display_name && (
+                              <div className="text-xs text-gray-400">{mb.email_address}</div>
+                            )}
+                          </td>
+                          <td className="px-4 py-3 text-center">
+                            <span
+                              className={cn(
+                                'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
+                                STATUS_BADGE[mb.status] ?? 'bg-gray-100 text-gray-600',
+                              )}
+                            >
+                              {mb.status}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3 text-right font-medium text-gray-900">
+                            {mb.received_total}
+                          </td>
+                          <td className="px-4 py-3 text-right font-medium text-gray-900">
+                            {mb.sent_total}
+                          </td>
+                          <td className="px-4 py-3 text-right">
+                            {mb.anomalie > 0 ? (
+                              <span className="font-semibold text-red-600">{mb.anomalie}</span>
+                            ) : (
+                              <span className="text-gray-400">0</span>
+                            )}
+                          </td>
+                          <td className="px-4 py-3 text-right">
+                            {mb.non_letti > 0 ? (
+                              <span className="font-semibold text-blue-600">{mb.non_letti}</span>
+                            ) : (
+                              <span className="text-gray-400">0</span>
+                            )}
+                          </td>
+                          <td className="px-5 py-3 text-right text-gray-500 text-xs">
+                            {mb.last_sync_at
+                              ? format(parseISO(mb.last_sync_at), 'dd/MM HH:mm', { locale: it })
+                              : '—'}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+
+            {/* Footer */}
+            <p className="text-xs text-gray-400 text-center pb-2">
+              Totale messaggi nel sistema: {kpi!.totale_messaggi.toLocaleString('it-IT')}
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}