From 89f64736f432aa0f25e668b0521c1eae02cca9b8 Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Sat, 24 Aug 2024 21:46:23 +0200
Subject: [PATCH 01/18] added libraries/stats endpoint

---
 server/controllers/LibraryController.js | 63 ++++++++++++-------------
 server/routers/ApiRouter.js             |  1 +
 server/utils/libraryHelpers.js          | 46 ++++++++++++++++++
 3 files changed, 78 insertions(+), 32 deletions(-)

diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index 13b82ad402..69b13ab76e 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -32,6 +32,32 @@ const authorFilters = require('../utils/queries/authorFilters')
 class LibraryController {
   constructor() {}
 
+  /**
+   * GET: /api/libraries/stats
+   * Get stats for all libraries and respond with JSON
+   * @param {import('express').Request} req
+   * @param {import('express').Response} res
+   */
+  async allStats(req, res) {
+    try {
+      const allLibrariesIds = await Database.libraryModel.getAllLibraryIds();
+      const allStats = [];
+
+      for (let i = 0; i < allLibrariesIds.length; i++) {
+        req.library = {
+          id: allLibrariesIds[i],
+          isBook: await Database.libraryModel.getOldById(allLibrariesIds[i]),
+        };
+        const libraryStats = await libraryHelpers.getLibraryStats(req);
+        allStats.push({ libraryId: req.library.id, stats: libraryStats });
+      }
+
+      res.json(allStats);
+    } catch (error) {
+      res.status(500).json({ error: error.message });
+    }
+  }
+
   /**
    * POST: /api/libraries
    * Create a new library
@@ -718,39 +744,12 @@ class LibraryController {
    * @param {Response} res
    */
   async stats(req, res) {
-    const stats = {
-      largestItems: await libraryItemFilters.getLargestItems(req.library.id, 10)
-    }
-
-    if (req.library.mediaType === 'book') {
-      const authors = await authorFilters.getAuthorsWithCount(req.library.id, 10)
-      const genres = await libraryItemsBookFilters.getGenresWithCount(req.library.id)
-      const bookStats = await libraryItemsBookFilters.getBookLibraryStats(req.library.id)
-      const longestBooks = await libraryItemsBookFilters.getLongestBooks(req.library.id, 10)
-
-      stats.totalAuthors = await authorFilters.getAuthorsTotalCount(req.library.id)
-      stats.authorsWithCount = authors
-      stats.totalGenres = genres.length
-      stats.genresWithCount = genres
-      stats.totalItems = bookStats.totalItems
-      stats.longestItems = longestBooks
-      stats.totalSize = bookStats.totalSize
-      stats.totalDuration = bookStats.totalDuration
-      stats.numAudioTracks = bookStats.numAudioFiles
-    } else {
-      const genres = await libraryItemsPodcastFilters.getGenresWithCount(req.library.id)
-      const podcastStats = await libraryItemsPodcastFilters.getPodcastLibraryStats(req.library.id)
-      const longestPodcasts = await libraryItemsPodcastFilters.getLongestPodcasts(req.library.id, 10)
-
-      stats.totalGenres = genres.length
-      stats.genresWithCount = genres
-      stats.totalItems = podcastStats.totalItems
-      stats.longestItems = longestPodcasts
-      stats.totalSize = podcastStats.totalSize
-      stats.totalDuration = podcastStats.totalDuration
-      stats.numAudioTracks = podcastStats.numAudioFiles
+    try {
+      const stats = await libraryHelpers.getLibraryStats(req);
+      res.json(stats);
+    } catch (error) {
+      res.status(500).json({ error: error.message });
     }
-    res.json(stats)
   }
 
   /**
diff --git a/server/routers/ApiRouter.js b/server/routers/ApiRouter.js
index 54cd97c094..4e499c61e4 100644
--- a/server/routers/ApiRouter.js
+++ b/server/routers/ApiRouter.js
@@ -72,6 +72,7 @@ class ApiRouter {
     this.router.get(/^\/libraries/, this.apiCacheManager.middleware)
     this.router.post('/libraries', LibraryController.create.bind(this))
     this.router.get('/libraries', LibraryController.findAll.bind(this))
+    this.router.get('/libraries/stats', LibraryController.allStats.bind(this))
     this.router.get('/libraries/:id', LibraryController.middleware.bind(this), LibraryController.findOne.bind(this))
     this.router.patch('/libraries/:id', LibraryController.middleware.bind(this), LibraryController.update.bind(this))
     this.router.delete('/libraries/:id', LibraryController.middleware.bind(this), LibraryController.delete.bind(this))
diff --git a/server/utils/libraryHelpers.js b/server/utils/libraryHelpers.js
index ad71ee3fad..65dcf1aa74 100644
--- a/server/utils/libraryHelpers.js
+++ b/server/utils/libraryHelpers.js
@@ -1,6 +1,10 @@
 const { createNewSortInstance } = require('../libs/fastSort')
 const Database = require('../Database')
 const { getTitlePrefixAtEnd, isNullOrNaN, getTitleIgnorePrefix } = require('../utils/index')
+const { getLargestItems } = require('./queries/libraryItemFilters')
+const { getAuthorsWithCount, getAuthorsTotalCount } = require('./queries/authorFilters')
+const { getGenresWithCount, getBookLibraryStats, getLongestBooks } = require('./queries/libraryItemsBookFilters')
+const { getPodcastLibraryStats, getLongestPodcasts } = require('./queries/libraryItemsPodcastFilters')
 const naturalSort = createNewSortInstance({
   comparer: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare
 })
@@ -78,6 +82,48 @@ module.exports = {
     return filteredLibraryItems
   },
 
+  /**
+   * Helper method to get stats for a specific library
+   * @param {import('express').Request} req
+   * @returns {Promise<Object>} stats
+   */
+  async getLibraryStats(req) {
+    const stats = {
+      largestItems: await getLargestItems(req.library.id, 10),
+    };
+
+    if (req.library.isBook) {
+      const authors = await getAuthorsWithCount(req.library.id, 10);
+      const genres = getGenresWithCount(req.library.id);
+      const bookStats = await getBookLibraryStats(req.library.id);
+      const longestBooks = await getLongestBooks(req.library.id, 10);
+
+      stats.totalAuthors = await getAuthorsTotalCount(req.library.id);
+      stats.authorsWithCount = authors;
+      stats.totalGenres = genres.length;
+      stats.genresWithCount = genres;
+      stats.totalItems = bookStats.totalItems;
+      stats.longestItems = longestBooks;
+      stats.totalSize = bookStats.totalSize;
+      stats.totalDuration = bookStats.totalDuration;
+      stats.numAudioTracks = bookStats.numAudioFiles;
+    } else {
+      const genres = getGenresWithCount(req.library.id);
+      const podcastStats = await getPodcastLibraryStats(req.library.id);
+      const longestPodcasts = await getLongestPodcasts(req.library.id, 10);
+
+      stats.totalGenres = genres.length;
+      stats.genresWithCount = genres;
+      stats.totalItems = podcastStats.totalItems;
+      stats.longestItems = longestPodcasts;
+      stats.totalSize = podcastStats.totalSize;
+      stats.totalDuration = podcastStats.totalDuration;
+      stats.numAudioTracks = podcastStats.numAudioFiles;
+    }
+
+    return stats;
+  },
+
   /**
    *
    * @param {*} payload

From 858ea5010a1f2743dcfeb448c9fa7ad9e1b00821 Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Sat, 24 Aug 2024 21:55:13 +0200
Subject: [PATCH 02/18] fixed wrong ide completions

---
 server/controllers/LibraryController.js |  2 +-
 server/utils/libraryHelpers.js          | 28 ++++++++++++-------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index 69b13ab76e..77ebbc5cbf 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -46,7 +46,7 @@ class LibraryController {
       for (let i = 0; i < allLibrariesIds.length; i++) {
         req.library = {
           id: allLibrariesIds[i],
-          isBook: await Database.libraryModel.getOldById(allLibrariesIds[i]),
+          mediaType: (await Database.libraryModel.getOldById(allLibrariesIds[i])).mediaType,
         };
         const libraryStats = await libraryHelpers.getLibraryStats(req);
         allStats.push({ libraryId: req.library.id, stats: libraryStats });
diff --git a/server/utils/libraryHelpers.js b/server/utils/libraryHelpers.js
index 65dcf1aa74..af03ad9391 100644
--- a/server/utils/libraryHelpers.js
+++ b/server/utils/libraryHelpers.js
@@ -1,10 +1,10 @@
 const { createNewSortInstance } = require('../libs/fastSort')
 const Database = require('../Database')
 const { getTitlePrefixAtEnd, isNullOrNaN, getTitleIgnorePrefix } = require('../utils/index')
-const { getLargestItems } = require('./queries/libraryItemFilters')
-const { getAuthorsWithCount, getAuthorsTotalCount } = require('./queries/authorFilters')
-const { getGenresWithCount, getBookLibraryStats, getLongestBooks } = require('./queries/libraryItemsBookFilters')
-const { getPodcastLibraryStats, getLongestPodcasts } = require('./queries/libraryItemsPodcastFilters')
+const libraryItemsBookFilters = require('../utils/queries/libraryItemsBookFilters')
+const authorFilters = require('../utils/queries/authorFilters')
+const libraryItemFilters = require('../utils/queries/libraryItemFilters')
+const libraryItemsPodcastFilters = require('../utils/queries/libraryItemsPodcastFilters')
 const naturalSort = createNewSortInstance({
   comparer: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare
 })
@@ -89,16 +89,16 @@ module.exports = {
    */
   async getLibraryStats(req) {
     const stats = {
-      largestItems: await getLargestItems(req.library.id, 10),
+      largestItems: await libraryItemFilters.getLargestItems(req.library.id, 10)
     };
 
-    if (req.library.isBook) {
-      const authors = await getAuthorsWithCount(req.library.id, 10);
-      const genres = getGenresWithCount(req.library.id);
-      const bookStats = await getBookLibraryStats(req.library.id);
-      const longestBooks = await getLongestBooks(req.library.id, 10);
+    if (req.library.mediaType === 'book') {
+      const authors = await authorFilters.getAuthorsWithCount(req.library.id, 10)
+      const genres = await libraryItemsBookFilters.getGenresWithCount(req.library.id)
+      const bookStats = await libraryItemsBookFilters.getBookLibraryStats(req.library.id)
+      const longestBooks = await libraryItemsBookFilters.getLongestBooks(req.library.id, 10)
 
-      stats.totalAuthors = await getAuthorsTotalCount(req.library.id);
+      stats.totalAuthors = await authorFilters.getAuthorsTotalCount(req.library.id)
       stats.authorsWithCount = authors;
       stats.totalGenres = genres.length;
       stats.genresWithCount = genres;
@@ -108,9 +108,9 @@ module.exports = {
       stats.totalDuration = bookStats.totalDuration;
       stats.numAudioTracks = bookStats.numAudioFiles;
     } else {
-      const genres = getGenresWithCount(req.library.id);
-      const podcastStats = await getPodcastLibraryStats(req.library.id);
-      const longestPodcasts = await getLongestPodcasts(req.library.id, 10);
+      const genres = await libraryItemsPodcastFilters.getGenresWithCount(req.library.id)
+      const podcastStats = await libraryItemsPodcastFilters.getPodcastLibraryStats(req.library.id)
+      const longestPodcasts = await libraryItemsPodcastFilters.getLongestPodcasts(req.library.id, 10)
 
       stats.totalGenres = genres.length;
       stats.genresWithCount = genres;

From 3d906347c3a00af8bcb3a08bd383c0a7167f920c Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Sat, 24 Aug 2024 22:14:38 +0200
Subject: [PATCH 03/18] added library to be returned instead of libraryId and
 fixed stupid req.library asignment

---
 server/controllers/LibraryController.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index 77ebbc5cbf..0336f61568 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -44,12 +44,10 @@ class LibraryController {
       const allStats = [];
 
       for (let i = 0; i < allLibrariesIds.length; i++) {
-        req.library = {
-          id: allLibrariesIds[i],
-          mediaType: (await Database.libraryModel.getOldById(allLibrariesIds[i])).mediaType,
-        };
+        const library = await Database.libraryModel.getOldById(allLibrariesIds[i]);
+        req.library = library
         const libraryStats = await libraryHelpers.getLibraryStats(req);
-        allStats.push({ libraryId: req.library.id, stats: libraryStats });
+        allStats.push({ library: library, stats: libraryStats });
       }
 
       res.json(allStats);

From 0e205b59d84f307fecfe1648a66b197c7c999e27 Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Sat, 24 Aug 2024 22:29:19 +0200
Subject: [PATCH 04/18] copy pasted and edited some parts in all-stats

---
 client/components/app/ConfigSideNav.vue     |   5 +
 client/pages/library/_library/all-stats.vue | 182 ++++++++++++++++++++
 client/strings/en-us.json                   |   1 +
 3 files changed, 188 insertions(+)
 create mode 100644 client/pages/library/_library/all-stats.vue

diff --git a/client/components/app/ConfigSideNav.vue b/client/components/app/ConfigSideNav.vue
index adc99e5ae5..b961a4453c 100644
--- a/client/components/app/ConfigSideNav.vue
+++ b/client/components/app/ConfigSideNav.vue
@@ -109,6 +109,11 @@ export default {
           id: 'config-authentication',
           title: this.$strings.HeaderAuthentication,
           path: '/config/authentication'
+        },
+        {
+          id: 'all-libraries-stats',
+          title: this.$strings.HeaderAllLibrariesStats,
+          path: '/libraries/stats'
         }
       ]
 
diff --git a/client/pages/library/_library/all-stats.vue b/client/pages/library/_library/all-stats.vue
new file mode 100644
index 0000000000..a579cf9c08
--- /dev/null
+++ b/client/pages/library/_library/all-stats.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="page relative" :class="streamLibraryItem ? 'streaming' : ''">
+    <app-book-shelf-toolbar page="all-libraries-stats" is-home />
+    <div id="bookshelf" class="w-full h-full px-1 py-4 md:p-8 relative overflow-y-auto">
+      <div class="w-full max-w-4xl mx-auto">
+        <stats-preview-icons v-if="totalItems" :library-stats="combinedLibraryStats" />
+
+        <div class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
+          <div class="w-80 my-6 mx-auto">
+            <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsTop5Genres }}</h1>
+            <p v-if="!top5Genres.length">{{ $strings.MessageNoGenres }}</p>
+            <template v-for="genre in top5Genres">
+              <div :key="genre.genre" class="w-full py-2">
+                <div class="flex items-end mb-1">
+                  <p class="text-2xl font-bold">{{ Math.round((100 * genre.count) / totalItems) }}&nbsp;%</p>
+                  <div class="flex-grow" />
+                  <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(genre.genre)}`" class="text-base text-white text-opacity-70 hover:underline">
+                    {{ genre.genre }}
+                  </nuxt-link>
+                </div>
+                <div class="w-full rounded-full h-3 bg-primary bg-opacity-50 overflow-hidden">
+                  <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * genre.count) / totalItems) + '%' }" />
+                </div>
+              </div>
+            </template>
+          </div>
+          <div v-if="isBookLibrary" class="w-80 my-6 mx-auto">
+            <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsTop10Authors }}</h1>
+            <p v-if="!top10Authors.length">{{ $strings.MessageNoAuthors }}</p>
+            <template v-for="(author, index) in top10Authors">
+              <div :key="author.id" class="w-full py-2">
+                <div class="flex items-center mb-1">
+                  <p class="text-sm text-white text-opacity-70 w-36 pr-2 truncate">
+                    {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(author.id)}`" class="hover:underline">{{ author.name }}</nuxt-link>
+                  </p>
+                  <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
+                    <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * author.count) / mostUsedAuthorCount) + '%' }" />
+                  </div>
+                  <div class="w-4 ml-3">
+                    <p class="text-sm font-bold">{{ author.count }}</p>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div class="w-80 my-6 mx-auto">
+            <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsLongestItems }}</h1>
+            <p v-if="!top10LongestItems.length">{{ $strings.MessageNoItems }}</p>
+            <template v-for="(ab, index) in top10LongestItems">
+              <div :key="index" class="w-full py-2">
+                <div class="flex items-center mb-1">
+                  <p class="text-sm text-white text-opacity-70 w-44 pr-2 truncate">
+                    {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/item/${ab.id}`" class="hover:underline">{{ ab.title }}</nuxt-link>
+                  </p>
+                  <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
+                    <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * ab.duration) / longestItemDuration) + '%' }" />
+                  </div>
+                  <div class="w-4 ml-3">
+                    <p class="text-sm font-bold">{{ (ab.duration / 3600).toFixed(1) }}</p>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div class="w-80 my-6 mx-auto">
+            <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsLargestItems }}</h1>
+            <p v-if="!top10LargestItems.length">{{ $strings.MessageNoItems }}</p>
+            <template v-for="(ab, index) in top10LargestItems">
+              <div :key="index" class="w-full py-2">
+                <div class="flex items-center mb-1">
+                  <p class="text-sm text-white text-opacity-70 w-44 pr-2 truncate">
+                    {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/item/${ab.id}`" class="hover:underline">{{ ab.title }}</nuxt-link>
+                  </p>
+                  <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
+                    <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * ab.size) / largestItemSize) + '%' }" />
+                  </div>
+                  <div class="w-4 ml-3">
+                    <p class="text-sm font-bold whitespace-nowrap">{{ $bytesPretty(ab.size) }}</p>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData({ redirect, store }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+      return
+    }
+
+    if (!store.state.libraries.currentLibraryId) {
+      return redirect('/config')
+    }
+    return {}
+  },
+  data() {
+    return {
+      libraryStats: [],  // Now an array of stats objects
+    }
+  },
+  watch: {
+    currentLibraryId(newVal, oldVal) {
+      if (newVal) {
+        this.init()
+      }
+    }
+  },
+  computed: {
+    combinedLibraryStats() {
+      return this.libraryStats.reduce((combined, stats) => {
+        // Combine stats from all objects in the array
+        combined.totalItems += stats.totalItems || 0;
+        combined.genresWithCount = [...combined.genresWithCount, ...(stats.genresWithCount || [])];
+        combined.longestItems = [...combined.longestItems, ...(stats.longestItems || [])];
+        combined.largestItems = [...combined.largestItems, ...(stats.largestItems || [])];
+        combined.authorsWithCount = [...combined.authorsWithCount, ...(stats.authorsWithCount || [])];
+        return combined;
+      }, {
+        totalItems: 0,
+        genresWithCount: [],
+        longestItems: [],
+        largestItems: [],
+        authorsWithCount: [],
+      });
+    },
+    totalItems() {
+      return this.combinedLibraryStats.totalItems || 0;
+    },
+    top5Genres() {
+      return this.combinedLibraryStats.genresWithCount?.slice(0, 5) || []
+    },
+    top10LongestItems() {
+      return this.combinedLibraryStats.longestItems || []
+    },
+    longestItemDuration() {
+      if (!this.top10LongestItems.length) return 0
+      return this.top10LongestItems[0].duration
+    },
+    top10LargestItems() {
+      return this.combinedLibraryStats.largestItems || []
+    },
+    largestItemSize() {
+      if (!this.top10LargestItems.length) return 0
+      return this.top10LargestItems[0].size
+    },
+    top10Authors() {
+      return this.combinedLibraryStats.authorsWithCount?.slice(0, 10) || []
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    currentLibraryName() {
+      return this.$store.getters['libraries/getCurrentLibraryName']
+    },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isBookLibrary() {
+      return this.currentLibraryMediaType === 'book'
+    }
+  },
+  methods: {
+    async init() {
+      this.libraryStats = await this.$axios.$get(`/api/libraries/stats`).catch((err) => {
+        console.error('Failed to get library stats', err)
+        var errorMsg = err.response ? err.response.data || 'Unknown Error' : 'Unknown Error'
+        this.$toast.error(`Failed to get library stats: ${errorMsg}`)
+      })
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 7420c1e75a..c048c297b2 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -106,6 +106,7 @@
   "ErrorUploadLacksTitle": "Must have a title",
   "HeaderAccount": "Account",
   "HeaderAdvanced": "Advanced",
+  "HeaderAllLibrariesStats": "All Libraries Stats",
   "HeaderAppriseNotificationSettings": "Apprise Notification Settings",
   "HeaderAudioTracks": "Audio Tracks",
   "HeaderAudiobookTools": "Audiobook File Management Tools",

From cbd042dd8eeaa2db74061055d6a5ef9f14c7c930 Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Sun, 25 Aug 2024 13:49:51 +0200
Subject: [PATCH 05/18] refactored libraries-stats and changed path

---
 client/components/app/ConfigSideNav.vue       |  2 +-
 .../libraries-stats.vue}                      | 78 +++++++++----------
 2 files changed, 38 insertions(+), 42 deletions(-)
 rename client/pages/{library/_library/all-stats.vue => config/libraries-stats.vue} (76%)

diff --git a/client/components/app/ConfigSideNav.vue b/client/components/app/ConfigSideNav.vue
index b961a4453c..4ace509758 100644
--- a/client/components/app/ConfigSideNav.vue
+++ b/client/components/app/ConfigSideNav.vue
@@ -113,7 +113,7 @@ export default {
         {
           id: 'all-libraries-stats',
           title: this.$strings.HeaderAllLibrariesStats,
-          path: '/libraries/stats'
+          path: '/config/libraries-stats'
         }
       ]
 
diff --git a/client/pages/library/_library/all-stats.vue b/client/pages/config/libraries-stats.vue
similarity index 76%
rename from client/pages/library/_library/all-stats.vue
rename to client/pages/config/libraries-stats.vue
index a579cf9c08..fbd415a07e 100644
--- a/client/pages/library/_library/all-stats.vue
+++ b/client/pages/config/libraries-stats.vue
@@ -1,7 +1,5 @@
 <template>
-  <div class="page relative" :class="streamLibraryItem ? 'streaming' : ''">
-    <app-book-shelf-toolbar page="all-libraries-stats" is-home />
-    <div id="bookshelf" class="w-full h-full px-1 py-4 md:p-8 relative overflow-y-auto">
+  <app-settings-content :header-text="$strings.HeaderAllLibrariesStats" class="!mb-4">
       <div class="w-full max-w-4xl mx-auto">
         <stats-preview-icons v-if="totalItems" :library-stats="combinedLibraryStats" />
 
@@ -24,7 +22,7 @@
               </div>
             </template>
           </div>
-          <div v-if="isBookLibrary" class="w-80 my-6 mx-auto">
+          <div v-if="top10Authors.length" class="w-80 my-6 mx-auto">
             <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsTop10Authors }}</h1>
             <p v-if="!top10Authors.length">{{ $strings.MessageNoAuthors }}</p>
             <template v-for="(author, index) in top10Authors">
