diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44032d4f..364f91d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,8 +3,16 @@
 
 
 
-<h3>Version 2.2.4 - ??/??/2024</h3>
+<h3>Version 2.3.0 - ??/??/2024</h3>
       <ul>
+        <li>It's now possible to search for read/unread and starred/unsterred in the Custom View [<a href="https://github.com/micz/ThunderStats/issues/158">#158</a>].</li>
+        <li>It's now possible to search for a keyword in the subject in the Custom View [<a href="https://github.com/micz/ThunderStats/issues/354">#354</a>].</li>
+        <li>Added the sent / received domains chart [<a href="https://github.com/micz/ThunderStats/issues/380">#380</a>].</li>
+        <li>Added the sent / received folders chart [<a href="https://github.com/micz/ThunderStats/issues/357">#357</a>].</li>
+        <li>Added the sent / received tags chart [<a href="https://github.com/micz/ThunderStats/issues/359">#359</a>].</li>
+        <li>Added a details view of the Inbox Zero Dates chart [<a href="https://github.com/micz/ThunderStats/issues/350">#350</a>]</li>
+        <li>The advanced filters panel opening and closing spacing is now fixed [<a href="https://github.com/micz/ThunderStats/issues/386">#386</a>].</li>
+        <li>Added an option to do not load data in the Custom View at startup.</li>
         <li>In Thunderbird 128 is now possible again to choose to open a folder from the Inbox Zero Folder Chart in a new tab or not.</li>
         <li>...</li>
       </ul>
@@ -27,7 +35,7 @@
         <li>The toolbar button is now always visible.</li>
         <li>Folders select dropdown text color fixed.</li>
         <li>Weekdays chart fixed [<a href="https://github.com/micz/ThunderStats/issues/374">#374</a>].</li>
-        <li>Improved the positioning of the labels on the Inbox Zero Folders graphs [<a href="https://github.com/micz/ThunderStats/issues/370">#370</a>, <a href="https://github.com/micz/ThunderStats/issues/373">#373</a>].</li>
+        <li>Improved the positioning of the labels on the Inbox Zero Folders charts [<a href="https://github.com/micz/ThunderStats/issues/370">#370</a>, <a href="https://github.com/micz/ThunderStats/issues/373">#373</a>].</li>
         <li>In the advanced filters panel is now possible to check the "include subolders" checkbox clicking on its label [<a href="https://github.com/micz/ThunderStats/issues/371">#371</a>].</li>
         <li>Inbox percentage loading indicator timing fixed [<a href="https://github.com/micz/ThunderStats/issues/376">#376</a>].</li>
         <li>Fixed a label error in the weekdays chart, which misordered the days relative to the number of emails.</li>
@@ -39,7 +47,7 @@
       <ul>
         <li>When executing a custom query for a single day, now is used the single day view [<a href="https://github.com/micz/ThunderStats/issues/315">#315</a>].</li>
         <li>The Inbox Zero Folders Chart is no longer partially hidden under the bottom border in certain circumstances.</li>
-        <li>The labels on the Inbox Zero Folders graphs no longer overlap [<a href="https://github.com/micz/ThunderStats/issues/341">#341</a>].</li>
+        <li>The labels on the Inbox Zero Folders charts no longer overlap [<a href="https://github.com/micz/ThunderStats/issues/341">#341</a>].</li>
         <li>Added the precentage of mails moved from inbox in all the single day views [<a href="https://github.com/micz/ThunderStats/issues/343">#343</a>].</li>
         <li>Fixed a concurrency bug in displaying the elapsed time. It now always shows the maximum value.</li>
         <li>Added a warning if querying too much days in the Custom View. Added an option in the advanced tab to choose the maximum number of days to query without a warning. It's also possible to disable the warning completely [<a href="https://github.com/micz/ThunderStats/issues/281">#281</a>].</li>
@@ -59,8 +67,8 @@
         <li>Added an hourly email extract divider in the Today and Yesterday tabs.</li>
        </ul>
        <li>Added the total number of mails in aggregate stats in Today Tab, Yesterday Tab, 7 Days Tab and Custom View Tabs. This total also considers business days only if the corresponding option is active [<a href="https://github.com/micz/ThunderStats/issues/323">#323</a>].</li>
-       <li>Added an option to display today's time graph lines only up to the current hour [<a href="https://github.com/micz/ThunderStats/issues/302">#302</a>].</li>
-       <li>In today's time graph, a vertical line has been added to indicate the current hour [<a href="https://github.com/micz/ThunderStats/issues/79">#79</a>].</li>
+       <li>Added an option to display Today Tab's Time Chart lines only up to the current hour [<a href="https://github.com/micz/ThunderStats/issues/302">#302</a>].</li>
+       <li>In Today Tab's Time Chart, a vertical line has been added to indicate the current hour [<a href="https://github.com/micz/ThunderStats/issues/79">#79</a>].</li>
        <li>Some options have been moved from the options page "Advanced" tab to the "General" tab.</li>
        <li>Displaying the last execution time for each tab [<a href="https://github.com/micz/ThunderStats/issues/314">#314</a>].</li>
        <li>Changed the color of the 'Today' bar in the 7-Days Tab Chart [<a href="https://github.com/micz/ThunderStats/issues/326">#326</a>].</li>
@@ -90,7 +98,7 @@
        <li>Added dark mode [<a href="https://github.com/micz/ThunderStats/issues/197">#197</a>].</li>
        <li>It's now possibile to define a locale for the datepicker different from the default one [<a href="https://github.com/micz/ThunderStats/issues/238">#238</a>].</li>
        <li>Added an option to choose to remember last opened tab [<a href="https://github.com/micz/ThunderStats/issues/232">#232</a>].</li>
-       <li>The Time Graph is now a line graph [<a href="https://github.com/micz/ThunderStats/issues/198">#198</a>].</li>
+       <li>The Time Chart is now a line chart [<a href="https://github.com/micz/ThunderStats/issues/198">#198</a>].</li>
        <li>Added info for the last days in the Yesterday Tab [<a href="https://github.com/micz/ThunderStats/issues/276">#276</a>].</li>
        <li>The elaboration time is now shown [<a href="https://github.com/micz/ThunderStats/issues/218">#218</a>].</li>
        <li>The results are displayed as they become available [<a href="https://github.com/micz/ThunderStats/issues/219">#219</a>].</li>
diff --git a/README.md b/README.md
index 7fa0a6b1..c04156a1 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ More info on [#194](https://github.com/micz/ThunderStats/issues/194) and [#195](
 
 ## Features
 - Sent and received mails
-- Day time graph
+- Day time chart
 - Top senders and recipients list
 - Inbox Zero status
 - Multiple days and Custom range date statistics with:
@@ -101,3 +101,5 @@ Loading SVGs thanks to https://loading.io
 
 Business Days and Export Data icons thanks to https://www.iconarchive.com/artist/custom-icon-design.html
 
+[Fluent Design System](https://www.iconfinder.com/fluent-designsystem) for the sorting icons
+
diff --git a/jsconfig.json b/jsconfig.json
index 6bb87691..7ee92a05 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -2,8 +2,9 @@
   "compilerOptions": {
     "paths": {
       "@/*": ["./src/*"],
-      "@statslib/*": ["./statslib/*"]
+      "@statslib/*": ["./statslib/*"],
+      "@public/*": ["./public/*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", ".github"],
 }
diff --git a/package-lock.json b/package-lock.json
index a745cb03..fd3ac164 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "thunderstats",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "thunderstats",
-      "version": "2.2.4",
+      "version": "2.3.0",
       "dependencies": {
         "@imengyu/vue3-context-menu": "^1.4.1",
         "@vueform/multiselect": "^2.6.10",
@@ -22,10 +22,32 @@
         "vite": "^5.4.6"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/parser": {
-      "version": "7.24.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz",
-      "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.26.0"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -33,6 +55,19 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
+      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -41,6 +76,7 @@
         "ppc64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "aix"
@@ -57,6 +93,7 @@
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -73,6 +110,7 @@
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -89,6 +127,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -105,6 +144,7 @@
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -121,6 +161,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -137,6 +178,7 @@
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -153,6 +195,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -169,6 +212,7 @@
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -185,6 +229,7 @@
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -201,6 +246,7 @@
         "ia32"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -217,6 +263,7 @@
         "loong64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -233,6 +280,7 @@
         "mips64el"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -249,6 +297,7 @@
         "ppc64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -265,6 +314,7 @@
         "riscv64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -281,6 +331,7 @@
         "s390x"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -297,6 +348,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -313,6 +365,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "netbsd"
@@ -329,6 +382,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "openbsd"
@@ -345,6 +399,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "sunos"
@@ -361,6 +416,7 @@
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -377,6 +433,7 @@
         "ia32"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -393,6 +450,7 @@
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -402,238 +460,286 @@
       }
     },
     "node_modules/@imengyu/vue3-context-menu": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@imengyu/vue3-context-menu/-/vue3-context-menu-1.4.1.tgz",
-      "integrity": "sha512-34WInBVx0Mr0zSsRCQWG7ezHk0JzOuZqE4T8ywI82mbk/jfWBRtTkKHYSZbtmw2oYEfDFwCWdM/gur7QFAXYMA=="
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@imengyu/vue3-context-menu/-/vue3-context-menu-1.4.3.tgz",
+      "integrity": "sha512-W2rT+xllLSg+u/Z36jE+mrjzO8gCIw0YDDyBxywuASmwrBotU4deftW8Zz9GK/QEHBRNyV5nBINZJo2J257Wlg==",
+      "license": "MIT"
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT"
     },
     "node_modules/@kurkle/color": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
-      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+      "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
-      "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.26.0.tgz",
+      "integrity": "sha512-gJNwtPDGEaOEgejbaseY6xMFu+CPltsc8/T+diUTTbOQLqD+bnrJq9ulH6WD69TqwqWmrfRAtUv30cCFZlbGTQ==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz",
-      "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.26.0.tgz",
+      "integrity": "sha512-YJa5Gy8mEZgz5JquFruhJODMq3lTHWLm1fOy+HIANquLzfIOzE9RA5ie3JjCdVb9r46qfAQY/l947V0zfGJ0OQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz",
-      "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.26.0.tgz",
+      "integrity": "sha512-ErTASs8YKbqTBoPLp/kA1B1Um5YSom8QAc4rKhg7b9tyyVqDBlQxy7Bf2wW7yIlPGPg2UODDQcbkTlruPzDosw==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz",
-      "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.26.0.tgz",
+      "integrity": "sha512-wbgkYDHcdWW+NqP2mnf2NOuEbOLzDblalrOWcPyY6+BRbVhliavon15UploG7PpBRQ2bZJnbmh8o3yLoBvDIHA==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ]
     },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.26.0.tgz",
+      "integrity": "sha512-Y9vpjfp9CDkAG4q/uwuhZk96LP11fBz/bYdyg9oaHYhtGZp7NrbkQrj/66DYMMP2Yo/QPAsVHkV891KyO52fhg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.26.0.tgz",
+      "integrity": "sha512-A/jvfCZ55EYPsqeaAt/yDAG4q5tt1ZboWMHEvKAH9Zl92DWvMIbnZe/f/eOXze65aJaaKbL+YeM0Hz4kLQvdwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz",
-      "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.26.0.tgz",
+      "integrity": "sha512-paHF1bMXKDuizaMODm2bBTjRiHxESWiIyIdMugKeLnjuS1TCS54MF5+Y5Dx8Ui/1RBPVRE09i5OUlaLnv8OGnA==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz",
-      "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.26.0.tgz",
+      "integrity": "sha512-cwxiHZU1GAs+TMxvgPfUDtVZjdBdTsQwVnNlzRXC5QzIJ6nhfB4I1ahKoe9yPmoaA/Vhf7m9dB1chGPpDRdGXg==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz",
-      "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.26.0.tgz",
+      "integrity": "sha512-4daeEUQutGRCW/9zEo8JtdAgtJ1q2g5oHaoQaZbMSKaIWKDQwQ3Yx0/3jJNmpzrsScIPtx/V+1AfibLisb3AMQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz",
-      "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.26.0.tgz",
+      "integrity": "sha512-eGkX7zzkNxvvS05ROzJ/cO/AKqNvR/7t1jA3VZDi2vRniLKwAWxUr85fH3NsvtxU5vnUUKFHKh8flIBdlo2b3Q==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz",
-      "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.26.0.tgz",
+      "integrity": "sha512-Odp/lgHbW/mAqw/pU21goo5ruWsytP7/HCC/liOt0zcGG0llYWKrd10k9Fj0pdj3prQ63N5yQLCLiE7HTX+MYw==",
       "cpu": [
         "ppc64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz",
-      "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.26.0.tgz",
+      "integrity": "sha512-MBR2ZhCTzUgVD0OJdTzNeF4+zsVogIR1U/FsyuFerwcqjZGvg2nYe24SAHp8O5sN8ZkRVbHwlYeHqcSQ8tcYew==",
       "cpu": [
         "riscv64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz",
-      "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.26.0.tgz",
+      "integrity": "sha512-YYcg8MkbN17fMbRMZuxwmxWqsmQufh3ZJFxFGoHjrE7bv0X+T6l3glcdzd7IKLiwhT+PZOJCblpnNlz1/C3kGQ==",
       "cpu": [
         "s390x"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz",
-      "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.26.0.tgz",
+      "integrity": "sha512-ZuwpfjCwjPkAOxpjAEjabg6LRSfL7cAJb6gSQGZYjGhadlzKKywDkCUnJ+KEfrNY1jH5EEoSIKLCb572jSiglA==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz",
-      "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.26.0.tgz",
+      "integrity": "sha512-+HJD2lFS86qkeF8kNu0kALtifMpPCZU80HvwztIKnYwym3KnA1os6nsX4BGSTLtS2QVAGG1P3guRgsYyMA0Yhg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz",
-      "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.26.0.tgz",
+      "integrity": "sha512-WUQzVFWPSw2uJzX4j6YEbMAiLbs0BUysgysh8s817doAYhR5ybqTI1wtKARQKo6cGop3pHnrUJPFCsXdoFaimQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz",
-      "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.26.0.tgz",
+      "integrity": "sha512-D4CxkazFKBfN1akAIY6ieyOqzoOoBV1OICxgUblWxff/pSjCA2khXlASUx7mK6W1oP4McqhgcCsu6QaLj3WMWg==",
       "cpu": [
         "ia32"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz",
-      "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.26.0.tgz",
+      "integrity": "sha512-2x8MO1rm4PGEP0xWbubJW5RtbNLk3puzAMaLQd3B3JHVw4KcHlmXcO+Wewx9zCoo7EUFiMlu/aZbCJ7VjMzAag==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz",
-      "integrity": "sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.0.tgz",
+      "integrity": "sha512-7n7KdUEtx/7Yl7I/WVAMZ1bEb0eVvXF3ummWTeLcs/9gvo9pJhuLdouSXGjdZ/MKD1acf1I272+X0RMua4/R3g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -645,94 +751,104 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
-      "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
+      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.23.9",
-        "@vue/shared": "3.4.21",
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.12",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
-      "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
+      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.4.21",
-        "@vue/shared": "3.4.21"
+        "@vue/compiler-core": "3.5.12",
+        "@vue/shared": "3.5.12"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
-      "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
+      "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.23.9",
-        "@vue/compiler-core": "3.4.21",
-        "@vue/compiler-dom": "3.4.21",
-        "@vue/compiler-ssr": "3.4.21",
-        "@vue/shared": "3.4.21",
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.12",
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/compiler-ssr": "3.5.12",
+        "@vue/shared": "3.5.12",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.7",
-        "postcss": "^8.4.35",
-        "source-map-js": "^1.0.2"
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.47",
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
-      "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
+      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.21",
-        "@vue/shared": "3.4.21"
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/shared": "3.5.12"
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
-      "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
+      "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.4.21"
+        "@vue/shared": "3.5.12"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
-      "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz",
+      "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.21",
-        "@vue/shared": "3.4.21"
+        "@vue/reactivity": "3.5.12",
+        "@vue/shared": "3.5.12"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
-      "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz",
+      "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/runtime-core": "3.4.21",
-        "@vue/shared": "3.4.21",
+        "@vue/reactivity": "3.5.12",
+        "@vue/runtime-core": "3.5.12",
+        "@vue/shared": "3.5.12",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
-      "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
+      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.21",
-        "@vue/shared": "3.4.21"
+        "@vue/compiler-ssr": "3.5.12",
+        "@vue/shared": "3.5.12"
       },
       "peerDependencies": {
-        "vue": "3.4.21"
+        "vue": "3.5.12"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
-      "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
+      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
+      "license": "MIT"
     },
     "node_modules/@vueform/multiselect": {
       "version": "2.6.10",
@@ -741,23 +857,22 @@
       "license": "MIT"
     },
     "node_modules/@vuepic/vue-datepicker": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.7.0.tgz",
-      "integrity": "sha512-EqL51GdaRg6AExVuPCOmnO81n9+oLqgTi+LlST44TwU0UcX0UfefHx1HXwV948fAqBgj0ESgTyDvjXx7EFFL2A==",
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.8.1.tgz",
+      "integrity": "sha512-8ehfUz1m69Vuc16Pm4ukgb3Mg1VT14x4EsG1ag4O/qbSNRWztTo+pUV4JnFt0FGLl5gGb6NXlxIvR7EjLgD7Gg==",
+      "license": "MIT",
       "dependencies": {
         "date-fns": "^3.6.0"
       },
-      "engines": {
-        "node": ">=18.12.0"
-      },
       "peerDependencies": {
         "vue": ">=3.2.0"
       }
     },
     "node_modules/chart.js": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.2.tgz",
-      "integrity": "sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.6.tgz",
+      "integrity": "sha512-8Y406zevUPbbIBA/HRk33khEmQPk5+cxeflWE/2rx1NJsjVWMPw/9mSP9rxHP5eqi6LNoPBVMfZHxbwLSgldYA==",
+      "license": "MIT",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -769,6 +884,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
       "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
+      "license": "MIT",
       "peerDependencies": {
         "chart.js": ">=3.0.0"
       }
@@ -776,12 +892,14 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
     },
     "node_modules/date-fns": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
       "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -791,6 +909,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
       },
@@ -804,6 +923,7 @@
       "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -839,7 +959,8 @@
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -847,6 +968,7 @@
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -856,14 +978,12 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
-      "integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/nanoid": {
@@ -876,6 +996,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -884,14 +1005,15 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
     },
     "node_modules/postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "funding": [
         {
           "type": "opencollective",
@@ -906,9 +1028,10 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
+        "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
       "engines": {
@@ -916,12 +1039,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.22.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz",
-      "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.26.0.tgz",
+      "integrity": "sha512-ilcl12hnWonG8f+NxU6BlgysVA0gvY2l8N0R84S1HcINbW20bvwuCngJkkInV6LXhwRpucsW5k1ovDwEdBVrNg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.5"
+        "@types/estree": "1.0.6"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -931,22 +1055,24 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.22.4",
-        "@rollup/rollup-android-arm64": "4.22.4",
-        "@rollup/rollup-darwin-arm64": "4.22.4",
-        "@rollup/rollup-darwin-x64": "4.22.4",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.22.4",
-        "@rollup/rollup-linux-arm-musleabihf": "4.22.4",
-        "@rollup/rollup-linux-arm64-gnu": "4.22.4",
-        "@rollup/rollup-linux-arm64-musl": "4.22.4",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4",
-        "@rollup/rollup-linux-riscv64-gnu": "4.22.4",
-        "@rollup/rollup-linux-s390x-gnu": "4.22.4",
-        "@rollup/rollup-linux-x64-gnu": "4.22.4",
-        "@rollup/rollup-linux-x64-musl": "4.22.4",
-        "@rollup/rollup-win32-arm64-msvc": "4.22.4",
-        "@rollup/rollup-win32-ia32-msvc": "4.22.4",
-        "@rollup/rollup-win32-x64-msvc": "4.22.4",
+        "@rollup/rollup-android-arm-eabi": "4.26.0",
+        "@rollup/rollup-android-arm64": "4.26.0",
+        "@rollup/rollup-darwin-arm64": "4.26.0",
+        "@rollup/rollup-darwin-x64": "4.26.0",
+        "@rollup/rollup-freebsd-arm64": "4.26.0",
+        "@rollup/rollup-freebsd-x64": "4.26.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.26.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.26.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.26.0",
+        "@rollup/rollup-linux-arm64-musl": "4.26.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.26.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.26.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.26.0",
+        "@rollup/rollup-linux-x64-gnu": "4.26.0",
+        "@rollup/rollup-linux-x64-musl": "4.26.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.26.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.26.0",
+        "@rollup/rollup-win32-x64-msvc": "4.26.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -954,15 +1080,17 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/vite": {
-      "version": "5.4.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
-      "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
+      "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -1018,15 +1146,16 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
-      "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz",
+      "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.21",
-        "@vue/compiler-sfc": "3.4.21",
-        "@vue/runtime-dom": "3.4.21",
-        "@vue/server-renderer": "3.4.21",
-        "@vue/shared": "3.4.21"
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/compiler-sfc": "3.5.12",
+        "@vue/runtime-dom": "3.5.12",
+        "@vue/server-renderer": "3.5.12",
+        "@vue/shared": "3.5.12"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -1038,9 +1167,10 @@
       }
     },
     "node_modules/vue-chartjs": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.1.tgz",
-      "integrity": "sha512-rZjqcHBxKiHrBl0CIvcOlVEBwRhpWAVf6rDU3vUfa7HuSRmGtCslc0Oc8m16oAVuk0erzc1FCtH1VCriHsrz+A==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
+      "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
+      "license": "MIT",
       "peerDependencies": {
         "chart.js": "^4.1.1",
         "vue": "^3.0.0-0 || ^2.7.0"
@@ -1050,6 +1180,7 @@
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/vue3-tabs-component/-/vue3-tabs-component-1.3.7.tgz",
       "integrity": "sha512-nitYlPlTrKCW8msQS1HdtajYNRAfZsSP+2wQQymJDGDCK3um62mXP4oKUgAF5pRe6md86LMRQud7Ic3zmu7Zpg==",
+      "license": "MIT",
       "peerDependencies": {
         "vue": "^3.0.0"
       }
diff --git a/package.json b/package.json
index 3f24c9d8..b36987f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "thunderstats",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/public/_locales/de/messages.json b/public/_locales/de/messages.json
index 5175a5ec..32f42aad 100644
--- a/public/_locales/de/messages.json
+++ b/public/_locales/de/messages.json
@@ -736,5 +736,81 @@
   "LastBusinessDayIs": {
     "message": "Der letzte Werktag ist",
     "description": ""
+  },
+  "ReadStatus": {
+    "message": "Lesestatus",
+    "description": ""
+  },
+  "FilterFoldersOnlyRead": {
+    "message": "Gelesen",
+    "description": ""
+  },
+  "FilterFoldersOnlyUnread": {
+    "message": "Ungelesen",
+    "description": ""
+  },
+  "FlagStatus": {
+    "message": "Sternstatus",
+    "description": ""
+  },
+  "FilterFoldersOnlyFlagged": {
+    "message": "Markiert",
+    "description": ""
+  },
+  "FilterFoldersOnlyUnflagged": {
+    "message": "Nicht markiert",
+    "description": ""
+  },
+  "FilterFoldersAll": {
+    "message": "Alle",
+    "description": ""
+  },
+  "FilterSubject": {
+    "message": "Betreff mit einem Schlüsselwort filtern",
+    "description": ""
+  },
+  "WarnSearchCaseSensitive": {
+    "message": "Beachten Sie, dass die Suche groß- und kleinschreibungssensitiv ist. Die Suche nach „test“ ist anders als die Suche nach „Test“",
+    "description": ""
+  },
+  "Domains": {
+    "message": "Domänen",
+    "description": ""
+  },
+  "Tags": {
+    "message": "Tags",
+    "description": ""
+  },
+  "InboxMailsDateSpreadingExtended": {
+    "message": "Posteingang - Datumsdetailansicht",
+    "description": ""
+  },
+  "OrderBy": {
+    "message": "Sortieren nach",
+    "description": ""
+  },
+  "Close": {
+    "message": "Schließen",
+    "description": ""
+  },
+  "ViewDetails": {
+    "message": "Details anzeigen",
+    "description": ""
+  },
+  "Folders": {
+    "message": "Ordner",
+    "description": ""
+  },
+  "ShowTags": {
+    "message": "Tags anzeigen",
+    "description": ""
+  },
+  "ShowFolders": {
+    "message": "Ordner anzeigen",
+    "description": ""
+  },
+  "prefs_customqry_loaddata_when_opening_addon": {
+    "message": "Daten laden, auch wenn die benutzerdefinierte Ansicht der erste geöffnete Tab in ThunderStats ist",
+    "description": ""
   }
 }
\ No newline at end of file
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 348259bc..36901b63 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -736,5 +736,81 @@
   "LastBusinessDayIs": {
     "message": "The last business day is",
     "description": ""
+  },
+  "ReadStatus": {
+    "message": "Read Status",
+    "description": ""
+  },
+  "FilterFoldersOnlyRead": {
+    "message": "Read",
+    "description": ""
+  },
+  "FilterFoldersOnlyUnread": {
+    "message": "Unread",
+    "description": ""
+  },
+  "FlagStatus": {
+    "message": "Star Status",
+    "description": ""
+  },
+  "FilterFoldersOnlyFlagged": {
+    "message": "Starred",
+    "description": "" 
+  },
+  "FilterFoldersOnlyUnflagged": {
+    "message": "Unstarred",
+    "description": ""
+  },
+  "FilterFoldersAll": {
+    "message": "All",
+    "description": ""
+  },
+  "FilterSubject": {
+    "message": "Filter the subject with a keyword",
+    "description": ""
+  },
+  "WarnSearchCaseSensitive": {
+    "message": "Be aware that the search is case sensitive. Searching for \"test\" is different from searching for \"Test\".",
+    "description": ""
+  },
+  "Domains": {
+    "message": "Domains",
+    "description": ""
+  },
+  "Tags": {
+    "message": "Tags",
+    "description": ""
+  },
+  "InboxMailsDateSpreadingExtended": {
+    "message": "Inbox mails - Date details view",
+    "description": ""
+  },
+  "OrderBy": {
+    "message": "Order by",
+    "description": ""
+  },
+  "Close": {
+    "message": "Close",
+    "description": ""
+  },
+  "ViewDetails": {
+    "message": "View Details",
+    "description": ""
+  },
+  "Folders": {
+    "message": "Folders",
+    "description": ""
+  },
+  "ShowTags": {
+    "message": "Show Tags",
+    "description": ""
+  },
+  "ShowFolders": {
+    "message": "Show Folders",
+    "description": ""
+  },
+  "prefs_customqry_loaddata_when_opening_addon": {
+    "message": "Load data even when Custom View is the first tab opened in ThunderStats",
+    "description": ""
   }
 }
diff --git a/public/_locales/fr/messages.json b/public/_locales/fr/messages.json
index bbadb18c..a3c42080 100644
--- a/public/_locales/fr/messages.json
+++ b/public/_locales/fr/messages.json
@@ -736,5 +736,81 @@
   "LastBusinessDayIs": {
     "message": "Le dernier jour ouvrable est",
     "description": ""
+  },
+  "ReadStatus": {
+    "message": "Statut de lecture",
+    "description": ""
+  },
+  "FilterFoldersOnlyRead": {
+    "message": "Lu",
+    "description": ""
+  },
+  "FilterFoldersOnlyUnread": {
+    "message": "Non lu",
+    "description": ""
+  },
+  "FlagStatus": {
+    "message": "Statut d'étoile",
+    "description": ""
+  },
+  "FilterFoldersOnlyFlagged": {
+    "message": "Marqué",
+    "description": ""
+  },
+  "FilterFoldersOnlyUnflagged": {
+    "message": "Non marqué",
+    "description": ""
+  },
+  "FilterFoldersAll": {
+    "message": "Tout",
+    "description": ""
+  },
+  "FilterSubject": {
+    "message": "Filtrer le sujet avec un mot-clé",
+    "description": ""
+  },
+  "WarnSearchCaseSensitive": {
+    "message": "Notez que la recherche est sensible à la casse. Rechercher \"test\" est différent de rechercher \"Test\".",
+    "description": ""
+  },
+  "Domains": {
+    "message": "Domaines",
+    "description": ""
+  },
+  "Tags": {
+    "message": "Étiquettes",
+    "description": ""
+  },
+  "InboxMailsDateSpreadingExtended": {
+    "message": "Courriels reçus - Vue des détails de la date",
+    "description": ""
+  },
+  "OrderBy": {
+    "message": "Trier par",
+    "description": ""
+  },
+  "Close": {
+    "message": "Fermer",
+    "description": ""
+  },
+  "ViewDetails": {
+    "message": "Voir les détails",
+    "description": ""
+  },
+  "Folders": {
+    "message": "Dossiers",
+    "description": ""
+  },
+  "ShowTags": {
+    "message": "Afficher les étiquettes",
+    "description": ""
+  },
+  "ShowFolders": {
+    "message": "Afficher les dossiers",
+    "description": ""
+  },
+  "prefs_customqry_loaddata_when_opening_addon": {
+    "message": "Charger les données même si la vue personnalisée est l'onglet ouvert en premier dans ThunderStats",
+    "description": ""
   }
 }
\ No newline at end of file
diff --git a/public/_locales/it/messages.json b/public/_locales/it/messages.json
index d595cb56..26be6cf1 100644
--- a/public/_locales/it/messages.json
+++ b/public/_locales/it/messages.json
@@ -736,5 +736,81 @@
   "LastBusinessDayIs": {
     "message": "L'ultimo giorno lavorativo è",
     "description": ""
+  },
+  "ReadStatus": {
+    "message": "Stato di lettura",
+    "description": ""
+  },
+  "FilterFoldersOnlyRead": {
+    "message": "Letto",
+    "description": ""
+  },
+  "FilterFoldersOnlyUnread": {
+    "message": "Non letto",
+    "description": ""
+  },
+  "FlagStatus": {
+    "message": "Stato del contrassegno",
+    "description": ""
+  },
+  "FilterFoldersOnlyFlagged": {
+    "message": "Contrassegnato",
+    "description": ""
+  },
+  "FilterFoldersOnlyUnflagged": {
+    "message": "Non contrassegnato",
+    "description": ""
+  },
+  "FilterFoldersAll": {
+    "message": "Tutti",
+    "description": ""
+  },
+  "FilterSubject": {
+    "message": "Filtra l'oggetto con una parola chiave",
+    "description": ""
+  },
+  "WarnSearchCaseSensitive": {
+    "message": "Tieni presente che la ricerca distingue tra maiuscole e minuscole. Cercare \"test\" è diverso da cercare \"Test\".",
+    "description": ""
+  },
+  "Domains": {
+    "message": "Domini",
+    "description": ""
+  },
+  "Tags": {
+    "message": "Tag",
+    "description": ""
+  },
+  "InboxMailsDateSpreadingExtended": {
+    "message": "Email in arrivo - Vista dettagli date",
+    "description": ""
+  },
+  "OrderBy": {
+    "message": "Ordina per",
+    "description": ""
+  },
+  "Close": {
+    "message": "Chiudi",
+    "description": ""
+  },
+  "ViewDetails": {
+    "message": "Visualizza dettagli",
+    "description": ""
+  },
+  "Folders": {
+    "message": "Cartelle",
+    "description": ""
+  },
+  "ShowTags": {
+    "message": "Mostra Tag",
+    "description": ""
+  },
+  "ShowFolders": {
+    "message": "Mostra Cartelle",
+    "description": ""
+  },
+  "prefs_customqry_loaddata_when_opening_addon": {
+    "message": "Carica i dati anche quando la Vista Personalizzata è la prima scheda aperta in ThunderStats",
+    "description": ""
   }
 }
\ No newline at end of file
diff --git a/public/images/mzts-arrow-sort-active-down.png b/public/images/mzts-arrow-sort-active-down.png
new file mode 100644
index 00000000..2736114f
Binary files /dev/null and b/public/images/mzts-arrow-sort-active-down.png differ
diff --git a/public/images/mzts-arrow-sort-active-up.png b/public/images/mzts-arrow-sort-active-up.png
new file mode 100644
index 00000000..4ff00d3c
Binary files /dev/null and b/public/images/mzts-arrow-sort-active-up.png differ
diff --git a/public/manifest.json b/public/manifest.json
index a5751514..af412d17 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "ThunderStats",
     "description": "Do you remember the old good Eudora statistics? Do you miss them? Using this addon you can finally keep an eye on how you use your beloved Thunderbird!",
-    "version": "2.2.4",
+    "version": "2.3.0",
     "author": "Mic (m@micz.it)",
     "homepage_url": "http://micz.it/thunderbird-addon-thunderstats-your-thunderbird-statistics/",
     "default_locale": "en",
@@ -22,7 +22,8 @@
         "messagesRead",
         "accountsRead",
         "storage",
-        "tabs"
+        "tabs",
+        "messagesTagsList"
     ],
     "background": {
         "page": "background.html"
diff --git a/src/assets/main.css b/src/assets/main.css
index 48330403..d3885419 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -47,16 +47,25 @@ table.mzts-tinvolved tr.mzts-trow td{padding:2px 4px 2px 2px;color:black;white-s
 table.mzts-tinvolved tr.mzts-trow td.mzts-row-num{text-align:center;word-break:normal;}
 
 .chart_time_container{width:100%;float:left;display:flex; flex-wrap:nowrap;}
-.chart_time{ overflow:auto;float:left;height:230px;width:89%;}
-.chart_time_86{ overflow:auto;float:left;height:230px;width:86%;}
-.chart_time_full{ overflow:auto;float:left;height:275px;width:89%;}
-.legend-time{float:right;font-size:12px;padding-top:8px;}
-.legend-time ul{list-style-type:none;margin:0;padding:0;}
-.legend-time ul li.day_today_title{font-weight:bold;}
-.legend-time ul li{white-space: nowrap;}
+.chart_time{overflow:auto;float:left;height:230px;width:89%;}
+.chart_time_86{overflow:auto;float:left;height:230px;width:86%;}
+.chart_time_full{overflow:auto;float:left;height:275px;width:89%;}
+.chart_time_full_domains{overflow-y:auto;float:left;height:275px;width:89%;}
+.chart_time_full_domains_container, .chart_time_full_inbox0ext_container{position: relative;}
+.chart_time_full_inbox0ext{overflow-y:auto;float:left;height:275px;width:100%;}
+.chart_inbox0_extended_orderby{text-align:right;}
+.chart_inbox0_extended_close_btn{width:fit-content;text-align:right;float:right;margin-top:11px;}
+.chart_inbox0_extended_table{width:100%;}
+.chart_inbox0_extended_title{text-align:left;}
 .chart_inbox0_info{width:100%;float:left;}
 .chart_inbox0{width:80%;height:310px;float:left;overflow:auto;}
 .chart_inbox0_datemsg{float:right;max-width:20%;min-width:90px;height:220px;}
+.chart_inbox0_orderbtn{cursor:pointer;text-decoration:underline;color:#3593dd;}
+.chart_inbox0_extended_sorticon{position: relative;top:4px;filter: invert(1)};
+.legend-time{float:right;font-size:12px;padding-top:8px;}
+.legend-time ul{list-style-type:none;margin:0;padding:0;}
+.legend-time ul li{white-space: nowrap;}
+.legend-time ul li.day_today_title{font-weight:bold;}
 .inbox0_inboxmsg_unread{color:grey;}
 .chart_many_days{overflow:auto;float:left;height:370px;width:100%;}
 .chart_customqry{overflow-x:scroll;float:left;height:370px;width:100%;}
@@ -322,9 +331,93 @@ td.align_end {
 }
 
 #filterFolder_container{
+  width: 100%;
+}
+
+table#customqry_adv_filters_table{
+  width: 100%;
+}
+
+table#customqry_adv_filters_table td{
   width: 50%;
+  padding-right: 5px;
+  vertical-align: top;
+}
+
+#filterSubject{
+  min-height: calc(var(--ms-border-width, 1px)*2 + var(--ms-font-size, 1rem)*var(--ms-line-height, 1.375) + var(--ms-py, .5rem)*2);
+  width: 100%;
+  background: var(--ms-bg);
+  color: var(--ms-caret-color);
+  border: var(--ms-border-width,1px) solid var(--ms-border-color);
+  padding: 0.5rem;
 }
 
+#filterReadUnread, #filterFlaggedUnflagged{
+  min-height: calc(var(--ms-border-width, 1px)*2 + var(--ms-font-size, 1rem)*var(--ms-line-height, 1.375) + var(--ms-py, .5rem)*2);
+  background: var(--ms-bg);
+  color: var(--ms-caret-color);
+  border: var(--ms-border-width,1px) solid var(--ms-border-color);
+  padding: 0.5rem;
+  width: 10em;
+}
+
+.td-30{
+  text-align: left;
+  width: 30% !important;
+}
+
+.btn {
+  padding: 5px 7px;
+  background-color: #0078d7;
+  border: none;
+  color: white;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.btn_group{
+  width:fit-content;
+  display: inline-block;
+  position: relative;
+  top: 2px;
+}
+
+.btn_small {
+  padding-top: 1px;
+  padding-right: 7px;
+  padding-bottom: 2px;
+  padding-left: 7px;
+  background-color: #0078d7;
+  border: none;
+  color: white;
+  cursor: pointer;
+  font-size: 0.80em;
+}
+
+.btn_small_start{
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+}
+
+.btn_small_end{
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+
+.btn_small_single{
+  border-radius: 12px;
+}
+
+.btn_disabled {
+  background-color: #7a7a7a;
+  color: white;
+  cursor: unset;
+}
+
+.spacer {
+  flex-grow: 1;
+}
 
 /* Dark mode styles */
 @media (prefers-color-scheme: dark) {
@@ -392,4 +485,21 @@ td.align_end {
     border: #333;
   }
 
+  .btn {
+    background-color: #1e88e5;
+    color: #ffffff;
+  }
+
+  .btn_small {
+    background-color: #1e88e5;
+    color: #ffffff;
+  }
+
+  .btn_disabled {
+    background-color: #8b8b8b;
+    color: white;
+  }
+
+ .chart_inbox0_extended_sorticon{filter: invert(0)};
+
 }
diff --git a/src/assets/squared.css b/src/assets/squared.css
index 620b4aa6..fa4ac9c7 100644
--- a/src/assets/squared.css
+++ b/src/assets/squared.css
@@ -16,13 +16,15 @@
 
 .square_item:nth-child(1),
 .square_item:nth-child(4),
-.square_item:nth-child(5) {
+.square_item:nth-child(5),
+.square_item:nth-child(8) {
     background-color: #F1F9FD;
 }
 
 .square_item:nth-child(2),
 .square_item:nth-child(3),
-.square_item:nth-child(6) {
+.square_item:nth-child(6),
+.square_item:nth-child(7) {
     background-color: white;
 }
 
@@ -81,13 +83,15 @@ h2.lowercase{
 
     .square_item:nth-child(1),
     .square_item:nth-child(4),
-    .square_item:nth-child(5) {
+    .square_item:nth-child(5),
+    .square_item:nth-child(8) {
         background-color: #333;
     }
 
     .square_item:nth-child(2),
     .square_item:nth-child(3),
-    .square_item:nth-child(6) {
+    .square_item:nth-child(6),
+    .square_item:nth-child(7) {
         background-color: #444;
     }
 
diff --git a/src/components/graphs/GraphCustomQry.vue b/src/components/charts/ChartCustomQry.vue
similarity index 96%
rename from src/components/graphs/GraphCustomQry.vue
rename to src/components/charts/ChartCustomQry.vue
index 837dd124..5d246df3 100644
--- a/src/components/graphs/GraphCustomQry.vue
+++ b/src/components/charts/ChartCustomQry.vue
@@ -57,6 +57,10 @@ let props = defineProps({
         type: String,
         default: '1500px'
     },
+    data_type: {
+        type: String,
+        default: 'YYYYMMDD'
+    },
     is_loading: {
         type: Boolean,
         default: true
@@ -87,13 +91,13 @@ var chartOptions = ref({
             min: 0,
             ticks: {
               callback: function(value, index, ticks) {
-                            return tsCoreUtils.getCustomQryLabel(this.getLabelForValue(value));
+                            return tsCoreUtils.getCustomQryLabel(this.getLabelForValue(value), props.data_type);
                         },
               align: 'center',
               color: function(context) {
                             const labelIndex = context['tick']['value'];
                             const label = context.chart.data.labels[labelIndex];
-                            return tsCoreUtils.getDaysLabelColor(label);
+                            return tsCoreUtils.getDaysLabelColor(label, props.data_type == 'YYYYMMDD', props.data_type == 'YYYYMMDD');
                         },
               // maxRotation: 0,
               //minRotation: 90
diff --git a/src/components/charts/ChartDomains.vue b/src/components/charts/ChartDomains.vue
new file mode 100644
index 00000000..6cd18d7c
--- /dev/null
+++ b/src/components/charts/ChartDomains.vue
@@ -0,0 +1,202 @@
+<!--
+/*
+ *  ThunderStats [https://micz.it/thunderbird-addon-thunderstats-your-thunderbird-statistics/]
+ *  Copyright (C) 2024  Mic (m@micz.it)
+
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU 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 General Public License for more details.
+
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+-->
+
+<template>
+  <div class="chart_time_container">
+    <div class="chart_time_full_domains" >
+      <div class="chart_time_full_domains_container" :id="chart_id">
+        <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." /></div>
+          <Bar
+            :options="chartOptions"
+            :data="chartData"
+            :plugins="chartPlugins"
+            :height="chart_height"
+            :key="chartData_length"
+            ref="domainsChartBar_ref"
+            v-if="!is_loading"
+          />
+      </div>
+    </div>
+    <div :id="legend_id" class="legend-time" v-if="!is_loading"></div>
+</div>
+</template>
+
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Bar } from 'vue-chartjs'
+import { Chart, BarController, BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { htmlLegendPlugin } from '@statslib/chartjs-lib/plugin-timechart-legend';
+import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
+import { tsStore } from '@statslib/mzts-store';
+import { tsUtils } from '@statslib/mzts-utils';
+
+Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, BarController);
+
+
+let props = defineProps({
+    chartData: {
+        type: Object,
+        default: () => ({
+                    labels: [],
+                    datasets: []
+                }),
+        required: true
+    },
+    chart_id: {
+        type: String,
+        default: 'domains-chart',
+    },
+    chart_height: {
+        type: String,
+        default: '500px'
+    },
+    is_loading: {
+        type: Boolean,
+        default: true
+    }
+});
+
+let domainsChartBar_ref = ref(null);
+
+let maxX = ref(0);
+
+let chart_id = computed(() => props.chart_id);
+let legend_id = computed(() => props.chart_id + "-legend");
+let chart_height = computed(() => props.chart_height);
+let chartData_length = computed(() => (chartData.value.datasets.length + Math.floor(Math.random() * 101)));
+
+let chartData = computed(() => {
+  if (props.chartData.datasets && props.chartData.datasets.length > 0) {
+  let data = tsUtils.safeConcat(props.chartData.datasets, 0)
+                  .concat(tsUtils.safeConcat(props.chartData.datasets, 1));
+        let maxData = tsCoreUtils.getMaxFromData(data);
+        maxX.value = (Math.ceil(maxData / 5) * 5);
+        if(maxX.value == maxData) {
+          maxX.value = maxX.value + 3;
+        }
+    } else {
+        maxX.value = 5;
+    }
+    if(!chartOptions) return;
+    // console.log(">>>>>>>>>>>>>>>>>>>> maxX: " + maxX.value);
+    if(maxX.value < 20) {
+      chartOptions.value.scales.x.ticks.stepSize = 1;
+    }else{
+      chartOptions.value.scales.x.ticks.stepSize = 5;
+    }
+    chartOptions.value.scales.x.max = maxX.value;
+
+  let chart_container = document.getElementById(chart_id.value);
+  if(chart_container) {
+    chart_container.style.height = chart_height.value;
+  }
+
+  return props.chartData;
+});
+
+let is_loading = computed(() => props.is_loading)
+
+var chartOptions = ref({
+        responsive: true,
+        animation: false,
+        maintainAspectRatio: false,
+        indexAxis: 'y',
+        hover: {mode: null},
+        // categoryPercentage: 1,
+        // barPercentage: 0.8,
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: browser.i18n.getMessage('Mails')
+            },
+            beginAtZero: true,
+            min: 0,
+            max: maxX.value,
+            ticks: {
+              stepSize: 5,
+              callback: function(value) {
+                if (Number.isInteger(value)) {
+                  return value;
+                }
+                return '';
+              },
+              align: 'right',
+              // maxRotation: 0,
+              // minRotation: 0
+            },
+          },
+          y: {
+            title: {
+              display: false,
+            },
+            beginAtZero: true,
+            min: 0,
+            ticks: {
+              callback: function(value, index, ticks) {
+                          return this.getLabelForValue(value);
+              },
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+          htmlLegend: {
+            // ID of the container to put the legend in
+            containerID: legend_id.value,
+            is_today: false,
+            is_yesterday: false,
+          },
+          tooltip: {
+              enabled: false,
+          },
+          datalabels: {
+            display: true,
+            anchor: 'end',
+            align: function(context) {
+              let width = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].width;
+              // console.log(">>>>>>>>>>>>>>>>>>>>> context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex]: " + JSON.stringify(context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex]));
+              return width <= 25 ? 'right' : 'left';
+            },
+            color: function(context) {
+              let width = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].width;
+              //console.log(">>>>>>>>>>>>>>>>>>>>> width: " + JSON.stringify(width));
+              //console.log(">>>>>>>>>>>>>>>>>>>>> darkMode: " + JSON.stringify(tsStore.darkmode));
+              return width > 25 ? '#fff' : tsStore.darkmode?'#bbb':'grey';
+            },
+            font: {
+              weight: 'bold',
+            },
+          },
+        },
+      });
+
+var chartPlugins = [ChartDataLabels, htmlLegendPlugin];
+
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/charts/ChartFolders.vue b/src/components/charts/ChartFolders.vue
new file mode 100644
index 00000000..04e3d637
--- /dev/null
+++ b/src/components/charts/ChartFolders.vue
@@ -0,0 +1,206 @@
+<!--
+/*
+ *  ThunderStats [https://micz.it/thunderbird-addon-thunderstats-your-thunderbird-statistics/]
+ *  Copyright (C) 2024  Mic (m@micz.it)
+
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU 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 General Public License for more details.
+
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+-->
+
+<template>
+  <div class="chart_time_container">
+    <div class="chart_time_full_domains" >
+      <div class="chart_time_full_domains_container" :id="chart_id">
+        <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." /></div>
+        <Bar
+            :options="chartOptions"
+            :data="chartData"
+            :plugins="chartPlugins"
+            :height="chart_height"
+            :key="key"
+            ref="foldersChartBar_ref"
+            v-if="!is_loading"
+          />
+      </div>
+    </div>
+    <div :id="legend_id" class="legend-time" v-if="!is_loading"></div>
+</div>
+</template>
+
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Bar } from 'vue-chartjs'
+import { Chart, BarController, BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { htmlLegendPlugin } from '@statslib/chartjs-lib/plugin-timechart-legend';
+import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
+import { tsStore } from '@statslib/mzts-store';
+import { tsUtils } from '@statslib/mzts-utils';
+
+Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, BarController);
+
+
+let props = defineProps({
+    chartData: {
+        type: Object,
+        default: () => ({
+                    labels: [],
+                    datasets: []
+                }),
+        required: true
+    },
+    chart_id: {
+        type: String,
+        default: 'folders-chart',
+    },
+    chart_height: {
+        type: String,
+        default: '500px'
+    },
+    is_loading: {
+        type: Boolean,
+        default: true
+    },
+    key: {
+        type: Number,
+        default: 0
+    }
+});
+
+let foldersChartBar_ref = ref(null);
+
+let maxX = ref(0);
+
+let chart_id = computed(() => props.chart_id);
+let legend_id = computed(() => props.chart_id + "-legend");
+let chart_height = computed(() => props.chart_height);
+let key = computed(() => props.key);
+
+let chartData = computed(() => {
+  if (props.chartData.datasets && props.chartData.datasets.length > 0) {
+  let data = tsUtils.safeConcat(props.chartData.datasets, 0)
+                  .concat(tsUtils.safeConcat(props.chartData.datasets, 1));
+        let maxData = tsCoreUtils.getMaxFromData(data);
+        maxX.value = (Math.ceil(maxData / 5) * 5);
+        if(maxX.value == maxData) {
+          maxX.value = maxX.value + 3;
+        }
+    } else {
+        maxX.value = 5;
+    }
+    if(!chartOptions) return;
+    // console.log(">>>>>>>>>>>>>>>>>>>> maxX: " + maxX.value);
+    if(maxX.value < 20) {
+      chartOptions.value.scales.x.ticks.stepSize = 1;
+    }else{
+      chartOptions.value.scales.x.ticks.stepSize = 5;
+    }
+    chartOptions.value.scales.x.max = maxX.value;
+
+  let chart_container = document.getElementById(chart_id.value);
+  if(chart_container) {
+    chart_container.style.height = chart_height.value;
+  }
+
+  return props.chartData;
+});
+
+let is_loading = computed(() => props.is_loading)
+
+var chartOptions = ref({
+        responsive: true,
+        animation: false,
+        maintainAspectRatio: false,
+        indexAxis: 'y',
+        hover: {mode: null},
+        // categoryPercentage: 1,
+        // barPercentage: 0.8,
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: browser.i18n.getMessage('Mails')
+            },
+            beginAtZero: true,
+            min: 0,
+            max: maxX.value,
+            ticks: {
+              stepSize: 5,
+              callback: function(value) {
+                if (Number.isInteger(value)) {
+                  return value;
+                }
+                return '';
+              },
+              align: 'right',
+              // maxRotation: 0,
+              // minRotation: 0
+            },
+          },
+          y: {
+            title: {
+              display: false,
+            },
+            beginAtZero: true,
+            min: 0,
+            ticks: {
+              callback: function(value, index, ticks) {
+                          return tsCoreUtils.getFolderPath(this.getLabelForValue(value), false);
+              },
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+          htmlLegend: {
+            // ID of the container to put the legend in
+            containerID: legend_id.value,
+            is_today: false,
+            is_yesterday: false,
+          },
+          tooltip: {
+              enabled: false,
+          },
+          datalabels: {
+            display: true,
+            anchor: 'end',
+            align: function(context) {
+              let width = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].width;
+              // console.log(">>>>>>>>>>>>>>>>>>>>> context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex]: " + JSON.stringify(context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex]));
+              return width <= 25 ? 'right' : 'left';
+            },
+            color: function(context) {
+              let width = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].width;
+              //console.log(">>>>>>>>>>>>>>>>>>>>> width: " + JSON.stringify(width));
+              //console.log(">>>>>>>>>>>>>>>>>>>>> darkMode: " + JSON.stringify(tsStore.darkmode));
+              return width > 25 ? '#fff' : tsStore.darkmode?'#bbb':'grey';
+            },
+            font: {
+              weight: 'bold',
+            },
+          },
+        },
+      });
+
+var chartPlugins = [ChartDataLabels, htmlLegendPlugin];
+
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/graphs/GraphInboxZeroDates.vue b/src/components/charts/ChartInboxZeroDates.vue
similarity index 99%
rename from src/components/graphs/GraphInboxZeroDates.vue
rename to src/components/charts/ChartInboxZeroDates.vue
index fec800b2..405bc3f8 100644
--- a/src/components/graphs/GraphInboxZeroDates.vue
+++ b/src/components/charts/ChartInboxZeroDates.vue
@@ -19,7 +19,7 @@
 -->
 
 <template>
-  <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." id="today_hours_graph_wait"/></div>
+  <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." id="today_hours_chart_wait"/></div>
   <Bar
       :options="chartOptions"
       :data="chartData"
diff --git a/src/components/charts/ChartInboxZeroDatesExtended.vue b/src/components/charts/ChartInboxZeroDatesExtended.vue
new file mode 100644
index 00000000..936d68fb
--- /dev/null
+++ b/src/components/charts/ChartInboxZeroDatesExtended.vue
@@ -0,0 +1,226 @@
+<!--
+/*
+ *  ThunderStats [https://micz.it/thunderbird-addon-thunderstats-your-thunderbird-statistics/]
+ *  Copyright (C) 2024  Mic (m@micz.it)
+
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU 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 General Public License for more details.
+
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+-->
+
+<template>
+  <div class="chart_time_container">
+    <div class="chart_time_full_inbox0ext" :id="chart_id">
+      <div class="chart_time_full_inbox0ext_container" :id="chart_id">
+        <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." /></div>
+        <Bar
+            :options="chartOptions"
+            :data="chartData"
+            :plugins="chartPlugins"
+            :key="chartData_length"
+            ref="inbox0folderextChartBar_ref"
+            v-if="!is_loading"
+            :height="chart_height"
+            width="500px"
+          />
+      </div>
+    </div>
+</div>
+</template>
+
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Bar } from 'vue-chartjs'
+import { Chart, BarController, BarElement, CategoryScale, LinearScale, Title, Tooltip } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
+import { tsStore } from '@statslib/mzts-store';
+import { tsUtils } from '@statslib/mzts-utils';
+
+Chart.register(Title, Tooltip, BarElement, CategoryScale, LinearScale, BarController);
+
+
+let props = defineProps({
+    chartData: {
+        type: Object,
+        default: () => ({}),
+        required: true
+    },
+    chart_id: {
+        type: String,
+        default: 'inbox0-folders-extended-chart',
+    },
+    chart_height: {
+        type: String,
+        default: '500px'
+    },
+    is_loading: {
+        type: Boolean,
+        default: true
+    }
+});
+
+let inbox0folderextChartBar_ref = ref(null);
+
+let maxX = ref(0);
+let force_rand = ref(Math.floor(Math.random() * 101));
+
+let chart_id = computed(() => props.chart_id);
+let chart_height = computed(() => props.chart_height);
+let chartData_length = computed(() => String(force_rand.value));
+
+let chartData = computed(() => {
+  if (props.chartData.datasets && props.chartData.datasets.length > 0) {
+  let data = tsUtils.safeConcat(props.chartData.datasets, 0)
+                  .concat(tsUtils.safeConcat(props.chartData.datasets, 1));
+        let maxData = tsCoreUtils.getMaxFromData(data);
+        maxX.value = (Math.ceil(maxData / 5) * 5);
+        if(maxX.value == maxData) {
+          maxX.value = maxX.value + 3;
+        }
+    } else {
+        maxX.value = 5;
+    }
+    if(!chartOptions) return;
+    //  console.log(">>>>>>>>>>>>>>>>>>>> maxX: " + maxX.value);
+    if(maxX.value < 20) {
+      chartOptions.value.scales.x.ticks.stepSize = 1;
+      chartOptions.value.scales.x2.ticks.stepSize = 1;
+    }else{
+      chartOptions.value.scales.x.ticks.stepSize = 5;
+      chartOptions.value.scales.x2.ticks.stepSize = 5;
+    }
+    chartOptions.value.scales.x.max = maxX.value;
+    chartOptions.value.scales.x2.max = maxX.value;
+
+  force_rand.value = (Math.floor(Math.random() * 101));
+
+  let chart_container = document.getElementById(chart_id.value);
+  if(chart_container) {
+    chart_container.style.height = chart_height.value;
+  }
+
+  return props.chartData;
+});
+
+let is_loading = computed(() => props.is_loading)
+
+var chartOptions = ref({
+        responsive: true,
+        animation: false,
+        maintainAspectRatio: false,
+        indexAxis: 'y',
+        hover: {mode: null},
+        // categoryPercentage: 1,
+        // barPercentage: 0.8,
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: browser.i18n.getMessage('Mails')
+            },
+            position: 'top',
+            beginAtZero: true,
+            min: 0,
+            max: maxX.value,
+            ticks: {
+              stepSize: 5,
+              callback: function(value) {
+                if (Number.isInteger(value)) {
+                  return value;
+                }
+                return '';
+              },
+              align: 'right',
+              // maxRotation: 0,
+              // minRotation: 0
+            },
+          },
+          x2: {
+            position: 'bottom',
+            title: {
+              display: true,
+              text: browser.i18n.getMessage('Mails')
+            },
+            beginAtZero: true,
+            min: 0,
+            ticks: {
+              stepSize: 5,
+              callback: function(value) {
+                if (Number.isInteger(value)) {
+                  return value;
+                }
+                return '';
+              },
+              align: 'right',
+              // maxRotation: 0,
+              // minRotation: 0
+            },
+          },
+          y: {
+            title: {
+              display: false,
+            },
+            beginAtZero: true,
+            min: 0,
+            ticks: {
+              callback: function(value, index, ticks) {
+                          let val = this.getLabelForValue(value);
+                          let current_date = tsUtils.parseYYYYMMDDToDate(val);
+                           return current_date.toLocaleDateString(undefined,{day: '2-digit', month: '2-digit', year: 'numeric'});
+              },
+              color: function(context) {
+                            const labelIndex = context['tick']['value'];
+                            const label = context.chart.data.labels[labelIndex];
+                            return tsCoreUtils.getDaysLabelColor(label, true);
+                        },
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+          tooltip: {
+              enabled: false,
+          },
+          datalabels: {
+            display: true,
+            anchor: 'end',
+            align: function(context) {
+              let width = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].width;
+              // console.log(">>>>>>>>>>>>>>>>>>>>> context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex]: " + JSON.stringify(context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex]));
+              return width <= 25 ? 'right' : 'left';
+            },
+            color: function(context) {
+              let width = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].width;
+              //console.log(">>>>>>>>>>>>>>>>>>>>> width: " + JSON.stringify(width));
+              //console.log(">>>>>>>>>>>>>>>>>>>>> darkMode: " + JSON.stringify(tsStore.darkmode));
+              return width > 25 ? '#fff' : tsStore.darkmode?'#bbb':'grey';
+            },
+            font: {
+              weight: 'bold',
+            },
+          },
+        },
+      });
+
+var chartPlugins = [ChartDataLabels];
+
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/graphs/GraphInboxZeroFolders.vue b/src/components/charts/ChartInboxZeroFolders.vue
similarity index 94%
rename from src/components/graphs/GraphInboxZeroFolders.vue
rename to src/components/charts/ChartInboxZeroFolders.vue
index a63b1ab7..a8d4e3e2 100644
--- a/src/components/graphs/GraphInboxZeroFolders.vue
+++ b/src/components/charts/ChartInboxZeroFolders.vue
@@ -19,7 +19,7 @@
 -->
 
 <template>
-    <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." id="today_hours_graph_wait"/></div>
+    <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." id="today_hours_chart_wait"/></div>
     <Doughnut
         :options="chartOptions"
         :data="chartData"
@@ -31,7 +31,6 @@
 </template>
 
 
-
 <script setup>
 import { ref, computed } from 'vue'
 import { Doughnut } from 'vue-chartjs'
@@ -110,14 +109,13 @@ let chartOptions = ref({
             }
             let currTab = null;
             let tabs = await browser.tabs.query({windowId: browser.mailTabs.WINDOW_ID_CURRENT});
-              // Cycle through tabs to find the first mailtab
-              for(let i = 0; i < tabs.length; i++){
-                if(tabs[i].mailTab){
-                  currTab = tabs[i];
-                  break;
-                }
+            // Cycle through tabs to find the first mailtab
+            for(let i = 0; i < tabs.length; i++){
+              if(tabs[i].mailTab){
+                currTab = tabs[i];
+                break;
               }
-
+            }
             if(openFolderInFirstTab.value){
               if(tsStore.isTB128plus){
                 browser.mailTabs.update(currTab.id, {displayedFolder: chartData.value.folder_paths[activeEls[0].index]});
diff --git a/src/components/graphs/GraphManyDays.vue b/src/components/charts/ChartManyDays.vue
similarity index 100%
rename from src/components/graphs/GraphManyDays.vue
rename to src/components/charts/ChartManyDays.vue
diff --git a/src/components/charts/ChartTags.vue b/src/components/charts/ChartTags.vue
new file mode 100644
index 00000000..f0a366e1
--- /dev/null
+++ b/src/components/charts/ChartTags.vue
@@ -0,0 +1,207 @@
+<!--
+/*
+ *  ThunderStats [https://micz.it/thunderbird-addon-thunderstats-your-thunderbird-statistics/]
+ *  Copyright (C) 2024  Mic (m@micz.it)
+
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU 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 General Public License for more details.
+
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+-->
+
+<template>
+  <div class="chart_time_container">
+    <div class="chart_time_full_domains" >
+      <div class="chart_time_full_domains_container" :id="chart_id">
+        <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." /></div>
+        <Bar
+            :options="chartOptions"
+            :data="chartData"
+            :plugins="chartPlugins"
+            :height="chart_height"
+            :key="chartData_length"
+            ref="tagsChartBar_ref"
+            v-if="!is_loading"
+          />
+      </div>
+    </div>
+    <div :id="legend_id" class="legend-time" v-if="!is_loading"></div>
+</div>
+</template>
+
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Bar } from 'vue-chartjs'
+import { Chart, BarController, BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { htmlLegendPlugin } from '@statslib/chartjs-lib/plugin-timechart-legend';
+import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
+import { tsStore } from '@statslib/mzts-store';
+import { tsUtils } from '@statslib/mzts-utils';
+
+Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, BarController);
+
+
+let props = defineProps({
+    chartData: {
+        type: Object,
+        default: () => ({
+                    labels: [],
+                    datasets: []
+                }),
+        required: true
+    },
+    chart_id: {
+        type: String,
+        default: 'tags-chart',
+    },
+    chart_height: {
+        type: String,
+        default: '500px'
+    },
+    is_loading: {
+        type: Boolean,
+        default: true
+    }
+});
+
+let tagsChartBar_ref = ref(null);
+
+let maxX = ref(0);
+
+let chart_id = computed(() => props.chart_id);
+let legend_id = computed(() => props.chart_id + "-legend");
+let chart_height = computed(() => props.chart_height);
+let chartData_length = computed(() => (chartData.value.datasets.length + Math.floor(Math.random() * 101)));
+
+let chartData = computed(() => {
+  if (props.chartData.datasets && props.chartData.datasets.length > 0) {
+  let data = tsUtils.safeConcat(props.chartData.datasets, 0)
+                  .concat(tsUtils.safeConcat(props.chartData.datasets, 1));
+        let maxData = tsCoreUtils.getMaxFromData(data);
+        maxX.value = (Math.ceil(maxData / 5) * 5);
+        if(maxX.value == maxData) {
+          maxX.value = maxX.value + 3;
+        }
+    } else {
+        maxX.value = 5;
+    }
+    if(!chartOptions) return;
+    // console.log(">>>>>>>>>>>>>>>>>>>> maxX: " + maxX.value);
+    if(maxX.value < 20) {
+      chartOptions.value.scales.x.ticks.stepSize = 1;
+    }else{
+      chartOptions.value.scales.x.ticks.stepSize = 5;
+    }
+    chartOptions.value.scales.x.max = maxX.value;
+
+  let chart_container = document.getElementById(chart_id.value);
+  if(chart_container) {
+    chart_container.style.height = chart_height.value;
+  }
+
+  return props.chartData;
+});
+
+let is_loading = computed(() => props.is_loading)
+
+var chartOptions = ref({
+        responsive: true,
+        animation: false,
+        maintainAspectRatio: false,
+        indexAxis: 'y',
+        hover: {mode: null},
+        // categoryPercentage: 1,
+        // barPercentage: 0.8,
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: browser.i18n.getMessage('Mails')
+            },
+            beginAtZero: true,
+            min: 0,
+            max: maxX.value,
+            ticks: {
+              stepSize: 5,
+              callback: function(value) {
+                if (Number.isInteger(value)) {
+                  return value;
+                }
+                return '';
+              },
+              align: 'right',
+              // maxRotation: 0,
+              // minRotation: 0
+            },
+          },
+          y: {
+            title: {
+              display: false,
+            },
+            beginAtZero: true,
+            min: 0,
+            ticks: {
+              callback: function(value, index, ticks) {
+                          return this.getLabelForValue(value);
+              },
+              color: function(context) {
+                            const labelIndex = context['tick']['value'];
+                            const label = context.chart.data.labels[labelIndex];
+                            return tsCoreUtils.getTagsLabelColor(label);
+                        },
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+          htmlLegend: {
+            // ID of the container to put the legend in
+            containerID: legend_id.value,
+            is_today: false,
+            is_yesterday: false,
+          },
+          tooltip: {
+              enabled: false,
+          },
+          datalabels: {
+            display: true,
+            anchor: 'end',
+            align: function(context) {
+              let width = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].width;
+              // console.log(">>>>>>>>>>>>>>>>>>>>> context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex]: " + JSON.stringify(context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex]));
+              return width <= 25 ? 'right' : 'left';
+            },
+            color: function(context) {
+              let width = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].width;
+              //console.log(">>>>>>>>>>>>>>>>>>>>> width: " + JSON.stringify(width));
+              //console.log(">>>>>>>>>>>>>>>>>>>>> darkMode: " + JSON.stringify(tsStore.darkmode));
+              return width > 25 ? '#fff' : tsStore.darkmode?'#bbb':'grey';
+            },
+            font: {
+              weight: 'bold',
+            },
+          },
+        },
+      });
+
+var chartPlugins = [ChartDataLabels, htmlLegendPlugin];
+
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/graphs/GraphToday.vue b/src/components/charts/ChartTime.vue
similarity index 76%
rename from src/components/graphs/GraphToday.vue
rename to src/components/charts/ChartTime.vue
index 530fcd9c..7ed3d1d4 100644
--- a/src/components/graphs/GraphToday.vue
+++ b/src/components/charts/ChartTime.vue
@@ -19,20 +19,20 @@
 -->
 
 <template>
-<div class="chart_time_container">
-  <div :class="getWrapperClass">
-    <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." id="today_hours_graph_wait"/></div>
-    <Line
-        :options="chartOptions"
-        :data="chartData"
-        :plugins="chartPlugins"
-        :key="chartData.datasets.length"
-        ref="todayChartBar_ref"
-        v-if="!is_loading"
-      />
+  <div class="chart_time_container">
+    <div :class="getWrapperClass">
+      <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." /></div>
+      <Line
+          :options="chartOptions"
+          :data="chartData"
+          :plugins="chartPlugins"
+          :key="chartData_length"
+          ref="timeChartBar_ref"
+          v-if="!is_loading"
+        />
+    </div>
+    <div :id="legend_id" class="legend-time" v-if="!is_loading"></div>
   </div>
-  <div id="today-time-legend-container" class="legend-time" v-if="!is_loading"></div>
-</div>
 </template>
 
 
@@ -41,9 +41,9 @@
 import { ref, computed, watch } from 'vue'
 import { Line } from 'vue-chartjs'
 import { Chart, LineController, CategoryScale, LinearScale, PointElement, LineElement, Title } from 'chart.js';
-import { externalTooltipTimeGraphLines } from '@statslib/chartjs-lib/external-tooltip-timegraphlines';
-import { htmlLegendPlugin } from '@statslib/chartjs-lib/plugin-timegraph-legend';
-import { tsVerticalLinePlugin } from '@statslib/chartjs-lib/plugin-timegraph-vertical-line';
+import { externalTooltipTimeChartLines } from '@statslib/chartjs-lib/external-tooltip-timechartlines';
+import { htmlLegendPlugin } from '@statslib/chartjs-lib/plugin-timechart-legend';
+import { tsVerticalLinePlugin } from '@statslib/chartjs-lib/plugin-timechart-vertical-line';
 import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
 import { tsUtils } from '@statslib/mzts-utils';
 import { tsStore } from '@statslib/mzts-store';
@@ -60,28 +60,40 @@ let props = defineProps({
         type: Boolean,
         default: true
     },
+    day_type: {
+        type: Number,
+        default: 0
+    },
     is_last_business_day: {
       type: Boolean,
       default: false
     },
 });
 
-let todayChartBar_ref = ref(null);
+let timeChartBar_ref = ref(null);
+let legend_id = ref("time-legend-container");
 
 let chartData = computed(() => props.chartData)
 let is_loading = computed(() => props.is_loading)
+let is_yesterday = computed(() => props.day_type === -1)
+let is_today = computed(() => props.day_type === 0)
+let is_generic_day = computed(() => props.day_type === 1)
+
+let chartData_length = computed(() => (chartData.value.datasets.length + Math.floor(Math.random() * 101)));
 
 let maxY = ref(0);
 let is_last_business_day = ref(false);
 
 const getWrapperClass = computed(() => {
   return {
-    'chart_time_86': is_last_business_day.value,
-    'chart_time': !is_last_business_day.value
+    'chart_time_full': is_generic_day.value,
+    'chart_time': !is_generic_day.value && !is_last_business_day.value,
+    'chart_time_86': !is_generic_day.value && is_last_business_day.value,
   };
 });
 
 watch(props.chartData, (newChartData) => {
+  legend_id.value = "singleday-time-legend-container-" + props.day_type;
   is_last_business_day.value = props.is_last_business_day;
   // console.log(">>>>>>>>>>>>>> is_last_business_day.value: " + JSON.stringify(is_last_business_day.value));
   // console.log(">>>>>>>>>>>>> watch: " + JSON.stringify(newChartData));
@@ -157,11 +169,12 @@ var chartOptions = ref({
           },
           htmlLegend: {
             // ID of the container to put the legend in
-            containerID: 'today-time-legend-container',
-            is_today: true,
+            containerID: legend_id.value,
+            is_today: is_today.value,
+            is_yesterday: is_yesterday.value,
             is_last_business_day: is_last_business_day.value,
           },
-          tsVerticalLinePlugin: {
+          tsVerticalLinePlugin: is_today.value ?{
             drawVerticalLineAt: () => {
               const now = new Date();
               const hour = now.getHours();
@@ -174,13 +187,13 @@ var chartOptions = ref({
               }
               return '#265707';
             },
-          },
+          } : {},
           tooltip: {
               enabled: false,
               mode: 'index',
               intersect: false,
               external: function(context) {
-                externalTooltipTimeGraphLines(context, {is_last_business_day: is_last_business_day.value});
+                externalTooltipTimeChartLines(context, {is_generic_day: is_generic_day.value, is_last_business_day: is_last_business_day.value});
               }
             }
         },
@@ -189,12 +202,6 @@ var chartOptions = ref({
 
 let chartPlugins =  [htmlLegendPlugin, tsVerticalLinePlugin];
 
-/*async function updateChart() {
-  //console.log("updateChart: " + JSON.stringify(chartData.value));
-}*/
-
-//defineExpose({ updateChart });
-
 </script>
 
 
diff --git a/src/components/graphs/GraphWeekDays.vue b/src/components/charts/ChartWeekDays.vue
similarity index 99%
rename from src/components/graphs/GraphWeekDays.vue
rename to src/components/charts/ChartWeekDays.vue
index 88350ce9..e686c684 100644
--- a/src/components/graphs/GraphWeekDays.vue
+++ b/src/components/charts/ChartWeekDays.vue
@@ -40,7 +40,7 @@ import { ref, computed, watch } from 'vue'
 import { Bar } from 'vue-chartjs'
 import { Chart, BarController, BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { htmlLegendPlugin } from '@statslib/chartjs-lib/plugin-timegraph-legend';
+import { htmlLegendPlugin } from '@statslib/chartjs-lib/plugin-timechart-legend';
 import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
 import { tsStore } from '@statslib/mzts-store';
 import { tsUtils } from '@statslib/mzts-utils';
diff --git a/src/components/counters/CounterYesterdayThisTime.vue b/src/components/counters/CounterYesterdayThisTime.vue
index 230fa333..c006022d 100644
--- a/src/components/counters/CounterYesterdayThisTime.vue
+++ b/src/components/counters/CounterYesterdayThisTime.vue
@@ -71,7 +71,7 @@ let last_business_day_text = computed(() => {
 })
 
 let last_business_day_title = computed(() => {
-    //console.log(">>>>>>>>>>>>>> props.last_bday_date: " + JSON.stringify(props.last_bday_date));
+    // console.log(">>>>>>>>>>>>>> props.last_bday_date: " + JSON.stringify(props.last_bday_date));
     return props.last_bday_date;
 })
 
diff --git a/src/components/graphs/GraphYesterday.vue b/src/components/graphs/GraphYesterday.vue
deleted file mode 100644
index 9db8dcb5..00000000
--- a/src/components/graphs/GraphYesterday.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<!--
-/*
- *  ThunderStats [https://micz.it/thunderbird-addon-thunderstats-your-thunderbird-statistics/]
- *  Copyright (C) 2024  Mic (m@micz.it)
-
- *  This program is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU 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 General Public License for more details.
-
- *  You should have received a copy of the GNU General Public License
- *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
--->
-
-<template>
-<div class="chart_time_container">
-  <div :class="getWrapperClass">
-    <div class="circle_wait" v-if="is_loading"><img src="@/assets/images/mzts-wait_circle.svg" alt="__MSG_Loading__..." id="yesterday_hours_graph_wait"/></div>
-    <Line
-        :options="chartOptions"
-        :data="chartData"
-        :plugins="chartPlugins"
-        :key="chartData_length"
-        ref="yesterdayChartBar_ref"
-        v-if="!is_loading"
-      />
-  </div>
-  <div :id="legend_id" class="legend-time" v-if="!is_loading"></div>
-</div>
-</template>
-
-
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { Line } from 'vue-chartjs'
-import { Chart, LineController, CategoryScale, LinearScale, PointElement, LineElement, Title } from 'chart.js';
-import { externalTooltipTimeGraphLines } from '@statslib/chartjs-lib/external-tooltip-timegraphlines';
-import { htmlLegendPlugin } from '@statslib/chartjs-lib/plugin-timegraph-legend';
-import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
-import { tsStore } from '@statslib/mzts-store';
-
-Chart.register(LineController, CategoryScale, LinearScale, PointElement, LineElement, Title );
-
-let props = defineProps({
-    chartData: {
-        type: Object,
-        default: () => ({}),
-        required: true
-    },
-    is_loading: {
-        type: Boolean,
-        default: true
-    },
-    yesterday: {
-      type: Boolean,
-      default: true
-    },
-    is_last_business_day: {
-      type: Boolean,
-      default: false
-    },
-    is_generic_day: {
-      type: Boolean,
-      default: false
-    }
-});
-
-let yesterdayChartBar_ref = ref(null);
-
-let chartData_length = computed(() => (chartData.value.datasets.length + Math.floor(Math.random() * 101)));
-
-let legend_id = ref("yesterday-time-legend-container");
-
-let chartData = computed(() => props.chartData)
-let is_loading = computed(() => props.is_loading)
-let do_yesterday = computed(() => props.yesterday)
-let is_generic_day = computed(() => props.is_generic_day)
-
-let maxY = ref(0);
-let is_last_business_day = ref(false);
-
-const getWrapperClass = computed(() => {
-  return {
-    'chart_time_full': is_generic_day.value,
-    'chart_time': !is_generic_day.value && !is_last_business_day.value,
-    'chart_time_86': !is_generic_day.value && is_last_business_day.value,
-  };
-});
-
-watch(props.chartData, (newChartData) => {
-  if(!do_yesterday.value) {
-    legend_id.value = "singleday-time-legend-container";
-  }
-  is_last_business_day.value = props.is_last_business_day;
-    //console.log(">>>>>>>>>>>>> watch: " + JSON.stringify(newChartData));
-    if (newChartData.datasets && newChartData.datasets.length > 0) {
-      let data = newChartData.datasets[0].data.concat(newChartData.datasets[1].data);
-      let maxData = tsCoreUtils.getMaxFromData(data);
-      maxY.value = (Math.ceil(maxData / 5) * 5);
-      if(maxY.value == maxData) {
-        maxY.value = maxY.value + 3;
-      }
-    } else {
-        maxY.value = 5;
-    }
-    if(!chartOptions) return;
-    chartOptions.value.plugins.htmlLegend.is_last_business_day = props.is_last_business_day;
-    //console.log(">>>>>>>>>>>>>>>>>>>> maxY: " + maxY.value);
-    if(maxY.value < 20) {
-      chartOptions.value.scales.y.ticks.stepSize = 1;
-    }else{
-      chartOptions.value.scales.y.ticks.stepSize = 5;
-    }
-    chartOptions.value.scales.y.max = maxY.value;
-
-    if(tsStore.darkmode) {
-      Chart.defaults.color = 'white';
-      Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.2)';
-    }
-}, { immediate: true });
-
-var chartOptions = ref({
-        responsive: true,
-        animation: false,
-        maintainAspectRatio: false,
-        categoryPercentage: 1,
-        barPercentage: 1,
-        scales: {
-          x: {
-            title: {
-              display: true,
-              text: browser.i18n.getMessage('TimeChart.Time')
-            },
-            beginAtZero: true,
-            min: 0,
-          },
-          y: {
-            title: {
-              display: true,
-              text: browser.i18n.getMessage('Mails')
-            },
-            ticks: {
-              stepSize: 1,
-              // callback: function(value) {
-              //   if (Number.isInteger(value)) {
-              //     return value;
-              //   }
-              //   return '';
-              // },
-            },
-            beginAtZero: true,
-            min: 0,
-          }
-        },
-        plugins: {
-          legend: {
-            display: false,
-          },
-          htmlLegend: {
-            // ID of the container to put the legend in
-            containerID: legend_id.value,
-            is_today: false,
-            is_yesterday: do_yesterday.value,
-            is_last_business_day: is_last_business_day.value,
-          },
-          tooltip: {
-              enabled: false,
-              mode: 'index',
-              intersect: false,
-              external: function(context) {
-                externalTooltipTimeGraphLines(context, {is_generic_day: is_generic_day.value, is_last_business_day: is_last_business_day.value});
-              }
-            }
-        },
-      });
-
-
-let chartPlugins =  [htmlLegendPlugin];
-
-/*async function updateChart() {
-  //console.log("updateChart: " + JSON.stringify(chartData.value));
-}*/
-
-//defineExpose({ updateChart });
-
-</script>
-
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/options_tabs/OPTAB_Info.vue b/src/components/options_tabs/OPTAB_Info.vue
index 61810a46..2e9f4083 100644
--- a/src/components/options_tabs/OPTAB_Info.vue
+++ b/src/components/options_tabs/OPTAB_Info.vue
@@ -22,8 +22,16 @@
     <OptionDonationHeader />
     <div>
       <h1>ThunderStats Release Notes</h1>
-      <h3>Version 2.2.4 - ??/??/2024</h3>
+      <h3>Version 2.3.0 - ??/??/2024</h3>
       <ul>
+        <li>It's now possible to search for read/unread and starred/unsterred in the Custom View [<a href="https://github.com/micz/ThunderStats/issues/158">#158</a>].</li>
+        <li>It's now possible to search for a keyword in the subject in the Custom View [<a href="https://github.com/micz/ThunderStats/issues/354">#354</a>].</li>
+        <li>Added the sent / received domains chart [<a href="https://github.com/micz/ThunderStats/issues/380">#380</a>].</li>
+        <li>Added the sent / received folders chart [<a href="https://github.com/micz/ThunderStats/issues/357">#357</a>].</li>
+        <li>Added the sent / received tags chart [<a href="https://github.com/micz/ThunderStats/issues/359">#359</a>].</li>        
+        <li>Added a details view of the Inbox Zero Dates chart [<a href="https://github.com/micz/ThunderStats/issues/350">#350</a>]</li>
+        <li>The advanced filters panel opening and closing spacing is now fixed [<a href="https://github.com/micz/ThunderStats/issues/386">#386</a>].</li>
+        <li>Added an option to do not load data in the Custom View at startup.</li>
         <li>In Thunderbird 128 is now possible again to choose to open a folder from the Inbox Zero Folder Chart in a new tab or not.</li>
         <li>...</li>
       </ul>
@@ -46,7 +54,7 @@
         <li>The toolbar button is now always visible.</li>
         <li>Folders select dropdown text color fixed.</li>
         <li>Weekdays chart fixed [<a href="https://github.com/micz/ThunderStats/issues/374">#374</a>].</li>
-        <li>Improved the positioning of the labels on the Inbox Zero Folders graphs [<a href="https://github.com/micz/ThunderStats/issues/370">#370</a>, <a href="https://github.com/micz/ThunderStats/issues/373">#373</a>].</li>
+        <li>Improved the positioning of the labels on the Inbox Zero Folders charts [<a href="https://github.com/micz/ThunderStats/issues/370">#370</a>, <a href="https://github.com/micz/ThunderStats/issues/373">#373</a>].</li>
         <li>In the advanced filters panel is now possible to check the "include subolders" checkbox clicking on its label [<a href="https://github.com/micz/ThunderStats/issues/371">#371</a>].</li>
         <li>Inbox percentage loading indicator timing fixed [<a href="https://github.com/micz/ThunderStats/issues/376">#376</a>].</li>
         <li>Fixed a label error in the weekdays chart, which misordered the days relative to the number of emails.</li>
@@ -58,7 +66,7 @@
       <ul>
         <li>When executing a custom query for a single day, now is used the single day view [<a href="https://github.com/micz/ThunderStats/issues/315">#315</a>].</li>
         <li>The Inbox Zero Folders Chart is no longer partially hidden under the bottom border in certain circumstances.</li>
-        <li>The labels on the Inbox Zero Folders graphs no longer overlap [<a href="https://github.com/micz/ThunderStats/issues/341">#341</a>].</li>
+        <li>The labels on the Inbox Zero Folders charts no longer overlap [<a href="https://github.com/micz/ThunderStats/issues/341">#341</a>].</li>
         <li>Added the precentage of mails moved from inbox in all the single day views [<a href="https://github.com/micz/ThunderStats/issues/343">#343</a>].</li>
         <li>Fixed a concurrency bug in displaying the elapsed time. It now always shows the maximum value.</li>
         <li>Added a warning if querying too much days in the Custom View. Added an option in the advanced tab to choose the maximum number of days to query without a warning. It's also possible to disable the warning completely [<a href="https://github.com/micz/ThunderStats/issues/281">#281</a>].</li>
@@ -78,8 +86,8 @@
         <li>Added an hourly email extract divider in the Today and Yesterday tabs.</li>
        </ul>
        <li>Added the total number of mails in aggregate stats in Today Tab, Yesterday Tab, 7 Days Tab and Custom View Tabs. This total also considers business days only if the corresponding option is active [<a href="https://github.com/micz/ThunderStats/issues/323">#323</a>].</li>
-       <li>Added an option to display today's time graph lines only up to the current hour [<a href="https://github.com/micz/ThunderStats/issues/302">#302</a>].</li>
-       <li>In today's time graph, a vertical line has been added to indicate the current hour [<a href="https://github.com/micz/ThunderStats/issues/79">#79</a>].</li>
+       <li>Added an option to display Today Tab's Time Chart lines only up to the current hour [<a href="https://github.com/micz/ThunderStats/issues/302">#302</a>].</li>
+       <li>In Today Tab's Time Chart, a vertical line has been added to indicate the current hour [<a href="https://github.com/micz/ThunderStats/issues/79">#79</a>].</li>
        <li>Some options have been moved from the options page "Advanced" tab to the "General" tab.</li>
        <li>Displaying the last execution time for each tab [<a href="https://github.com/micz/ThunderStats/issues/314">#314</a>].</li>
        <li>Changed the color of the 'Today' bar in the 7-Days Tab Chart [<a href="https://github.com/micz/ThunderStats/issues/326">#326</a>].</li>
@@ -109,7 +117,7 @@
        <li>Added dark mode [<a href="https://github.com/micz/ThunderStats/issues/197">#197</a>].</li>
        <li>It's now possibile to define a locale for the datepicker different from the default one [<a href="https://github.com/micz/ThunderStats/issues/238">#238</a>].</li>
        <li>Added an option to choose to remember last opened tab [<a href="https://github.com/micz/ThunderStats/issues/232">#232</a>].</li>
-       <li>The Time Graph is now a line graph [<a href="https://github.com/micz/ThunderStats/issues/198">#198</a>].</li>
+       <li>The Time Chart is now a line chart [<a href="https://github.com/micz/ThunderStats/issues/198">#198</a>].</li>
        <li>Added info for the last days in the Yesterday Tab [<a href="https://github.com/micz/ThunderStats/issues/276">#276</a>].</li>
        <li>The elaboration time is now shown [<a href="https://github.com/micz/ThunderStats/issues/218">#218</a>].</li>
        <li>The results are displayed as they become available [<a href="https://github.com/micz/ThunderStats/issues/219">#219</a>].</li>
@@ -128,7 +136,7 @@
        <li>Added dark mode [<a href="https://github.com/micz/ThunderStats/issues/197">#197</a>].</li>
        <li>It's now possibile to define a locale for the datepicker different from the default one [<a href="https://github.com/micz/ThunderStats/issues/238">#238</a>].</li>
        <li>Added an option to choose to remember last opened tab [<a href="https://github.com/micz/ThunderStats/issues/232">#232</a>].</li>
-       <li>The Time Graph is now a line graph [<a href="https://github.com/micz/ThunderStats/issues/198">#198</a>].</li>
+       <li>The Time Chart is now a line chart [<a href="https://github.com/micz/ThunderStats/issues/198">#198</a>].</li>
        <li>Added info for the last days in the Yesterday Tab [<a href="https://github.com/micz/ThunderStats/issues/276">#276</a>].</li>
        <li>The elaboration time is now shown [<a href="https://github.com/micz/ThunderStats/issues/218">#218</a>].</li>
        <li>The results are displayed as they become available [<a href="https://github.com/micz/ThunderStats/issues/219">#219</a>].</li>
diff --git a/src/components/options_tabs/OPTAB_Main.vue b/src/components/options_tabs/OPTAB_Main.vue
index fa87f497..f063aea3 100644
--- a/src/components/options_tabs/OPTAB_Main.vue
+++ b/src/components/options_tabs/OPTAB_Main.vue
@@ -66,6 +66,14 @@
      <label><span class="dims_label" @click="toggle_options">__MSG_prefs_customqry_always_open_adv_filters__</span></label>
       </td>
     </tr>
+    <tr>
+      <td>
+        <label><input type="checkbox" id="customqry_loaddata_when_opening_addon" name="customqry_loaddata_when_opening_addon" class="option-input" /></label>
+      </td>
+      <td>
+     <label><span class="dims_label" @click="toggle_options">__MSG_prefs_customqry_loaddata_when_opening_addon__</span></label>
+      </td>
+    </tr>
   </table>
     <table class="miczPrefs" style="margin-top: 10px;">
       <tr>
@@ -73,7 +81,7 @@
     </tr>
     <tr>
       <td>
-        <label><input type="checkbox" id="today_time_graph_show_yesterday" name="today_time_graph_show_yesterday" class="option-input" /></label>
+        <label><input type="checkbox" id="today_time_chart_show_yesterday" name="today_time_chart_show_yesterday" class="option-input" /></label>
       </td>
       <td>
      <label><span class="dims_label" @click="toggle_options">__MSG_TodayTimeChartShowYesterday__</span></label>
@@ -81,7 +89,7 @@
     </tr>
       <tr>
       <td>
-        <label><input type="checkbox" id="_time_graph_progressive" name="_time_graph_progressive" class="option-input" /></label>
+        <label><input type="checkbox" id="_time_chart_progressive" name="_time_chart_progressive" class="option-input" /></label>
       </td>
       <td>
      <label><span class="dims_label" @click="toggle_options">__MSG_TimeChartProgressive__</span></label>
@@ -89,7 +97,7 @@
     </tr>
     <tr>
       <td>
-        <label><input type="checkbox" id="today_time_graph_do_no_show_future" name="today_time_graph_do_no_show_future" class="option-input" /></label> 
+        <label><input type="checkbox" id="today_time_chart_do_no_show_future" name="today_time_chart_do_no_show_future" class="option-input" /></label> 
       </td>
       <td>
         <label><span class="dims_label" @click="toggle_options">__MSG_TimeChartNoFutureHours__</span></label>
diff --git a/src/components/tabs/TAB_CustomQry.vue b/src/components/tabs/TAB_CustomQry.vue
index 6e582d93..67187137 100644
--- a/src/components/tabs/TAB_CustomQry.vue
+++ b/src/components/tabs/TAB_CustomQry.vue
@@ -24,92 +24,142 @@
             <div id="customqry_menu">
                 <img src="@/assets/images/mzts-customqry-view.png" @click="openBookmarkMenu" @contextmenu="openBookmarkMenu" title="__MSG_Bookmarks_Menu__" class="bookmarkmenu"/>
             </div>
-                <span style="margin: 0px 10px;" @click="updateAdvFiltersPosition">__MSG_DateRange__</span> <VueDatePicker v-model="dateQry" @update:model-value="rangeChoosen" :dark="isDark" :format="datepickerFormat" :locale="prefLocale" :range="{ partialRange: false }" :max-date="new Date()" :multi-calendars="{ solo: false, static: true }" :enable-time-picker="false" :clearable="false" ></VueDatePicker>
+                <span style="margin: 0px 10px;">__MSG_DateRange__</span> <VueDatePicker v-model="dateQry" @update:model-value="rangeChoosen" :dark="isDark" :format="datepickerFormat" :locale="prefLocale" :range="{ partialRange: false }" :max-date="new Date()" :multi-calendars="{ solo: false, static: true }" :enable-time-picker="false" :clearable="false" ></VueDatePicker>
                 <img :src="advanced_filters_icon" @click="toggleAdvancedFilters" title="__MSG_ShowAdvFilters__" class="filters_btn"/>
                 <button type="button" id="customqry_update_btn" @click="update">__MSG_UpdateCustomQry__</button>
                 <input type="checkbox" id="customqry_only_bd" v-model="doOnlyBD" :disabled="customqry_only_bd_disabled" /> __MSG_OnlyBDCustomQry__
                 <div id="customqry_datamsg" v-if="do_run">__MSG_CustomQryDataMsg__: <div class="email_list_container" @mouseover="showEmailListTooltip" @mouseleave="hideEmailListTooltip"><span v-text="customqry_current_account" :class="props.accountEmails.length > max_direct_accounts ? 'email_list_span' : ''"></span><span class="email_list_tooltip_text" v-if="emailListTooltipVisible" v-text="customqry_current_account_tooltip"></span></div> - __MSG_TotalDays__: <span v-text="customqry_totaldays_num"></span></div>
                 <div id="customqry_adv_filters" v-if="show_advanced_filters">
                   <div class="adv_filters_main_title">__MSG_AdvFilters__</div>
-                  <div id="filterFolder_container">
-                    <span class="adv_filters_title">__MSG_ChooseFoldersFilter__<span v-if="tsStore.current_account_id == 0"> (__MSG_ChooseAccountToFilterFolders__)</span></span>
-                    <br><Multiselect
-                      v-model="filterFolder"
-                      id="filterFolder"
-                      name="filterFolder"
-                      :options="folderList"
-                      :searchable="true"
-                      :close-on-select="true"
-                      :show-labels="false"
-                      :allow-empty="true"
-                      :create-option="false"
-                      mode="tags"
-                      :disabled="tsStore.current_account_id == 0"
-                      :placeholder="folderFiltersPlaceholder"
-                      ref="filterFolder_ref"
-                    >
-                    </Multiselect>
-                    <div style="margin-top:2px;">
-                      <input type="checkbox" id="filterFolder_do_subfolders" v-model="filterFolder_do_subfolders" /><span @click="filterFolder_do_subfolders = !filterFolder_do_subfolders" style="cursor: pointer;"> __MSG_FilterFoldersIncludeSubfolders__</span>
-                    </div>
-                  </div>
+                  <table id="customqry_adv_filters_table">
+                    <tr>
+                      <td>
+                        <div id="filterFolder_container">
+                          <span class="adv_filters_title">__MSG_ChooseFoldersFilter__<span v-if="tsStore.current_account_id == 0"> (__MSG_ChooseAccountToFilterFolders__)</span></span>
+                          <br><Multiselect
+                            v-model="filterFolder"
+                            id="filterFolder"
+                            name="filterFolder"
+                            :options="folderList"
+                            :searchable="true"
+                            :close-on-select="true"
+                            :show-labels="false"
+                            :allow-empty="true"
+                            :create-option="false"
+                            mode="tags"
+                            :disabled="tsStore.current_account_id == 0"
+                            :placeholder="folderFiltersPlaceholder"
+                            ref="filterFolder_ref"
+                          >
+                          </Multiselect>
+                          <div style="margin-top:2px;">
+                            <input type="checkbox" id="filterFolder_do_subfolders" v-model="filterFolder_do_subfolders" /><span @click="filterFolder_do_subfolders = !filterFolder_do_subfolders" style="cursor: pointer;"> __MSG_FilterFoldersIncludeSubfolders__</span>
+                          </div>
+                        </div>
+                      </td>
+                      <td colspan="2">
+                        <span class="adv_filters_title">__MSG_FilterSubject__</span>
+                      <br><input type="text" id="filterSubject" name="filterSubject" v-model="filterSubject" @input="updateAdvFiltersSet" @change="updateAdvFiltersPosition" />
+                      <br>__MSG_WarnSearchCaseSensitive__
+                      </td>
+                    </tr>
+                    <tr>
+                      <td></td>
+                      <td class="td-30">
+                        <span class="adv_filters_title">__MSG_ReadStatus__</span><br>
+                        <select id="filterReadUnread" v-model="filterReadUnread" @change="updateAdvFiltersSet">
+                          <option value="0">__MSG_FilterFoldersAll__</option>
+                          <option value="1">__MSG_FilterFoldersOnlyRead__</option>
+                          <option value="2">__MSG_FilterFoldersOnlyUnread__</option>
+                        </select>
+                      </td>
+                      <td class="td-30">
+                        <span class="adv_filters_title">__MSG_FlagStatus__</span><br>
+                        <select id="filterFlaggedUnflagged" v-model="filterFlaggedUnflagged" @change="updateAdvFiltersSet">
+                          <option value="0">__MSG_FilterFoldersAll__</option>
+                          <option value="1">__MSG_FilterFoldersOnlyFlagged__</option>
+                          <option value="2">__MSG_FilterFoldersOnlyUnflagged__</option>
+                        </select>
+                    </td>
+                    </tr>
+                  </table>
                 </div>
             </div>
     <div class="square_container" id="customqry_square_container">
     <div v-if="!do_single_day" class="square_item"><div class="list_heading_wrapper">
                         <h2 class="list_heading cropped">__MSG_SentMails__: <span v-if="do_run && !is_loading_counter_sent_rcvd">{{ sent_total }}<InfoTooltip :showAnchor="doOnlyBD" :noteText="totalInfoTooltip_text"></InfoTooltip></span><img src="@/assets/images/mzts-wait_line.svg" class="spinner_small" alt="__MSG_Loading__..." v-if="do_run && is_loading_counter_sent_rcvd"/></h2>
+                        <div class="spacer" style="max-width:4.5em;" v-if="!do_run"></div>
+                        <div class="btn_group">
+                          <button type="button" @click="showDays" class="btn_small btn_small_start btn_disabled" ref="showDays_btn_ref" >Days</button>
+                          <button type="button" @click="showWeeks" class="btn_small" ref="showWeeks_btn_ref" >Weeks</button>
+                          <button type="button" @click="showMonths" class="btn_small" ref="showMonths_btn_ref" >Months</button>
+                          <button type="button" @click="showYears" class="btn_small btn_small_end" ref="showYears_btn_ref" >Years</button>
+                        </div>
+                        <div class="spacer" v-if="!do_run"></div>
                         <CounterManyDays_Row v-if="do_run" :is_loading="is_loading_counter_customqry" :_total="counter_customqry_sent_total" :_max="counter_customqry_sent_max" :_min="counter_customqry_sent_min" :_avg="counter_customqry_sent_avg" :showTotalInfoTooltip="doOnlyBD" :totalBDInfoTooltip_text="totalBDInfoTooltip_text"/>
                       </div>
-                      <GraphCustomQry v-if="do_run" :chartData="chartData_Sent" :chart_width="chart_width" :is_loading="is_loading_sent_graph" :key="chartData_Sent_length"/>
+                      <ChartCustomQry v-if="do_run" ref="chartCustomQrySent_ref" :data_type="chartdata_type" :chartData="chartData_Sent" :chart_width="chart_width" :is_loading="is_loading_sent_chart" :key="chartData_Sent_length"/>
     </div>
     <div v-if="do_single_day" class="square_item"><div class="list_heading_wrapper"><h2 class="list_heading cropped">__MSG_Mails__</h2>
         </div>
         <span class="list_heading_date" v-html="singleday_date_str"></span>
         <CounterSentReceived :is_loading="is_loading_counter_sent_rcvd" :_sent="sent_total" :_rcvd="rcvd_total" />
         <div class="singleday_spacing"></div>
-        <GraphYesterday :chartData="chartData_SingleDay" :is_loading="is_loading_singleday_graph" :yesterday = "false" :key="chartData_TimeDay_length"/>
+        <ChartTime :chartData="chartData_SingleDay" :is_loading="is_loading_singleday_chart" :day_type="1" />
     </div>
-
     <div v-if="!do_single_day" class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped">__MSG_ReceivedMails__: <span v-if="do_run && !is_loading_counter_sent_rcvd">{{ rcvd_total }}<InfoTooltip :showAnchor="doOnlyBD" :noteText="totalInfoTooltip_text"></InfoTooltip></span><img src="@/assets/images/mzts-wait_line.svg" class="spinner_small" alt="__MSG_Loading__..." v-if="do_run && is_loading_counter_sent_rcvd"/></h2>
                         <CounterManyDays_Row v-if="do_run" :is_loading="is_loading_counter_customqry" :_total="counter_customqry_rcvd_total" :_max="counter_customqry_rcvd_max" :_min="counter_customqry_rcvd_min" :_avg="counter_customqry_rcvd_avg" :showTotalInfoTooltip="doOnlyBD" :totalBDInfoTooltip_text="totalBDInfoTooltip_text"/>
 					  </div>
-					  <GraphCustomQry v-if="do_run" :chartData="chartData_Rcvd" :chart_width="chart_width" :is_loading="is_loading_rcvd_graph"  :key="chartData_Rcvd_length"/>
+					  <ChartCustomQry v-if="do_run" ref="chartCustomQryRcvd_ref" :data_type="chartdata_type" :chartData="chartData_Rcvd" :chart_width="chart_width" :is_loading="is_loading_rcvd_chart"  :key="chartData_Rcvd_length"/>
     </div>
     <div v-if="do_single_day" class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped">__MSG_InboxZeroStatus__</h2>
 					  </div>
-					  <CounterInbox :is_loading="is_loading_inbox_graph_folders" :inbox_total="counter_inbox_total" :inbox_unread="counter_inbox_unread" />
-            <CounterInboxPercent :is_loading="is_loading_counter_inbox_percent" :inbox_percent="counter_inbox_percent" />
-                      <div class="chart_inbox0_info"><p class="chart_info">__MSG_FolderLocation__ <InfoTooltip :showAnchor="showFolderLocationNoteAnchor" :noteText="folderLocationNote_text"></InfoTooltip></p><p class="chart_info_nomail" id="singleday_inbox0_folder_spread_nomails" v-if="!is_loading_counter_sent_rcvd && (rcvd_total == 0)" v-text="no_mails_received_yesterday"></p></div>
-                      <div class="chart_inbox0">
-                        <GraphInboxZeroFolders :chartData="chartData_InboxZeroFolders" :openFolderInFirstTab="inbox0_openFolderInFirstTab" :is_loading="is_loading_inbox_graph_folders" />
-                      </div>
-                      <div class="chart_inbox0_datemsg">
-                        <p class="chart_info">__MSG_InboxMailsDateSpreading__</p><p class="chart_info_nomail" id="singleday_inbox0_datemsg_nomails" v-if="!is_loading_counter_inbox && (counter_inbox_total == 0)" v-text="no_mails_inbox"></p>
-                        <GraphInboxZeroDates :chartData="chartData_InboxZeroDates" :is_loading="is_loading_inbox_graph_dates" />
-                      </div>
+            <WidgetInboxZero
+              :is_loading_counter_inbox="is_loading_counter_inbox"
+              :counter_inbox_total="counter_inbox_total"
+              :counter_inbox_unread="counter_inbox_unread"
+              :is_loading_counter_inbox_percent="is_loading_counter_inbox_percent"
+              :counter_inbox_percent="counter_inbox_percent"
+              :showFolderLocationNoteAnchor="showFolderLocationNoteAnchor"
+              :folderLocationNote_text="folderLocationNote_text"
+              :is_loading_counter_sent_rcvd="is_loading_counter_sent_rcvd"
+              :counter_rcvd="rcvd_total"
+              :chartData_InboxZeroFolders="chartData_InboxZeroFolders"
+              :inbox0_openFolderInFirstTab="inbox0_openFolderInFirstTab"
+              :is_loading_inbox_chart_folders="is_loading_inbox_chart_folders"
+              :no_mails_inbox="no_mails_inbox"
+              :chartData_InboxZeroDates="chartData_InboxZeroDates"
+              :chartData_InboxZeroDates_extended = "chartdata_inboxzero_dates"
+              :is_loading_inbox_chart_dates="is_loading_inbox_chart_dates"
+              :no_mails_received="no_mails_received"
+            />
     </div>
-
     <div v-if="!do_single_day" class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase">__MSG_TimeDay__</h2>
 					  </div>
-                      <GraphYesterday v-if="do_run" :chartData="chartData_TimeDay" :is_loading="is_loading_timeday_graph" :yesterday="false" :is_generic_day="true"/>
+            <ChartTime v-if="do_run" :chartData="chartData_TimeDay" :is_loading="is_loading_timeday_chart" :day_type="1"/>
     </div>
-
     <div v-if="!do_single_day" class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase">__MSG_Weekdays__</h2>
 					  </div>
-					<WidgetWeekDay v-if="do_run" :weekday_chartData="chartData_WeekDays" :is_loading="is_loading_weekdays_graph" :key="chartData_WeekDays_length" />
+					<WidgetWeekDay v-if="do_run" :weekday_chartData="chartData_WeekDays" :is_loading="is_loading_weekdays_chart" />
+    </div>
+    <div class="square_item"><div class="list_heading_wrapper">
+						<h2 class="list_heading cropped lowercase">__MSG_Domains__</h2>
+					  </div>
+           <WidgetDomains v-if="do_run" :chartData="chartData_Domains" chart_id="chart_domains_customqry" :chart_height="domains_chart_height" :is_loading="is_loading_domains_chart" />
+    </div>
+    <div class="square_item">
+                    <WidgetFoldersTags v-if="do_run" :chartDataFolders="chartData_Folders" :chartDataTags="chartData_Tags" :is_loading_folders="is_loading_folders_chart" :is_loading_tags="is_loading_tags_chart" />
     </div>
-
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase" v-text="top_recipients_title"></h2>
 					  </div>
 					  <TableInvolved :is_loading="is_loading_involved_table_recipients" :tableData="table_involved_recipients" v-if="do_run && (is_loading_involved_table_recipients || show_table_involved_recipients)" />
                     <p class="chart_info_nomail" v-if="!is_loading_involved_table_recipients && !show_table_involved_recipients">__MSG_NoMailsSent__</p>
     </div>
-    
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase" v-text="top_senders_title"></h2>
 					  </div>
@@ -120,7 +170,6 @@
 </template>
 
 
-
 <script setup>
 import { ref, onMounted, onBeforeMount, nextTick, computed, watch } from 'vue';
 import { tsLogger } from '@statslib/mzts-logger';
@@ -128,7 +177,7 @@ import { thunderStastsCore } from '@statslib/mzts-statscore';
 import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
 import { tsUtils } from '@statslib/mzts-utils';
 import TableInvolved from '../tables/TableInvolved.vue';
-import GraphCustomQry from '../graphs/GraphCustomQry.vue';
+import ChartCustomQry from '../charts/ChartCustomQry.vue';
 import CounterManyDays_Row from '../counters/CounterManyDays_Row.vue';
 import ExportMenu from '../ExportMenu.vue';
 import InfoTooltip from '../InfoTooltip.vue';
@@ -141,16 +190,16 @@ import '@vuepic/vue-datepicker/dist/main.css'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 import CounterSentReceived from '../counters/CounterSentReceived.vue';
-import GraphYesterday from '../graphs/GraphYesterday.vue';
-import GraphInboxZeroFolders from '../graphs/GraphInboxZeroFolders.vue';
-import GraphInboxZeroDates from '../graphs/GraphInboxZeroDates.vue';
-import CounterInbox from '../counters/CounterInbox.vue';
-import CounterInboxPercent from '../counters/CounterInboxPercent.vue';
+import ChartTime from '../charts/ChartTime.vue';
 import Multiselect from '@vueform/multiselect';
 import '@vueform/multiselect/themes/default.css';
 import advancedFiltersIconPath from '@/assets/images/mzts-customqry_adv_filters.svg';
 import advancedFiltersIconPath_Set from '@/assets/images/mzts-customqry_adv_filters_set.svg';
 import WidgetWeekDay from '../widgets/WidgetWeekDay.vue';
+import WidgetDomains from '../widgets/WidgetDomains.vue';
+import WidgetInboxZero from '../widgets/WidgetInboxZero.vue';
+import WidgetFoldersTags from '../widgets/WidgetFoldersTags.vue';
+
 
 const emit = defineEmits(['updateCustomQry'],['updateElapsed']['customQryUserCancelled']);
 
@@ -162,8 +211,14 @@ const props = defineProps({
 });
 
 let filterFolder_ref = ref(null);
+let chartCustomQrySent_ref = ref(null);
+let chartCustomQryRcvd_ref = ref(null);
+let showDays_btn_ref = ref(null);
+let showWeeks_btn_ref = ref(null);
+let showMonths_btn_ref = ref(null);
+let showYears_btn_ref = ref(null);
 
-let max_direct_accounts = 3;
+let max_direct_accounts = 1;
 
 let tsLog = null;
 var tsCore = null;
@@ -181,10 +236,13 @@ let emailListTooltipVisible = ref(false);
 let show_advanced_filters = ref(false);
 let advanced_filters_set = ref(false)
 let folderList = ref([]);
-let filterFolder = ref([]);
-let filterFolder_do_subfolders = ref(true);
 let advanced_filters_icon = ref(advancedFiltersIconPath);
 let customqry_only_bd_disabled = ref(false);
+let filterFolder = ref([]);
+let filterFolder_do_subfolders = ref(true);
+let filterReadUnread = ref(0); // 0: all, 1: read, 2: unread
+let filterFlaggedUnflagged = ref(0); // 0: all, 1: flagged, 2: unflagged
+let filterSubject = ref("");
 
 // single day view
 let do_progressive = true;
@@ -192,14 +250,15 @@ let inbox0_openFolderInFirstTab = ref(false);
 let do_single_day = ref(false);
 let singleDay = ref(null);
 let singleday_date_str = ref("");
+let no_mails_received = ref("");
 
-let is_loading_singleday_graph = ref(true);
-let is_loading_inbox_graph_folders = ref(true);
-let is_loading_inbox_graph_dates = ref(true);
+let is_loading_singleday_chart = ref(true);
+let is_loading_inbox_chart_folders = ref(true);
+let is_loading_inbox_chart_dates = ref(true);
 let is_loading_counter_inbox = ref(true);
 let is_loading_counter_inbox_percent = ref(true);
-let is_loading_timeday_graph = ref(true);
-let is_loading_weekdays_graph = ref(true);
+let is_loading_timeday_chart = ref(true);
+let is_loading_weekdays_chart = ref(true);
 
 let counter_inbox_total = ref(0);
 let counter_inbox_unread = ref(0);
@@ -210,8 +269,6 @@ let chartData_SingleDay = ref({
     datasets: []
 });
 
-let graphdata_singleday_hours_sent = ref([]);
-let graphdata_singleday_hours_rcvd = ref([]);
 let chartData_InboxZeroFolders = ref({
     labels: [],
     datasets: []
@@ -220,8 +277,16 @@ let chartData_InboxZeroDates = ref({
     labels: [],
     datasets: []
 });
-let graphdata_inboxzero_folders = ref([]);
-let graphdata_inboxzero_dates = ref([]);
+
+let chartData_Domains = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartdata_singleday_hours_sent = ref([]);
+let chartdata_singleday_hours_rcvd = ref([]);
+let chartdata_inboxzero_folders = ref([]);
+let chartdata_inboxzero_dates = ref([]);
 
 let showFolderLocationNoteAnchor = ref(false);
 let folderLocationNote_text = ref("");
@@ -242,8 +307,11 @@ let is_loading_counter_sent_rcvd = ref(true);
 let is_loading_counter_customqry = ref(true);
 let is_loading_involved_table_recipients = ref(true);
 let is_loading_involved_table_senders = ref(true);
-let is_loading_sent_graph = ref(true);
-let is_loading_rcvd_graph = ref(true);
+let is_loading_sent_chart = ref(true);
+let is_loading_rcvd_chart = ref(true);
+let is_loading_domains_chart = ref(true);
+let is_loading_folders_chart = ref(true);
+let is_loading_tags_chart = ref(true);
 
 let counter_customqry_sent_total = ref(0);
 let counter_customqry_sent_max = ref(0);
@@ -259,13 +327,33 @@ let table_involved_senders = ref([]);
 let show_table_involved_recipients = ref(false);
 let show_table_involved_senders = ref(false);
 
-let graphdata_customqry_sent = ref([]);
-let graphdata_customqry_rcvd = ref([]);
-let graphdata_customqry_labels = ref([]);
-let graphdata_customqry_hours_sent = ref([]);
-let graphdata_customqry_hours_rcvd = ref([]);
-let graphdata_customqry_weekdays_sent = ref([]);
-let graphdata_customqry_weekdays_rcvd = ref([]);
+let chartdata_customqry_sent = ref([]);
+let chartdata_customqry_rcvd = ref([]);
+let chartdata_customqry_labels = ref([]);
+let chartdata_customqry_weeks_sent = ref([]);
+let chartdata_customqry_weeks_rcvd = ref([]);
+let chartdata_customqry_weeks_labels = ref([]);
+let chartdata_customqry_months_sent = ref([]);
+let chartdata_customqry_months_rcvd = ref([]);
+let chartdata_customqry_months_labels = ref([]);
+let chartdata_customqry_years_sent = ref([]);
+let chartdata_customqry_years_rcvd = ref([]);
+let chartdata_customqry_years_labels = ref([]);
+let chartdata_customqry_hours_sent = ref([]);
+let chartdata_customqry_hours_rcvd = ref([]);
+let chartdata_customqry_weekdays_sent = ref([]);
+let chartdata_customqry_weekdays_rcvd = ref([]);
+let chartdata_domains_sent = ref([]);
+let chartdata_domains_rcvd = ref([]);
+let chartdata_domains_labels = ref([]);
+let chartdata_folders_sent = ref([]);
+let chartdata_folders_rcvd = ref([]);
+let chartdata_folders_labels = ref([]);
+let chartdata_tags_sent = ref([]);
+let chartdata_tags_rcvd = ref([]);
+let chartdata_tags_labels = ref([]);
+
+let domains_chart_height = ref("275px");
 
 let _export_data = ref({});
 
@@ -289,19 +377,67 @@ let chartData_Rcvd = ref({
 });
 let chartData_Rcvd_length = computed(() => (chartData_Rcvd.value.datasets.length + Math.floor(Math.random() * 101)));
 
+let chartData_Sent_Original = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Rcvd_Original = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Weeks_Sent = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Weeks_Rcvd = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Months_Sent = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Months_Rcvd = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Years_Sent = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Years_Rcvd = ref({
+    labels: [],
+    datasets: []
+});
+
 let chartData_TimeDay = ref({
     labels: Array.from({length: 24}, (_, i) => String(i).padStart(2, '0')),
     datasets: []
 });
 
-let chartData_TimeDay_length = computed(() => (chartData_TimeDay.value.datasets.length + Math.floor(Math.random() * 101)));
-
 let chartData_WeekDays = ref({
     labels: Array.from({length: 7}, (_, i) => i),
     datasets: []
 });
 
-let chartData_WeekDays_length = computed(() => (chartData_WeekDays.value.datasets.length + Math.floor(Math.random() * 101)));
+let chartData_Folders = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Tags = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartdata_type = ref("YYYYMMDD"); // "YYYY" | "YYYYMM" | "YYYYWW" | "YYYYMMDD"
 
 let elapsed = {
     'getCustomQryData':0,
@@ -313,19 +449,25 @@ let job_done = computed(() => {
     is_loading_counter_customqry.value &&
     is_loading_involved_table_recipients.value &&
     is_loading_involved_table_senders.value &&
-    is_loading_sent_graph.value &&
-    is_loading_rcvd_graph.value &&
-    is_loading_timeday_graph.value &&
-    is_loading_weekdays_graph.value);
+    is_loading_sent_chart.value &&
+    is_loading_rcvd_chart.value &&
+    is_loading_timeday_chart.value &&
+    is_loading_weekdays_chart.value &&
+    is_loading_domains_chart.value &&
+    is_loading_tags_chart.value &&
+    is_loading_folders_chart.value);
   }else{
     return !(is_loading_counter_sent_rcvd.value &&
-    is_loading_singleday_graph.value &&
+    is_loading_singleday_chart.value &&
     is_loading_involved_table_recipients.value &&
     is_loading_involved_table_senders.value &&
     is_loading_counter_inbox.value &&
     is_loading_counter_inbox_percent.value &&
-    is_loading_inbox_graph_folders.value &&
-    is_loading_inbox_graph_dates.value);
+    is_loading_inbox_chart_folders.value &&
+    is_loading_inbox_chart_dates.value &&
+    is_loading_domains_chart.value &&
+    is_loading_tags_chart.value &&
+    is_loading_folders_chart.value);
   }
 });
 
@@ -352,9 +494,42 @@ watch(() => do_single_day.value, async (newValue, oldValue) => {
     doOnlyBD.value = false;
     customqry_only_bd_disabled.value = true;
   }else{
+    let prefs_bday = await tsPrefs.getPref("bday_default_only");
     customqry_only_bd_disabled.value = false;
+    doOnlyBD.value = prefs_bday;
   }
-})
+});
+
+watch(() => chartdata_type.value, async (newValue, oldValue) => {
+  switch(newValue){
+    case "YYYYMMDD":
+      showDays_btn_ref.value.classList.add("btn_disabled");
+      break;
+    case "YYYYWW":
+      showWeeks_btn_ref.value.classList.add("btn_disabled");
+      break;
+    case "YYYYMM":
+      showMonths_btn_ref.value.classList.add("btn_disabled");
+      break;
+    case "YYYY":
+      showYears_btn_ref.value.classList.add("btn_disabled");
+      break;
+  }
+  switch(oldValue){
+    case "YYYYMMDD":
+      showDays_btn_ref.value.classList.remove("btn_disabled");
+      break;
+    case "YYYYWW":
+      showWeeks_btn_ref.value.classList.remove("btn_disabled");
+      break;
+    case "YYYYMM":
+      showMonths_btn_ref.value.classList.remove("btn_disabled");
+      break;
+    case "YYYY":
+      showYears_btn_ref.value.classList.remove("btn_disabled");
+      break;
+  }
+});
 
 onBeforeMount(async () => {
   tsLog = new tsLogger("TAB_CustomQry", tsStore.do_debug);
@@ -387,6 +562,7 @@ onMounted(async () => {
     if(tsStore.current_account_id != 0) {
       folderList.value = await tsCoreUtils.getAccountFoldersNames(tsStore.current_account_id);
     }
+    no_mails_received.value = browser.i18n.getMessage("NoMailsReceived");
 });
 
 function update(){
@@ -394,6 +570,38 @@ function update(){
   emit('updateCustomQry');
 }
 
+function showDays(){
+  tsLog.log("Show days");
+  chartData_Sent.value = {...chartData_Sent_Original.value};
+  chartData_Rcvd.value = {...chartData_Rcvd_Original.value};
+  chartdata_type.value = "YYYYMMDD";
+  setChartWidth();
+}
+
+function showWeeks(){
+  tsLog.log("Show weeks");
+  chartData_Sent.value = {...chartData_Weeks_Sent.value};
+  chartData_Rcvd.value = {...chartData_Weeks_Rcvd.value};
+  chartdata_type.value = "YYYYWW";
+  setChartWidth();
+}
+
+function showMonths(){
+  tsLog.log("Show months");
+  chartData_Sent.value = {...chartData_Months_Sent.value};
+  chartData_Rcvd.value = {...chartData_Months_Rcvd.value};
+  chartdata_type.value = "YYYYMM";
+  setChartWidth();
+}
+
+function showYears(){
+  tsLog.log("Show years");
+  chartData_Sent.value = {...chartData_Years_Sent.value};
+  chartData_Rcvd.value = {...chartData_Years_Rcvd.value};
+  chartdata_type.value = "YYYY";
+  setChartWidth();
+}
+
 async function rangeChoosen(modelData){
   //console.log(">>>>>>>>>>>>>>> rangeChoosen: " + JSON.stringify(modelData));
   if(await tsPrefs.getPref("customqry_loaddata_when_selectingrange")){
@@ -411,6 +619,15 @@ const updateAdvFiltersSet = () => {
   if(filterFolder.value.length > 0){
     out_value = true;
   }
+  if(filterReadUnread.value > 0){
+    out_value = true;
+  }
+  if(filterFlaggedUnflagged.value > 0){
+    out_value = true;
+  }
+  if(filterSubject.value.length > 0){
+    out_value = true;
+  }
 
   advanced_filters_set.value = out_value;
 }
@@ -527,6 +744,7 @@ async function doQry(){
     }
   }
   loadingDo();
+  chartdata_type.value = "YYYYMMDD";
   do_single_day.value = (customqry_totaldays_num.value == 1);
   elapsed.getInboxZeroData = 1;
   if(do_single_day.value){
@@ -549,29 +767,62 @@ async function doQry(){
   updateData();
 }
 
+function setChartWidth(){
+  let chart_container_width = document.querySelector('.chart_customqry').clientWidth;
+  let chart_ipotetic_width = chartData_Rcvd.value.labels.length * 60;
+  if(chart_container_width < chart_ipotetic_width){
+    chart_width.value = String(chart_ipotetic_width) + "px";
+  } else {
+    chart_width.value = String(chart_container_width) + "px";
+  }
+}
+
 async function updateData() {
     while(props.updated == false){
         await new Promise(r => setTimeout(r, 100));
     }
-    let prefs = await tsPrefs.getPrefs(["_time_graph_progressive", "accounts_adv_settings"]);
-    do_progressive = prefs._time_graph_progressive;
+    let prefs = await tsPrefs.getPrefs(["_time_chart_progressive", "accounts_adv_settings"]);
+    do_progressive = prefs._time_chart_progressive;
     let accounts_adv_settings = prefs.accounts_adv_settings;
     tsCore = new thunderStastsCore({do_debug: tsStore.do_debug, _involved_num: _involved_num, accounts_adv_settings: accounts_adv_settings});
     tsLog.log("props.accountEmails: " + JSON.stringify(props.accountEmails));
     tsLog.log("dateQry: " + JSON.stringify(dateQry.value));
     await getCustomQryData();
     if(!do_single_day.value){
-      let chart_container_width = document.querySelector('.chart_customqry').clientWidth;
-      let chart_ipotetic_width = graphdata_customqry_labels.value.length * 30;
-      if(chart_container_width < chart_ipotetic_width){
-        chart_width.value = String(chart_ipotetic_width) + "px";
-      } else {
-        chart_width.value = String(chart_container_width) + "px";
-      }
-      chartData_Sent.value.datasets = [];
-      chartData_Sent.value.datasets.push({
+      chartData_Sent_Original.value.datasets = [];
+      chartData_Sent_Original.value.datasets.push({
+          label: 'Sent',
+          data: chartdata_customqry_sent.value,
+          borderColor: tsStore.chart_colors.many_days_default,
+          backgroundColor: tsStore.chart_colors.many_days_default,
+          borderWidth: 2,
+          pointRadius: 1,
+          //maxBarThickness: 15,
+          minBarThickness: 15,
+      });
+      tsLog.log("chartdata_customqry_sent.value: " + JSON.stringify(chartdata_customqry_sent.value));
+      chartData_Sent_Original.value.labels = chartdata_customqry_labels.value;
+      chartData_Sent.value = chartData_Sent_Original.value;
+      chartData_Rcvd_Original.value.datasets = [];
+      chartData_Rcvd_Original.value.datasets.push({
+          label: 'Received',
+          data: chartdata_customqry_rcvd.value,
+          borderColor: tsStore.chart_colors.many_days_default,
+          backgroundColor: tsStore.chart_colors.many_days_default,
+          borderWidth: 2,
+          pointRadius: 1,
+          //maxBarThickness: 15,
+          minBarThickness: 15,
+      });
+      tsLog.log("chartdata_customqry_rcvd.value: " + JSON.stringify(chartdata_customqry_rcvd.value));
+      chartData_Rcvd_Original.value.labels = chartdata_customqry_labels.value;
+      chartData_Rcvd.value = chartData_Rcvd_Original.value;
+      setChartWidth();
+      //weeks
+      chartData_Weeks_Sent.value.datasets = [];
+      chartData_Weeks_Sent.value.datasets.push({
           label: 'Sent',
-          data: graphdata_customqry_sent.value,
+          data: chartdata_customqry_weeks_sent.value,
           borderColor: tsStore.chart_colors.many_days_default,
           backgroundColor: tsStore.chart_colors.many_days_default,
           borderWidth: 2,
@@ -579,12 +830,11 @@ async function updateData() {
           //maxBarThickness: 15,
           minBarThickness: 15,
       });
-      tsLog.log("graphdata_customqry_sent.value: " + JSON.stringify(graphdata_customqry_sent.value));
-      chartData_Sent.value.labels = graphdata_customqry_labels.value;
-      chartData_Rcvd.value.datasets = [];
-      chartData_Rcvd.value.datasets.push({
+      chartData_Weeks_Sent.value.labels = chartdata_customqry_weeks_labels.value;
+      chartData_Weeks_Rcvd.value.datasets = [];
+      chartData_Weeks_Rcvd.value.datasets.push({
           label: 'Received',
-          data: graphdata_customqry_rcvd.value,
+          data: chartdata_customqry_weeks_rcvd.value,
           borderColor: tsStore.chart_colors.many_days_default,
           backgroundColor: tsStore.chart_colors.many_days_default,
           borderWidth: 2,
@@ -592,14 +842,63 @@ async function updateData() {
           //maxBarThickness: 15,
           minBarThickness: 15,
       });
-      tsLog.log("graphdata_customqry_rcvd.value: " + JSON.stringify(graphdata_customqry_rcvd.value));
-      chartData_Rcvd.value.labels = graphdata_customqry_labels.value;
-      tsLog.log("graphdata_customqry_hours_sent.value: " + JSON.stringify(graphdata_customqry_hours_sent.value));
-      tsLog.log("graphdata_customqry_hours_rcvd.value: " + JSON.stringify(graphdata_customqry_hours_rcvd.value));
+      chartData_Weeks_Rcvd.value.labels = chartdata_customqry_weeks_labels.value;
+      //months
+      chartData_Months_Sent.value.datasets = [];
+      chartData_Months_Sent.value.datasets.push({
+          label: 'Sent',
+          data: chartdata_customqry_months_sent.value,
+          borderColor: tsStore.chart_colors.many_days_default,
+          backgroundColor: tsStore.chart_colors.many_days_default,
+          borderWidth: 2,
+          pointRadius: 1,
+          //maxBarThickness: 15,
+          minBarThickness: 15,
+      });
+      chartData_Months_Sent.value.labels = chartdata_customqry_months_labels.value;
+      chartData_Months_Rcvd.value.datasets = [];
+      chartData_Months_Rcvd.value.datasets.push({
+          label: 'Received',
+          data: chartdata_customqry_months_rcvd.value,
+          borderColor: tsStore.chart_colors.many_days_default,
+          backgroundColor: tsStore.chart_colors.many_days_default,
+          borderWidth: 2,
+          pointRadius: 1,
+          //maxBarThickness: 15,
+          minBarThickness: 15,
+      });
+      chartData_Months_Rcvd.value.labels = chartdata_customqry_months_labels.value;
+      //years
+      chartData_Years_Sent.value.datasets = [];
+      chartData_Years_Sent.value.datasets.push({
+          label: 'Sent',
+          data: chartdata_customqry_years_sent.value,
+          borderColor: tsStore.chart_colors.many_days_default,
+          backgroundColor: tsStore.chart_colors.many_days_default,
+          borderWidth: 2,
+          pointRadius: 1,
+          //maxBarThickness: 15,
+          minBarThickness: 15,
+      });
+      chartData_Years_Sent.value.labels = chartdata_customqry_years_labels.value;
+      chartData_Years_Rcvd.value.datasets = [];
+      chartData_Years_Rcvd.value.datasets.push({
+          label: 'Received',
+          data: chartdata_customqry_years_rcvd.value,
+          borderColor: tsStore.chart_colors.many_days_default,
+          backgroundColor: tsStore.chart_colors.many_days_default,
+          borderWidth: 2,
+          pointRadius: 1,
+          //maxBarThickness: 15,
+          minBarThickness: 15,
+      });
+      chartData_Years_Rcvd.value.labels = chartdata_customqry_years_labels.value;
+      tsLog.log("chartdata_customqry_hours_sent.value: " + JSON.stringify(chartdata_customqry_hours_sent.value));
+      tsLog.log("chartdata_customqry_hours_rcvd.value: " + JSON.stringify(chartdata_customqry_hours_rcvd.value));
       chartData_TimeDay.value.datasets = [];
       chartData_TimeDay.value.datasets.push({
           label: 'ysent',
-          data: graphdata_customqry_hours_sent.value,
+          data: chartdata_customqry_hours_sent.value,
           borderColor: tsStore.chart_colors._time_sent,
           backgroundColor: tsStore.chart_colors._time_sent,
           borderWidth: 2,
@@ -607,19 +906,19 @@ async function updateData() {
       });
       chartData_TimeDay.value.datasets.push({
           label: 'yrcvd',
-          data: graphdata_customqry_hours_rcvd.value,
+          data: chartdata_customqry_hours_rcvd.value,
           borderColor: tsStore.chart_colors._time_rcvd,
           backgroundColor: tsStore.chart_colors._time_rcvd,
           borderWidth: 2,
           pointRadius: 1,
       });
       // week days
-      tsLog.log("graphdata_customqry_hours_sent.value: " + JSON.stringify(graphdata_customqry_weekdays_rcvd.value));
-      tsLog.log("graphdata_customqry_hours_rcvd.value: " + JSON.stringify(graphdata_customqry_weekdays_sent.value));
+      tsLog.log("chartdata_customqry_hours_sent.value: " + JSON.stringify(chartdata_customqry_weekdays_rcvd.value));
+      tsLog.log("chartdata_customqry_hours_rcvd.value: " + JSON.stringify(chartdata_customqry_weekdays_sent.value));
       chartData_WeekDays.value.datasets = [];
       chartData_WeekDays.value.datasets.push({
           label: 'ysent',
-          data: graphdata_customqry_weekdays_sent.value,
+          data: chartdata_customqry_weekdays_sent.value,
           borderColor: tsStore.chart_colors._weekday_sent,
           backgroundColor: tsStore.chart_colors._weekday_sent,
           borderWidth: 2,
@@ -627,7 +926,7 @@ async function updateData() {
       })
       chartData_WeekDays.value.datasets.push({
           label: 'yrcvd',
-          data: graphdata_customqry_weekdays_rcvd.value,
+          data: chartdata_customqry_weekdays_rcvd.value,
           borderColor: tsStore.chart_colors._weekday_rcvd,
           backgroundColor: tsStore.chart_colors._weekday_rcvd,
           borderWidth: 2,
@@ -635,13 +934,13 @@ async function updateData() {
       })
     }else{    //single day
       getInboxZeroData();
-      // graph single day hours
-      tsLog.log("graphdata_singleday_hours_sent.value: " + JSON.stringify(graphdata_singleday_hours_sent.value));
-      tsLog.log("graphdata_singleday_hours_rcvd.value: " + JSON.stringify(graphdata_singleday_hours_rcvd.value));
+      // chart single day hours
+      tsLog.log("chartdata_singleday_hours_sent.value: " + JSON.stringify(chartdata_singleday_hours_sent.value));
+      tsLog.log("chartdata_singleday_hours_rcvd.value: " + JSON.stringify(chartdata_singleday_hours_rcvd.value));
       chartData_SingleDay.value.datasets = [];
       chartData_SingleDay.value.datasets.push({
           label: 'ysent',
-          data: graphdata_singleday_hours_sent.value,
+          data: chartdata_singleday_hours_sent.value,
           borderColor: tsStore.chart_colors._time_sent,
           backgroundColor: tsStore.chart_colors._time_sent,
           borderWidth: 2,
@@ -649,14 +948,14 @@ async function updateData() {
       })
       chartData_SingleDay.value.datasets.push({
           label: 'yrcvd',
-          data: graphdata_singleday_hours_rcvd.value,
+          data: chartdata_singleday_hours_rcvd.value,
           borderColor: tsStore.chart_colors._time_rcvd,
           backgroundColor: tsStore.chart_colors._time_rcvd,
           borderWidth: 2,
           pointRadius: 1,
       })
-      // graph inbox zero folders
-      let given_folders = tsCoreUtils.filterReceivedFolders(graphdata_inboxzero_folders.value);
+      // chart inbox zero folders
+      let given_folders = tsCoreUtils.filterReceivedFolders(chartdata_inboxzero_folders.value);
       let folders_data = tsCoreUtils.getFoldersLabelsColors(given_folders);
       if("folders" in folders_data){
         chartData_InboxZeroFolders.value.folders = folders_data.folders;
@@ -666,15 +965,90 @@ async function updateData() {
       chartData_InboxZeroFolders.value.datasets = [];
       chartData_InboxZeroFolders.value.datasets.push({data:tsCoreUtils.getFoldersCounts(given_folders), backgroundColor: folders_data.colors, borderColor: folders_data.colors});
       tsLog.log("chartData_InboxZeroFolders.value: " + JSON.stringify(chartData_InboxZeroFolders.value));
-      // graph inbox zero dates
+      // chart inbox zero dates
       inbox0_openFolderInFirstTab.value = await tsPrefs.getPref("inbox0_openFolderInFirstTab");
     }
+
+    // chart domains
+    let chart_container_height = document.getElementById('chart_domains_customqry').clientHeight;
+    let chart_ipotetic_height = chartdata_domains_labels.value.length * 60;
+    if(chart_container_height < chart_ipotetic_height){
+        domains_chart_height.value = String(chart_ipotetic_height) + "px";
+    } else {
+        domains_chart_height.value = String(chart_container_height) + "px";
+    }
+    chartData_Domains.value.labels = chartdata_domains_labels.value;
+    chartData_Domains.value.datasets = [];
+    chartData_Domains.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_domains_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Domains.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_domains_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Domains.value: " + JSON.stringify(chartData_Domains.value));
+    tsLog.log("chartData_Domains.value.labels: " + JSON.stringify(chartData_Domains.value.labels));
+
+    // chart folders
+    chartData_Folders.value.labels = chartdata_folders_labels.value;
+    chartData_Folders.value.datasets = [];
+    chartData_Folders.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_folders_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Folders.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_folders_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Folders.value: " + JSON.stringify(chartData_Folders.value));
+    tsLog.log("chartData_Folders.value.labels: " + JSON.stringify(chartData_Folders.value.labels));
+
+    // chart tags
+    chartData_Tags.value.labels = chartdata_tags_labels.value;
+    chartData_Tags.value.datasets = [];
+    chartData_Tags.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_tags_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Tags.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_tags_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Tags.value: " + JSON.stringify(chartData_Tags.value));
+    tsLog.log("chartData_Tags.value.labels: " + JSON.stringify(chartData_Tags.value.labels));
+
     nextTick(async () => {
         if(do_single_day.value){
-          is_loading_singleday_graph.value = false;
-          is_loading_inbox_graph_folders.value = false;
-          // is_loading_inbox_graph_dates.value = false;
-          showFolderLocationNoteAnchor.value = await tsCoreUtils.getFilterDuplicatesPreference(tsStore.current_account_id)
+          is_loading_singleday_chart.value = false;
+          is_loading_inbox_chart_folders.value = false;
+          // is_loading_inbox_chart_dates.value = false;
+          showFolderLocationNoteAnchor.value = await tsCoreUtils.getFilterDuplicatesPreference(tsStore.current_account_id);
+          await nextTick();
         }
         i18n.updateDocument();
     });
@@ -689,6 +1063,10 @@ async function updateData() {
             let advFilters = {};
             advFilters.folders = filterFolder.value;
             advFilters.folders_do_subfolders = filterFolder_do_subfolders.value;
+            advFilters.read_unread = filterReadUnread.value;
+            advFilters.flagged_unflagged = filterFlaggedUnflagged.value;
+            advFilters.filterSubject = filterSubject.value.trim();
+            tsLog.log("advFilters: " + JSON.stringify(advFilters, null, 2));
             let result_customqry = await tsCore.getCustomQryData(fromDate, toDate, tsStore.current_account_id, props.accountEmails, doOnlyBD.value, advFilters);
             tsLog.log("result_customqry: " + JSON.stringify(result_customqry, null, 2));
             // export data
@@ -712,11 +1090,11 @@ async function updateData() {
             tsLog.log("sent_total: " + sent_total.value + " rcvd_total: " + rcvd_total.value);
             is_loading_counter_sent_rcvd.value = false;
             if(!do_single_day.value){
-              // graph day hours
+              // chart day hours
               const _hours_data = tsCoreUtils.transformCountDataToDataset(result_customqry.msg_hours, false); // the false is to not to it progressive
-              graphdata_customqry_hours_sent.value = _hours_data.dataset_sent;
-              graphdata_customqry_hours_rcvd.value = _hours_data.dataset_rcvd;
-              is_loading_timeday_graph.value = false;
+              chartdata_customqry_hours_sent.value = _hours_data.dataset_sent;
+              chartdata_customqry_hours_rcvd.value = _hours_data.dataset_rcvd;
+              is_loading_timeday_chart.value = false;
               //aggregated data
               let aggregate = result_customqry.aggregate;
               tsLog.log("dates: " + JSON.stringify(result_customqry.dates, null, 2));
@@ -730,22 +1108,40 @@ async function updateData() {
               counter_customqry_sent_min.value = aggregate.min_sent;
               counter_customqry_sent_avg.value = aggregate.avg_sent;
               is_loading_counter_customqry.value = false;
-              // sent and received graphs
+              // sent and received charts
               const customqry_data = tsCoreUtils.transformCountDataToDataset(result_customqry.dates, false, true);
               tsLog.log("customqry_data: " + JSON.stringify(customqry_data));
-              graphdata_customqry_labels.value = customqry_data.labels;
-              // sent graph
-              graphdata_customqry_sent.value = customqry_data.dataset_sent;
-              is_loading_sent_graph.value = false;
-              // received graph
-              graphdata_customqry_rcvd.value = customqry_data.dataset_rcvd;
-              is_loading_rcvd_graph.value = false;
-              // graph weekdays
+              chartdata_customqry_labels.value = customqry_data.labels;
+              // sent chart
+              chartdata_customqry_sent.value = customqry_data.dataset_sent;
+              is_loading_sent_chart.value = false;
+              // received chart
+              chartdata_customqry_rcvd.value = customqry_data.dataset_rcvd;
+              is_loading_rcvd_chart.value = false;
+              // weeks view
+              const customqry_weeks = tsCoreUtils.transformCountDataToDataset(result_customqry.dates_weeks, false, true);
+              tsLog.log("customqry_weeks: " + JSON.stringify(customqry_weeks));
+              chartdata_customqry_weeks_labels.value = customqry_weeks.labels;
+              chartdata_customqry_weeks_sent.value = customqry_weeks.dataset_sent;
+              chartdata_customqry_weeks_rcvd.value = customqry_weeks.dataset_rcvd;
+              // months view
+              const customqry_months = tsCoreUtils.transformCountDataToDataset(result_customqry.dates_months, false, true);
+              tsLog.log("customqry_months: " + JSON.stringify(customqry_months));
+              chartdata_customqry_months_labels.value = customqry_months.labels;
+              chartdata_customqry_months_sent.value = customqry_months.dataset_sent;
+              chartdata_customqry_months_rcvd.value = customqry_months.dataset_rcvd;
+              // years view
+              const customqry_years = tsCoreUtils.transformCountDataToDataset(result_customqry.dates_years, false, true);
+              tsLog.log("customqry_years: " + JSON.stringify(customqry_years));
+              chartdata_customqry_years_labels.value = customqry_years.labels;
+              chartdata_customqry_years_sent.value = customqry_years.dataset_sent;
+              chartdata_customqry_years_rcvd.value = customqry_years.dataset_rcvd;
+              // chart weekdays
               let first_day_week = tsStore.first_day_week;
               const _weekdays_data = tsCoreUtils.transformCountDataToDataset(tsUtils.sortWeekdays(first_day_week, result_customqry.msg_weekdays), false); // the false is to not do it progressive
-              graphdata_customqry_weekdays_sent.value = _weekdays_data.dataset_sent;
-              graphdata_customqry_weekdays_rcvd.value = _weekdays_data.dataset_rcvd;
-              is_loading_weekdays_graph.value = false;
+              chartdata_customqry_weekdays_sent.value = _weekdays_data.dataset_sent;
+              chartdata_customqry_weekdays_rcvd.value = _weekdays_data.dataset_rcvd;
+              is_loading_weekdays_chart.value = false;
             }else{  // single day view
               // console.log(">>>>>>>>>>>>>> count_total_rcvd: " + result_customqry.received);
               // console.log(">>>>>>>>>>>>>> count_in_inbox: " + result_customqry.count_in_inbox);
@@ -756,12 +1152,33 @@ async function updateData() {
               }
               is_loading_counter_inbox_percent.value = false;
               const singleday_hours_data = tsCoreUtils.transformCountDataToDataset(result_customqry.msg_hours, do_progressive);
-              graphdata_singleday_hours_sent.value = singleday_hours_data.dataset_sent;
-              graphdata_singleday_hours_rcvd.value = singleday_hours_data.dataset_rcvd;
-              is_loading_singleday_graph.value = false;
+              chartdata_singleday_hours_sent.value = singleday_hours_data.dataset_sent;
+              chartdata_singleday_hours_rcvd.value = singleday_hours_data.dataset_rcvd;
+              is_loading_singleday_chart.value = false;
               // inbox zero folders
-              graphdata_inboxzero_folders.value = result_customqry.folders;
+              chartdata_inboxzero_folders.value = result_customqry.folders;
             }
+            // domains
+            const domains_data = tsCoreUtils.transformCountDataToDataset(result_customqry.domains, false, true);
+            // console.log(">>>>>>>>>>>>> domains_data: " + JSON.stringify(domains_data, null, 2));
+            chartdata_domains_sent.value = domains_data.dataset_sent;
+            chartdata_domains_rcvd.value = domains_data.dataset_rcvd;
+            chartdata_domains_labels.value = domains_data.labels;
+            is_loading_domains_chart.value = false;
+            // folders
+            const folders_data = tsCoreUtils.transformCountDataToDataset(result_customqry.folders, false, true);
+            //  console.log(">>>>>>>>>>>>> folders_data: " + JSON.stringify(folders_data, null, 2));
+            chartdata_folders_sent.value = folders_data.dataset_sent;
+            chartdata_folders_rcvd.value = folders_data.dataset_rcvd;
+            chartdata_folders_labels.value = folders_data.labels;
+            is_loading_folders_chart.value = false;
+            // tags
+            const tags_data = tsCoreUtils.transformCountDataToDataset(result_customqry.tags, false, true);
+            //  console.log(">>>>>>>>>>>>> tags_data: " + JSON.stringify(tags_data, null, 2));
+            chartdata_tags_sent.value = tags_data.dataset_sent;
+            chartdata_tags_rcvd.value = tags_data.dataset_rcvd;
+            chartdata_tags_labels.value = await tsCoreUtils.transformTagsLabels(tags_data.labels);
+            is_loading_tags_chart.value = false;
             let stop_time = performance.now();
             updateElapsed('getCustomQryData', stop_time - start_time);
             resolve(true);
@@ -774,14 +1191,14 @@ async function updateData() {
             counter_inbox_total.value = result_inbox.total;
             counter_inbox_unread.value = result_inbox.unread;
             // inbox zero dates
-            graphdata_inboxzero_dates.value = result_inbox.dates;
+            chartdata_inboxzero_dates.value = result_inbox.dates;
             is_loading_counter_inbox.value = false;
             chartData_InboxZeroDates.value.labels = ['date'];
             chartData_InboxZeroDates.value.datasets = [];
-            chartData_InboxZeroDates.value.datasets = tsCoreUtils.transformInboxZeroDatesDataToDataset(graphdata_inboxzero_dates.value);
+            chartData_InboxZeroDates.value.datasets = tsCoreUtils.transformInboxZeroDatesDataToDataset(chartdata_inboxzero_dates.value);
             tsLog.log("chartData_InboxZeroDates.value: " + JSON.stringify(chartData_InboxZeroDates.value));
             nextTick(() => {
-                is_loading_inbox_graph_dates.value = false;
+                is_loading_inbox_chart_dates.value = false;
             });
             updateElapsed('getInboxZeroData', result_inbox.elapsed);
             resolve(true);
@@ -793,15 +1210,18 @@ function loadingDo(){
     is_loading_counter_customqry.value = true;
     is_loading_involved_table_recipients.value = true;
     is_loading_involved_table_senders.value = true;
-    is_loading_sent_graph.value = true;
-    is_loading_rcvd_graph.value = true;
-    is_loading_singleday_graph.value = true;
+    is_loading_sent_chart.value = true;
+    is_loading_rcvd_chart.value = true;
+    is_loading_singleday_chart.value = true;
     is_loading_counter_inbox.value = true;
     is_loading_counter_inbox_percent.value = true;
-    is_loading_inbox_graph_folders.value = true;
-    is_loading_inbox_graph_dates.value = true;
-    is_loading_timeday_graph.value = true;
-    is_loading_weekdays_graph.value = true;
+    is_loading_inbox_chart_folders.value = true;
+    is_loading_inbox_chart_dates.value = true;
+    is_loading_timeday_chart.value = true;
+    is_loading_weekdays_chart.value = true;
+    is_loading_domains_chart.value = true;
+    is_loading_folders_chart.value = true;
+    is_loading_tags_chart.value = true;
 }
 
 function updateElapsed(function_name, time) {
@@ -814,26 +1234,45 @@ function updateElapsed(function_name, time) {
 }
 
 async function toggleAdvancedFilters(){
-  let container = document.getElementById('customqry_square_container');
-  let currentMarginTop = window.getComputedStyle(container).marginTop;
-  let currentMarginTopValue = parseFloat(currentMarginTop);
-  if(show_advanced_filters.value){
-    let adv_filters = document.getElementById('customqry_adv_filters');
-    if(adv_filters) {
-      let heightOfElementA = adv_filters.offsetHeight;
-      container.style.marginTop = `${currentMarginTopValue - heightOfElementA}px`;
-      show_advanced_filters.value = false;
-    }
-  }else{
-    show_advanced_filters.value = true;
-    await nextTick();
-    let adv_filters = document.getElementById('customqry_adv_filters');
-    if(adv_filters) {
-      let heightOfElementA = adv_filters.offsetHeight;
-      container.style.marginTop = `${currentMarginTopValue + heightOfElementA}px`;
-    }
+  // let container = document.getElementById('customqry_square_container');
+  // let currentMarginTop = window.getComputedStyle(container).marginTop;
+  // let currentMarginTopValue = parseFloat(currentMarginTop);
+  show_advanced_filters.value = !show_advanced_filters.value;
+  await nextTick();
+  updateAdvFiltersPosition();
+  // if(show_advanced_filters.value){
+  //   let adv_filters = document.getElementById('customqry_adv_filters');
+  //   if(adv_filters) {
+  //     // let heightOfElementA = adv_filters.offsetHeight;
+  //     let height = adv_filters.offsetHeight;
+  //     let style = getComputedStyle(adv_filters);
+  //     let marginTop = parseFloat(style.marginTop);
+  //     let marginBottom = parseFloat(style.marginBottom);
+  //     let totalHeight = height + marginTop + marginBottom;
+  //     container.style.marginTop = `${currentMarginTopValue - totalHeight}px`;
+  //     show_advanced_filters.value = false;
+  //     console.log(">>>>>>>>>>>>> totalHeight: " + totalHeight);
+  //     console.log(">>>>>>>>>>>>> container.style.marginTop: " + container.style.marginTop);
+  //     console.log(">>>>>>>>>>>>> height: " + height + " marginTop: " + marginTop + " marginBottom: " + marginBottom);
+  //   }
+  // }else{
+  //   show_advanced_filters.value = true;
+  //   await nextTick();
+  //   let adv_filters = document.getElementById('customqry_adv_filters');
+  //   if(adv_filters) {
+  //     // let heightOfElementA = adv_filters.offsetHeight;
+  //     let height = adv_filters.offsetHeight;
+  //     let style = getComputedStyle(adv_filters);
+  //     let marginTop = parseFloat(style.marginTop);
+  //     let marginBottom = parseFloat(style.marginBottom);
+  //     let totalHeight = height + marginTop + marginBottom;
+  //     container.style.marginTop = `${currentMarginTopValue + totalHeight}px`;
+  //     console.log(">>>>>>>>>>>>> totalHeight: " + totalHeight);
+  //     console.log(">>>>>>>>>>>>> container.style.marginTop: " + container.style.marginTop);
+  //     console.log(">>>>>>>>>>>>> height: " + height + " marginTop: " + marginTop + " marginBottom: " + marginBottom);
+  //   }
     i18n.updateDocument();
-  }
+  // }
 }
 
 function updateAdvFiltersPosition(){
@@ -843,7 +1282,12 @@ function updateAdvFiltersPosition(){
   if(show_advanced_filters.value){
     let currentMarginTop = window.getComputedStyle(container).marginTop;
     let currentMarginTopValue = parseFloat(currentMarginTop);
-    container.style.marginTop = `${currentMarginTopValue + parseFloat(customqry_adv_filters.offsetHeight)}px`;
+    let height = customqry_adv_filters.offsetHeight;
+    let style = getComputedStyle(customqry_adv_filters);
+    let marginTop = parseFloat(style.marginTop);
+    let marginBottom = parseFloat(style.marginBottom);
+    let totalHeight = height + marginTop + marginBottom;
+    container.style.marginTop = `${currentMarginTopValue + totalHeight + 10}px`;
   }
 }
 
@@ -863,7 +1307,7 @@ defineExpose({ doQry, updateAdvFiltersPosition });
 .square_container {
     margin-top: 4.6em;
 }
-.chart_inbox0_percent{
+:deep(.chart_inbox0_percent){
   top: 5.2em;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/tabs/TAB_ManyDays.vue b/src/components/tabs/TAB_ManyDays.vue
index 8a0cd3bf..895e713f 100644
--- a/src/components/tabs/TAB_ManyDays.vue
+++ b/src/components/tabs/TAB_ManyDays.vue
@@ -25,35 +25,38 @@
                         <h2 class="list_heading cropped">__MSG_SentMails__: <span v-if="!is_loading_counter_sent_rcvd">{{ sent_total }}</span><span v-if="sent_today > 0"> (+<span>{{ sent_today }}</span> __MSG_today_small__)</span><img src="@/assets/images/mzts-wait_line.svg" class="spinner_small" alt="__MSG_Loading__..." v-if="is_loading_counter_sent_rcvd"/><InfoTooltip :showAnchor="showTotalInfoTooltip" :noteText="totalInfoTooltip_text"></InfoTooltip></h2>
                         <CounterManyDays_Row :is_loading="is_loading_counter_many_days" :_total="counter_many_days_sent_total" :_max="counter_many_days_sent_max" :_min="counter_many_days_sent_min" :_avg="counter_many_days_sent_avg" :showTotalInfoTooltip="showTotalInfoTooltip" :totalBDInfoTooltip_text="totalBDInfoTooltip_text"/>
                       </div>
-                      <GraphManyDays :chartData="chartData_Sent" :is_loading="is_loading_sent_graph" :key="chartData_Sent_length" />
+                      <ChartManyDays :chartData="chartData_Sent" :is_loading="is_loading_sent_chart" :key="chartData_Sent_length" />
     </div>
-
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped">__MSG_ReceivedMails__: <span v-if="!is_loading_counter_sent_rcvd">{{ rcvd_total }}</span><span v-if="rcvd_today > 0"> (+<span>{{ rcvd_today }}</span> __MSG_today_small__)</span><img src="@/assets/images/mzts-wait_line.svg" class="spinner_small" alt="__MSG_Loading__..." v-if="is_loading_counter_sent_rcvd"/><InfoTooltip :showAnchor="showTotalInfoTooltip" :noteText="totalInfoTooltip_text"></InfoTooltip></h2>
                         <CounterManyDays_Row :is_loading="is_loading_counter_many_days" :_total="counter_many_days_rcvd_total" :_max="counter_many_days_rcvd_max" :_min="counter_many_days_rcvd_min" :_avg="counter_many_days_rcvd_avg" :showTotalInfoTooltip="showTotalInfoTooltip" :totalBDInfoTooltip_text="totalBDInfoTooltip_text"/>
 					  </div>
-					  <GraphManyDays :chartData="chartData_Rcvd" :is_loading="is_loading_rcvd_graph" :key="chartData_Rcvd_length" />
+					  <ChartManyDays :chartData="chartData_Rcvd" :is_loading="is_loading_rcvd_chart" :key="chartData_Rcvd_length" />
     </div>
-
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase">__MSG_TimeDay__</h2>
 					  </div>
-                      <GraphYesterday :chartData="chartData_TimeDay" :is_loading="is_loading_timeday_graph" :yesterday="false" :is_generic_day="true"/>
+                      <ChartTime :chartData="chartData_TimeDay" :is_loading="is_loading_timeday_chart" :day_type="1"/>
     </div>
-
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase">__MSG_Weekdays__</h2>
 					  </div>
-					<WidgetWeekDay :weekday_chartData="chartData_WeekDays" :is_loading="is_loading_weekdays_graph" />
+					<WidgetWeekDay :weekday_chartData="chartData_WeekDays" :is_loading="is_loading_weekdays_chart" />
+    </div>
+    <div class="square_item"><div class="list_heading_wrapper">
+						<h2 class="list_heading cropped lowercase">__MSG_Domains__</h2>
+					  </div>
+                      <WidgetDomains :chartData="chartData_Domains" chart_id="chart_domains_manydays" :chart_height="domains_chart_height" :is_loading="is_loading_domains_chart" />
+    </div>
+    <div class="square_item">
+                    <WidgetFoldersTags :chartDataFolders="chartData_Folders" :chartDataTags="chartData_Tags" :is_loading_folders="is_loading_folders_chart" :is_loading_tags="is_loading_tags_chart" />
     </div>
-
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase" v-text="top_recipients_title"></h2>
 					  </div>
 					  <TableInvolved :is_loading="is_loading_involved_table_recipients" :tableData="table_involved_recipients" v-if="is_loading_involved_table_recipients || show_table_involved_recipients" />
                     <p class="chart_info_nomail" v-if="!is_loading_involved_table_recipients && !show_table_involved_recipients">__MSG_NoMailsSent__</p>
     </div>
-    
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase" v-text="top_senders_title"></h2>
 					  </div>
@@ -72,7 +75,7 @@ import { thunderStastsCore } from '@statslib/mzts-statscore';
 import { tsUtils } from '@statslib/mzts-utils';
 import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
 import TableInvolved from '../tables/TableInvolved.vue';
-import GraphManyDays from '../graphs/GraphManyDays.vue';
+import ChartManyDays from '../charts/ChartManyDays.vue';
 import CounterManyDays_Row from '../counters/CounterManyDays_Row.vue';
 import ExportMenu from '../ExportMenu.vue';
 import InfoTooltip from '../InfoTooltip.vue';
@@ -80,8 +83,11 @@ import { tsPrefs } from '@statslib/mzts-options';
 import { i18n } from "@statslib/mzts-i18n.js";
 import { tsStore } from '@statslib/mzts-store';
 import { tsExport } from '@statslib/mzts-export';
-import GraphYesterday from '../graphs/GraphYesterday.vue';
+import ChartTime from '../charts/ChartTime.vue';
 import WidgetWeekDay from '../widgets/WidgetWeekDay.vue';
+import WidgetDomains from '../widgets/WidgetDomains.vue';
+import WidgetFoldersTags from '../widgets/WidgetFoldersTags.vue';
+
 
 const props = defineProps({
     accountEmails: {
@@ -92,7 +98,6 @@ const props = defineProps({
 
 const emit = defineEmits(['updateElapsed']);
 
-
 let tsLog = null;
 var tsCore = null;
 
@@ -108,10 +113,13 @@ let is_loading_counter_sent_rcvd = ref(true);
 let is_loading_counter_many_days = ref(true);
 let is_loading_involved_table_recipients = ref(true);
 let is_loading_involved_table_senders = ref(true);
-let is_loading_sent_graph = ref(true);
-let is_loading_rcvd_graph = ref(true);
-let is_loading_timeday_graph = ref(true);
-let is_loading_weekdays_graph = ref(true);
+let is_loading_sent_chart = ref(true);
+let is_loading_rcvd_chart = ref(true);
+let is_loading_timeday_chart = ref(true);
+let is_loading_weekdays_chart = ref(true);
+let is_loading_domains_chart = ref(true);
+let is_loading_tags_chart = ref(true);
+let is_loading_folders_chart = ref(true);
 
 let counter_many_days_sent_total = ref(0);
 let counter_many_days_sent_max = ref(0);
@@ -127,13 +135,25 @@ let table_involved_senders = ref([]);
 let show_table_involved_recipients = ref(false);
 let show_table_involved_senders = ref(false);
 
-let graphdata_manydays_sent = ref([]);
-let graphdata_manydays_rcvd = ref([]);
-let graphdata_manydays_labels = ref([]);
-let graphdata_manydays_hours_sent = ref([]);
-let graphdata_manydays_hours_rcvd = ref([]);
-let graphdata_manydays_weekdays_sent = ref([]);
-let graphdata_manydays_weekdays_rcvd = ref([]);
+let chartdata_manydays_sent = ref([]);
+let chartdata_manydays_rcvd = ref([]);
+let chartdata_manydays_labels = ref([]);
+let chartdata_manydays_hours_sent = ref([]);
+let chartdata_manydays_hours_rcvd = ref([]);
+let chartdata_manydays_weekdays_sent = ref([]);
+let chartdata_manydays_weekdays_rcvd = ref([]);
+let chartdata_domains_sent = ref([]);
+let chartdata_domains_rcvd = ref([]);
+let chartdata_domains_labels = ref([]);
+let chartdata_folders_sent = ref([]);
+let chartdata_folders_rcvd = ref([]);
+let chartdata_folders_labels = ref([]);
+let chartdata_tags_sent = ref([]);
+let chartdata_tags_rcvd = ref([]);
+let chartdata_tags_labels = ref([]);
+
+let domains_chart_height = ref("275px");
+let tags_chart_height = ref("275px");
 
 let _export_data = ref({});
 
@@ -166,15 +186,33 @@ let chartData_WeekDays = ref({
     datasets: []
 });
 
+let chartData_Domains = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Folders = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Tags = ref({
+    labels: [],
+    datasets: []
+});
+
 let job_done = computed(() => {
     return !(is_loading_counter_sent_rcvd.value &&
     is_loading_counter_many_days.value &&
     is_loading_involved_table_recipients.value &&
     is_loading_involved_table_senders.value &&
-    is_loading_sent_graph.value &&
-    is_loading_rcvd_graph.value &&
-    is_loading_timeday_graph.value &&
-    is_loading_weekdays_graph.value);
+    is_loading_sent_chart.value &&
+    is_loading_rcvd_chart.value &&
+    is_loading_timeday_chart.value &&
+    is_loading_weekdays_chart.value &&
+    is_loading_domains_chart.value &&
+    is_loading_tags_chart.value &&
+    is_loading_folders_chart.value);
 });
 
 onMounted(async () => {
@@ -205,40 +243,40 @@ async function updateData() {
     chartData_Sent.value.datasets = [];
     chartData_Sent.value.datasets.push({
         label: 'Sent',
-        data: graphdata_manydays_sent.value,
+        data: chartdata_manydays_sent.value,
         borderColor: (ctx) => {
-            return tsCoreUtils.getManyDaysBarColor(ctx, Object.keys(graphdata_manydays_sent.value).length);
+            return tsCoreUtils.getManyDaysBarColor(ctx, Object.keys(chartdata_manydays_sent.value).length);
         },
         backgroundColor:  (ctx) => {
-            return tsCoreUtils.getManyDaysBarColor(ctx, Object.keys(graphdata_manydays_sent.value).length);
+            return tsCoreUtils.getManyDaysBarColor(ctx, Object.keys(chartdata_manydays_sent.value).length);
         },
         borderWidth: 2,
         pointRadius: 1,
     });
-    tsLog.log("graphdata_manydays_sent.value: " + JSON.stringify(graphdata_manydays_sent.value));
-    chartData_Sent.value.labels = graphdata_manydays_labels.value;
+    tsLog.log("chartdata_manydays_sent.value: " + JSON.stringify(chartdata_manydays_sent.value));
+    chartData_Sent.value.labels = chartdata_manydays_labels.value;
     chartData_Rcvd.value.datasets = [];
     chartData_Rcvd.value.datasets.push({
         label: 'Received',
-        data: graphdata_manydays_rcvd.value,
+        data: chartdata_manydays_rcvd.value,
         borderColor:  (ctx) => {
-            return tsCoreUtils.getManyDaysBarColor(ctx, Object.keys(graphdata_manydays_rcvd.value).length);
+            return tsCoreUtils.getManyDaysBarColor(ctx, Object.keys(chartdata_manydays_rcvd.value).length);
         },
         backgroundColor: (ctx) => {
-            return tsCoreUtils.getManyDaysBarColor(ctx, Object.keys(graphdata_manydays_rcvd.value).length);
+            return tsCoreUtils.getManyDaysBarColor(ctx, Object.keys(chartdata_manydays_rcvd.value).length);
         },
         borderWidth: 2,
         pointRadius: 1,
     });
-    tsLog.log("graphdata_manydays_rcvd.value: " + JSON.stringify(graphdata_manydays_rcvd.value));
-    chartData_Rcvd.value.labels = graphdata_manydays_labels.value;
+    tsLog.log("chartdata_manydays_rcvd.value: " + JSON.stringify(chartdata_manydays_rcvd.value));
+    chartData_Rcvd.value.labels = chartdata_manydays_labels.value;
     // time day
-    tsLog.log("graphdata_manydays_hours_sent.value: " + JSON.stringify(graphdata_manydays_hours_sent.value));
-    tsLog.log("graphdata_manydays_hours_rcvd.value: " + JSON.stringify(graphdata_manydays_hours_rcvd.value));
+    tsLog.log("chartdata_manydays_hours_sent.value: " + JSON.stringify(chartdata_manydays_hours_sent.value));
+    tsLog.log("chartdata_manydays_hours_rcvd.value: " + JSON.stringify(chartdata_manydays_hours_rcvd.value));
     chartData_TimeDay.value.datasets = [];
     chartData_TimeDay.value.datasets.push({
         label: 'ysent',
-        data: graphdata_manydays_hours_sent.value,
+        data: chartdata_manydays_hours_sent.value,
         borderColor: tsStore.chart_colors._time_sent,
         backgroundColor: tsStore.chart_colors._time_sent,
         borderWidth: 2,
@@ -246,19 +284,19 @@ async function updateData() {
     })
     chartData_TimeDay.value.datasets.push({
         label: 'yrcvd',
-        data: graphdata_manydays_hours_rcvd.value,
+        data: chartdata_manydays_hours_rcvd.value,
         borderColor: tsStore.chart_colors._time_rcvd,
         backgroundColor: tsStore.chart_colors._time_rcvd,
         borderWidth: 2,
         pointRadius: 1,
     })
     // week days
-    tsLog.log("graphdata_manydays_hours_sent.value: " + JSON.stringify(graphdata_manydays_weekdays_rcvd.value));
-    tsLog.log("graphdata_manydays_hours_rcvd.value: " + JSON.stringify(graphdata_manydays_weekdays_sent.value));
+    tsLog.log("chartdata_manydays_hours_sent.value: " + JSON.stringify(chartdata_manydays_weekdays_rcvd.value));
+    tsLog.log("chartdata_manydays_hours_rcvd.value: " + JSON.stringify(chartdata_manydays_weekdays_sent.value));
     chartData_WeekDays.value.datasets = [];
     chartData_WeekDays.value.datasets.push({
         label: 'ysent',
-        data: graphdata_manydays_weekdays_sent.value,
+        data: chartdata_manydays_weekdays_sent.value,
         borderColor: tsStore.chart_colors._weekday_sent,
         backgroundColor: tsStore.chart_colors._weekday_sent,
         borderWidth: 2,
@@ -266,12 +304,85 @@ async function updateData() {
     })
     chartData_WeekDays.value.datasets.push({
         label: 'yrcvd',
-        data: graphdata_manydays_weekdays_rcvd.value,
+        data: chartdata_manydays_weekdays_rcvd.value,
         borderColor: tsStore.chart_colors._weekday_rcvd,
         backgroundColor: tsStore.chart_colors._weekday_rcvd,
         borderWidth: 2,
         pointRadius: 1,
     })
+    // chart domains
+    let chart_container_height = document.getElementById('chart_domains_manydays').clientHeight;
+    let chart_ipotetic_height = chartdata_domains_labels.value.length * 60;
+    if(chart_container_height < chart_ipotetic_height){
+        domains_chart_height.value = String(chart_ipotetic_height) + "px";
+    } else {
+        domains_chart_height.value = String(chart_container_height) + "px";
+    }
+    chartData_Domains.value.labels = chartdata_domains_labels.value;
+    chartData_Domains.value.datasets = [];
+    chartData_Domains.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_domains_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Domains.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_domains_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Domains.value: " + JSON.stringify(chartData_Domains.value));
+    tsLog.log("chartData_Domains.value.labels: " + JSON.stringify(chartData_Domains.value.labels));
+
+    // chart folders
+    chartData_Folders.value.labels = chartdata_folders_labels.value;
+    chartData_Folders.value.datasets = [];
+    chartData_Folders.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_folders_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Folders.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_folders_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Folders.value: " + JSON.stringify(chartData_Folders.value));
+    tsLog.log("chartData_Folders.value.labels: " + JSON.stringify(chartData_Folders.value.labels));
+
+    // chart tags
+    chartData_Tags.value.labels = chartdata_tags_labels.value;
+    chartData_Tags.value.datasets = [];
+    chartData_Tags.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_tags_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Tags.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_tags_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Tags.value: " + JSON.stringify(chartData_Tags.value));
+    tsLog.log("chartData_Tags.value.labels: " + JSON.stringify(chartData_Tags.value.labels));
+
     nextTick(() => {
         i18n.updateDocument();
     });
@@ -310,17 +421,17 @@ async function updateData() {
             rcvd_total.value = result_many_days.received - rcvd_today.value;
             tsLog.log("sent_total: " + sent_total.value + " rcvd_total: " + rcvd_total.value);
             is_loading_counter_sent_rcvd.value = false;
-            // graph day hours
+            // chart day hours
             const _hours_data = tsCoreUtils.transformCountDataToDataset(result_many_days.msg_hours, false); // the false is to not do it progressive
-            graphdata_manydays_hours_sent.value = _hours_data.dataset_sent;
-            graphdata_manydays_hours_rcvd.value = _hours_data.dataset_rcvd;
-            is_loading_timeday_graph.value = false;
-            // graph weekdays
+            chartdata_manydays_hours_sent.value = _hours_data.dataset_sent;
+            chartdata_manydays_hours_rcvd.value = _hours_data.dataset_rcvd;
+            is_loading_timeday_chart.value = false;
+            // chart weekdays
             let first_day_week = tsStore.first_day_week;
             const _weekdays_data = tsCoreUtils.transformCountDataToDataset(tsUtils.sortWeekdays(first_day_week, result_many_days.msg_weekdays), false); // the false is to not do it progressive
-            graphdata_manydays_weekdays_sent.value = _weekdays_data.dataset_sent;
-            graphdata_manydays_weekdays_rcvd.value = _weekdays_data.dataset_rcvd;
-            is_loading_weekdays_graph.value = false;
+            chartdata_manydays_weekdays_sent.value = _weekdays_data.dataset_sent;
+            chartdata_manydays_weekdays_rcvd.value = _weekdays_data.dataset_rcvd;
+            is_loading_weekdays_chart.value = false;
             //aggregated data
             // remove today from the dates
             let dates_copy = Object.assign({}, result_many_days.dates);
@@ -337,16 +448,37 @@ async function updateData() {
             counter_many_days_sent_min.value = aggregate.min_sent;
             counter_many_days_sent_avg.value = aggregate.avg_sent;
             is_loading_counter_many_days.value = false;
-            // sent and received graphs
+            // sent and received charts
             const many_days_data = tsCoreUtils.transformCountDataToDataset(result_many_days.dates, false, true);
             tsLog.log("many_days_data: " + JSON.stringify(many_days_data));
-            graphdata_manydays_labels.value = many_days_data.labels;
-            // sent graph
-            graphdata_manydays_sent.value = many_days_data.dataset_sent;
-            is_loading_sent_graph.value = false;
-            // received graph
-            graphdata_manydays_rcvd.value = many_days_data.dataset_rcvd;
-            is_loading_rcvd_graph.value = false;
+            chartdata_manydays_labels.value = many_days_data.labels;
+            // sent chart
+            chartdata_manydays_sent.value = many_days_data.dataset_sent;
+            is_loading_sent_chart.value = false;
+            // received chart
+            chartdata_manydays_rcvd.value = many_days_data.dataset_rcvd;
+            is_loading_rcvd_chart.value = false;
+            // domains
+            const domains_data = tsCoreUtils.transformCountDataToDataset(result_many_days.domains, false, true);
+            // console.log(">>>>>>>>>>>>> domains_data: " + JSON.stringify(domains_data, null, 2));
+            chartdata_domains_sent.value = domains_data.dataset_sent;
+            chartdata_domains_rcvd.value = domains_data.dataset_rcvd;
+            chartdata_domains_labels.value = domains_data.labels;
+            is_loading_domains_chart.value = false;
+            // folders
+            const folders_data = tsCoreUtils.transformCountDataToDataset(result_many_days.folders, false, true);
+            //  console.log(">>>>>>>>>>>>> folders_data: " + JSON.stringify(folders_data, null, 2));
+            chartdata_folders_sent.value = folders_data.dataset_sent;
+            chartdata_folders_rcvd.value = folders_data.dataset_rcvd;
+            chartdata_folders_labels.value = folders_data.labels;
+            is_loading_folders_chart.value = false;
+            // tags
+            const tags_data = tsCoreUtils.transformCountDataToDataset(result_many_days.tags, false, true);
+            //  console.log(">>>>>>>>>>>>> tags_data: " + JSON.stringify(tags_data, null, 2));
+            chartdata_tags_sent.value = tags_data.dataset_sent;
+            chartdata_tags_rcvd.value = tags_data.dataset_rcvd;
+            chartdata_tags_labels.value = await tsCoreUtils.transformTagsLabels(tags_data.labels);
+            is_loading_tags_chart.value = false;
             let stop_time = performance.now();
             updateElapsed(stop_time - start_time);
             resolve(true);
@@ -359,10 +491,13 @@ function loadingDo(){
     is_loading_counter_many_days.value = true;
     is_loading_involved_table_recipients.value = true;
     is_loading_involved_table_senders.value = true;
-    is_loading_sent_graph.value = true;
-    is_loading_rcvd_graph.value = true;
-    is_loading_timeday_graph.value = true;
-    is_loading_weekdays_graph.value = true;
+    is_loading_sent_chart.value = true;
+    is_loading_rcvd_chart.value = true;
+    is_loading_timeday_chart.value = true;
+    is_loading_weekdays_chart.value = true;
+    is_loading_domains_chart.value = true;
+    is_loading_folders_chart.value = true;
+    is_loading_tags_chart.value = true;
 }
 
 function updateElapsed(elapsed) {
diff --git a/src/components/tabs/TAB_Today.vue b/src/components/tabs/TAB_Today.vue
index c8c610a9..500bf4d1 100644
--- a/src/components/tabs/TAB_Today.vue
+++ b/src/components/tabs/TAB_Today.vue
@@ -21,38 +21,53 @@
 <template>
     <ExportMenu :export_data="_export_data" currentTab="tab-today" v-if="job_done" />
     <div class="square_container">
-        <div class="square_item"><div class="list_heading_wrapper"><h2 class="list_heading cropped">__MSG_Mails__</h2>
+    <div class="square_item"><div class="list_heading_wrapper"><h2 class="list_heading cropped">__MSG_Mails__</h2>
         </div>
         <span id="today_date" class="list_heading_date" v-html="today_date"></span>
         <CounterSentReceived :is_loading="is_loading_counter_sent_rcvd" :_sent="counter_today_sent" :_rcvd="counter_today_rcvd" />
         <CounterYesterdayThisTime :is_loading="is_loading_counter_yesterday_thistime" :sent="counter_yesterday_thistime_sent" :rcvd="counter_yesterday_thistime_rcvd" :is_last_business_day="is_last_business_day" :last_bday_date="last_bday_text" />
         <CounterManyDays_Table :is_loading="is_loading_counter_many_days" :sent_total="counter_many_days_sent_total" :sent_max="counter_many_days_sent_max" :sent_min="counter_many_days_sent_min" :sent_avg="counter_many_days_sent_avg" :rcvd_total="counter_many_days_rcvd_total" :rcvd_max="counter_many_days_rcvd_max" :rcvd_min="counter_many_days_rcvd_min" :rcvd_avg="counter_many_days_rcvd_avg" />
-        <GraphToday :chartData="chartData_Today" :is_loading="is_loading_today_graph" :is_last_business_day="is_last_business_day" />
+        <ChartTime :chartData="chartData_Today" :is_loading="is_loading_today_chart" :is_last_business_day="is_last_business_day" :day_type="0" />
     </div>
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped">__MSG_InboxZeroStatus__</h2>
 					  </div>
-					  <CounterInbox :is_loading="is_loading_counter_inbox" :inbox_total="counter_inbox_total" :inbox_unread="counter_inbox_unread" />
-                      <CounterInboxPercent :is_loading="is_loading_counter_inbox_percent" :inbox_percent="counter_inbox_percent" />
-                      <div class="chart_inbox0_info"><p class="chart_info">__MSG_FolderLocation__ <InfoTooltip :showAnchor="showFolderLocationNoteAnchor" :noteText="folderLocationNote_text"></InfoTooltip></p><p class="chart_info_nomail" id="today_inbox0_folder_spread_nomails" v-if="!is_loading_counter_sent_rcvd && (counter_today_rcvd == 0)" v-text="no_mails_received_today"></p></div>
-                      <div class="chart_inbox0">
-                        <GraphInboxZeroFolders :chartData="chartData_InboxZeroFolders" :openFolderInFirstTab="inbox0_openFolderInFirstTab" :is_loading="is_loading_inbox_graph_folders" />
-                      </div>
-                      <div class="chart_inbox0_datemsg">
-                        <p class="chart_info">__MSG_InboxMailsDateSpreading__</p><p class="chart_info_nomail" id="today_inbox0_datemsg_nomails" v-if="!is_loading_counter_inbox && (counter_inbox_total == 0)" v-text="no_mails_inbox"></p>
-                        <GraphInboxZeroDates :chartData="chartData_InboxZeroDates" :is_loading="is_loading_inbox_graph_dates" />
-                      </div>
+					  <WidgetInboxZero
+                        :is_loading_counter_inbox="is_loading_counter_inbox"
+                        :counter_inbox_total="counter_inbox_total"
+                        :counter_inbox_unread="counter_inbox_unread"
+                        :is_loading_counter_inbox_percent="is_loading_counter_inbox_percent"
+                        :counter_inbox_percent="counter_inbox_percent"
+                        :showFolderLocationNoteAnchor="showFolderLocationNoteAnchor"
+                        :folderLocationNote_text="folderLocationNote_text"
+                        :is_loading_counter_sent_rcvd="is_loading_counter_sent_rcvd"
+                        :counter_rcvd="counter_today_rcvd"
+                        :chartData_InboxZeroFolders="chartData_InboxZeroFolders"
+                        :inbox0_openFolderInFirstTab="inbox0_openFolderInFirstTab"
+                        :is_loading_inbox_chart_folders="is_loading_inbox_chart_folders"
+                        :no_mails_inbox="no_mails_inbox"
+                        :chartData_InboxZeroDates="chartData_InboxZeroDates"
+                        :chartData_InboxZeroDates_extended = "chartdata_inboxzero_dates"
+                        :is_loading_inbox_chart_dates="is_loading_inbox_chart_dates"
+                        :no_mails_received="no_mails_received_today"
+                      />
+    </div>
+    <div class="square_item"><div class="list_heading_wrapper">
+						<h2 class="list_heading cropped lowercase">__MSG_Domains__</h2>
+					  </div>
+                      <WidgetDomains :chartData="chartData_Domains" chart_id="chart_domains_today" :chart_height="domains_chart_height" :is_loading="is_loading_domains_chart" />
+    </div>
+    <div class="square_item">
+                    <WidgetFoldersTags :chartDataFolders="chartData_Folders" :chartDataTags="chartData_Tags" :is_loading_folders="is_loading_folders_chart" :is_loading_tags="is_loading_tags_chart" />
     </div>
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase" v-text="top_recipients_title"></h2>
-                        <ExportButton :export_data="table_involved_recipients" :export_name="_involved_recipients_export_name" export_type="correspondents" v-if="!is_loading_involved_table_recipients && show_table_involved_recipients" />
 					  </div>
 					  <TableInvolved :is_loading="is_loading_involved_table_recipients" :tableData="table_involved_recipients" v-if="is_loading_involved_table_recipients || show_table_involved_recipients" />
                     <p class="chart_info_nomail" v-if="!is_loading_involved_table_recipients && !show_table_involved_recipients" v-text="no_mails_sent_today"></p>
     </div>
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase" v-text="top_senders_title"></h2>
-                        <ExportButton :export_data="table_involved_senders" :export_name="_involved_senders_export_name" export_type="correspondents" v-if="!is_loading_involved_table_senders && show_table_involved_senders" />
 					  </div>
                       <TableInvolved :is_loading="is_loading_involved_table_senders" :tableData="table_involved_senders" v-if="is_loading_involved_table_senders || show_table_involved_senders"/>
                       <p class="chart_info_nomail" v-if="!is_loading_involved_table_senders && !show_table_involved_senders" v-text="no_mails_received_today"></p>
@@ -70,19 +85,17 @@ import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
 import CounterSentReceived from '../counters/CounterSentReceived.vue';
 import CounterYesterdayThisTime from '../counters/CounterYesterdayThisTime.vue';
 import CounterManyDays_Table from '../counters/CounterManyDays_Table.vue';
-import GraphToday from '../graphs/GraphToday.vue';
-import GraphInboxZeroFolders from '../graphs/GraphInboxZeroFolders.vue';
-import GraphInboxZeroDates from '../graphs/GraphInboxZeroDates.vue';
+import ChartTime from '../charts/ChartTime.vue';
 import TableInvolved from '../tables/TableInvolved.vue';
-import CounterInbox from '../counters/CounterInbox.vue';
 import ExportMenu from '../ExportMenu.vue';
 import { tsPrefs } from '@statslib/mzts-options';
 import { i18n } from "@statslib/mzts-i18n.js";
 import { tsStore } from '@statslib/mzts-store';
 import { tsUtils } from '@statslib/mzts-utils';
-import InfoTooltip from '../InfoTooltip.vue';
 import { tsExport } from '@statslib/mzts-export';
-import CounterInboxPercent from '../counters/CounterInboxPercent.vue';
+import WidgetDomains from '../widgets/WidgetDomains.vue';
+import WidgetInboxZero from '../widgets/WidgetInboxZero.vue';
+import WidgetFoldersTags from '../widgets/WidgetFoldersTags.vue';
 
 
 const props = defineProps({
@@ -110,7 +123,7 @@ let folderLocationNote_text = ref("");
 let showFolderLocationNoteAnchor = ref(false);
 
 let do_progressive = true;
-let today_time_graph_show_yesterday = true;
+let today_time_chart_show_yesterday = true;
 let inbox0_openFolderInFirstTab = ref(false);
 
 let elapsed = {
@@ -123,13 +136,16 @@ let elapsed = {
 let is_loading_counter_sent_rcvd = ref(true);
 let is_loading_counter_yesterday_thistime = ref(true);
 let is_loading_counter_many_days = ref(true);
-let is_loading_today_graph = ref(true);
+let is_loading_today_chart = ref(true);
 let is_loading_involved_table_recipients = ref(true);
 let is_loading_involved_table_senders = ref(true);
 let is_loading_counter_inbox = ref(true);
 let is_loading_counter_inbox_percent = ref(true);
-let is_loading_inbox_graph_folders = ref(true);
-let is_loading_inbox_graph_dates = ref(true);
+let is_loading_inbox_chart_folders = ref(true);
+let is_loading_inbox_chart_dates = ref(true);
+let is_loading_domains_chart = ref(true);
+let is_loading_tags_chart = ref(true);
+let is_loading_folders_chart = ref(true);
 
 let counter_today_sent = ref(0);
 let counter_today_rcvd = ref(0);
@@ -173,24 +189,53 @@ let chartData_InboxZeroDates = ref({
     datasets: []
 });
 
-let graphdata_today_hours_sent = ref([]);
-let graphdata_today_hours_rcvd = ref([]);
-let graphdata_yesterday_hours_sent = ref([]);
-let graphdata_yesterday_hours_rcvd = ref([]);
-let graphdata_inboxzero_folders = ref([]);
-let graphdata_inboxzero_dates = ref([]);
+let chartData_Domains = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Folders = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Tags = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartdata_today_hours_sent = ref([]);
+let chartdata_today_hours_rcvd = ref([]);
+let chartdata_yesterday_hours_sent = ref([]);
+let chartdata_yesterday_hours_rcvd = ref([]);
+let chartdata_inboxzero_folders = ref([]);
+let chartdata_inboxzero_dates = ref([]);
+let chartdata_domains_sent = ref([]);
+let chartdata_domains_rcvd = ref([]);
+let chartdata_domains_labels = ref([]);
+let chartdata_folders_sent = ref([]);
+let chartdata_folders_rcvd = ref([]);
+let chartdata_folders_labels = ref([]);
+let chartdata_tags_sent = ref([]);
+let chartdata_tags_rcvd = ref([]);
+let chartdata_tags_labels = ref([]);
+
+let domains_chart_height = ref("275px");
 
 let job_done = computed(() => {
     return !(is_loading_counter_sent_rcvd.value &&
     is_loading_counter_yesterday_thistime.value &&
     is_loading_counter_many_days.value &&
-    is_loading_today_graph.value &&
+    is_loading_today_chart.value &&
     is_loading_involved_table_recipients.value &&
     is_loading_involved_table_senders.value &&
     is_loading_counter_inbox.value &&
     is_loading_counter_inbox_percent.value &&
-    is_loading_inbox_graph_folders.value &&
-    is_loading_inbox_graph_dates.value);
+    is_loading_inbox_chart_folders.value &&
+    is_loading_inbox_chart_dates.value &&
+    is_loading_domains_chart.value &&
+    is_loading_tags_chart.value &&
+    is_loading_folders_chart.value);
 })
 
 onMounted(async () => {
@@ -210,9 +255,9 @@ onMounted(async () => {
 
 async function updateData() {
     loadingDo();
-    do_progressive = await tsPrefs.getPref("_time_graph_progressive");
-    today_time_graph_show_yesterday = await tsPrefs.getPref("today_time_graph_show_yesterday");
-    //console.log(">>>>>>>>>>>>>>>> updateData: do_progressive: " + do_progressive + " today_time_graph_show_yesterday: " + today_time_graph_show_yesterday);
+    do_progressive = await tsPrefs.getPref("_time_chart_progressive");
+    today_time_chart_show_yesterday = await tsPrefs.getPref("today_time_chart_show_yesterday");
+    //console.log(">>>>>>>>>>>>>>>> updateData: do_progressive: " + do_progressive + " today_time_chart_show_yesterday: " + today_time_chart_show_yesterday);
     while(props.updated == false){
         await new Promise(r => setTimeout(r, 100));
     }
@@ -223,12 +268,12 @@ async function updateData() {
     getInboxZeroData();
     await Promise.all([getTodayData(), getYesterdayData()]);
     // await Promise.all([getTodayData(), getYesterdayData(), getInboxZeroData()]);
-    tsLog.log("graphdata_today_hours_sent.value: " + JSON.stringify(graphdata_today_hours_sent.value));
-    tsLog.log("graphdata_today_hours_rcvd.value: " + JSON.stringify(graphdata_today_hours_rcvd.value));
+    tsLog.log("chartdata_today_hours_sent.value: " + JSON.stringify(chartdata_today_hours_sent.value));
+    tsLog.log("chartdata_today_hours_rcvd.value: " + JSON.stringify(chartdata_today_hours_rcvd.value));
     chartData_Today.value.datasets = [];
     chartData_Today.value.datasets.push({
         label: 'tsent',
-        data: graphdata_today_hours_sent.value,
+        data: chartdata_today_hours_sent.value,
         borderColor: tsStore.chart_colors._time_sent,
         backgroundColor: tsStore.chart_colors._time_sent,
         borderWidth: 2,
@@ -236,16 +281,16 @@ async function updateData() {
     })
     chartData_Today.value.datasets.push({
         label: 'trcvd',
-        data: graphdata_today_hours_rcvd.value,
+        data: chartdata_today_hours_rcvd.value,
         borderColor: tsStore.chart_colors._time_rcvd,
         backgroundColor: tsStore.chart_colors._time_rcvd,
         borderWidth: 2,
         pointRadius: 1,
     })
-    if(today_time_graph_show_yesterday){
+    if(today_time_chart_show_yesterday){
         chartData_Today.value.datasets.push({
             label: 'ysent',
-            data: graphdata_yesterday_hours_sent.value,
+            data: chartdata_yesterday_hours_sent.value,
             borderColor: tsStore.chart_colors._time_sent_yesterday,
             backgroundColor: tsStore.chart_colors._time_sent_yesterday,
             borderDash: [12, 3, 3],
@@ -254,7 +299,7 @@ async function updateData() {
         })
         chartData_Today.value.datasets.push({
             label: 'yrcvd',
-            data: graphdata_yesterday_hours_rcvd.value,
+            data: chartdata_yesterday_hours_rcvd.value,
             borderColor: tsStore.chart_colors._time_rcvd_yesterday,
             backgroundColor: tsStore.chart_colors._time_rcvd_yesterday,
             borderDash: [12, 3, 3],
@@ -262,11 +307,11 @@ async function updateData() {
             borderWidth: 2,
         })
     }
-    // graph inbox zero folders
-    let given_folders = tsCoreUtils.filterReceivedFolders(graphdata_inboxzero_folders.value);
+    // chart inbox zero folders
+    let given_folders = tsCoreUtils.filterReceivedFolders(chartdata_inboxzero_folders.value);
     let folders_data = tsCoreUtils.getFoldersLabelsColors(given_folders);
     chartData_InboxZeroFolders.value.folder_paths = folders_data.folder_paths;
-    console.log(">>>>>>>>>> folders_data: " + JSON.stringify(folders_data));
+    // console.log(">>>>>>>>>> folders_data: " + JSON.stringify(folders_data));
     if("folders" in folders_data){
         chartData_InboxZeroFolders.value.folders = folders_data.folders;
     }
@@ -274,18 +319,92 @@ async function updateData() {
     chartData_InboxZeroFolders.value.datasets = [];
     chartData_InboxZeroFolders.value.datasets.push({data:tsCoreUtils.getFoldersCounts(given_folders), backgroundColor: folders_data.colors, borderColor: folders_data.colors});
     tsLog.log("chartData_InboxZeroFolders.value: " + JSON.stringify(chartData_InboxZeroFolders.value));
-    // graph inbox zero dates
+    // chart inbox zero dates
     inbox0_openFolderInFirstTab.value = await tsPrefs.getPref("inbox0_openFolderInFirstTab");
     // chartData_InboxZeroDates.value.labels = ['date'];
     // chartData_InboxZeroDates.value.datasets = [];
-    // chartData_InboxZeroDates.value.datasets = tsCoreUtils.transformInboxZeroDatesDataToDataset(graphdata_inboxzero_dates.value);
+    // chartData_InboxZeroDates.value.datasets = tsCoreUtils.transformInboxZeroDatesDataToDataset(chartdata_inboxzero_dates.value);
     // tsLog.log("chartData_InboxZeroDates.value: " + JSON.stringify(chartData_InboxZeroDates.value));
+    // chart domains
+    let domains_container_height = document.getElementById('chart_domains_today').clientHeight;
+    let domains_ipotetic_height = chartdata_domains_labels.value.length * 60;
+    if(domains_container_height < domains_ipotetic_height){
+        domains_chart_height.value = String(domains_ipotetic_height) + "px";
+    } else {
+        domains_chart_height.value = String(domains_container_height) + "px";
+    }
+    chartData_Domains.value.labels = chartdata_domains_labels.value;
+    chartData_Domains.value.datasets = [];
+    chartData_Domains.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_domains_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Domains.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_domains_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Domains.value: " + JSON.stringify(chartData_Domains.value));
+    tsLog.log("chartData_Domains.value.labels: " + JSON.stringify(chartData_Domains.value.labels));
+
+    // chart folders
+    chartData_Folders.value.labels = chartdata_folders_labels.value;
+    chartData_Folders.value.datasets = [];
+    chartData_Folders.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_folders_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Folders.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_folders_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Folders.value: " + JSON.stringify(chartData_Folders.value));
+    tsLog.log("chartData_Folders.value.labels: " + JSON.stringify(chartData_Folders.value.labels));
+
+    // chart tags
+    chartData_Tags.value.labels = chartdata_tags_labels.value;
+    chartData_Tags.value.datasets = [];
+    chartData_Tags.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_tags_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Tags.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_tags_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Tags.value: " + JSON.stringify(chartData_Tags.value));
+    tsLog.log("chartData_Tags.value.labels: " + JSON.stringify(chartData_Tags.value.labels));
+
     nextTick(async () => {
-        is_loading_today_graph.value = false;
-        is_loading_inbox_graph_folders.value = false;
-        // is_loading_inbox_graph_dates.value = false;
+        is_loading_today_chart.value = false;
+        is_loading_inbox_chart_folders.value = false;
+        // is_loading_inbox_chart_dates.value = false;
+        showFolderLocationNoteAnchor.value = await tsCoreUtils.getFilterDuplicatesPreference(tsStore.current_account_id);
+        await nextTick();
         i18n.updateDocument();
-        showFolderLocationNoteAnchor.value = await tsCoreUtils.getFilterDuplicatesPreference(tsStore.current_account_id)
     });
 };
 
@@ -300,11 +419,11 @@ async function updateData() {
             // export data
             _export_data.value[tsExport.export.time_emails.type] = result_today.msg_hours;
             _export_data.value[tsExport.export.correspondents.type] = tsExport.mergeRecipientsAndSenders(result_today.senders, result_today.recipients);
-            // graph today hours
+            // chart today hours
             const today_hours_data = tsCoreUtils.transformCountDataToDataset(result_today.msg_hours, do_progressive);
-            let pref_today_time_graph_do_no_show_future = await tsPrefs.getPref("today_time_graph_do_no_show_future");
-            graphdata_today_hours_sent.value = pref_today_time_graph_do_no_show_future ? tsCoreUtils.filterTodayNextHours(today_hours_data.dataset_sent) : today_hours_data.dataset_sent;
-            graphdata_today_hours_rcvd.value = pref_today_time_graph_do_no_show_future ? tsCoreUtils.filterTodayNextHours(today_hours_data.dataset_rcvd) : today_hours_data.dataset_rcvd;
+            let pref_today_time_chart_do_no_show_future = await tsPrefs.getPref("today_time_chart_do_no_show_future");
+            chartdata_today_hours_sent.value = pref_today_time_chart_do_no_show_future ? tsCoreUtils.filterTodayNextHours(today_hours_data.dataset_sent) : today_hours_data.dataset_sent;
+            chartdata_today_hours_rcvd.value = pref_today_time_chart_do_no_show_future ? tsCoreUtils.filterTodayNextHours(today_hours_data.dataset_rcvd) : today_hours_data.dataset_rcvd;
             //top senders list
             show_table_involved_senders.value =  Object.keys(result_today.senders).length > 0;
             table_involved_senders.value = result_today.senders;
@@ -314,13 +433,34 @@ async function updateData() {
             table_involved_recipients.value = result_today.recipients;
             is_loading_involved_table_recipients.value = false;
             // inbox zero folders
-            graphdata_inboxzero_folders.value = result_today.folders;
+            chartdata_inboxzero_folders.value = result_today.folders;
             if(result_today.received > 0){
                 counter_inbox_percent.value = (Math.round((1 - (result_today.count_in_inbox / result_today.received)) * 10000) / 100).toFixed(2) + '%';
             }else{
                 counter_inbox_percent.value = '0%';
             }
             is_loading_counter_inbox_percent.value = false;
+            // domains
+            const domains_data = tsCoreUtils.transformCountDataToDataset(result_today.domains, false, true);
+            // console.log(">>>>>>>>>>>>> domains_data: " + JSON.stringify(domains_data, null, 2));
+            chartdata_domains_sent.value = domains_data.dataset_sent;
+            chartdata_domains_rcvd.value = domains_data.dataset_rcvd;
+            chartdata_domains_labels.value = domains_data.labels;
+            is_loading_domains_chart.value = false;
+            // folders
+            const folders_data = tsCoreUtils.transformCountDataToDataset(result_today.folders, false, true);
+            //  console.log(">>>>>>>>>>>>> folders_data: " + JSON.stringify(folders_data, null, 2));
+            chartdata_folders_sent.value = folders_data.dataset_sent;
+            chartdata_folders_rcvd.value = folders_data.dataset_rcvd;
+            chartdata_folders_labels.value = folders_data.labels;
+            is_loading_folders_chart.value = false;
+            // tags
+            const tags_data = tsCoreUtils.transformCountDataToDataset(result_today.tags, false, true);
+            //  console.log(">>>>>>>>>>>>> tags_data: " + JSON.stringify(tags_data, null, 2));
+            chartdata_tags_sent.value = tags_data.dataset_sent;
+            chartdata_tags_rcvd.value = tags_data.dataset_rcvd;
+            chartdata_tags_labels.value = await tsCoreUtils.transformTagsLabels(tags_data.labels);
+            is_loading_tags_chart.value = false;
             updateElapsed('getTodayData', result_today.elapsed);
             resolve(true);
         });
@@ -332,14 +472,14 @@ async function updateData() {
             counter_inbox_total.value = result_inbox.total;
             counter_inbox_unread.value = result_inbox.unread;
             // inbox zero dates
-            graphdata_inboxzero_dates.value = result_inbox.dates;
+            chartdata_inboxzero_dates.value = result_inbox.dates;
             is_loading_counter_inbox.value = false;
             chartData_InboxZeroDates.value.labels = ['date'];
             chartData_InboxZeroDates.value.datasets = [];
-            chartData_InboxZeroDates.value.datasets = tsCoreUtils.transformInboxZeroDatesDataToDataset(graphdata_inboxzero_dates.value);
+            chartData_InboxZeroDates.value.datasets = tsCoreUtils.transformInboxZeroDatesDataToDataset(chartdata_inboxzero_dates.value);
             tsLog.log("chartData_InboxZeroDates.value: " + JSON.stringify(chartData_InboxZeroDates.value));
             nextTick(() => {
-                is_loading_inbox_graph_dates.value = false;
+                is_loading_inbox_chart_dates.value = false;
             });
             updateElapsed('getInboxZeroData', result_inbox.elapsed);
             resolve(true);
@@ -348,7 +488,7 @@ async function updateData() {
 
     // get yesterday data
     async function getYesterdayData () {
-        if(!today_time_graph_show_yesterday) { return; }
+        if(!today_time_chart_show_yesterday) { return; }
         return new Promise(async (resolve) => {
             let result_yesterday = null;
             let yesterday_date = new Date();
@@ -376,10 +516,10 @@ async function updateData() {
             counter_yesterday_thistime_rcvd.value = result_yesterday.received;
             counter_yesterday_thistime_sent.value = result_yesterday.sent;
             is_loading_counter_yesterday_thistime.value = false;
-            // graph yesterday hours
+            // chart yesterday hours
             const yesterday_hours_data = tsCoreUtils.transformCountDataToDataset(result_yesterday.msg_hours, do_progressive);
-            graphdata_yesterday_hours_sent.value = yesterday_hours_data.dataset_sent;
-            graphdata_yesterday_hours_rcvd.value = yesterday_hours_data.dataset_rcvd;
+            chartdata_yesterday_hours_sent.value = yesterday_hours_data.dataset_sent;
+            chartdata_yesterday_hours_rcvd.value = yesterday_hours_data.dataset_rcvd;
             tsLog.log("result_yesterday: " + JSON.stringify(result_yesterday, null, 2));
             updateElapsed('getYesterdayData', result_yesterday.elapsed);
             resolve(true);
@@ -410,13 +550,16 @@ function loadingDo(){
     is_loading_counter_sent_rcvd.value = true;
     is_loading_counter_yesterday_thistime.value = true;
     is_loading_counter_many_days.value = true;
-    is_loading_today_graph.value = true;
+    is_loading_today_chart.value = true;
     is_loading_involved_table_recipients.value = true;
     is_loading_involved_table_senders.value = true;
     is_loading_counter_inbox.value = true;
     is_loading_counter_inbox_percent.value = true;
-    is_loading_inbox_graph_folders.value = true;
-    is_loading_inbox_graph_dates.value = true;
+    is_loading_inbox_chart_folders.value = true;
+    is_loading_inbox_chart_dates.value = true;
+    is_loading_domains_chart.value = true;
+    is_loading_folders_chart.value = true;
+    is_loading_tags_chart.value = true;
     elapsed = {
             'getManyDaysData':0,
             'getInboxZeroData':0,
diff --git a/src/components/tabs/TAB_Yesterday.vue b/src/components/tabs/TAB_Yesterday.vue
index ce012728..242311af 100644
--- a/src/components/tabs/TAB_Yesterday.vue
+++ b/src/components/tabs/TAB_Yesterday.vue
@@ -27,21 +27,38 @@
         <CounterSentReceived :is_loading="is_loading_counter_sent_rcvd" :_sent="counter_yesterday_sent" :_rcvd="counter_yesterday_rcvd" />
         <div id="yesterday_spacing"></div>
         <CounterManyDays_Table :is_loading="is_loading_counter_many_days" :sent_total="counter_many_days_sent_total" :sent_max="counter_many_days_sent_max" :sent_min="counter_many_days_sent_min" :sent_avg="counter_many_days_sent_avg" :rcvd_total="counter_many_days_rcvd_total" :rcvd_max="counter_many_days_rcvd_max" :rcvd_min="counter_many_days_rcvd_min" :rcvd_avg="counter_many_days_rcvd_avg" />
-        <GraphYesterday :chartData="chartData_Yesterday" :is_loading="is_loading_yesterday_graph" :is_last_business_day="is_last_business_day" />
+        <ChartTime :chartData="chartData_Yesterday" :is_loading="is_loading_yesterday_chart" :is_last_business_day="is_last_business_day" :day_type="-1" />
     </div>
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped">__MSG_InboxZeroStatus__</h2>
 					  </div>
-					  <CounterInbox :is_loading="is_loading_counter_inbox" :inbox_total="counter_inbox_total" :inbox_unread="counter_inbox_unread" />
-                      <CounterInboxPercent :is_loading="is_loading_counter_inbox_percent" :inbox_percent="counter_inbox_percent" />
-                      <div class="chart_inbox0_info"><p class="chart_info">__MSG_FolderLocation__ <InfoTooltip :showAnchor="showFolderLocationNoteAnchor" :noteText="folderLocationNote_text"></InfoTooltip></p><p class="chart_info_nomail" id="yesteday_inbox0_folder_spread_nomails" v-if="!is_loading_counter_sent_rcvd && (counter_yesterday_rcvd == 0)" v-text="no_mails_received_yesterday"></p></div>
-                      <div class="chart_inbox0">
-                        <GraphInboxZeroFolders :chartData="chartData_InboxZeroFolders" :openFolderInFirstTab="inbox0_openFolderInFirstTab" :is_loading="is_loading_inbox_graph_folders" />
-                      </div>
-                      <div class="chart_inbox0_datemsg">
-                        <p class="chart_info">__MSG_InboxMailsDateSpreading__</p><p class="chart_info_nomail" id="yesterday_inbox0_datemsg_nomails" v-if="!is_loading_counter_inbox && (counter_inbox_total == 0)" v-text="no_mails_inbox"></p>
-                        <GraphInboxZeroDates :chartData="chartData_InboxZeroDates" :is_loading="is_loading_inbox_graph_dates" />
-                      </div>
+                      <WidgetInboxZero
+                        :is_loading_counter_inbox="is_loading_counter_inbox"
+                        :counter_inbox_total="counter_inbox_total"
+                        :counter_inbox_unread="counter_inbox_unread"
+                        :is_loading_counter_inbox_percent="is_loading_counter_inbox_percent"
+                        :counter_inbox_percent="counter_inbox_percent"
+                        :showFolderLocationNoteAnchor="showFolderLocationNoteAnchor"
+                        :folderLocationNote_text="folderLocationNote_text"
+                        :is_loading_counter_sent_rcvd="is_loading_counter_sent_rcvd"
+                        :counter_rcvd="counter_yesterday_rcvd"
+                        :chartData_InboxZeroFolders="chartData_InboxZeroFolders"
+                        :inbox0_openFolderInFirstTab="inbox0_openFolderInFirstTab"
+                        :is_loading_inbox_chart_folders="is_loading_inbox_chart_folders"
+                        :no_mails_inbox="no_mails_inbox"
+                        :chartData_InboxZeroDates="chartData_InboxZeroDates"
+                        :chartData_InboxZeroDates_extended = "chartdata_inboxzero_dates"
+                        :is_loading_inbox_chart_dates="is_loading_inbox_chart_dates"
+                        :no_mails_received="no_mails_received_yesterday"
+                      />
+    </div>
+    <div class="square_item"><div class="list_heading_wrapper">
+						<h2 class="list_heading cropped lowercase">__MSG_Domains__</h2>
+					  </div>
+                      <WidgetDomains :chartData="chartData_Domains" chart_id="chart_domains_yesterday" :chart_height="domains_chart_height" :is_loading="is_loading_domains_chart" />
+    </div>
+    <div class="square_item">
+                    <WidgetFoldersTags :chartDataFolders="chartData_Folders" :chartDataTags="chartData_Tags" :is_loading_folders="is_loading_folders_chart" :is_loading_tags="is_loading_tags_chart" />
     </div>
     <div class="square_item"><div class="list_heading_wrapper">
 						<h2 class="list_heading cropped lowercase" v-text="top_recipients_title"></h2>
@@ -67,19 +84,17 @@ import { thunderStastsCore } from '@statslib/mzts-statscore';
 import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
 import { tsUtils } from '@statslib/mzts-utils';
 import CounterSentReceived from '../counters/CounterSentReceived.vue';
-import GraphYesterday from '../graphs/GraphYesterday.vue';
-import GraphInboxZeroFolders from '../graphs/GraphInboxZeroFolders.vue';
-import GraphInboxZeroDates from '../graphs/GraphInboxZeroDates.vue';
+import ChartTime from '../charts/ChartTime.vue';
 import TableInvolved from '../tables/TableInvolved.vue';
-import CounterInbox from '../counters/CounterInbox.vue';
 import { tsPrefs } from '@statslib/mzts-options';
 import { i18n } from "@statslib/mzts-i18n.js";
 import { tsStore } from '@statslib/mzts-store';
 import { tsExport } from '@statslib/mzts-export';
 import CounterManyDays_Table from '../counters/CounterManyDays_Table.vue';
-import InfoTooltip from '../InfoTooltip.vue';
 import ExportMenu from '../ExportMenu.vue';
-import CounterInboxPercent from '../counters/CounterInboxPercent.vue';
+import WidgetDomains from '../widgets/WidgetDomains.vue';
+import WidgetInboxZero from '../widgets/WidgetInboxZero.vue';
+import WidgetFoldersTags from '../widgets/WidgetFoldersTags.vue';
 
 const props = defineProps({
     accountEmails: {
@@ -114,14 +129,17 @@ let elapsed = {
 }
 
 let is_loading_counter_sent_rcvd = ref(true);
-let is_loading_yesterday_graph = ref(true);
+let is_loading_yesterday_chart = ref(true);
 let is_loading_involved_table_recipients = ref(true);
 let is_loading_involved_table_senders = ref(true);
 let is_loading_counter_inbox = ref(true);
 let is_loading_counter_inbox_percent = ref(true);
-let is_loading_inbox_graph_folders = ref(true);
-let is_loading_inbox_graph_dates = ref(true);
+let is_loading_inbox_chart_folders = ref(true);
+let is_loading_inbox_chart_dates = ref(true);
 let is_loading_counter_many_days = ref(true);
+let is_loading_domains_chart = ref(true);
+let is_loading_folders_chart = ref(true);
+let is_loading_tags_chart = ref(true);
 
 let counter_yesterday_sent = ref(0);
 let counter_yesterday_rcvd = ref(0);
@@ -163,21 +181,50 @@ let chartData_InboxZeroDates = ref({
     datasets: []
 });
 
-let graphdata_yesterday_hours_sent = ref([]);
-let graphdata_yesterday_hours_rcvd = ref([]);
-let graphdata_inboxzero_folders = ref([]);
-let graphdata_inboxzero_dates = ref([]);
+let chartData_Domains = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Folders = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartData_Tags = ref({
+    labels: [],
+    datasets: []
+});
+
+let chartdata_yesterday_hours_sent = ref([]);
+let chartdata_yesterday_hours_rcvd = ref([]);
+let chartdata_inboxzero_folders = ref([]);
+let chartdata_inboxzero_dates = ref([]);
+let chartdata_domains_sent = ref([]);
+let chartdata_domains_rcvd = ref([]);
+let chartdata_domains_labels = ref([]);
+let chartdata_folders_sent = ref([]);
+let chartdata_folders_rcvd = ref([]);
+let chartdata_folders_labels = ref([]);
+let chartdata_tags_sent = ref([]);
+let chartdata_tags_rcvd = ref([]);
+let chartdata_tags_labels = ref([]);
+
+let domains_chart_height = ref("275px");
 
 let job_done = computed(() => {
     return !(is_loading_counter_sent_rcvd.value &&
-    is_loading_yesterday_graph.value &&
+    is_loading_yesterday_chart.value &&
     is_loading_involved_table_recipients.value &&
     is_loading_involved_table_senders.value &&
     is_loading_counter_inbox.value &&
     is_loading_counter_inbox_percent.value &&
-    is_loading_inbox_graph_folders.value &&
-    is_loading_inbox_graph_dates.value &&
-    is_loading_counter_many_days.value);
+    is_loading_inbox_chart_folders.value &&
+    is_loading_inbox_chart_dates.value &&
+    is_loading_counter_many_days.value &&
+    is_loading_domains_chart.value &&
+    is_loading_tags_chart.value &&
+    is_loading_folders_chart.value);
 })
 
 onMounted(async () => {
@@ -196,8 +243,8 @@ onMounted(async () => {
 
 async function updateData() {
     loadingDo();
-    let prefs = await tsPrefs.getPrefs(["_time_graph_progressive", "accounts_adv_settings"]);
-    do_progressive = prefs._time_graph_progressive;
+    let prefs = await tsPrefs.getPrefs(["_time_chart_progressive", "accounts_adv_settings"]);
+    do_progressive = prefs._time_chart_progressive;
     while(props.updated == false){
         await new Promise(r => setTimeout(r, 100));
     }
@@ -207,12 +254,12 @@ async function updateData() {
     getManyDaysData();
     getInboxZeroData();
     await Promise.all([getYesterdayData()]);
-    tsLog.log("graphdata_yesterday_hours_sent.value: " + JSON.stringify(graphdata_yesterday_hours_sent.value));
-    tsLog.log("graphdata_yesterday_hours_rcvd.value: " + JSON.stringify(graphdata_yesterday_hours_rcvd.value));
+    tsLog.log("chartdata_yesterday_hours_sent.value: " + JSON.stringify(chartdata_yesterday_hours_sent.value));
+    tsLog.log("chartdata_yesterday_hours_rcvd.value: " + JSON.stringify(chartdata_yesterday_hours_rcvd.value));
     chartData_Yesterday.value.datasets = [];
     chartData_Yesterday.value.datasets.push({
         label: 'ysent',
-        data: graphdata_yesterday_hours_sent.value,
+        data: chartdata_yesterday_hours_sent.value,
         borderColor: tsStore.chart_colors._time_sent,
         backgroundColor: tsStore.chart_colors._time_sent,
         borderWidth: 2,
@@ -220,31 +267,105 @@ async function updateData() {
     })
     chartData_Yesterday.value.datasets.push({
         label: 'yrcvd',
-        data: graphdata_yesterday_hours_rcvd.value,
+        data: chartdata_yesterday_hours_rcvd.value,
         borderColor: tsStore.chart_colors._time_rcvd,
         backgroundColor: tsStore.chart_colors._time_rcvd,
         borderWidth: 2,
         pointRadius: 1,
     })
-    // graph inbox zero folders
-    let given_folders = tsCoreUtils.filterReceivedFolders(graphdata_inboxzero_folders.value);
+    // chart inbox zero folders
+    let given_folders = tsCoreUtils.filterReceivedFolders(chartdata_inboxzero_folders.value);
     let folders_data = tsCoreUtils.getFoldersLabelsColors(given_folders);
     chartData_InboxZeroFolders.value.folder_paths = folders_data.folder_paths;
     chartData_InboxZeroFolders.value.labels = folders_data.labels;
     chartData_InboxZeroFolders.value.datasets = [];
     chartData_InboxZeroFolders.value.datasets.push({data:tsCoreUtils.getFoldersCounts(given_folders), backgroundColor: folders_data.colors, borderColor: folders_data.colors});
     tsLog.log("chartData_InboxZeroFolders.value: " + JSON.stringify(chartData_InboxZeroFolders.value));
-    // graph inbox zero dates
+    // chart inbox zero dates
     inbox0_openFolderInFirstTab.value = await tsPrefs.getPref("inbox0_openFolderInFirstTab");
     // chartData_InboxZeroDates.value.labels = ['date'];
     // chartData_InboxZeroDates.value.datasets = [];
-    // chartData_InboxZeroDates.value.datasets = tsCoreUtils.transformInboxZeroDatesDataToDataset(graphdata_inboxzero_dates.value);
+    // chartData_InboxZeroDates.value.datasets = tsCoreUtils.transformInboxZeroDatesDataToDataset(chartdata_inboxzero_dates.value);
     // tsLog.log("chartData_InboxZeroDates.value: " + JSON.stringify(chartData_InboxZeroDates.value));
+    // chart domains
+    let chart_container_height = document.getElementById('chart_domains_yesterday').clientHeight;
+    let chart_ipotetic_height = chartdata_domains_labels.value.length * 60;
+    if(chart_container_height < chart_ipotetic_height){
+        domains_chart_height.value = String(chart_ipotetic_height) + "px";
+    } else {
+        domains_chart_height.value = String(chart_container_height) + "px";
+    }
+    chartData_Domains.value.labels = chartdata_domains_labels.value;
+    chartData_Domains.value.datasets = [];
+    chartData_Domains.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_domains_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Domains.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_domains_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Domains.value: " + JSON.stringify(chartData_Domains.value));
+    tsLog.log("chartData_Domains.value.labels: " + JSON.stringify(chartData_Domains.value.labels));
+
+    // chart folders
+    chartData_Folders.value.labels = chartdata_folders_labels.value;
+    chartData_Folders.value.datasets = [];
+    chartData_Folders.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_folders_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Folders.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_folders_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Folders.value: " + JSON.stringify(chartData_Folders.value));
+    tsLog.log("chartData_Folders.value.labels: " + JSON.stringify(chartData_Folders.value.labels));
+
+    // chart tags
+    chartData_Tags.value.labels = chartdata_tags_labels.value;
+    chartData_Tags.value.datasets = [];
+    chartData_Tags.value.datasets.push({
+        label: 'tsent',
+        data: chartdata_tags_sent.value,
+        borderColor: tsStore.chart_colors._time_sent,
+        backgroundColor: tsStore.chart_colors._time_sent,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    chartData_Tags.value.datasets.push({
+        label: 'trcvd',
+        data: chartdata_tags_rcvd.value,
+        borderColor: tsStore.chart_colors._time_rcvd,
+        backgroundColor: tsStore.chart_colors._time_rcvd,
+        borderWidth: 2,
+        pointRadius: 1,
+    });
+    tsLog.log("chartData_Tags.value: " + JSON.stringify(chartData_Tags.value));
+    tsLog.log("chartData_Tags.value.labels: " + JSON.stringify(chartData_Tags.value.labels));
+
     nextTick(async () => {
-        is_loading_yesterday_graph.value = false;
-        is_loading_inbox_graph_folders.value = false;
-        // is_loading_inbox_graph_dates.value = false;
-        showFolderLocationNoteAnchor.value = await tsCoreUtils.getFilterDuplicatesPreference(tsStore.current_account_id)
+        is_loading_yesterday_chart.value = false;
+        is_loading_inbox_chart_folders.value = false;
+        // is_loading_inbox_chart_dates.value = false;
+        showFolderLocationNoteAnchor.value = await tsCoreUtils.getFilterDuplicatesPreference(tsStore.current_account_id);
+        await nextTick();
         i18n.updateDocument();
     });
 };
@@ -278,10 +399,10 @@ async function updateData() {
             // export data
             _export_data.value[tsExport.export.time_emails.type] = result_yesterday.msg_hours;
             _export_data.value[tsExport.export.correspondents.type] = tsExport.mergeRecipientsAndSenders(result_yesterday.senders, result_yesterday.recipients);
-            // graph yesterday hours
+            // chart yesterday hours
             const yesterday_hours_data = tsCoreUtils.transformCountDataToDataset(result_yesterday.msg_hours, do_progressive);
-            graphdata_yesterday_hours_sent.value = yesterday_hours_data.dataset_sent;
-            graphdata_yesterday_hours_rcvd.value = yesterday_hours_data.dataset_rcvd;
+            chartdata_yesterday_hours_sent.value = yesterday_hours_data.dataset_sent;
+            chartdata_yesterday_hours_rcvd.value = yesterday_hours_data.dataset_rcvd;
             //top senders list
             show_table_involved_senders.value =  Object.keys(result_yesterday.senders).length > 0;
             table_involved_senders.value = result_yesterday.senders;
@@ -291,13 +412,34 @@ async function updateData() {
             table_involved_recipients.value = result_yesterday.recipients;
             is_loading_involved_table_recipients.value = false;
             // inbox zero folders
-            graphdata_inboxzero_folders.value = result_yesterday.folders;
+            chartdata_inboxzero_folders.value = result_yesterday.folders;
             if(result_yesterday.received > 0){
                 counter_inbox_percent.value = (Math.round((1 - (result_yesterday.count_in_inbox / result_yesterday.received)) * 10000) / 100).toFixed(2) + '%';
             }else{
                 counter_inbox_percent.value = '0%';
             }
             is_loading_counter_inbox_percent.value = false;
+            // domains
+            const domains_data = tsCoreUtils.transformCountDataToDataset(result_yesterday.domains, false, true);
+            // console.log(">>>>>>>>>>>>> domains_data: " + JSON.stringify(domains_data, null, 2));
+            chartdata_domains_sent.value = domains_data.dataset_sent;
+            chartdata_domains_rcvd.value = domains_data.dataset_rcvd;
+            chartdata_domains_labels.value = domains_data.labels;
+            is_loading_domains_chart.value = false;
+            // folders
+            const folders_data = tsCoreUtils.transformCountDataToDataset(result_yesterday.folders, false, true);
+            //  console.log(">>>>>>>>>>>>> folders_data: " + JSON.stringify(folders_data, null, 2));
+            chartdata_folders_sent.value = folders_data.dataset_sent;
+            chartdata_folders_rcvd.value = folders_data.dataset_rcvd;
+            chartdata_folders_labels.value = folders_data.labels;
+            is_loading_folders_chart.value = false;
+            // tags
+            const tags_data = tsCoreUtils.transformCountDataToDataset(result_yesterday.tags, false, true);
+            //  console.log(">>>>>>>>>>>>> tags_data: " + JSON.stringify(tags_data, null, 2));
+            chartdata_tags_sent.value = tags_data.dataset_sent;
+            chartdata_tags_rcvd.value = tags_data.dataset_rcvd;
+            chartdata_tags_labels.value = await tsCoreUtils.transformTagsLabels(tags_data.labels);
+            is_loading_tags_chart.value = false;
             updateElapsed('getYesterdayData', result_yesterday.elapsed);
             resolve(true);
         });
@@ -309,14 +451,14 @@ async function updateData() {
             counter_inbox_total.value = result_inbox.total;
             counter_inbox_unread.value = result_inbox.unread;
             // inbox zero dates
-            graphdata_inboxzero_dates.value = result_inbox.dates;
+            chartdata_inboxzero_dates.value = result_inbox.dates;
             is_loading_counter_inbox.value = false;
             chartData_InboxZeroDates.value.labels = ['date'];
             chartData_InboxZeroDates.value.datasets = [];
-            chartData_InboxZeroDates.value.datasets = tsCoreUtils.transformInboxZeroDatesDataToDataset(graphdata_inboxzero_dates.value);
+            chartData_InboxZeroDates.value.datasets = tsCoreUtils.transformInboxZeroDatesDataToDataset(chartdata_inboxzero_dates.value);
             tsLog.log("chartData_InboxZeroDates.value: " + JSON.stringify(chartData_InboxZeroDates.value));
             nextTick(() => {
-                is_loading_inbox_graph_dates.value = false;
+                is_loading_inbox_chart_dates.value = false;
             });
             updateElapsed('getInboxZeroData', result_inbox.elapsed);
             resolve(true);
@@ -344,14 +486,17 @@ async function updateData() {
 
 function loadingDo(){
     is_loading_counter_sent_rcvd.value = true;
-    is_loading_yesterday_graph.value = true;
+    is_loading_yesterday_chart.value = true;
     is_loading_involved_table_recipients.value = true;
     is_loading_involved_table_senders.value = true;
     is_loading_counter_inbox.value = true;
     is_loading_counter_inbox_percent.value = true;
-    is_loading_inbox_graph_folders.value = true;
-    is_loading_inbox_graph_dates.value = true;
+    is_loading_inbox_chart_folders.value = true;
+    is_loading_inbox_chart_dates.value = true;
     is_loading_counter_many_days.value = true;
+    is_loading_domains_chart.value = true;
+    is_loading_folders_chart.value = true;
+    is_loading_tags_chart.value = true;
     elapsed = {
             'getManyDaysData':0,
             'getInboxZeroData':0,
diff --git a/src/components/widgets/WidgetDomains.vue b/src/components/widgets/WidgetDomains.vue
new file mode 100644
index 00000000..474db3d8
--- /dev/null
+++ b/src/components/widgets/WidgetDomains.vue
@@ -0,0 +1,68 @@
+<!--
+/*
+ *  ThunderStats [https://micz.it/thunderbird-addon-thunderstats-your-thunderbird-statistics/]
+ *  Copyright (C) 2024  Mic (m@micz.it)
+
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU 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 General Public License for more details.
+
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+-->
+
+
+<template>
+    <ChartDomains :chartData="chartData" :chart_id="chart_id" :chart_height="chart_height" :is_loading="is_loading" />
+</template>
+
+
+<script setup>
+import { computed } from 'vue'
+import ChartDomains from '../charts/ChartDomains.vue';
+import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
+
+let props = defineProps({
+    chartData: {
+        type: Object,
+        default: () => ({
+                    labels: [],
+                    datasets: []
+                }),
+        required: true
+    },
+    chart_id: {
+        type: String,
+        default: 'domains-chart',
+    },
+    chart_height: {
+        type: String,
+        default: '500px'
+    },
+    is_loading: {
+        type: Boolean,
+        default: true
+    }
+});
+
+let chartData = computed(() => {
+    return tsCoreUtils.sortDoubleDatasetsByTotal(props.chartData);
+});
+
+let chart_id = computed(() => props.chart_id);
+let chart_height = computed(() => props.chart_height);
+let is_loading = computed(() => props.is_loading);
+
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/widgets/WidgetFoldersTags.vue b/src/components/widgets/WidgetFoldersTags.vue
new file mode 100644
index 00000000..82f7519d
--- /dev/null
+++ b/src/components/widgets/WidgetFoldersTags.vue
@@ -0,0 +1,156 @@
+<!--
+/*
+ *  ThunderStats [https://micz.it/thunderbird-addon-thunderstats-your-thunderbird-statistics/]
+ *  Copyright (C) 2024  Mic (m@micz.it)
+
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU 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 General Public License for more details.
+
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+-->
+
+
+<template>
+    <div class="list_heading_wrapper">
+        <h2 class="list_heading cropped lowercase">{{ show_tags ? '__MSG_Tags__&nbsp;&nbsp;' : '__MSG_Folders__' }}</h2>
+        <div class="spacer" style="max-width:4.5em;"></div>
+        <div class="btn_group" ><button type="button" @click="doSwitch" v-if="!(is_loading_folders || is_loading_tags)" class="btn_small btn_small_single" v-text="switch_text"></button></div>
+        <div class="spacer"></div>
+    </div>
+    <ChartFolders v-if="!show_tags" :chartData="chartDataFolders" :chart_id="chart_id_folders" :chart_height="chart_height_folders" :is_loading="is_loading_folders" :key="chart_key" />
+    <ChartTags v-if="show_tags" :chartData="chartDataTags" :chart_id="chart_id_tags" :chart_height="chart_height_tags" :is_loading="is_loading_tags" />
+</template>
+
+
+<script setup>
+import { computed, nextTick, ref, onBeforeUpdate } from 'vue'
+import ChartTags from '../charts/ChartTags.vue';
+import ChartFolders from '../charts/ChartFolders.vue';
+import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
+import { tsStore } from '@statslib/mzts-store';
+import { i18n } from "@statslib/mzts-i18n.js";
+
+let props = defineProps({
+    chartDataFolders: {
+        type: Object,
+        default: () => ({
+                    labels: [],
+                    datasets: []
+                }),
+        required: true
+    },
+    chartDataTags: {
+        type: Object,
+        default: () => ({
+                    labels: [],
+                    datasets: []
+                }),
+        required: true
+    },
+    is_loading_folders: {
+        type: Boolean,
+        default: true
+    },
+    is_loading_tags: {
+        type: Boolean,
+        default: true
+    },
+});
+
+let chartDataFolders = computed(() => {
+    return tsCoreUtils.sortDoubleDatasetsByTotal(props.chartDataFolders);
+});
+
+let chartDataTags = computed(() => {
+    return tsCoreUtils.sortDoubleDatasetsByTotal(props.chartDataTags);
+});
+
+let is_loading_folders = computed(() => props.is_loading_folders);
+let is_loading_tags = computed(() => props.is_loading_tags);
+
+let show_tags = ref(tsStore.show_tags);
+let chart_height_folders = ref("275px");
+let chart_height_tags = ref("275px");
+
+let chart_id_folders = ref("chart_folders_" + tsStore.currentTab);
+let chart_id_tags = ref("chart_tags_" + tsStore.currentTab);
+
+let chart_key = ref(Math.floor(Math.random() * 1001));
+
+let switch_text = ref(browser.i18n.getMessage("ShowTags"));
+
+onBeforeUpdate(() => {
+  setChartHeight()
+});
+
+async function doSwitch(){
+    chart_id_folders.value = "chart_folders_" + tsStore.currentTab;
+    chart_id_tags.value = "chart_tags_" + tsStore.currentTab;
+    show_tags.value = !show_tags.value;
+    switch_text.value = show_tags.value ? browser.i18n.getMessage("ShowFolders") : browser.i18n.getMessage("ShowTags");
+    await nextTick();
+    setChartHeight();
+    i18n.updateDocument();
+}
+
+function setChartHeight(){
+    chart_id_folders.value = "chart_folders_" + tsStore.currentTab;
+    chart_id_tags.value = "chart_tags_" + tsStore.currentTab;
+    // console.log(">>>>>>>>>>>>>>>> chart_id_folders.value: " + chart_id_folders.value);
+    // console.log(">>>>>>>>>>>>>>>> chart_id_tags.value: " + chart_id_tags.value);
+    let parent_dom_element = null;
+    let base_element_folders = document.getElementById(chart_id_folders.value);
+    if(base_element_folders == null){
+        // console.log(">>>>>>>>>> base_element_folders == null");
+        let base_element_tags = document.getElementById(chart_id_tags.value);
+        if(base_element_tags != null){
+            // console.log(">>>>>>>>>> base_element_tags != null");
+            parent_dom_element = base_element_tags.parentElement;
+        }
+    }else{
+        // console.log(">>>>>>>>>> base_element_folders != null");
+        parent_dom_element = base_element_folders.parentElement;
+    }
+    if(parent_dom_element == null) return;
+    if(!show_tags.value){
+        let folders_container_height = parent_dom_element.clientHeight;
+        // console.log(">>>>>>>>>>>>>>>> folders_container_height: " + folders_container_height);
+        let folders_ipotetic_height = props.chartDataFolders.labels.length * 60;
+        // console.log(">>>>>>>>>>>>>>>> folders_ipotetic_height: " + folders_ipotetic_height);
+        if(folders_container_height < folders_ipotetic_height){
+            chart_height_folders.value = String(folders_ipotetic_height) + "px";
+        } else {
+            chart_height_folders.value = String(folders_container_height) + "px";
+        }
+        // console.log(">>>>>>>>>>>>>>>> chart_height_folders.value: " + chart_height_folders.value);
+    }else{
+        // console.log(">>>>>>>>>> setting tag chart height");
+        let tags_container_height = parent_dom_element.clientHeight;
+        // console.log(">>>>>>>>>>>>>>>> tags_container_height: " + tags_container_height);
+        let tags_ipotetic_height = props.chartDataTags.labels.length * 60;
+        // console.log(">>>>>>>>>>>>>>>> tags_ipotetic_height: " + tags_ipotetic_height);
+        if(tags_container_height < tags_ipotetic_height){
+            chart_height_tags.value = String(tags_ipotetic_height) + "px";
+        } else {
+            chart_height_tags.value = String(tags_container_height) + "px";
+        }
+        // console.log(">>>>>>>>>>>>>>>> chart_height_tags.value: " + chart_height_tags.value);
+    }
+    chart_key.value = Math.floor(Math.random() * 1001);
+}
+
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/widgets/WidgetInboxZero.vue b/src/components/widgets/WidgetInboxZero.vue
new file mode 100644
index 00000000..48374bb1
--- /dev/null
+++ b/src/components/widgets/WidgetInboxZero.vue
@@ -0,0 +1,257 @@
+<template>
+    <div>
+      <CounterInbox 
+        :is_loading="is_loading_counter_inbox" 
+        :inbox_total="counter_inbox_total" 
+        :inbox_unread="counter_inbox_unread" 
+      />
+      <CounterInboxPercent v-if="!show_extended"
+        :is_loading="is_loading_counter_inbox_percent" 
+        :inbox_percent="counter_inbox_percent" 
+      />
+      <div class="chart_inbox0_info" v-if="!show_extended">
+        <p class="chart_info">
+          __MSG_FolderLocation__ 
+          <InfoTooltip 
+            :showAnchor="showFolderLocationNoteAnchor" 
+            :noteText="folderLocationNote_text" 
+          />
+        </p>
+        <p 
+          class="chart_info_nomail" 
+          v-if="!is_loading_counter_sent_rcvd && (counter_rcvd == 0)" 
+          v-text="no_mails_received"
+        ></p>
+      </div>
+      <div class="chart_inbox0" v-if="!show_extended">
+        <ChartInboxZeroFolders 
+          :chartData="chartData_InboxZeroFolders" 
+          :openFolderInFirstTab="inbox0_openFolderInFirstTab" 
+          :is_loading="is_loading_inbox_chart_folders" 
+        />
+      </div>
+      <div class="chart_inbox0_datemsg" v-if="!show_extended">
+        <p class="chart_info">__MSG_InboxMailsDateSpreading__</p>
+        <p 
+          class="chart_info_nomail" 
+          v-if="!is_loading_counter_inbox && (counter_inbox_total == 0)" 
+          v-text="no_mails_inbox"
+        ></p>
+        <ChartInboxZeroDates 
+          :chartData="chartData_InboxZeroDates" 
+          :is_loading="is_loading_inbox_chart_dates"
+        />
+        <div class="chart_inbox0_extended_btn" ><button type="button" @click="doShowExtended" v-if="!is_loading_inbox_chart_folders" class="btn" >__MSG_ViewDetails__</button></div>
+      </div>
+      <table class="chart_inbox0_extended_table" v-if="show_extended">
+        <tr>
+          <td class="chart_inbox0_extended_title">
+            __MSG_InboxMailsDateSpreadingExtended__
+          </td>
+          <td class="chart_inbox0_extended_orderby">
+            __MSG_OrderBy__:&nbsp;&nbsp;<span class="chart_inbox0_orderbtn" @click="doOrderExtendedDate">__MSG_Date__</span>&nbsp;<img src="@public/images/mzts-arrow-sort-active-down.png" class="chart_inbox0_extended_sorticon" v-if="orderType == 'date' && orderDate == 'asc'" /><img src="@public/images/mzts-arrow-sort-active-up.png" class="chart_inbox0_extended_sorticon" v-if="orderType == 'date' && orderDate == 'desc'" />&nbsp;|&nbsp;&nbsp;<span class="chart_inbox0_orderbtn" @click="doOrderExtendedMails">__MSG_Mails__</span>&nbsp;<img src="@public/images/mzts-arrow-sort-active-down.png" class="chart_inbox0_extended_sorticon" v-if="orderType == 'mails' && orderMails == 'asc'" /><img src="@public/images/mzts-arrow-sort-active-up.png" class="chart_inbox0_extended_sorticon" v-if="orderType == 'mails' && orderMails == 'desc'" />
+          </td>
+      </tr>
+    </table>
+      <div class="chart_inbox0_extended" :id="chart_inbox0_extended_id" v-if="show_extended">
+        <ChartInboxZeroDatesExtended 
+          :chartData="chartData_InboxZeroDates_extended"
+          :chart_height="chart_inbox0_extended_height"
+          :is_loading="false"
+          :key = "key"
+        />
+      </div>
+      <div class="chart_inbox0_extended_close_btn" v-if="show_extended"><button type="button" @click="doHideExtended" class="btn" >__MSG_Close__</button></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, watch } from 'vue';
+import CounterInboxPercent from '../counters/CounterInboxPercent.vue';
+import ChartInboxZeroFolders from '../charts/ChartInboxZeroFolders.vue';
+import ChartInboxZeroDates from '../charts/ChartInboxZeroDates.vue';
+import CounterInbox from '../counters/CounterInbox.vue';
+import InfoTooltip from '../InfoTooltip.vue';
+import ChartInboxZeroDatesExtended from '../charts/ChartInboxZeroDatesExtended.vue';
+import { tsCoreUtils } from '@statslib/mzts-statscore.utils';
+import { tsStore } from '@statslib/mzts-store';
+import { i18n } from '@statslib/mzts-i18n';
+
+
+const props = defineProps({
+  is_loading_counter_inbox: {
+    type: Boolean,
+    default: false,
+  },
+  counter_inbox_total: {
+    type: Number,
+    default: 0,
+  },
+  counter_inbox_unread: {
+    type: Number,
+    default: 0,
+  },
+  is_loading_counter_inbox_percent: {
+    type: Boolean,
+    default: false,
+  },
+  counter_inbox_percent: {
+    type: Number,
+    default: 0,
+  },
+  showFolderLocationNoteAnchor: {
+    type: Boolean,
+    default: false,
+  },
+  folderLocationNote_text: {
+    type: String,
+    default: '',
+  },
+  is_loading_counter_sent_rcvd: {
+    type: Boolean,
+    default: false,
+  },
+  counter_rcvd: {
+    type: Number,
+    default: 0,
+  },
+  chartData_InboxZeroFolders: {
+    type: Object,
+    default: () => ({}),
+    required: true,
+  },
+  inbox0_openFolderInFirstTab: {
+    type: Boolean,
+    default: false,
+  },
+  is_loading_inbox_chart_folders: {
+    type: Boolean,
+    default: false,
+  },
+  no_mails_inbox: {
+    type: String,
+    default: '',
+  },
+  no_mails_received: {
+    type: String,
+    default: '',
+  },
+  chartData_InboxZeroDates: {
+    type: Object,
+    default: () => ({}),
+    required: true,
+  },
+  chartData_InboxZeroDates_extended: {
+    type: Object,
+    default: () => ({}),
+    required: true,
+  },
+  is_loading_inbox_chart_dates: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+let show_extended = ref(false);
+let chart_inbox0_extended_height = ref("275px");
+
+let chartData_InboxZeroDates_extended = ref({
+  labels: [],
+  datasets: []
+})
+
+let chart_inbox0_extended_id = computed(() => {
+  return "chart_inbox0_extended_" + tsStore.currentTab;
+});
+
+let force_rand = ref(Math.floor(Math.random() * 101));
+let key = computed(() => String(force_rand.value));
+
+let chartData_OrdinableArray = ref([]);
+let orderDate = 'asc';
+let orderMails = 'asc';
+let orderType = 'date';
+
+// let chartData_InboxZeroDates_extended = computed(() => {
+//   let data_trasf = tsCoreUtils.transformQueryDataToDataset(props.chartData_InboxZeroDates_extended, true);
+//   let output = {};
+//   output.labels = data_trasf.labels;
+//   output.datasets = [data_trasf.dataset];
+//   chartData_OrdinableArray.value = tsCoreUtils.sortDatasetOrdinableArray(tsCoreUtils.transformDatasetToOrdinableArray(output));
+//   tsCoreUtils.updateDatasetFromSorted(output, chartData_OrdinableArray.value);
+//   console.log(">>>>>>>>>>>>>> props.chartData_InboxZeroDates_extended: " + JSON.stringify(props.chartData_InboxZeroDates_extended));
+//   console.log(">>>>>>>>>>>>>> chartData_InboxZeroDates_extended: " + JSON.stringify(output));
+//   return output;
+// });
+
+watch(() => props.is_loading_inbox_chart_dates, (newData) => {
+  if(newData){
+    doHideExtended();
+  }
+})
+
+async function doShowExtended() {
+  let data_trasf = tsCoreUtils.transformQueryDataToDataset(props.chartData_InboxZeroDates_extended);
+  let output = {};
+  output.labels = data_trasf.labels;
+  output.datasets = [data_trasf.dataset];
+  chartData_OrdinableArray.value = tsCoreUtils.transformDatasetToOrdinableArray(output);
+  chartData_InboxZeroDates_extended.value = output;
+  orderInboxZeroFoldersExtended('date','desc');
+  orderDate = 'desc';
+  show_extended.value = true;
+  await nextTick();
+  let dom_element = document.getElementById(chart_inbox0_extended_id.value);
+  if(dom_element != null){
+    let container_height = dom_element.clientHeight;
+    let ipotetic_height = chartData_InboxZeroDates_extended.value.labels.length * 60;
+    // console.log(">>>>>>>>>>>>> chart_inbox0_height container_height: " + container_height + " ipotetic_height: " + ipotetic_height);
+    if(container_height < ipotetic_height){
+      chart_inbox0_extended_height.value = String(ipotetic_height) + "px";
+    } else {
+      chart_inbox0_extended_height.value = String(container_height) + "px";
+    }
+    // console.log(">>>>>>>>>>>>>> chart_inbox0_extended_height.value: " + chart_inbox0_extended_height.value);
+    force_rand.value = Math.floor(Math.random() * 101);
+  }else{
+    console.error("[ThunderStats] Extended inbox0 chart DOM element not found!");
+  }
+  i18n.updateDocument();
+}
+
+async function doHideExtended() {
+  show_extended.value = false;
+  await nextTick();
+  i18n.updateDocument();
+}
+
+function orderInboxZeroFoldersExtended(type = 'date', order = 'asc') {
+  console.log(">>>>>>>>>>>>>> orderInboxZeroFoldersExtended type: " + type + " order: " + order);
+  chartData_OrdinableArray.value = tsCoreUtils.sortDatasetOrdinableArray(chartData_OrdinableArray.value,type,order);
+  console.log(">>>>>>>>>>>>>> orderInboxZeroFoldersExtended chartData_OrdinableArray: " + JSON.stringify(chartData_OrdinableArray.value));
+  tsCoreUtils.updateDatasetFromSorted(chartData_InboxZeroDates_extended.value, chartData_OrdinableArray.value);
+  console.log(">>>>>>>>>>>>>> orderInboxZeroFoldersExtended chartData_InboxZeroDates_extended: " + JSON.stringify(chartData_InboxZeroDates_extended.value));
+  force_rand.value = Math.floor(Math.random() * 101);
+}
+
+function doOrderExtendedDate() {
+  let order = orderDate === 'asc' ? 'desc' : 'asc';
+  orderDate = order;
+  orderMails = 'asc';
+  orderType = 'date';
+  orderInboxZeroFoldersExtended(orderType, order);
+}
+
+function doOrderExtendedMails() {
+  let order = orderMails === 'asc' ? 'desc' : 'asc';
+  orderMails = order;
+  orderDate = 'asc';
+  orderType = 'mails';
+  orderInboxZeroFoldersExtended(orderType, order);
+}
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/widgets/WidgetWeekDay.vue b/src/components/widgets/WidgetWeekDay.vue
index d71be119..60b48d36 100644
--- a/src/components/widgets/WidgetWeekDay.vue
+++ b/src/components/widgets/WidgetWeekDay.vue
@@ -21,7 +21,7 @@
 
 <template>
 
-    <GraphWeekDays :chartData="weekday_chartData" :is_loading="is_loading" :key="weekday_chartData_length" />
+    <ChartWeekDays :chartData="weekday_chartData" :is_loading="is_loading" :key="weekday_chartData_length" />
 
 </template>
 
@@ -29,7 +29,7 @@
 <script setup>
 
 import { computed } from 'vue'
-import GraphWeekDays from '../graphs/GraphWeekDays.vue';
+import ChartWeekDays from '../charts/ChartWeekDays.vue';
 
 let props = defineProps({
     weekday_chartData: {
diff --git a/src/index.thunderstats.js b/src/index.thunderstats.js
index 843aac2a..3c8e6112 100644
--- a/src/index.thunderstats.js
+++ b/src/index.thunderstats.js
@@ -13,6 +13,7 @@ async function main() {
     tsStore.do_debug = await tsPrefs.getPref("do_debug");
     tsStore.isTB128plus = await tsUtils.isThunderbird128OrGreater();
     tsStore.darkmode = undefined;
+    tsStore.currentTab = "tab-today";
 
     createApp(App_ThunderStats)
         .component('tabs', Tabs)
diff --git a/src/views/ThunderStatsView.vue b/src/views/ThunderStatsView.vue
index 52fdce88..2ebb96d9 100644
--- a/src/views/ThunderStatsView.vue
+++ b/src/views/ThunderStatsView.vue
@@ -148,19 +148,29 @@ import { tsUtils } from '@statslib/mzts-utils';
 
   onMounted(async () => {
     // console.log(">>>>>>>>>>>> ThunderStatsView onMounted");
-    remember_last_tab = await tsPrefs.getPref("remember_last_tab");
-    if(!remember_last_tab) { statsTabs_ref.value.selectTab('#tab-today'); }
+    // console.log(">>>>>>>>>>>>> ThunderStatsView onMounted statsTabs_ref.value.activeTabHash: " + JSON.stringify(statsTabs_ref.value.activeTabHash));
+    let prefs_onmounted = await tsPrefs.getPrefs(["remember_last_tab","customqry_loaddata_when_opening_addon"]);
+    remember_last_tab = prefs_onmounted.remember_last_tab;
+    if(!remember_last_tab) {
+      statsTabs_ref.value.selectTab('#tab-today');
+      tsStore.currentTab = "tab-today";
+    }else {
+      tsStore.currentTab = statsTabs_ref.value.activeTabHash.substring(1);
+    }
+    // console.log(">>>>>>>>>>>>>> ThunderStatsView onMounted tsStore.currentTab: " + tsStore.currentTab);
     let _many_days = await tsPrefs.getPref("_many_days");
     _many_days_text.value = browser.i18n.getMessage("LastNumDays", _many_days);
     tsCore = new thunderStastsCore({do_debug: tsStore.do_debug});
     i18n.updateDocument();
-    updateStats(HeadingNAV_ref.value.getCurrentIdn());
+    if((tsStore.currentTab != "tab-customqry")||(prefs_onmounted.customqry_loaddata_when_opening_addon)) {
+      updateStats(HeadingNAV_ref.value.getCurrentIdn());
+    }
     mounted_ok = true;
   });
   
 
   async function updateStats(account_id) {
-     //console.log(">>>>>>>>>>>> ThunderStatsView updateStats");
+    // console.log(">>>>>>>>>>>> ThunderStatsView updateStats tsStore.do_debug: " + tsStore.do_debug);
     if(tsLog == null) {
       tsLog = new tsLogger("ThunderStatsView", tsStore.do_debug);
     }
@@ -176,24 +186,25 @@ import { tsUtils } from '@statslib/mzts-utils';
     tsLog.log("accountEmails: " + JSON.stringify(accountEmails.value));
 //    resetStatsDone();
     nextTick(() => {
-      let curr_tab = statsTabs_ref.value.activeTabHash;
-      tsLog.log("curr_tab: " + curr_tab);
+      // console.log(">>>>>>>>>>>>>> ThunderStatsView updateStats statsTabs_ref.value.activeTabHash: " + statsTabs_ref.value.activeTabHash);
+      tsStore.currentTab = statsTabs_ref.value.activeTabHash.substring(1);
+      tsLog.log("tsStore.currentTab: " + tsStore.currentTab);
       is_loading.value = true;
-      switch(curr_tab) {
-        case "#tab-today":
+      switch(tsStore.currentTab) {
+        case "tab-today":
           TAB_Today_ref.value.updateData();
           break;
-        case "#tab-yesterday":
+        case "tab-yesterday":
           TAB_Yesterday_ref.value.updateData();
           break;
-        case "#tab-manydays":
+        case "tab-manydays":
           TAB_ManyDays_ref.value.updateData();
           break;
-        case "#tab-customqry":
+        case "tab-customqry":
           TAB_CustomQry_ref.value.doQry();
           break;
       }
-      statsDone(curr_tab.substring(1));
+      statsDone(tsStore.currentTab);
     });
   }
 
@@ -202,6 +213,7 @@ import { tsUtils } from '@statslib/mzts-utils';
     //console.log(">>>>>>>>>>>> ThunderStatsView tabChanged tsStore.do_debug: " + tsStore.do_debug);
     //console.log(">>>>>>>>>>>> ThunderStatsView tabChanged tsLog: " + JSON.stringify(tsLog));
     currentTab.value = id.tab.computedId;
+    tsStore.currentTab = id.tab.computedId;
     if(!mounted_ok) { return; }
     updateElapsed(0);
     is_loading.value = false;
diff --git a/statslib/chartjs-lib/external-tooltip-timegraphlines.js b/statslib/chartjs-lib/external-tooltip-timechartlines.js
similarity index 99%
rename from statslib/chartjs-lib/external-tooltip-timegraphlines.js
rename to statslib/chartjs-lib/external-tooltip-timechartlines.js
index 1ade0007..2ec6d935 100644
--- a/statslib/chartjs-lib/external-tooltip-timegraphlines.js
+++ b/statslib/chartjs-lib/external-tooltip-timechartlines.js
@@ -70,7 +70,7 @@ const getOrCreateTooltip = (chart) => {
   }
 
   
-export const externalTooltipTimeGraphLines = (context, extra_params = null) => {
+export const externalTooltipTimeChartLines = (context, extra_params = null) => {
     // Tooltip Element
     const {chart, tooltip} = context;
     const tooltipEl = getOrCreateTooltip(chart);
diff --git a/statslib/chartjs-lib/plugin-timegraph-legend.js b/statslib/chartjs-lib/plugin-timechart-legend.js
similarity index 98%
rename from statslib/chartjs-lib/plugin-timegraph-legend.js
rename to statslib/chartjs-lib/plugin-timechart-legend.js
index 16ac9fa5..65b2662d 100644
--- a/statslib/chartjs-lib/plugin-timegraph-legend.js
+++ b/statslib/chartjs-lib/plugin-timechart-legend.js
@@ -1,5 +1,6 @@
 const getOrCreateLegendList = (chart, id) => {
     const legendContainer = document.getElementById(id);
+    if(legendContainer == null) return null;
     let listContainer = legendContainer.querySelector('ul');
   
     if (!listContainer) {
@@ -36,6 +37,7 @@ const getOrCreateLegendList = (chart, id) => {
     afterUpdate(chart, args, options) {
         //console.log(">>>>>>>>>>>>> containerID: " + options.containerID);
       const ul = getOrCreateLegendList(chart, options.containerID);
+      if(ul == null) return;
   
       // Remove old legend items
       while (ul.firstChild) {
diff --git a/statslib/chartjs-lib/plugin-timegraph-vertical-line.js b/statslib/chartjs-lib/plugin-timechart-vertical-line.js
similarity index 100%
rename from statslib/chartjs-lib/plugin-timegraph-vertical-line.js
rename to statslib/chartjs-lib/plugin-timechart-vertical-line.js
diff --git a/statslib/mzts-options-default.js b/statslib/mzts-options-default.js
index 9f39ab2b..daba7192 100644
--- a/statslib/mzts-options-default.js
+++ b/statslib/mzts-options-default.js
@@ -2,15 +2,16 @@ export const prefs_default = {
     'do_debug': false,
     '_many_days': 7,
     '_involved_num': 10,
-    'today_time_graph_show_yesterday': true,
-    'today_time_graph_do_no_show_future': true,
-    '_time_graph_progressive': false,
+    'today_time_chart_show_yesterday': true,
+    'today_time_chart_do_no_show_future': true,
+    '_time_chart_progressive': false,
     'inbox0_openFolderInFirstTab': false,
     'startup_account': 0,
     'remember_last_tab': false,
     'always_reload_tab_data': false,
     'load_data_changing_account': true,
     'customqry_loaddata_when_selectingrange': true,
+    'customqry_loaddata_when_opening_addon': true,    // choose to load the customqry data even if is the opening tab when launching ThunderStats
     'first_day_week': 1,
     'datepicker_locale': 'en-US',
     'custom_identities': {},
diff --git a/statslib/mzts-statscore.js b/statslib/mzts-statscore.js
index eb5c78a1..52ba6fa3 100644
--- a/statslib/mzts-statscore.js
+++ b/statslib/mzts-statscore.js
@@ -179,14 +179,24 @@ export class thunderStastsCore {
         toDate: toDate,
       }
 
-      // Advanced Filters
+      // ====================== Advanced Filters ======================
       /*
         adv_filters is an object that contains various filters
 
         //Folders
           adv_filter.folders is an array with the "folders ids" to be included in the query
           adv_filter.folders_do_subfolders is a boolean that indicates if the subfolders should be included in the query
+
+        // filterSubject
+          adv_filter.filterSubject is a string that is searched in the subject
+
+        // Read / Unread
+          adv_filter.read_unread is an integer value: 0: all, 1: read, 2: unread
+
+        // Flagged / Unflagged
+          adv_filter.flagged_unflagged is an integer value: 0: all, 1: flagged, 2: unflagged
       */
+     // ===============================================================
 
       let filter_folders = null;
 
@@ -197,6 +207,41 @@ export class thunderStastsCore {
         if ((account_id != 0) && ('folders' in adv_filters) && (adv_filters.folders.length > 0)) {
           filter_folders = [...new Set(adv_filters.folders)];
         }
+
+        // filterSubject
+        if (('filterSubject' in adv_filters) && (adv_filters.filterSubject.length > 0)) {
+          queryInfo_FullStatsData.subject = adv_filters.filterSubject;
+        }
+
+        // Read / Unread
+        if ('read_unread' in adv_filters) {
+          switch(String(adv_filters.read_unread)){
+            case "1":
+              queryInfo_FullStatsData.unread = false;
+              break;
+            case "2":
+              queryInfo_FullStatsData.unread = true;
+              break;
+            case "0":
+            default:
+              break;
+          }
+        }
+
+        // Flagged / Unflagged
+        if ('flagged_unflagged' in adv_filters) {
+          switch(String(adv_filters.flagged_unflagged)){
+            case "1":
+              queryInfo_FullStatsData.flagged = true;
+              break;
+            case "2":
+              queryInfo_FullStatsData.flagged = false;
+              break;
+            case "0":
+            default:
+              break;
+          }
+        }
       }
 
       let filter_folders_115 = null;
@@ -222,7 +267,7 @@ export class thunderStastsCore {
         }
       }
       
-      this.tsLog.log("queryInfo_getFullStatsData: " + JSON.stringify(queryInfo_FullStatsData));
+      this.tsLog.log("queryInfo_FullStatsData: " + JSON.stringify(queryInfo_FullStatsData));
       
       let count = 0;
       let sent = 0;
@@ -234,6 +279,13 @@ export class thunderStastsCore {
 
       let folders = {};
       let dates = tsUtils.getDateArray(fromDate,toDate);
+      let dates_weeks = tsUtils.getDateArrayWeeks(fromDate,toDate);
+      let dates_months = tsUtils.getDateArrayMonths(fromDate,toDate);
+      let dates_years = tsUtils.getDateArrayYears(fromDate,toDate);
+
+      let domains = {};
+      let tags = await tsCoreUtils.getTagsList();
+      tsStore.tags_list = tags;
 
       //let messageids_sent = [];
 
@@ -314,7 +366,13 @@ export class thunderStastsCore {
           }
           // dates
           let date_message_string = tsUtils.dateToYYYYMMDD(message.date);
+          let date_week_string = tsUtils.dateToYYYYWW(message.date);
+          let date_month_string = tsUtils.dateToYYYYMM(message.date);
+          let date_year_string = tsUtils.dateToYYYY(message.date);
           dates[date_message_string].count++;
+          dates_weeks[date_week_string].count++;
+          dates_months[date_month_string].count++;
+          dates_years[date_year_string].count++;
           // check sender
           if (match_author) {
             const key_author = match_author[0].toLowerCase();
@@ -325,10 +383,36 @@ export class thunderStastsCore {
               folders[message.folder.id].sent++;
               // group by date
               dates[date_message_string].sent++;
+              dates_weeks[date_week_string].sent++;
+              dates_months[date_month_string].sent++;
+              dates_years[date_year_string].sent++;
               // group by hour
               msg_hours[hour_message].sent++;
               // group by weekday
               msg_weekdays[date_message.getDay()].sent++;
+              // group by domain
+              let allRecipients = [...message.recipients, ...message.ccList, ...message.bccList];
+              let domains_array = tsCoreUtils.extractDomains(allRecipients);
+              for (let domain of domains_array) {
+                if (domains[domain]) {
+                  domains[domain].count++;
+                  domains[domain].sent++;
+                } else {
+                  domains[domain] = {}
+                  domains[domain].count = 1;
+                  domains[domain].sent = 1;
+                  domains[domain].received = 0;
+                }
+              }
+              // group by tag
+              for (let tag of message.tags) {
+                if (tags[tag]) {
+                  tags[tag].count++;
+                  tags[tag].sent++;
+                } else {
+                  this.tsLog.error("tag: " + tag + " not found!");
+                }
+              }
               // check recipients
               //console.log(">>>>>>>>>>>>> recipients: " + JSON.stringify(message.recipients));
               for (let recipient of message.recipients) {
@@ -385,14 +469,37 @@ export class thunderStastsCore {
               folders[message.folder.id].received++;
               // group by date
               dates[date_message_string].received++;
+              dates_weeks[date_week_string].received++;
+              dates_months[date_month_string].received++;
+              dates_years[date_year_string].received++;
               // group by hour
               msg_hours[hour_message].received++;
               // group by weekday
               msg_weekdays[date_message.getDay()].received++;
+              // group by domain
+              let curr_domain = tsCoreUtils.extractDomain(key_author);
+              if (domains[curr_domain]) {
+                domains[curr_domain].count++;
+                domains[curr_domain].received++;
+              } else {
+                domains[curr_domain] = {}
+                domains[curr_domain].count = 1;
+                domains[curr_domain].sent = 0;
+                domains[curr_domain].received = 1;
+              }
+              // group by tag
+              for (let tag of message.tags) {
+                if (tags[tag]) {
+                  tags[tag].count++;
+                  tags[tag].received++;
+                } else {
+                  this.logger.error("tag: " + tag + " not found!");
+                }
+              }
             }
           }
         //check recipients - END
-        
+
         count++;
       }
 
@@ -405,7 +512,7 @@ export class thunderStastsCore {
       // console.log(">>>>>>>> final senders: " + JSON.stringify(senders));
       // console.log(">>>>>>>> final recipients: " + JSON.stringify(recipients));
 
-      let output = {senders: senders, recipients: recipients, sent: sent, received: received, count: count, count_in_inbox: count_in_inbox, msg_hours: msg_hours, folders: folders, dates: dates, msg_weekdays: msg_weekdays};
+      let output = {senders: senders, recipients: recipients, sent: sent, received: received, count: count, count_in_inbox: count_in_inbox, msg_hours: msg_hours, folders: folders, dates: dates, dates_weeks: dates_weeks, dates_months: dates_months, dates_years: dates_years, msg_weekdays: msg_weekdays, domains: domains, tags: tags};
 
       if(do_aggregate_stats) {
         output.aggregate = await this.aggregateData(dates, only_businessdays);
diff --git a/statslib/mzts-statscore.utils.js b/statslib/mzts-statscore.utils.js
index 01cf56b3..b625be08 100644
--- a/statslib/mzts-statscore.utils.js
+++ b/statslib/mzts-statscore.utils.js
@@ -120,6 +120,15 @@ export const tsCoreUtils = {
       return `${folder.accountId}:/${folder.path}`
     },
 
+    getFolderPath(folderId, do_split = false) {
+      const [accountId, path] = folderId.split(':/');
+      if(!do_split) {
+        return path.slice(1);
+      } else {
+        return path.slice(1).split(/(?<=\/)/);
+      }
+    },
+
     filterTodayNextHours(hours) {
         // Get the current time
         const now = new Date();
@@ -129,6 +138,47 @@ export const tsCoreUtils = {
         return hours.map((value, index) => index > currentHour ? null : value);
     },
 
+    async getTagsList(){
+        let messageTags = {};
+        if(tsStore.isTB128plus) {
+            messageTags = await browser.messages.tags.list();
+        } else {
+            messageTags = await browser.messages.listTags();
+        }
+        const output = messageTags.reduce((acc, messageTag) => {
+            acc[messageTag.key] = {
+                tag: messageTag.tag,
+                color: messageTag.color,
+                key: messageTag.key,
+                ordinal: messageTag.ordinal,
+                count: 0,
+                sent: 0,
+                received: 0,
+            };
+            return acc;
+          }, {});
+        // console.log(">>>>>>>>>>> getTagsList: " + JSON.stringify(output));
+        return output;
+    },
+
+    async transformTagsLabels(labels) {
+        let output = [];
+        let tags = tsStore.tags_list;
+        for(let label of labels) {
+            output.push(tags[label].tag);
+        }
+        return output;
+    },
+
+    getTagsLabelColor(label) {
+        let color = Object.values(tsStore.tags_list).find(tag => tag.tag === label).color;
+        if(tsStore.darkmode && color === '#000000') {
+            color = '#ffffff';
+        }
+        
+        return color;
+    },
+
     // getManyDaysLabels(labels) {
     //     const daysOfWeek = ["WeekDay0", "WeekDay1", "WeekDay2", "WeekDay3", "WeekDay4", "WeekDay5", "WeekDay6"];
 
@@ -153,31 +203,56 @@ export const tsCoreUtils = {
     //     });
     // },
 
-    getDaysLabelColor(label) {
-        let isBusinessDay = this.checkBusinessDay(label);
+    getDaysLabelColor(label, color_today = true, color_nobusiness_day = true) {
+        let isBusinessDay = true;
+
+        // console.log(">>>>>>>>>> color_today: " + color_today);
+        // console.log(">>>>>>>>>> color_nobusiness_day: " + color_nobusiness_day);
 
         const bd_color = tsStore.darkmode ? "white" : "black";
         const nbd_color = tsStore.darkmode ? "#C18F2A" : "#725419";
 
+        if(color_today && tsCoreUtils.isToday(label)) {
+            return tsStore.darkmode ? tsStore.chart_colors.many_days_today_dark : tsStore.chart_colors.many_days_today_light;
+        }
+
+        if(color_nobusiness_day) {
+            isBusinessDay = this.checkBusinessDay(label);
+        }
+
         return (isBusinessDay ? bd_color : nbd_color);
     },
 
-    getCustomQryLabel(label) {
-        const year = parseInt(label.slice(0, 4));
-        const month = parseInt(label.slice(4, 6));
-        const day = parseInt(label.slice(6, 8));
+    getCustomQryLabel(label, data_type) {      // data_type = "YYYY" | "YYYYMM" | "YYYYWW" | "YYYYMMDD"
+        switch(data_type) {
+            case "YYYY":
+                return label;
+            case "YYYYMM":
+                let mm_year = label.slice(0, 4);
+                let mm_month = label.slice(4);
+                return `${mm_month}/${mm_year}`;
+            case "YYYYWW":
+                let ww_year = label.slice(0, 4); // First 4 characters are the year
+                let ww_week = label.slice(4);   // Remaining characters are the week number
+                // Format the string as "WW [YYYY]"
+                return `${ww_week} [${ww_year}]`;
+            case "YYYYMMDD":
+                const year = parseInt(label.slice(0, 4));
+                const month = parseInt(label.slice(4, 6));
+                const day = parseInt(label.slice(6, 8));
 
-        const date = new Date(year, month - 1, day);
+                const date = new Date(year, month - 1, day);
 
-        const dateFormatter = new Intl.DateTimeFormat(undefined, {
-            day: '2-digit',
-            month: '2-digit',
-            year: 'numeric'
-        });
+                const dateFormatter = new Intl.DateTimeFormat(undefined, {
+                    day: '2-digit',
+                    month: '2-digit',
+                    year: 'numeric'
+                });
 
-        const formattedDate = dateFormatter.format(date);
+                const formattedDate = dateFormatter.format(date);
 
-        return formattedDate;
+                return formattedDate;
+        }
     },
 
     getManyDaysLabel(label) {
@@ -282,6 +357,110 @@ export const tsCoreUtils = {
         return datasets;
     },
 
+    transformQueryDataToDataset(data) {
+        let output = {};
+        let dataset = {};
+        dataset.data = [];
+        let labels = [];
+        let total = 0;
+
+        for(let key in data) {
+            total += data[key];
+        }
+
+        for(let key in data) {
+            let value = data[key];
+            dataset.data.push(value);
+            // let current_date = tsUtils.parseYYYYMMDDToDate(key);
+            // labels.push(current_date.toLocaleDateString(undefined,{day: '2-digit', month: '2-digit', year: 'numeric'}));
+            labels.push(key);
+        }
+
+        let targetLength = labels.length;
+        let availableColors = [...inboxZeroColors];
+        while (availableColors.length < targetLength) {
+          availableColors.push(...inboxZeroColors);
+        }
+        dataset.backgroundColor = [...availableColors];
+        dataset.borderColor = [...availableColors];
+
+        output.dataset = dataset;
+        output.labels = labels;
+        output.total = total;
+
+        // console.log(">>>>>>>>>>>>>> Length of labels: " + labels.length);
+        // console.log(">>>>>>>>>>>>>> Length of available colors: " + availableColors.length);
+        // console.log(">>>>>>>>>>>>>> Length of dataset.data: " + dataset.data.length);
+        // console.log(">>>>>>>>>>>>>> targetLength: " + targetLength);
+
+        return output;
+    },
+
+    transformDatasetToOrdinableArray(dataObject) {
+      return dataObject.labels.map((label, index) => {
+        //   const [day, month, year] = label.split("/").map(Number);
+          return {
+            // date: new Date(year, month - 1, day),
+            date: tsUtils.parseYYYYMMDDToDate(label),
+            label,
+            value: dataObject.datasets[0].data[index],
+            bgColor: dataObject.datasets[0].backgroundColor[index],
+            borderColor: dataObject.datasets[0].borderColor[index]
+          };
+      });
+    },
+
+    sortDatasetOrdinableArray(tempArray, type = 'date', order = 'asc') {
+      if (type === 'date') {
+        if (order === 'asc') {
+          return tempArray.sort((a, b) => a.date - b.date);
+        } else if (order === 'desc') {
+          return tempArray.sort((a, b) => b.date - a.date);
+        }
+      } else if (type === 'mails') {
+        if (order === 'asc') {
+          return tempArray.sort((a, b) => a.value - b.value);
+        } else if (order === 'desc') {
+          return tempArray.sort((a, b) => b.value - a.value);
+         }
+      } else {
+        throw new Error("Invalid type. Use 'date' or 'mails' for sorting.");
+      }
+      
+      throw new Error("Invalid order. Use 'asc' or 'mails' for sorting.");
+    },
+
+    updateDatasetFromSorted(dataObject, sortedArray) {
+      dataObject.labels = sortedArray.map(item => item.label);
+      dataObject.datasets[0].data = sortedArray.map(item => item.value);
+      dataObject.datasets[0].backgroundColor = sortedArray.map(item => item.bgColor);
+      dataObject.datasets[0].borderColor = sortedArray.map(item => item.borderColor);
+    },
+
+    sortDoubleDatasetsByTotal(data) {
+      // console.log(">>>>>>>>>>>>>> [sortDoubleDatasetsByTotal] data: " + JSON.stringify(data));
+      // Create an array of objects containing labels and the sum of data values
+      const summedData = data.labels.map((label, index) => {
+        const sum = data.datasets.reduce((acc, dataset) => acc + dataset.data[index], 0);
+        return { label, sum };
+      });
+    
+      // Sort the array by sum in descending order
+      summedData.sort((a, b) => b.sum - a.sum);
+    
+      // Rebuild the sorted object
+      const sortedLabels = summedData.map(item => item.label);
+      const sortedDatasets = data.datasets.map(dataset => ({
+        ...dataset,
+        data: summedData.map(item => dataset.data[data.labels.indexOf(item.label)])
+      }));
+    
+      return {
+        labels: sortedLabels,
+        datasets: sortedDatasets
+      };
+    },      
+
     // getMaxFromData(data) {      // data is an object like this: {"20240517":2,"20240518":4,"20240519":4,"20240520":2,"20240521":0,"20240522":2,"20240523":4,"20240524":0}
     //     let maxValue = 0;
     //     for (const [date, value] of Object.entries(data)) {
@@ -636,6 +815,31 @@ export const tsCoreUtils = {
         }
     },
 
+    extractDomain(email) {
+        if (typeof email === 'string' && email.includes('@')) {
+          return email.split('@')[1];
+        }
+        return null;
+    },
+
+    extractDomains(recipients) {
+        const domains = [];
+      
+        recipients.forEach((recipient) => {
+          // Use regex to extract the email from a string like "Name <email@example.com>" or just "email@example.com"
+          const emailMatch = recipient.match(/<(.+?)>|(.+?@.+)/);
+          const email = emailMatch ? (emailMatch[1] || emailMatch[2]) : null;
+      
+          if (email && email.includes('@')) {
+            let domain = email.split('@')[1].trim();
+            domain = domain.replace(/>/g, '').trim();
+            domains.push(domain);
+          }
+        });
+      
+        return domains;
+    },
+
     // This function finds the first previous business day before the given date
     findPreviousBusinessDay(date) {
         let previousDate = new Date(date); // Create a copy of the original date
@@ -687,6 +891,19 @@ export const tsCoreUtils = {
         return true;
     },
 
+    isToday(dateString) {
+        // Get the current date
+        const today = new Date();
+        
+        // Format the current date as YYYYMMDD
+        const currentDate = today.getFullYear().toString() +
+                            (today.getMonth() + 1).toString().padStart(2, '0') +
+                            today.getDate().toString().padStart(2, '0');
+      
+        // Check if the provided date string matches today's date
+        return dateString === currentDate;
+    },
+
     isEasterOrEasterMonday(date) {
         const year = date.getFullYear();
         const easterDate = this.calculateEaster(year);
diff --git a/statslib/mzts-store.js b/statslib/mzts-store.js
index 12f7c40a..733f9283 100644
--- a/statslib/mzts-store.js
+++ b/statslib/mzts-store.js
@@ -27,4 +27,7 @@ export const tsStore = reactive({
         _weekday_sent: '#4682B4',
         _weekday_rcvd: '#FF8C45',
     },
+    'tags_list': {},
+    'currentTab': '',
+    'show_tags': false,
 });
\ No newline at end of file
diff --git a/statslib/mzts-utils.js b/statslib/mzts-utils.js
index 5b9b4d80..f0f899ef 100644
--- a/statslib/mzts-utils.js
+++ b/statslib/mzts-utils.js
@@ -36,6 +36,50 @@ export const tsUtils = {
         return dateString;
     },
 
+    dateToYYYYMM(originalDate) {
+      // Extract the year from the date
+      let year = originalDate.getFullYear();
+      // Extract the month from the date and adjust for zero-index (0 for January, 11 for December)
+      let month = originalDate.getMonth() + 1;
+      // Format month to always have two digits
+      let formattedMonth = month < 10 ? '0' + month : month;
+  
+      // Combine year and formatted month
+      let dateString = '' + year + formattedMonth;
+  
+      return dateString;
+    },
+
+    dateToYYYY(originalDate) {
+      // Extract the year from the date
+      let year = originalDate.getFullYear();
+      return '' + year; // Convert to string for consistency
+    },
+
+    dateToYYYYWW(originalDate) {
+      // Extract the year from the date
+      let year = originalDate.getFullYear();
+  
+      // Create a copy of the date to avoid modifying the original
+      let date = new Date(originalDate.getTime());
+      date.setHours(0, 0, 0, 0);
+  
+      // Set the date to the nearest Thursday (ISO week starts on Monday and counts from the first Thursday)
+      date.setDate(date.getDate() + 4 - (date.getDay() || 7));
+      let yearStart = new Date(date.getFullYear(), 0, 1);
+      
+      // Calculate the week number
+      let weekNumber = Math.ceil((((date - yearStart) / 86400000) + 1) / 7);
+  
+      // Format week number to always have two digits
+      let formattedWeek = weekNumber < 10 ? '0' + weekNumber : weekNumber;
+  
+      // Combine year and formatted week number
+      let dateString = '' + year + formattedWeek;
+  
+      return dateString;
+    },  
+
     parseYYYYMMDDToDate(dateString) {
         // Extract year, month, and day from the string
         let year = parseInt(dateString.substring(0, 4), 10);
@@ -54,15 +98,54 @@ export const tsUtils = {
     
         while (currentDate <= toDate) {
             let formattedDate = this.dateToYYYYMMDD(currentDate);
-            dateArray[formattedDate] = {};
-            dateArray[formattedDate].count = 0;
-            dateArray[formattedDate].sent = 0;
-            dateArray[formattedDate].received = 0;
+            dateArray[formattedDate] = { count: 0, sent: 0, received: 0 };
             currentDate.setDate(currentDate.getDate() + 1); // Increment the date by one day
         }
         return dateArray;
     },
 
+    getDateArrayWeeks(fromDate, toDate) {
+      let weekArray = {};
+      let currentDate = new Date(fromDate.getTime());
+  
+      while (currentDate <= toDate) {
+          let weekKey = this.dateToYYYYWW(currentDate);
+          if (!weekArray[weekKey]) {
+              weekArray[weekKey] = { count: 0, sent: 0, received: 0 };
+          }
+          currentDate.setDate(currentDate.getDate() + 1);
+      }
+      return weekArray;
+    },
+
+    getDateArrayMonths(fromDate, toDate) {
+      let monthArray = {};
+      let currentDate = new Date(fromDate.getTime());
+  
+      while (currentDate <= toDate) {
+          let monthKey = this.dateToYYYYMM(currentDate);
+          if (!monthArray[monthKey]) {
+              monthArray[monthKey] = { count: 0, sent: 0, received: 0 };
+          }
+          currentDate.setDate(currentDate.getDate() + 1);
+      }
+      return monthArray;
+    },
+
+    getDateArrayYears(fromDate, toDate) {
+      let yearArray = {};
+      let currentDate = new Date(fromDate.getTime());
+  
+      while (currentDate <= toDate) {
+          let yearKey = this.dateToYYYY(currentDate);
+          if (!yearArray[yearKey]) {
+              yearArray[yearKey] = { count: 0, sent: 0, received: 0 };
+          }
+          currentDate.setDate(currentDate.getDate() + 1);
+      }
+      return yearArray;
+    },
+
     daysBetween(fromDate, toDate) {
         const from = new Date(fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate(), 12, 0, 0);
         const to = new Date(toDate.getFullYear(), toDate.getMonth(), toDate.getDate(), 12, 0, 0);
diff --git a/vite.config.js b/vite.config.js
index 8eba2b8b..93234704 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,7 +12,8 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@statslib': fileURLToPath(new URL('./statslib', import.meta.url))
+      '@statslib': fileURLToPath(new URL('./statslib', import.meta.url)),
+      '@public': fileURLToPath(new URL('./public', import.meta.url)),
     }
   },
   build: {