@@ -83,8 +81,7 @@
           </div>
         </div>
       </div>
-    </div>
-  </div>
+    </app-settings-content>
 </template>
 
 <script>
@@ -102,36 +99,39 @@ export default {
   },
   data() {
     return {
-      libraryStats: [],  // Now an array of stats objects
-    }
-  },
-  watch: {
-    currentLibraryId(newVal, oldVal) {
-      if (newVal) {
-        this.init()
-      }
+      libraryStats: []
     }
   },
   computed: {
     combinedLibraryStats() {
-      return this.libraryStats.reduce((combined, stats) => {
-        // Combine stats from all objects in the array
-        combined.totalItems += stats.totalItems || 0;
-        combined.genresWithCount = [...combined.genresWithCount, ...(stats.genresWithCount || [])];
-        combined.longestItems = [...combined.longestItems, ...(stats.longestItems || [])];
-        combined.largestItems = [...combined.largestItems, ...(stats.largestItems || [])];
-        combined.authorsWithCount = [...combined.authorsWithCount, ...(stats.authorsWithCount || [])];
-        return combined;
-      }, {
-        totalItems: 0,
-        genresWithCount: [],
-        longestItems: [],
-        largestItems: [],
-        authorsWithCount: [],
-      });
+      return this.libraryStats.reduce(
+        (combined, stats) => {
+          combined.totalItems += stats.totalItems || 0
+          combined.totalDuration += stats.totalDuration || 0
+          combined.totalAuthors += stats.totalAuthors || 0
+          combined.totalSize += stats.totalSize || 0
+          combined.numAudioTracks += stats.numAudioTracks || 0
+          combined.genresWithCount = [...combined.genresWithCount, ...(stats.genresWithCount || [])].sort((a, b) => b.count - a.count).slice(0, 10)
+          combined.longestItems = [...combined.longestItems, ...(stats.longestItems || [])].sort((a, b) => b.duration - a.duration).slice(0, 10)
+          combined.largestItems = [...combined.largestItems, ...(stats.largestItems || [])].sort((a, b) => b.size - a.size).slice(0, 10)
+          combined.authorsWithCount = [...combined.authorsWithCount, ...(stats.authorsWithCount || [])].sort((a, b) => b.count - a.count).slice(0, 10)
+          return combined
+        },
+        {
+          totalItems: 0,
+          totalDuration: 0,
+          totalAuthors: 0,
+          totalSize: 0,
+          numAudioTracks: 0,
+          genresWithCount: [],
+          longestItems: [],
+          largestItems: [],
+          authorsWithCount: []
+        }
+      )
     },
     totalItems() {
-      return this.combinedLibraryStats.totalItems || 0;
+      return this.combinedLibraryStats.totalItems || 0
     },
     top5Genres() {
       return this.combinedLibraryStats.genresWithCount?.slice(0, 5) || []
@@ -156,23 +156,19 @@ export default {
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
-    currentLibraryName() {
-      return this.$store.getters['libraries/getCurrentLibraryName']
+    mostUsedAuthorCount() {
+      if (!this.combinedLibraryStats.authorsWithCount.length) return 0
+      return this.combinedLibraryStats.authorsWithCount[0].count
     },
-    currentLibraryMediaType() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType']
-    },
-    isBookLibrary() {
-      return this.currentLibraryMediaType === 'book'
-    }
   },
   methods: {
     async init() {
-      this.libraryStats = await this.$axios.$get(`/api/libraries/stats`).catch((err) => {
+      this.libraryStatsInformation = await this.$axios.$get(`/api/libraries/stats`).catch((err) => {
         console.error('Failed to get library stats', err)
-        var errorMsg = err.response ? err.response.data || 'Unknown Error' : 'Unknown Error'
-        this.$toast.error(`Failed to get library stats: ${errorMsg}`)
       })
+      this.libraryStats = this.libraryStatsInformation.map(entry => {
+        return { ...entry.stats };
+      });
     }
   },
   mounted() {

From 27b5d0c67ae02fad52e677e4aace0dacf4aceb03 Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Sun, 25 Aug 2024 13:57:34 +0200
Subject: [PATCH 06/18] removed redirect

---
 client/pages/config/libraries-stats.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/pages/config/libraries-stats.vue b/client/pages/config/libraries-stats.vue
index fbd415a07e..a48216dbbf 100644
--- a/client/pages/config/libraries-stats.vue
+++ b/client/pages/config/libraries-stats.vue
@@ -91,10 +91,6 @@ export default {
       redirect('/')
       return
     }
-
-    if (!store.state.libraries.currentLibraryId) {
-      return redirect('/config')
-    }
     return {}
   },
   data() {

From 39d40d5ef30cf7ab991c2e5a1315e400ff7d526e Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Wed, 1 Jan 2025 19:55:31 +0100
Subject: [PATCH 07/18] first draft controller

---
 server/controllers/LibraryController.js | 60 +++++++++++++++++++++----
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index f22bcfa6c4..c8471f3776 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -42,27 +42,71 @@ class LibraryController {
   /**
    * GET: /api/libraries/stats
    * Get stats for all libraries and respond with JSON
-   * @param {import('express').Request} req
-   * @param {import('express').Response} res
+   * @param {RequestWithUser} req
+   * @param {Response} res
    */
   async allStats(req, res) {
     try {
-      const allLibrariesIds = await Database.libraryModel.getAllLibraryIds();
       const allStats = [];
+      const combinedStats = { sizes: {}, top: {} }; // Clear structure for combined stats
+      let libraries = await Database.libraryModel.getAllWithFolders();
+      const librariesAccessible = req.user.permissions?.librariesAccessible || [];
+
+      if (librariesAccessible.length) {
+        libraries = libraries.filter((lib) => librariesAccessible.includes(lib.id));
+      }
+
+      for (const library of libraries) {
+        req.library = library;
 
-      for (let i = 0; i < allLibrariesIds.length; i++) {
-        const library = await Database.libraryModel.getOldById(allLibrariesIds[i]);
-        req.library = library
+        // Fetch stats for the current library
         const libraryStats = await libraryHelpers.getLibraryStats(req);
-        allStats.push({ library: library, stats: libraryStats });
+
+        // Add the libraries id to the stats
+        libraryStats.id = library.id;
+
+        // Add this library's stats to the array of individual stats
+        allStats.push(libraryStats);
+
+        // Combine all stats
+        for (const [key, value] of Object.entries(libraryStats)) {
+          if (typeof value === "number") {
+            combinedStats[key] = (combinedStats[key] || 0) + value;
+          } else if (typeof value === "object") {
+           for (const [subKey, subValue] of Object.entries(value)) {
+             if (subValue['size'] !== undefined) {
+               if (combinedStats[key] === undefined) combinedStats[key] = [];
+               // Insert the current value into the combined stats if its size is bigger than the ten biggest sizes
+                console.log(subValue['size'])
+               if (Object.entries(combinedStats[key]).length < 10) {
+                 combinedStats[key].push(subValue);
+                 // Sort the array of sizes
+                 combinedStats[key].sort((a, b) => b["size"] - a["size"]);
+               } else {
+                 if (subValue['size'] > combinedStats[key][9]['size']) {
+                   combinedStats[key].pop();
+                   combinedStats[key].push(subValue);
+                   combinedStats[key].sort((a, b) => b["size"] - a["size"]);
+                 }
+               }
+             }
+           }
+          }
+        }
       }
 
-      res.json(allStats);
+      // Respond with the aggregated stats
+      res.json({
+        libraries: allStats, // Individual library stats
+        combined: combinedStats // Combined aggregated stats
+      });
     } catch (error) {
       res.status(500).json({ error: error.message });
     }
   }
 
+
+
   /**
    * POST: /api/libraries
    * Create a new library

From 793ef0e9ec4c3f7a4d3691ebfa132fc4f3d9a248 Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Wed, 1 Jan 2025 20:00:40 +0100
Subject: [PATCH 08/18] updated controller

---
 server/controllers/LibraryController.js | 29 ++++++++++++++-----------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index c8471f3776..b7e6abaef0 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -48,7 +48,7 @@ class LibraryController {
   async allStats(req, res) {
     try {
       const allStats = [];
-      const combinedStats = { sizes: {}, top: {} }; // Clear structure for combined stats
+      const combinedStats = {};
       let libraries = await Database.libraryModel.getAllWithFolders();
       const librariesAccessible = req.user.permissions?.librariesAccessible || [];
 
@@ -74,22 +74,25 @@ class LibraryController {
             combinedStats[key] = (combinedStats[key] || 0) + value;
           } else if (typeof value === "object") {
            for (const [subKey, subValue] of Object.entries(value)) {
-             if (subValue['size'] !== undefined) {
-               if (combinedStats[key] === undefined) combinedStats[key] = [];
-               // Insert the current value into the combined stats if its size is bigger than the ten biggest sizes
-                console.log(subValue['size'])
-               if (Object.entries(combinedStats[key]).length < 10) {
-                 combinedStats[key].push(subValue);
-                 // Sort the array of sizes
-                 combinedStats[key].sort((a, b) => b["size"] - a["size"]);
-               } else {
-                 if (subValue['size'] > combinedStats[key][9]['size']) {
-                   combinedStats[key].pop();
+             for (const keyType of ['size', 'count', 'duration']) {
+               if (subValue[keyType] !== undefined) {
+                 if (combinedStats[key] === undefined) combinedStats[key] = [];
+                 // Insert the current value into the combined stats if its size is bigger than the ten biggest sizes
+                 if (Object.entries(combinedStats[key]).length < 10) {
                    combinedStats[key].push(subValue);
-                   combinedStats[key].sort((a, b) => b["size"] - a["size"]);
+                   // Sort the array of sizes
+                   combinedStats[key].sort((a, b) => b[keyType] - a[keyType]);
+                 } else {
+                   if (subValue[keyType] > combinedStats[key][9][keyType]) {
+                     combinedStats[key].pop();
+                     combinedStats[key].push(subValue);
+                     combinedStats[key].sort((a, b) => b[keyType] - a[keyType]);
+                   }
                  }
+                 break;
                }
              }
+
            }
           }
         }

From b127f0c4068152f4307bfce1ca8a03aa93cae6be Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Wed, 1 Jan 2025 20:34:20 +0100
Subject: [PATCH 09/18] delete old stats view and added all library stats view

---
 client/pages/config/libraries-stats.vue | 174 ------------------------
 client/pages/library/_library/stats.vue |  38 +++++-
 2 files changed, 31 insertions(+), 181 deletions(-)
 delete mode 100644 client/pages/config/libraries-stats.vue

diff --git a/client/pages/config/libraries-stats.vue b/client/pages/config/libraries-stats.vue
deleted file mode 100644
index a48216dbbf..0000000000
--- a/client/pages/config/libraries-stats.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-  <app-settings-content :header-text="$strings.HeaderAllLibrariesStats" class="!mb-4">
-      <div class="w-full max-w-4xl mx-auto">
-        <stats-preview-icons v-if="totalItems" :library-stats="combinedLibraryStats" />
-
-        <div class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
-          <div class="w-80 my-6 mx-auto">
-            <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsTop5Genres }}</h1>
-            <p v-if="!top5Genres.length">{{ $strings.MessageNoGenres }}</p>
-            <template v-for="genre in top5Genres">
-              <div :key="genre.genre" class="w-full py-2">
-                <div class="flex items-end mb-1">
-                  <p class="text-2xl font-bold">{{ Math.round((100 * genre.count) / totalItems) }}&nbsp;%</p>
-                  <div class="flex-grow" />
-                  <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(genre.genre)}`" class="text-base text-white text-opacity-70 hover:underline">
-                    {{ genre.genre }}
-                  </nuxt-link>
-                </div>
-                <div class="w-full rounded-full h-3 bg-primary bg-opacity-50 overflow-hidden">
-                  <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * genre.count) / totalItems) + '%' }" />
-                </div>
-              </div>
-            </template>
-          </div>
-          <div v-if="top10Authors.length" class="w-80 my-6 mx-auto">
-            <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsTop10Authors }}</h1>
-            <p v-if="!top10Authors.length">{{ $strings.MessageNoAuthors }}</p>
-            <template v-for="(author, index) in top10Authors">
-              <div :key="author.id" class="w-full py-2">
-                <div class="flex items-center mb-1">
-                  <p class="text-sm text-white text-opacity-70 w-36 pr-2 truncate">
-                    {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(author.id)}`" class="hover:underline">{{ author.name }}</nuxt-link>
-                  </p>
-                  <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
-                    <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * author.count) / mostUsedAuthorCount) + '%' }" />
-                  </div>
-                  <div class="w-4 ml-3">
-                    <p class="text-sm font-bold">{{ author.count }}</p>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </div>
-          <div class="w-80 my-6 mx-auto">
-            <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsLongestItems }}</h1>
-            <p v-if="!top10LongestItems.length">{{ $strings.MessageNoItems }}</p>
-            <template v-for="(ab, index) in top10LongestItems">
-              <div :key="index" class="w-full py-2">
-                <div class="flex items-center mb-1">
-                  <p class="text-sm text-white text-opacity-70 w-44 pr-2 truncate">
-                    {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/item/${ab.id}`" class="hover:underline">{{ ab.title }}</nuxt-link>
-                  </p>
-                  <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
-                    <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * ab.duration) / longestItemDuration) + '%' }" />
-                  </div>
-                  <div class="w-4 ml-3">
-                    <p class="text-sm font-bold">{{ (ab.duration / 3600).toFixed(1) }}</p>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </div>
-          <div class="w-80 my-6 mx-auto">
-            <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsLargestItems }}</h1>
-            <p v-if="!top10LargestItems.length">{{ $strings.MessageNoItems }}</p>
-            <template v-for="(ab, index) in top10LargestItems">
-              <div :key="index" class="w-full py-2">
-                <div class="flex items-center mb-1">
-                  <p class="text-sm text-white text-opacity-70 w-44 pr-2 truncate">
-                    {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/item/${ab.id}`" class="hover:underline">{{ ab.title }}</nuxt-link>
-                  </p>
-                  <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
-                    <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * ab.size) / largestItemSize) + '%' }" />
-                  </div>
-                  <div class="w-4 ml-3">
-                    <p class="text-sm font-bold whitespace-nowrap">{{ $bytesPretty(ab.size) }}</p>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </app-settings-content>
-</template>
-
-<script>
-export default {
-  asyncData({ redirect, store }) {
-    if (!store.getters['user/getIsAdminOrUp']) {
-      redirect('/')
-      return
-    }
-    return {}
-  },
-  data() {
-    return {
-      libraryStats: []
-    }
-  },
-  computed: {
-    combinedLibraryStats() {
-      return this.libraryStats.reduce(
-        (combined, stats) => {
-          combined.totalItems += stats.totalItems || 0
-          combined.totalDuration += stats.totalDuration || 0
-          combined.totalAuthors += stats.totalAuthors || 0
-          combined.totalSize += stats.totalSize || 0
-          combined.numAudioTracks += stats.numAudioTracks || 0
-          combined.genresWithCount = [...combined.genresWithCount, ...(stats.genresWithCount || [])].sort((a, b) => b.count - a.count).slice(0, 10)
-          combined.longestItems = [...combined.longestItems, ...(stats.longestItems || [])].sort((a, b) => b.duration - a.duration).slice(0, 10)
-          combined.largestItems = [...combined.largestItems, ...(stats.largestItems || [])].sort((a, b) => b.size - a.size).slice(0, 10)
-          combined.authorsWithCount = [...combined.authorsWithCount, ...(stats.authorsWithCount || [])].sort((a, b) => b.count - a.count).slice(0, 10)
-          return combined
-        },
-        {
-          totalItems: 0,
-          totalDuration: 0,
-          totalAuthors: 0,
-          totalSize: 0,
-          numAudioTracks: 0,
-          genresWithCount: [],
-          longestItems: [],
-          largestItems: [],
-          authorsWithCount: []
-        }
-      )
-    },
-    totalItems() {
-      return this.combinedLibraryStats.totalItems || 0
-    },
-    top5Genres() {
-      return this.combinedLibraryStats.genresWithCount?.slice(0, 5) || []
-    },
-    top10LongestItems() {
-      return this.combinedLibraryStats.longestItems || []
-    },
-    longestItemDuration() {
-      if (!this.top10LongestItems.length) return 0
-      return this.top10LongestItems[0].duration
-    },
-    top10LargestItems() {
-      return this.combinedLibraryStats.largestItems || []
-    },
-    largestItemSize() {
-      if (!this.top10LargestItems.length) return 0
-      return this.top10LargestItems[0].size
-    },
-    top10Authors() {
-      return this.combinedLibraryStats.authorsWithCount?.slice(0, 10) || []
-    },
-    currentLibraryId() {
-      return this.$store.state.libraries.currentLibraryId
-    },
-    mostUsedAuthorCount() {
-      if (!this.combinedLibraryStats.authorsWithCount.length) return 0
-      return this.combinedLibraryStats.authorsWithCount[0].count
-    },
-  },
-  methods: {
-    async init() {
-      this.libraryStatsInformation = await this.$axios.$get(`/api/libraries/stats`).catch((err) => {
-        console.error('Failed to get library stats', err)
-      })
-      this.libraryStats = this.libraryStatsInformation.map(entry => {
-        return { ...entry.stats };
-      });
-    }
-  },
-  mounted() {
-    this.init()
-  }
-}
-</script>
diff --git a/client/pages/library/_library/stats.vue b/client/pages/library/_library/stats.vue
index ae72c2e896..46d2a4666d 100644
--- a/client/pages/library/_library/stats.vue
+++ b/client/pages/library/_library/stats.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="page relative" :class="streamLibraryItem ? 'streaming' : ''">
     <app-book-shelf-toolbar page="library-stats" is-home />
+    <ui-btn class="text-xs" :padding-x="1.5" :padding-y="1" @click="toggleStats">
+      {{ showAllLibraryStats ? currentLibraryName : 'Show all Libraries' }}</ui-btn>
     <div id="bookshelf" class="w-full h-full px-1 py-4 md:p-8 relative overflow-y-auto">
       <div class="w-full max-w-4xl mx-auto">
         <stats-preview-icons v-if="totalItems" :library-stats="libraryStats" />
@@ -24,7 +26,7 @@
               </div>
             </template>
           </div>
-          <div v-if="isBookLibrary" class="w-80 my-6 mx-auto">
+          <div v-if="isBookLibrary || showAllLibraryStats" class="w-80 my-6 mx-auto">
             <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsTop10Authors }}</h1>
             <p v-if="!top10Authors.length">{{ $strings.MessageNoAuthors }}</p>
             <template v-for="(author, index) in top10Authors">
@@ -102,7 +104,8 @@ export default {
   },
   data() {
     return {
-      libraryStats: null
+      libraryStats: null,
+      showAllLibraryStats: false
     }
   },
   watch: {
@@ -110,6 +113,12 @@ export default {
       if (newVal) {
         this.init()
       }
+    },
+    showAllLibraryStats(newVal) {
+      console.log('showAllLibraryStats', newVal)
+      if (newVal) {
+        this.init()
+      }
     }
   },
   computed: {
@@ -167,11 +176,26 @@ export default {
   },
   methods: {
     async init() {
-      this.libraryStats = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/stats`).catch((err) => {
-        console.error('Failed to get library stats', err)
-        var errorMsg = err.response ? err.response.data || 'Unknown Error' : 'Unknown Error'
-        this.$toast.error(`Failed to get library stats: ${errorMsg}`)
-      })
+      this.libraryStats = null
+      if (this.showAllLibraryStats === true) {
+        this.libraryStats = (await this.$axios.$get(`/api/libraries/stats`).catch((err) => {
+          console.error('Failed to get library stats', err)
+          var errorMsg = err.response ? err.response.data || 'Unknown Error' : 'Unknown Error'
+          this.$toast.error(`Failed to get library stats: ${errorMsg}`)
+        }))['combined']
+      } else {
+        this.libraryStats = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/stats`).catch((err) => {
+          console.error('Failed to get library stats', err)
+          var errorMsg = err.response ? err.response.data || 'Unknown Error' : 'Unknown Error'
+          this.$toast.error(`Failed to get library stats: ${errorMsg}`)
+        })
+      }
+    },
+    toggleStats() {
+      this.showAllLibraryStats = !this.showAllLibraryStats;
+      this.$nextTick(() => {
+        this.init();
+      });
     }
   },
   mounted() {

From 00b179e6b3ea9a454bfe886a55391f36b2069cad Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Wed, 1 Jan 2025 20:35:09 +0100
Subject: [PATCH 10/18] fixed controller to include id of library without
 changing the schema

---
 server/controllers/LibraryController.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index b7e6abaef0..b5d37f50d5 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -62,11 +62,8 @@ class LibraryController {
         // Fetch stats for the current library
         const libraryStats = await libraryHelpers.getLibraryStats(req);
 
-        // Add the libraries id to the stats
-        libraryStats.id = library.id;
-
         // Add this library's stats to the array of individual stats
-        allStats.push(libraryStats);
+        allStats.push({ [library.id]: libraryStats });
 
         // Combine all stats
         for (const [key, value] of Object.entries(libraryStats)) {

From 7c0a746e7d3b969526087b7733ce2c95dfcfed49 Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Wed, 1 Jan 2025 21:19:20 +0100
Subject: [PATCH 11/18] optimized all stats

---
 server/controllers/LibraryController.js | 41 ++++++++++++-------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index b5d37f50d5..0426bab877 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -70,31 +70,30 @@ class LibraryController {
           if (typeof value === "number") {
             combinedStats[key] = (combinedStats[key] || 0) + value;
           } else if (typeof value === "object") {
-           for (const [subKey, subValue] of Object.entries(value)) {
-             for (const keyType of ['size', 'count', 'duration']) {
-               if (subValue[keyType] !== undefined) {
-                 if (combinedStats[key] === undefined) combinedStats[key] = [];
-                 // Insert the current value into the combined stats if its size is bigger than the ten biggest sizes
-                 if (Object.entries(combinedStats[key]).length < 10) {
-                   combinedStats[key].push(subValue);
-                   // Sort the array of sizes
-                   combinedStats[key].sort((a, b) => b[keyType] - a[keyType]);
-                 } else {
-                   if (subValue[keyType] > combinedStats[key][9][keyType]) {
-                     combinedStats[key].pop();
-                     combinedStats[key].push(subValue);
-                     combinedStats[key].sort((a, b) => b[keyType] - a[keyType]);
-                   }
-                 }
-                 break;
-               }
-             }
-
-           }
+            if (!combinedStats[key]) combinedStats[key] = [];
+
+            combinedStats[key].push(...Object.values(value));
           }
         }
       }
 
+      // Process arrays to keep top 10 entries based on 'size', 'count', or 'duration'
+      for (const key in combinedStats) {
+        if (Array.isArray(combinedStats[key])) {
+          combinedStats[key] = combinedStats[key]
+            .sort((a, b) => {
+              const props = ['size', 'count', 'duration'];
+              for (const prop of props) {
+                if (a[prop] !== undefined && b[prop] !== undefined) {
+                  return b[prop] - a[prop];
+                }
+              }
+              return 0;
+            })
+            .slice(0, 10);
+        }
+      }
+
       // Respond with the aggregated stats
       res.json({
         libraries: allStats, // Individual library stats

From 8c7d911ca792de1f8f748ea6441a56cdef7ac43f Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Wed, 1 Jan 2025 21:19:38 +0100
Subject: [PATCH 12/18] added client code

---
 client/components/app/BookShelfToolbar.vue | 21 ++++++++++++++++++++-
 client/pages/library/_library/stats.vue    | 11 +++--------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/client/components/app/BookShelfToolbar.vue b/client/components/app/BookShelfToolbar.vue
index 74157b1841..89e661e9b6 100644
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@@ -87,6 +87,12 @@
 
         <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
+      <!-- library stats page -->
+      <template v-else-if="isLibraryStatsPage">
+        <div class="flex-grow" />
+        <ui-btn color="primary" small @click="updateLibraryStats">
+          {{ this.showAllLibraryStats ? currentLibraryName : $strings.LabelShowAll }}</ui-btn>
+      </template>
       <!-- search page -->
       <template v-else-if="page === 'search'">
         <div class="flex-grow" />
@@ -131,7 +137,8 @@ export default {
       totalEntities: 0,
       processingSeries: false,
       processingIssues: false,
-      processingAuthors: false
+      processingAuthors: false,
+      showAllLibraryStats: false
     }
   },
   computed: {
@@ -235,6 +242,9 @@ export default {
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
+    currentLibraryName() {
+      return this.$store.getters['libraries/getCurrentLibraryName']
+    },
     libraryProvider() {
       return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
     },
@@ -259,6 +269,9 @@ export default {
     isPlaylistsPage() {
       return this.page === 'playlists'
     },
+    isLibraryStatsPage() {
+      return this.page === 'library-stats'
+    },
     isHomePage() {
       return this.$route.name === 'library-library'
     },
@@ -606,6 +619,12 @@ export default {
     updateAuthorSort() {
       this.saveSettings()
     },
+    updateLibraryStats() {
+      this.$emit('library-stats-updated', !this.showAllLibraryStats)
+      this.$nextTick(() => {
+        this.showAllLibraryStats = !this.showAllLibraryStats
+      })
+    },
     saveSettings() {
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },
diff --git a/client/pages/library/_library/stats.vue b/client/pages/library/_library/stats.vue
index 46d2a4666d..2e8280a0ac 100644
--- a/client/pages/library/_library/stats.vue
+++ b/client/pages/library/_library/stats.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="page relative" :class="streamLibraryItem ? 'streaming' : ''">
-    <app-book-shelf-toolbar page="library-stats" is-home />
-    <ui-btn class="text-xs" :padding-x="1.5" :padding-y="1" @click="toggleStats">
-      {{ showAllLibraryStats ? currentLibraryName : 'Show all Libraries' }}</ui-btn>
+    <app-book-shelf-toolbar page="library-stats" is-home @library-stats-updated="toggleStats" />
     <div id="bookshelf" class="w-full h-full px-1 py-4 md:p-8 relative overflow-y-auto">
       <div class="w-full max-w-4xl mx-auto">
         <stats-preview-icons v-if="totalItems" :library-stats="libraryStats" />
@@ -164,9 +162,6 @@ export default {
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
-    currentLibraryName() {
-      return this.$store.getters['libraries/getCurrentLibraryName']
-    },
     currentLibraryMediaType() {
       return this.$store.getters['libraries/getCurrentLibraryMediaType']
     },
@@ -191,8 +186,8 @@ export default {
         })
       }
     },
-    toggleStats() {
-      this.showAllLibraryStats = !this.showAllLibraryStats;
+    toggleStats(value) {
+      this.showAllLibraryStats = value;
       this.$nextTick(() => {
         this.init();
       });

From e102cd6df07e2eef5d9e31e56ff1814c5058e1ee Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Wed, 1 Jan 2025 21:23:37 +0100
Subject: [PATCH 13/18] removed old artifacts

---
 client/components/app/ConfigSideNav.vue | 5 -----
 client/strings/en-us.json               | 1 -
 2 files changed, 6 deletions(-)

diff --git a/client/components/app/ConfigSideNav.vue b/client/components/app/ConfigSideNav.vue
index 9c420c0646..b42a560ea3 100644
--- a/client/components/app/ConfigSideNav.vue
+++ b/client/components/app/ConfigSideNav.vue
@@ -109,11 +109,6 @@ export default {
           id: 'config-authentication',
           title: this.$strings.HeaderAuthentication,
           path: '/config/authentication'
-        },
-        {
-          id: 'all-libraries-stats',
-          title: this.$strings.HeaderAllLibrariesStats,
-          path: '/config/libraries-stats'
         }
       ]
 
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 65417d48a8..e94e519720 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -117,7 +117,6 @@
   "HeaderAccount": "Account",
   "HeaderAddCustomMetadataProvider": "Add Custom Metadata Provider",
   "HeaderAdvanced": "Advanced",
-  "HeaderAllLibrariesStats": "All Libraries Stats",
   "HeaderAppriseNotificationSettings": "Apprise Notification Settings",
   "HeaderAudioTracks": "Audio Tracks",
   "HeaderAudiobookTools": "Audiobook File Management Tools",

From 9dab97a4f7cea5bd973f19e6f83e0cbcb5cfe9ad Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Thu, 2 Jan 2025 20:16:43 +0100
Subject: [PATCH 14/18] updated view

---
 client/components/stats/PreviewIcons.vue |  18 ++-
 client/pages/config/server-stats.vue     | 159 +++++++++++++++++++++++
 server/controllers/LibraryController.js  |  73 +++++++----
 3 files changed, 219 insertions(+), 31 deletions(-)
 create mode 100644 client/pages/config/server-stats.vue

diff --git a/client/components/stats/PreviewIcons.vue b/client/components/stats/PreviewIcons.vue
index 7eea9d5102..ca64e8af6e 100644
--- a/client/components/stats/PreviewIcons.vue
+++ b/client/components/stats/PreviewIcons.vue
@@ -10,6 +10,14 @@
       </div>
     </div>
 
+    <div v-if="!isBookLibrary && !isOverView" class="flex p-2">
+      <span class="material-symbols text-5xl pt-1">podcasts</span>
+      <div class="px-1">
+        <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(numAudioTracks) }}</p>
+        <p class="text-xs md:text-sm text-white text-opacity-80">Episodes</p>
+      </div>
+    </div>
+
     <div class="flex p-2">
       <span class="material-symbols text-5xl py-1">show_chart</span>
       <div class="px-1">
@@ -36,7 +44,7 @@
       </div>
     </div>
 
-    <div class="flex p-2">
+    <div v-if="isBookLibrary || isOverView" class="flex p-2">
       <span class="material-symbols text-5xl pt-1">audio_file</span>
       <div class="px-1">
         <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(numAudioTracks) }}</p>
@@ -52,18 +60,22 @@ export default {
     libraryStats: {
       type: Object,
       default: () => {}
-    }
+    },
+    mediaType: null
   },
   data() {
     return {}
   },
   computed: {
     currentLibraryMediaType() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+      return this.mediaType || this.$store.getters['libraries/getCurrentLibraryMediaType']
     },
     isBookLibrary() {
       return this.currentLibraryMediaType === 'book'
     },
+    isOverView(){
+      return this.mediaType === 'overview'
+    },
     user() {
       return this.$store.state.user.user
     },
diff --git a/client/pages/config/server-stats.vue b/client/pages/config/server-stats.vue
new file mode 100644
index 0000000000..9684c9bf59
--- /dev/null
+++ b/client/pages/config/server-stats.vue
@@ -0,0 +1,159 @@
+<template>
+
+  <div>
+    <app-settings-content v-if="serverStats != null" header-text="All Stats">
+      <stats-preview-icons :library-stats="serverStats['combined']['all']" media-type="overview"/>
+    </app-settings-content>
+
+    <app-settings-content v-if="serverStats != null && bookLibraryListStats.length >= 1" header-text="Book Libraries">
+      <stats-preview-icons :library-stats="serverStats['combined']['books']" media-type="book"/>
+
+      <table class="tracksTable max-w-3xl mx-auto mt-8">
+        <tr>
+          <th class="text-left">Name</th>
+          <th class="text-left">{{ $strings.LabelStatsItemsInLibrary }}</th>
+          <th class="text-left">{{ $strings.LabelStatsOverallHours }}</th>
+          <th class="text-left">{{ $strings.LabelStatsAuthors }}</th>
+          <th class="text-left">{{ $strings.LabelSize }}</th>
+          <th class="text-left">{{ $strings.LabelStatsAudioTracks }}</th>
+        </tr>
+        <tr v-for="library in bookLibraryListStats">
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ library.name }}</p>
+          </td>
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ library.stats.totalItems }}</p>
+          </td>
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ $formatNumber(totalHours(library.stats.totalDuration)) }}</p>
+          </td>
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ library.stats.totalAuthors }}</p>
+          </td>
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ $formatNumber(totalSizeNum(library.stats.totalSize)) }} {{totalSizeMod(library.stats.totalSize)}}</p>
+          </td>
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ library.stats.numAudioTracks }}</p>
+          </td>
+        </tr>
+      </table>
+
+    </app-settings-content>
+
+    <app-settings-content v-if="serverStats != null && podcastLibraryListStats.length >= 1" header-text="Podcast Libraries">
+      <stats-preview-icons :library-stats="serverStats['combined']['podcasts']" media-type="podcast"/>
+
+      <table class="tracksTable max-w-3xl mx-auto mt-8">
+        <tr>
+          <th class="text-left">Name</th>
+          <th class="text-left">{{ $strings.LabelStatsItemsInLibrary }}</th>
+          <th class="text-left">Episodes</th>
+          <th class="text-left">{{ $strings.LabelStatsOverallHours }}</th>
+          <th class="text-left">{{ $strings.LabelSize }}</th>
+        </tr>
+        <tr v-for="library in podcastLibraryListStats">
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ library.name }}</p>
+          </td>
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ library.stats.totalItems }}</p>
+          </td>
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ library.stats.numAudioTracks }}</p>
+          </td>
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ $formatNumber(totalHours(library.stats.totalDuration)) }}</p>
+          </td>
+          <td>
+            <p class="text-sm md:text-base text-gray-100">{{ $formatNumber(totalSizeNum(library.stats.totalSize)) }} {{totalSizeMod(library.stats.totalSize)}}</p>
+          </td>
+        </tr>
+      </table>
+
+    </app-settings-content>
+  </div>
+
+</template>
+
+<script>
+export default {
+  asyncData({ redirect, store }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+      return
+    }
+
+    return {}
+  },
+  data() {
+    return {
+      serverStats: null
+    }
+  },
+  computed: {
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    totalItems() {
+      return this.serverStats?.totalItems || 0
+    },
+    bookLibraryIndex() {
+      return this.serverStats?.libraries.findIndex((lib) => lib['type'] === 'book')
+    },
+    podcastLibraryIndex() {
+      return this.serverStats?.libraries.findIndex((lib) => lib['type'] === 'podcast')
+    },
+    bookLibraryListStats() {
+      if (this.bookLibraryIndex === -1) return []
+      if (this.podcastLibraryIndex !== -1) {
+        return this.serverStats['libraries'].slice(0, this.podcastLibraryIndex)
+      }
+      return this.serverStats['libraries']
+    },
+    podcastLibraryListStats() {
+      if (this.podcastLibraryIndex === -1) return []
+      return this.serverStats['libraries'].slice(this.podcastLibraryIndex)
+    }
+  },
+  methods: {
+    async init() {
+      this.serverStats = (await this.$axios.$get(`/api/libraries/stats`).catch((err) => {
+        console.error('Failed to get library stats', err)
+        var errorMsg = err.response ? err.response.data || 'Unknown Error' : 'Unknown Error'
+        this.$toast.error(`Failed to get library stats: ${errorMsg}`)
+      }))
+
+      // Sort the libraries by type
+      this.serverStats['libraries'].sort((a, b) => {
+        if (a['type'] < b['type']) return -1
+        if (a['type'] > b['type']) return 1
+        return 0
+      })
+
+
+      console.log(this.bookLibraryIndex)
+      console.log(this.podcastLibraryIndex)
+    },
+    totalHours(duration) {
+      return Math.round(duration / (60 * 60))
+    },
+    totalSizePretty(size) {
+      let totalSize = size || 0
+      return this.$bytesPretty(totalSize, 1)
+    },
+    totalSizeNum(size) {
+      return this.totalSizePretty(size).split(' ')[0]
+    },
+    totalSizeMod(size) {
+      return this.totalSizePretty(size).split(' ')[1]
+    },
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index 0426bab877..5c37df724e 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -48,7 +48,11 @@ class LibraryController {
   async allStats(req, res) {
     try {
       const allStats = [];
-      const combinedStats = {};
+      const combinedStats = {
+        all: {},
+        books: {},
+        podcasts: {}
+      };
       let libraries = await Database.libraryModel.getAllWithFolders();
       const librariesAccessible = req.user.permissions?.librariesAccessible || [];
 
@@ -63,41 +67,54 @@ class LibraryController {
         const libraryStats = await libraryHelpers.getLibraryStats(req);
 
         // Add this library's stats to the array of individual stats
-        allStats.push({ [library.id]: libraryStats });
-
-        // Combine all stats
-        for (const [key, value] of Object.entries(libraryStats)) {
-          if (typeof value === "number") {
-            combinedStats[key] = (combinedStats[key] || 0) + value;
-          } else if (typeof value === "object") {
-            if (!combinedStats[key]) combinedStats[key] = [];
-
-            combinedStats[key].push(...Object.values(value));
+        allStats.push({
+          'id': library.id,
+          'name': library.name,
+          'type': library.mediaType,
+          'stats': libraryStats
+        });
+
+        // Combine stats for all categories
+        const categories = ['all'];
+        if (library.mediaType === 'book') categories.push('books');
+        if (library.mediaType === 'podcast') categories.push('podcasts');
+
+        // Process each relevant category
+        categories.forEach(category => {
+          for (const [key, value] of Object.entries(libraryStats)) {
+            if (typeof value === "number") {
+              combinedStats[category][key] = (combinedStats[category][key] || 0) + value;
+            } else if (typeof value === "object") {
+              if (!combinedStats[category][key]) combinedStats[category][key] = [];
+              combinedStats[category][key].push(...Object.values(value));
+            }
           }
-        }
+        });
       }
 
-      // Process arrays to keep top 10 entries based on 'size', 'count', or 'duration'
-      for (const key in combinedStats) {
-        if (Array.isArray(combinedStats[key])) {
-          combinedStats[key] = combinedStats[key]
-            .sort((a, b) => {
-              const props = ['size', 'count', 'duration'];
-              for (const prop of props) {
-                if (a[prop] !== undefined && b[prop] !== undefined) {
-                  return b[prop] - a[prop];
+      // Process arrays to keep top 10 entries for all categories
+      Object.keys(combinedStats).forEach(category => {
+        for (const key in combinedStats[category]) {
+          if (Array.isArray(combinedStats[category][key])) {
+            combinedStats[category][key] = combinedStats[category][key]
+              .sort((a, b) => {
+                const props = ['size', 'count', 'duration'];
+                for (const prop of props) {
+                  if (a[prop] !== undefined && b[prop] !== undefined) {
+                    return b[prop] - a[prop];
+                  }
                 }
-              }
-              return 0;
-            })
-            .slice(0, 10);
+                return 0;
+              })
+              .slice(0, 10);
+          }
         }
-      }
+      });
 
       // Respond with the aggregated stats
       res.json({
-        libraries: allStats, // Individual library stats
-        combined: combinedStats // Combined aggregated stats
+        libraries: allStats,
+        combined: combinedStats
       });
     } catch (error) {
       res.status(500).json({ error: error.message });

From d515e67d817360e0c6cb0202b350aa55f2947f21 Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Thu, 2 Jan 2025 20:39:16 +0100
Subject: [PATCH 15/18] fixed side bar, language and layout

---
 client/components/app/ConfigSideNav.vue  |  6 +++---
 client/components/stats/PreviewIcons.vue |  2 +-
 client/pages/config/server-stats.vue     | 24 ++++++++++++++++--------
 client/strings/en-us.json                |  4 ++++
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/client/components/app/ConfigSideNav.vue b/client/components/app/ConfigSideNav.vue
index b42a560ea3..fe71db4994 100644
--- a/client/components/app/ConfigSideNav.vue
+++ b/client/components/app/ConfigSideNav.vue
@@ -114,9 +114,9 @@ export default {
 
       if (this.currentLibraryId) {
         configRoutes.push({
-          id: 'library-stats',
-          title: this.$strings.HeaderLibraryStats,
-          path: `/library/${this.currentLibraryId}/stats`
+          id: 'config-server-stats',
+          title: this.$strings.HeaderServerStats,
+          path: `/config/server-stats`
         })
         configRoutes.push({
           id: 'config-stats',
diff --git a/client/components/stats/PreviewIcons.vue b/client/components/stats/PreviewIcons.vue
index ca64e8af6e..b9f89e5da1 100644
--- a/client/components/stats/PreviewIcons.vue
+++ b/client/components/stats/PreviewIcons.vue
@@ -14,7 +14,7 @@
       <span class="material-symbols text-5xl pt-1">podcasts</span>
       <div class="px-1">
         <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(numAudioTracks) }}</p>
-        <p class="text-xs md:text-sm text-white text-opacity-80">Episodes</p>
+        <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelEpisodes }}</p>
       </div>
     </div>
 
diff --git a/client/pages/config/server-stats.vue b/client/pages/config/server-stats.vue
index 9684c9bf59..687fb7a4fb 100644
--- a/client/pages/config/server-stats.vue
+++ b/client/pages/config/server-stats.vue
@@ -1,16 +1,16 @@
 <template>
 
   <div>
-    <app-settings-content v-if="serverStats != null" header-text="All Stats">
+    <app-settings-content v-if="serverStats != null" :header-text="$strings.HeaderAllStats">
       <stats-preview-icons :library-stats="serverStats['combined']['all']" media-type="overview"/>
     </app-settings-content>
 
-    <app-settings-content v-if="serverStats != null && bookLibraryListStats.length >= 1" header-text="Book Libraries">
+    <app-settings-content v-if="serverStats != null && bookLibraryListStats.length >= 1" :header-text="$strings.HeaderBookLibraries">
       <stats-preview-icons :library-stats="serverStats['combined']['books']" media-type="book"/>
 
       <table class="tracksTable max-w-3xl mx-auto mt-8">
         <tr>
-          <th class="text-left">Name</th>
+          <th class="text-left">{{ $strings.LabelName }}</th>
           <th class="text-left">{{ $strings.LabelStatsItemsInLibrary }}</th>
           <th class="text-left">{{ $strings.LabelStatsOverallHours }}</th>
           <th class="text-left">{{ $strings.LabelStatsAuthors }}</th>
@@ -19,7 +19,11 @@
         </tr>
         <tr v-for="library in bookLibraryListStats">
           <td>
-            <p class="text-sm md:text-base text-gray-100">{{ library.name }}</p>
+            <p class="text-sm md:text-base text-gray-100">
+              <nuxt-link :to="`/library/${library.id}/stats`" class="hover:underline">
+                {{ library.name }}
+              </nuxt-link>
+            </p>
           </td>
           <td>
             <p class="text-sm md:text-base text-gray-100">{{ library.stats.totalItems }}</p>
@@ -41,20 +45,24 @@
 
     </app-settings-content>
 
-    <app-settings-content v-if="serverStats != null && podcastLibraryListStats.length >= 1" header-text="Podcast Libraries">
+    <app-settings-content v-if="serverStats != null && podcastLibraryListStats.length >= 1" :header-text="$strings.HeaderPodcastLibraries">
       <stats-preview-icons :library-stats="serverStats['combined']['podcasts']" media-type="podcast"/>
 
       <table class="tracksTable max-w-3xl mx-auto mt-8">
         <tr>
-          <th class="text-left">Name</th>
+          <th class="text-left">{{ $strings.LabelName }}</th>
           <th class="text-left">{{ $strings.LabelStatsItemsInLibrary }}</th>
-          <th class="text-left">Episodes</th>
+          <th class="text-left">{{ $strings.LabelEpisodes }}</th>
           <th class="text-left">{{ $strings.LabelStatsOverallHours }}</th>
           <th class="text-left">{{ $strings.LabelSize }}</th>
         </tr>
         <tr v-for="library in podcastLibraryListStats">
           <td>
-            <p class="text-sm md:text-base text-gray-100">{{ library.name }}</p>
+            <p class="text-sm md:text-base text-gray-100">
+              <nuxt-link :to="`/library/${library.id}/stats`" class="hover:underline">
+                {{ library.name }}
+              </nuxt-link>
+            </p>
           </td>
           <td>
             <p class="text-sm md:text-base text-gray-100">{{ library.stats.totalItems }}</p>
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index e94e519720..3e8f8288dc 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -117,11 +117,13 @@
   "HeaderAccount": "Account",
   "HeaderAddCustomMetadataProvider": "Add Custom Metadata Provider",
   "HeaderAdvanced": "Advanced",
+  "HeaderAllStats": "All Stats",
   "HeaderAppriseNotificationSettings": "Apprise Notification Settings",
   "HeaderAudioTracks": "Audio Tracks",
   "HeaderAudiobookTools": "Audiobook File Management Tools",
   "HeaderAuthentication": "Authentication",
   "HeaderBackups": "Backups",
+  "HeaderBookLibraries": "Book Libraries",
   "HeaderChangePassword": "Change Password",
   "HeaderChapters": "Chapters",
   "HeaderChooseAFolder": "Choose a Folder",
@@ -174,6 +176,7 @@
   "HeaderPlayerSettings": "Player Settings",
   "HeaderPlaylist": "Playlist",
   "HeaderPlaylistItems": "Playlist Items",
+  "HeaderPodcastLibraries": "Podcast Libraries",
   "HeaderPodcastsToAdd": "Podcasts to Add",
   "HeaderPreviewCover": "Preview Cover",
   "HeaderRSSFeedGeneral": "RSS Details",
@@ -185,6 +188,7 @@
   "HeaderSchedule": "Schedule",
   "HeaderScheduleEpisodeDownloads": "Schedule Automatic Episode Downloads",
   "HeaderScheduleLibraryScans": "Schedule Automatic Library Scans",
+  "HeaderServerStats": "Server Stats",
   "HeaderSession": "Session",
   "HeaderSetBackupSchedule": "Set Backup Schedule",
   "HeaderSettings": "Settings",

From 47272d6136ecad424e9333493350d939ed44f800 Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Thu, 2 Jan 2025 20:48:38 +0100
Subject: [PATCH 16/18] added stats to podcast view

---
 client/components/app/SideRail.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/components/app/SideRail.vue b/client/components/app/SideRail.vue
index 2c6fd5a239..7bc9cab8d9 100644
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@@ -79,14 +79,6 @@
         <div v-show="isNarratorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       </nuxt-link>
 
-      <nuxt-link v-if="isBookLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/stats`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isStatsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-symbols text-2xl">&#xf190;</span>
-
-        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonStats }}</p>
-
-        <div v-show="isStatsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
-
       <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
         <span class="abs-icons icon-podcast text-xl"></span>
 
@@ -103,6 +95,14 @@
         <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       </nuxt-link>
 
+      <nuxt-link v-if="userIsAdminOrUp" :to="`/library/${currentLibraryId}/stats`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isStatsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-symbols text-2xl">&#xf190;</span>
+
+        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonStats }}</p>
+
+        <div v-show="isStatsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
+
       <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : 'bg-error bg-opacity-20'">
         <span class="material-symbols text-2xl">warning</span>
 

From bd41f234388378e89e678ceee9e8465aa52d1a02 Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Fri, 3 Jan 2025 10:20:16 +0100
Subject: [PATCH 17/18] reverted old changes and fixed library switching

---
 client/components/app/BookShelfToolbar.vue | 15 ---------
 client/pages/config/server-stats.vue       | 17 +++++-----
 client/pages/library/_library/stats.vue    | 36 +++++-----------------
 3 files changed, 16 insertions(+), 52 deletions(-)

diff --git a/client/components/app/BookShelfToolbar.vue b/client/components/app/BookShelfToolbar.vue
index 89e661e9b6..898250fda2 100644
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@@ -87,12 +87,6 @@
 
         <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
-      <!-- library stats page -->
-      <template v-else-if="isLibraryStatsPage">
-        <div class="flex-grow" />
-        <ui-btn color="primary" small @click="updateLibraryStats">
-          {{ this.showAllLibraryStats ? currentLibraryName : $strings.LabelShowAll }}</ui-btn>
-      </template>
       <!-- search page -->
       <template v-else-if="page === 'search'">
         <div class="flex-grow" />
@@ -269,9 +263,6 @@ export default {
     isPlaylistsPage() {
       return this.page === 'playlists'
     },
-    isLibraryStatsPage() {
-      return this.page === 'library-stats'
-    },
     isHomePage() {
       return this.$route.name === 'library-library'
     },
@@ -619,12 +610,6 @@ export default {
     updateAuthorSort() {
       this.saveSettings()
     },
-    updateLibraryStats() {
-      this.$emit('library-stats-updated', !this.showAllLibraryStats)
-      this.$nextTick(() => {
-        this.showAllLibraryStats = !this.showAllLibraryStats
-      })
-    },
     saveSettings() {
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },
diff --git a/client/pages/config/server-stats.vue b/client/pages/config/server-stats.vue
index 687fb7a4fb..c8edcc3501 100644
--- a/client/pages/config/server-stats.vue
+++ b/client/pages/config/server-stats.vue
@@ -20,9 +20,9 @@
         <tr v-for="library in bookLibraryListStats">
           <td>
             <p class="text-sm md:text-base text-gray-100">
-              <nuxt-link :to="`/library/${library.id}/stats`" class="hover:underline">
+              <a :href="'/library/' + library.id + '/stats'" class="hover:underline" @click.prevent="switchLibrary(library.id)">
                 {{ library.name }}
-              </nuxt-link>
+              </a>
             </p>
           </td>
           <td>
@@ -59,9 +59,9 @@
         <tr v-for="library in podcastLibraryListStats">
           <td>
             <p class="text-sm md:text-base text-gray-100">
-              <nuxt-link :to="`/library/${library.id}/stats`" class="hover:underline">
+              <a :href="'/library/' + library.id + '/stats'" class="hover:underline" @click.prevent="switchLibrary(library.id)">
                 {{ library.name }}
-              </nuxt-link>
+              </a>
             </p>
           </td>
           <td>
@@ -141,10 +141,6 @@ export default {
         if (a['type'] > b['type']) return 1
         return 0
       })
-
-
-      console.log(this.bookLibraryIndex)
-      console.log(this.podcastLibraryIndex)
     },
     totalHours(duration) {
       return Math.round(duration / (60 * 60))
@@ -159,6 +155,11 @@ export default {
     totalSizeMod(size) {
       return this.totalSizePretty(size).split(' ')[1]
     },
+    async switchLibrary(libraryId) {
+      await this.$store.dispatch('libraries/fetch', libraryId);
+
+      await this.$router.push(`/library/${libraryId}/stats`)
+    }
   },
   mounted() {
     this.init()
diff --git a/client/pages/library/_library/stats.vue b/client/pages/library/_library/stats.vue
index 2e8280a0ac..52273a9493 100644
--- a/client/pages/library/_library/stats.vue
+++ b/client/pages/library/_library/stats.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page relative" :class="streamLibraryItem ? 'streaming' : ''">
-    <app-book-shelf-toolbar page="library-stats" is-home @library-stats-updated="toggleStats" />
+    <app-book-shelf-toolbar page="library-stats" is-home />
     <div id="bookshelf" class="w-full h-full px-1 py-4 md:p-8 relative overflow-y-auto">
       <div class="w-full max-w-4xl mx-auto">
         <stats-preview-icons v-if="totalItems" :library-stats="libraryStats" />
@@ -102,8 +102,7 @@ export default {
   },
   data() {
     return {
-      libraryStats: null,
-      showAllLibraryStats: false
+      libraryStats: null
     }
   },
   watch: {
@@ -111,12 +110,6 @@ export default {
       if (newVal) {
         this.init()
       }
-    },
-    showAllLibraryStats(newVal) {
-      console.log('showAllLibraryStats', newVal)
-      if (newVal) {
-        this.init()
-      }
     }
   },
   computed: {
@@ -171,26 +164,11 @@ export default {
   },
   methods: {
     async init() {
-      this.libraryStats = null
-      if (this.showAllLibraryStats === true) {
-        this.libraryStats = (await this.$axios.$get(`/api/libraries/stats`).catch((err) => {
-          console.error('Failed to get library stats', err)
-          var errorMsg = err.response ? err.response.data || 'Unknown Error' : 'Unknown Error'
-          this.$toast.error(`Failed to get library stats: ${errorMsg}`)
-        }))['combined']
-      } else {
-        this.libraryStats = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/stats`).catch((err) => {
-          console.error('Failed to get library stats', err)
-          var errorMsg = err.response ? err.response.data || 'Unknown Error' : 'Unknown Error'
-          this.$toast.error(`Failed to get library stats: ${errorMsg}`)
-        })
-      }
-    },
-    toggleStats(value) {
-      this.showAllLibraryStats = value;
-      this.$nextTick(() => {
-        this.init();
-      });
+      this.libraryStats = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/stats`).catch((err) => {
+        console.error('Failed to get library stats', err)
+        var errorMsg = err.response ? err.response.data || 'Unknown Error' : 'Unknown Error'
+        this.$toast.error(`Failed to get library stats: ${errorMsg}`)
+      })
     }
   },
   mounted() {

From 48ba8bc886ec998776735320e8887ca42f8f5aaf Mon Sep 17 00:00:00 2001
From: Vito0912 <86927734+Vito0912@users.noreply.github.com>
Date: Fri, 3 Jan 2025 10:40:49 +0100
Subject: [PATCH 18/18] reverted old artifact agains

---
 client/pages/library/_library/stats.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/pages/library/_library/stats.vue b/client/pages/library/_library/stats.vue
index 52273a9493..4348531cbb 100644
--- a/client/pages/library/_library/stats.vue
+++ b/client/pages/library/_library/stats.vue
@@ -24,7 +24,7 @@
               </div>
             </template>
           </div>
-          <div v-if="isBookLibrary || showAllLibraryStats" class="w-80 my-6 mx-auto">
+          <div v-if="isBookLibrary" class="w-80 my-6 mx-auto">
             <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsTop10Authors }}</h1>
             <p v-if="!top10Authors.length">{{ $strings.MessageNoAuthors }}</p>
             <template v-for="(author, index) in top10Authors">