From e61486fae96d7580b317fce06f19fac5200175ca Mon Sep 17 00:00:00 2001
From: neon <18559658+neonsolstice@users.noreply.github.com>
Date: Tue, 17 Mar 2026 23:38:29 -0600
Subject: [PATCH] feat(stats): introduce statistics with charts, KPI summary,
 and filter

---
 client/package.json                           |   4 +-
 client/src/App.vue                            |  23 +-
 client/src/assets/theme/tokens.css            |  47 ++-
 client/src/components/AppSidebar.vue          |   8 +
 .../features/statistics/api/statistics.api.ts |  72 +++++
 .../components/BooksAddedOverTimeChart.vue    | 133 ++++++++
 .../statistics/components/ChartCard.vue       |  72 +++++
 .../components/FormatDistributionChart.vue    |  52 ++++
 .../components/GenreDistributionChart.vue     |  61 ++++
 .../components/LanguageDistributionChart.vue  |  52 ++++
 .../components/MetadataCompletenessChart.vue  |  62 ++++
 .../components/PublicationDecadeChart.vue     |  63 ++++
 .../statistics/components/StatisticsGrid.vue  |  83 +++++
 .../statistics/components/StatisticsPage.vue  | 220 +++++++++++++
 .../components/StatisticsSummaryCard.vue      |  69 +++++
 .../components/StorageByFormatChart.vue       |  63 ++++
 .../statistics/components/TopAuthorsChart.vue |  61 ++++
 .../composables/useBooksAddedOverTime.ts      |  29 ++
 .../composables/useFormatDistribution.ts      |  29 ++
 .../composables/useGenreDistribution.ts       |  29 ++
 .../composables/useLanguageDistribution.ts    |  29 ++
 .../composables/useMetadataCompleteness.ts    |  29 ++
 .../composables/usePublicationDecade.ts       |  29 ++
 .../composables/useStatisticsConfig.ts        | 121 ++++++++
 .../composables/useStatisticsSummary.ts       |  27 ++
 .../composables/useStorageByFormat.ts         |  29 ++
 .../statistics/composables/useTopAuthors.ts   |  29 ++
 client/src/lib/echarts.ts                     |  59 ++++
 client/src/main.ts                            |   1 +
 client/src/router/index.ts                    |   5 +
 packages/types/src/auth.ts                    |   1 +
 packages/types/src/index.ts                   |   1 +
 packages/types/src/statistics.ts              |  94 ++++++
 server/src/app.module.ts                      |   2 +
 .../dto/books-over-time-query.dto.ts          |  15 +
 .../dto/statistics-filter-query.dto.ts        |  11 +
 .../statistics/statistics.controller.ts       |  57 ++++
 .../modules/statistics/statistics.module.ts   |  11 +
 .../statistics/statistics.repository.ts       | 293 ++++++++++++++++++
 .../modules/statistics/statistics.service.ts  | 105 +++++++
 40 files changed, 2168 insertions(+), 12 deletions(-)
 create mode 100644 client/src/features/statistics/api/statistics.api.ts
 create mode 100644 client/src/features/statistics/components/BooksAddedOverTimeChart.vue
 create mode 100644 client/src/features/statistics/components/ChartCard.vue
 create mode 100644 client/src/features/statistics/components/FormatDistributionChart.vue
 create mode 100644 client/src/features/statistics/components/GenreDistributionChart.vue
 create mode 100644 client/src/features/statistics/components/LanguageDistributionChart.vue
 create mode 100644 client/src/features/statistics/components/MetadataCompletenessChart.vue
 create mode 100644 client/src/features/statistics/components/PublicationDecadeChart.vue
 create mode 100644 client/src/features/statistics/components/StatisticsGrid.vue
 create mode 100644 client/src/features/statistics/components/StatisticsPage.vue
 create mode 100644 client/src/features/statistics/components/StatisticsSummaryCard.vue
 create mode 100644 client/src/features/statistics/components/StorageByFormatChart.vue
 create mode 100644 client/src/features/statistics/components/TopAuthorsChart.vue
 create mode 100644 client/src/features/statistics/composables/useBooksAddedOverTime.ts
 create mode 100644 client/src/features/statistics/composables/useFormatDistribution.ts
 create mode 100644 client/src/features/statistics/composables/useGenreDistribution.ts
 create mode 100644 client/src/features/statistics/composables/useLanguageDistribution.ts
 create mode 100644 client/src/features/statistics/composables/useMetadataCompleteness.ts
 create mode 100644 client/src/features/statistics/composables/usePublicationDecade.ts
 create mode 100644 client/src/features/statistics/composables/useStatisticsConfig.ts
 create mode 100644 client/src/features/statistics/composables/useStatisticsSummary.ts
 create mode 100644 client/src/features/statistics/composables/useStorageByFormat.ts
 create mode 100644 client/src/features/statistics/composables/useTopAuthors.ts
 create mode 100644 client/src/lib/echarts.ts
 create mode 100644 packages/types/src/statistics.ts
 create mode 100644 server/src/modules/statistics/dto/books-over-time-query.dto.ts
 create mode 100644 server/src/modules/statistics/dto/statistics-filter-query.dto.ts
 create mode 100644 server/src/modules/statistics/statistics.controller.ts
 create mode 100644 server/src/modules/statistics/statistics.module.ts
 create mode 100644 server/src/modules/statistics/statistics.repository.ts
 create mode 100644 server/src/modules/statistics/statistics.service.ts

diff --git a/client/package.json b/client/package.json
index aa7b1b696..ff4c16a80 100644
--- a/client/package.json
+++ b/client/package.json
@@ -29,6 +29,7 @@
     "@vueuse/core": "^14.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "echarts": "^6.0.0",
     "lucide-vue-next": "^0.577.0",
     "pdfjs-dist": "^5.5.207",
     "pinia": "^3.0.4",
@@ -38,6 +39,7 @@
     "tailwindcss": "^4.2.1",
     "vue": "^3.5.30",
     "vue-draggable-plus": "^0.6.1",
+    "vue-echarts": "^8.0.1",
     "vue-router": "^5.0.3",
     "vue-sonner": "^2.0.9",
     "vue-virtual-scroller": "^1.1.2"
@@ -66,7 +68,7 @@
     "vite": "^8.0.0",
     "vite-plugin-vue-devtools": "^8.1.0",
     "vitest": "^4.1.0",
-    "vue-tsc": "^3.2.5"
+    "vue-tsc": "^3.2.6"
   },
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
diff --git a/client/src/App.vue b/client/src/App.vue
index 458c497c8..413768c88 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,12 +1,33 @@
 <script setup lang="ts">
+import { computed, onMounted, provide, ref, watch } from 'vue'
+import { INIT_OPTIONS_KEY, THEME_KEY } from 'vue-echarts'
 import { useThemeStore } from '@/stores/theme'
 import { useChangePasswordDialog } from '@/composables/useChangePasswordDialog'
+import { initChartThemes } from '@/lib/echarts'
 import ChangePasswordDialog from '@/features/auth/ChangePasswordDialog.vue'
 import { Toaster } from '@/components/ui/sonner'
 import { TooltipProvider } from '@/components/ui/tooltip'
 
-useThemeStore()
+const themeStore = useThemeStore()
 const { isOpen } = useChangePasswordDialog()
+
+const themeVersion = ref(0)
+
+provide(INIT_OPTIONS_KEY, { renderer: 'svg' })
+provide(
+  THEME_KEY,
+  computed(() => `projectx-v${themeVersion.value}`),
+)
+
+onMounted(() => {
+  initChartThemes(0)
+})
+
+watch([() => themeStore.theme, () => themeStore.accent], () => {
+  const v = themeVersion.value + 1
+  initChartThemes(v)
+  themeVersion.value = v
+})
 </script>
 
 <template>
diff --git a/client/src/assets/theme/tokens.css b/client/src/assets/theme/tokens.css
index 9d0aa3f43..2d5f8bfbe 100644
--- a/client/src/assets/theme/tokens.css
+++ b/client/src/assets/theme/tokens.css
@@ -52,11 +52,25 @@
   --sidebar-border: oklch(0.878 var(--tint-c-surface) var(--tint-h));
   --sidebar-ring: oklch(0.65 var(--tint-c-surface) var(--tint-h));
 
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --chart-1: oklch(0.62 0.16 var(--tint-h));
+  --chart-2: oklch(0.6 0.15 calc(var(--tint-h) + 72));
+  --chart-3: oklch(0.58 0.14 calc(var(--tint-h) + 144));
+  --chart-4: oklch(0.64 0.15 calc(var(--tint-h) + 216));
+  --chart-5: oklch(0.62 0.16 calc(var(--tint-h) + 288));
+  --chart-6: oklch(0.44 0.14 calc(var(--tint-h) + 36));
+  --chart-7: oklch(0.42 0.13 calc(var(--tint-h) + 108));
+  --chart-8: oklch(0.4 0.12 calc(var(--tint-h) + 180));
+  --chart-9: oklch(0.46 0.13 calc(var(--tint-h) + 252));
+  --chart-10: oklch(0.43 0.14 calc(var(--tint-h) + 324));
+  --chart-icon-1: oklch(0.58 0.17 var(--tint-h));
+  --chart-icon-2: oklch(0.58 0.17 calc(var(--tint-h) + 45));
+  --chart-icon-3: oklch(0.58 0.17 calc(var(--tint-h) + 90));
+  --chart-icon-4: oklch(0.58 0.17 calc(var(--tint-h) + 135));
+  --chart-icon-5: oklch(0.58 0.17 calc(var(--tint-h) + 180));
+  --chart-icon-6: oklch(0.58 0.17 calc(var(--tint-h) + 225));
+  --chart-icon-7: oklch(0.58 0.17 calc(var(--tint-h) + 270));
+  --chart-icon-8: oklch(0.58 0.17 calc(var(--tint-h) + 315));
+  --chart-icon-9: oklch(0.58 0.17 calc(var(--tint-h) + 337));
 
   /* Elevation surfaces */
   --surface-1: oklch(0.975 var(--tint-c-surface) var(--tint-h));
@@ -120,11 +134,24 @@
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.52 0.008 var(--tint-h));
 
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --chart-1: oklch(0.7 0.16 var(--tint-h));
+  --chart-2: oklch(0.68 0.15 calc(var(--tint-h) + 72));
+  --chart-3: oklch(0.66 0.14 calc(var(--tint-h) + 144));
+  --chart-4: oklch(0.72 0.15 calc(var(--tint-h) + 216));
+  --chart-5: oklch(0.7 0.16 calc(var(--tint-h) + 288));
+  --chart-6: oklch(0.52 0.14 calc(var(--tint-h) + 36));
+  --chart-7: oklch(0.5 0.13 calc(var(--tint-h) + 108));
+  --chart-8: oklch(0.48 0.12 calc(var(--tint-h) + 180));
+  --chart-9: oklch(0.54 0.13 calc(var(--tint-h) + 252));
+  --chart-10: oklch(0.51 0.14 calc(var(--tint-h) + 324));
+  --chart-icon-1: oklch(0.7 0.17 var(--tint-h));
+  --chart-icon-2: oklch(0.7 0.17 calc(var(--tint-h) + 45));
+  --chart-icon-3: oklch(0.7 0.17 calc(var(--tint-h) + 90));
+  --chart-icon-4: oklch(0.7 0.17 calc(var(--tint-h) + 135));
+  --chart-icon-5: oklch(0.7 0.17 calc(var(--tint-h) + 180));
+  --chart-icon-6: oklch(0.7 0.17 calc(var(--tint-h) + 225));
+  --chart-icon-7: oklch(0.7 0.17 calc(var(--tint-h) + 270));
+  --chart-icon-8: oklch(0.7 0.17 calc(var(--tint-h) + 315));
 
   /* Elevation surfaces */
   --surface-1: oklch(calc(0.205 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
diff --git a/client/src/components/AppSidebar.vue b/client/src/components/AppSidebar.vue
index 1fbff4b02..c7fa91c22 100644
--- a/client/src/components/AppSidebar.vue
+++ b/client/src/components/AppSidebar.vue
@@ -86,6 +86,7 @@ const {
 
 const isDashboardActive = computed(() => route.name === 'dashboard')
 const isStagingActive = computed(() => route.name === 'staging')
+const isStatisticsActive = computed(() => route.name === 'statistics')
 const isAuthorsActive = computed(() => route.name === 'authors' || route.name === 'author-detail')
 
 const activeLibraryId = computed(() => {
@@ -222,6 +223,13 @@ onUnmounted(() => stopUploadCompletedListener())
               label="Authors"
               @click="router.push({ name: 'authors' })"
             />
+            <SidebarNavItem
+              :is-active="isStatisticsActive"
+              tooltip="Statistics"
+              :icon="Icons.BarChart3"
+              label="Statistics"
+              @click="router.push({ name: 'statistics' })"
+            />
           </SidebarMenu>
         </SidebarGroupContent>
       </SidebarGroup>
diff --git a/client/src/features/statistics/api/statistics.api.ts b/client/src/features/statistics/api/statistics.api.ts
new file mode 100644
index 000000000..96c3911d7
--- /dev/null
+++ b/client/src/features/statistics/api/statistics.api.ts
@@ -0,0 +1,72 @@
+import { api } from '@/lib/api'
+import type {
+  BooksAddedDataPoint,
+  StatisticsSummary,
+  FormatDistributionItem,
+  GenreDistributionItem,
+  LanguageDistributionItem,
+  MetadataCompletenessItem,
+  PublicationDecadeItem,
+  StatisticsFilterConfig,
+  StatisticsResult,
+  StorageByFormatItem,
+  TopAuthorItem,
+} from '@projectx/types'
+
+async function parseResult<T>(res: Response): Promise<StatisticsResult<T>> {
+  if (!res.ok) throw new Error(`Statistics request failed: ${res.status}`)
+  return res.json() as Promise<StatisticsResult<T>>
+}
+
+function buildParams(filters: StatisticsFilterConfig, extra?: Record<string, string>): string {
+  const params = new URLSearchParams()
+  filters.libraryIds.forEach((id) => params.append('libraryIds', String(id)))
+  if (extra) Object.entries(extra).forEach(([k, v]) => params.set(k, v))
+  const str = params.toString()
+  return str ? `?${str}` : ''
+}
+
+export async function fetchFormatDistribution(filters: StatisticsFilterConfig): Promise<StatisticsResult<FormatDistributionItem>> {
+  return parseResult(await api(`/api/v1/statistics/format-distribution${buildParams(filters)}`))
+}
+
+export async function fetchLanguageDistribution(filters: StatisticsFilterConfig): Promise<StatisticsResult<LanguageDistributionItem>> {
+  return parseResult(await api(`/api/v1/statistics/language-distribution${buildParams(filters)}`))
+}
+
+export async function fetchBooksAddedOverTime(filters: StatisticsFilterConfig): Promise<StatisticsResult<BooksAddedDataPoint>> {
+  return parseResult(
+    await api(
+      `/api/v1/statistics/books-added-over-time${buildParams(filters, {
+        granularity: filters.booksOverTimeGranularity,
+        range: filters.booksOverTimeRange,
+      })}`,
+    ),
+  )
+}
+
+export async function fetchStorageByFormat(filters: StatisticsFilterConfig): Promise<StatisticsResult<StorageByFormatItem>> {
+  return parseResult(await api(`/api/v1/statistics/storage-by-format${buildParams(filters)}`))
+}
+
+export async function fetchPublicationDecade(filters: StatisticsFilterConfig): Promise<StatisticsResult<PublicationDecadeItem>> {
+  return parseResult(await api(`/api/v1/statistics/publication-decade${buildParams(filters)}`))
+}
+
+export async function fetchTopAuthors(filters: StatisticsFilterConfig): Promise<StatisticsResult<TopAuthorItem>> {
+  return parseResult(await api(`/api/v1/statistics/top-authors${buildParams(filters)}`))
+}
+
+export async function fetchMetadataCompleteness(filters: StatisticsFilterConfig): Promise<StatisticsResult<MetadataCompletenessItem>> {
+  return parseResult(await api(`/api/v1/statistics/metadata-completeness${buildParams(filters)}`))
+}
+
+export async function fetchGenreDistribution(filters: StatisticsFilterConfig): Promise<StatisticsResult<GenreDistributionItem>> {
+  return parseResult(await api(`/api/v1/statistics/genre-distribution${buildParams(filters)}`))
+}
+
+export async function fetchStatisticsSummary(filters: StatisticsFilterConfig): Promise<StatisticsSummary> {
+  const res = await api(`/api/v1/statistics/summary${buildParams(filters)}`)
+  if (!res.ok) throw new Error(`Statistics summary request failed: ${res.status}`)
+  return res.json() as Promise<StatisticsSummary>
+}
diff --git a/client/src/features/statistics/components/BooksAddedOverTimeChart.vue b/client/src/features/statistics/components/BooksAddedOverTimeChart.vue
new file mode 100644
index 000000000..4042925c6
--- /dev/null
+++ b/client/src/features/statistics/components/BooksAddedOverTimeChart.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
+import VChart from 'vue-echarts'
+import { TrendingUp } from 'lucide-vue-next'
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { useBooksAddedOverTime } from '../composables/useBooksAddedOverTime'
+import { useStatisticsConfig } from '../composables/useStatisticsConfig'
+import ChartCard from './ChartCard.vue'
+
+const MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const DATE_RANGE_LABELS = {
+  'all-time': 'All Time',
+  'last-5-years': 'Last 5 Years',
+  'last-year': 'Last Year',
+} as const
+
+const { data, loading, error } = useBooksAddedOverTime()
+const { filters, setGranularity, setDateRange } = useStatisticsConfig()
+
+const option = shallowRef({})
+
+watchEffect(() => {
+  if (!data.value.items.length) return
+
+  const isYearly = filters.value.booksOverTimeGranularity === 'yearly'
+  const labels = data.value.items.map((d) => (isYearly ? String(d.year) : `${MONTH_NAMES[d.month - 1]} ${d.year}`))
+
+  option.value = {
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      enterable: false,
+      formatter: (params: { name: string; value: number }[]) => {
+        const p = params[0]
+        if (!p) return ''
+        return `${p.name}: <strong>${p.value}</strong> books`
+      },
+    },
+    grid: { left: '3%', right: '4%', bottom: '12%', top: '8%', containLabel: true },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisTick: { show: false },
+      axisLabel: {
+        fontSize: 11,
+        rotate: 45,
+        interval: Math.max(0, Math.floor(data.value.items.length / 8) - 1),
+      },
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      axisLabel: { fontSize: 11 },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: data.value.items.map((d) => d.count),
+        cursor: 'default',
+        itemStyle: { borderRadius: [3, 3, 0, 0] },
+        barMaxWidth: 40,
+        emphasis: { disabled: true },
+      },
+    ],
+  }
+})
+
+function handleMonthly() {
+  setGranularity('monthly')
+}
+
+function handleYearly() {
+  setGranularity('yearly')
+}
+
+function handleAllTime() {
+  setDateRange('all-time')
+}
+
+function handleLast5Years() {
+  setDateRange('last-5-years')
+}
+
+function handleLastYear() {
+  setDateRange('last-year')
+}
+</script>
+
+<template>
+  <ChartCard title="Books Added Over Time" :icon="TrendingUp" :color-index="3" :loading :error :empty="!data.items.length">
+    <template #controls>
+      <div class="flex items-center gap-1">
+        <div class="border-border flex rounded-md border text-xs">
+          <button
+            :class="[
+              'rounded-l-md px-2 py-1 transition-colors',
+              filters.booksOverTimeGranularity === 'monthly' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground',
+            ]"
+            @click="handleMonthly"
+          >
+            Monthly
+          </button>
+          <button
+            :class="[
+              'rounded-r-md px-2 py-1 transition-colors',
+              filters.booksOverTimeGranularity === 'yearly' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground',
+            ]"
+            @click="handleYearly"
+          >
+            Yearly
+          </button>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <button class="border-border text-muted-foreground hover:text-foreground rounded-md border px-2 py-1 text-xs transition-colors">
+              {{ DATE_RANGE_LABELS[filters.booksOverTimeRange] }}
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" class="text-xs">
+            <DropdownMenuItem @click="handleAllTime">All Time</DropdownMenuItem>
+            <DropdownMenuItem @click="handleLast5Years">Last 5 Years</DropdownMenuItem>
+            <DropdownMenuItem @click="handleLastYear">Last Year</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </template>
+
+    <VChart :option autoresize style="height: 100%" />
+  </ChartCard>
+</template>
diff --git a/client/src/features/statistics/components/ChartCard.vue b/client/src/features/statistics/components/ChartCard.vue
new file mode 100644
index 000000000..3e65af2f5
--- /dev/null
+++ b/client/src/features/statistics/components/ChartCard.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { AlertCircle, GripVertical } from 'lucide-vue-next'
+import { Skeleton } from '@/components/ui/skeleton'
+
+defineProps<{
+  title: string
+  icon: Component
+  colorIndex: number
+  loading: boolean
+  empty: boolean
+  unknownCount?: number
+  error?: boolean
+  tall?: boolean
+  short?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    :class="[
+      'bg-card text-card-foreground flex flex-col overflow-hidden rounded-xl border shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
+      tall ? 'h-[560px] md:h-[640px]' : short ? 'h-[240px] md:h-[280px]' : 'h-[320px] md:h-[360px]',
+    ]"
+  >
+    <div class="flex min-h-0 flex-1 flex-col p-4">
+      <div class="mb-3 flex items-center justify-between gap-2 border-b pb-3">
+        <div class="flex items-center gap-2.5">
+          <div
+            class="shrink-0 rounded-md p-2"
+            :style="{
+              backgroundColor: `color-mix(in oklch, var(--chart-icon-${colorIndex}) 15%, transparent)`,
+              color: `var(--chart-icon-${colorIndex})`,
+            }"
+          >
+            <component :is="icon" class="size-4" />
+          </div>
+          <p class="text-foreground text-sm font-semibold">{{ title }}</p>
+        </div>
+        <div class="flex items-center gap-2">
+          <slot name="controls" />
+          <GripVertical class="drag-handle text-muted-foreground/50 hover:text-muted-foreground size-4 cursor-grab active:cursor-grabbing" />
+        </div>
+      </div>
+
+      <div class="min-h-0 flex-1">
+        <div v-if="loading" class="flex h-full flex-col gap-2">
+          <Skeleton class="h-full w-full rounded-lg" />
+        </div>
+
+        <div v-else-if="error" class="text-muted-foreground flex h-full flex-col items-center justify-center gap-2">
+          <AlertCircle class="size-6" />
+          <p class="text-sm">Failed to load data</p>
+        </div>
+
+        <div v-else-if="empty" class="text-muted-foreground flex h-full flex-col items-center justify-center gap-3">
+          <component :is="icon" class="size-9 opacity-20" />
+          <div class="flex flex-col items-center gap-1">
+            <p class="text-sm font-medium">No data yet</p>
+            <p class="text-xs opacity-60">No data available for this chart</p>
+          </div>
+        </div>
+
+        <slot v-else />
+      </div>
+
+      <p v-if="!loading && !error && unknownCount && unknownCount > 0" class="text-muted-foreground mt-2 text-xs">
+        {{ unknownCount }} {{ unknownCount === 1 ? 'book has' : 'books have' }} no data for this field
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/client/src/features/statistics/components/FormatDistributionChart.vue b/client/src/features/statistics/components/FormatDistributionChart.vue
new file mode 100644
index 000000000..78a962dda
--- /dev/null
+++ b/client/src/features/statistics/components/FormatDistributionChart.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
+import VChart from 'vue-echarts'
+import { PieChart } from 'lucide-vue-next'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+import { useFormatDistribution } from '../composables/useFormatDistribution'
+import ChartCard from './ChartCard.vue'
+
+const { data, loading, error } = useFormatDistribution()
+const { md } = useBreakpoints(breakpointsTailwind)
+
+const option = shallowRef({})
+
+watchEffect(() => {
+  if (!data.value.items.length) return
+  option.value = {
+    tooltip: { trigger: 'item', confine: true, enterable: false },
+    legend: {
+      orient: md.value ? 'vertical' : 'horizontal',
+      right: md.value ? '2%' : 'auto',
+      bottom: md.value ? 'auto' : 0,
+      top: md.value ? 'middle' : 'auto',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: md.value ? ['38%', '50%'] : ['50%', '44%'],
+        data: data.value.items.map((item) => ({ name: item.format.toUpperCase(), value: item.count })),
+        cursor: 'default',
+        label: { show: false },
+        emphasis: { disabled: true },
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <ChartCard
+    title="Format Distribution"
+    :icon="PieChart"
+    :color-index="1"
+    :loading
+    :error
+    :empty="!data.items.length"
+    :unknown-count="data.unknownCount"
+  >
+    <VChart :option autoresize style="height: 100%" />
+  </ChartCard>
+</template>
diff --git a/client/src/features/statistics/components/GenreDistributionChart.vue b/client/src/features/statistics/components/GenreDistributionChart.vue
new file mode 100644
index 000000000..1ed38c150
--- /dev/null
+++ b/client/src/features/statistics/components/GenreDistributionChart.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
+import VChart from 'vue-echarts'
+import { Tag } from 'lucide-vue-next'
+
+import { useGenreDistribution } from '../composables/useGenreDistribution'
+import ChartCard from './ChartCard.vue'
+
+const { data, loading, error } = useGenreDistribution()
+const option = shallowRef({})
+
+watchEffect(() => {
+  if (!data.value.items.length) return
+  option.value = {
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      enterable: false,
+      formatter: (params: { name: string; value: number }[]) => {
+        const p = params[0]
+        if (!p) return ''
+        return `${p.name}: <strong>${p.value}</strong> books`
+      },
+    },
+    grid: { left: '3%', right: '3%', bottom: '28%', top: '8%', containLabel: false },
+    xAxis: {
+      type: 'category',
+      data: data.value.items.map((d) => d.genre),
+      axisTick: { show: false },
+      axisLabel: {
+        fontSize: 11,
+        rotate: 45,
+        interval: 0,
+        overflow: 'truncate',
+        width: 80,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      axisLabel: { fontSize: 11 },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: data.value.items.map((d) => d.count),
+        cursor: 'default',
+        itemStyle: { borderRadius: [3, 3, 0, 0] },
+        barMaxWidth: 32,
+        emphasis: { disabled: true },
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <ChartCard title="Genre Distribution" :icon="Tag" :color-index="8" :loading :error :empty="!data.items.length" :unknown-count="data.unknownCount">
+    <VChart :option autoresize style="height: 100%" />
+  </ChartCard>
+</template>
diff --git a/client/src/features/statistics/components/LanguageDistributionChart.vue b/client/src/features/statistics/components/LanguageDistributionChart.vue
new file mode 100644
index 000000000..b06631639
--- /dev/null
+++ b/client/src/features/statistics/components/LanguageDistributionChart.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
+import VChart from 'vue-echarts'
+import { Globe } from 'lucide-vue-next'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+import { useLanguageDistribution } from '../composables/useLanguageDistribution'
+import ChartCard from './ChartCard.vue'
+
+const { data, loading, error } = useLanguageDistribution()
+const { md } = useBreakpoints(breakpointsTailwind)
+
+const option = shallowRef({})
+
+watchEffect(() => {
+  if (!data.value.items.length) return
+  option.value = {
+    tooltip: { trigger: 'item', confine: true, enterable: false },
+    legend: {
+      orient: md.value ? 'vertical' : 'horizontal',
+      right: md.value ? '2%' : 'auto',
+      bottom: md.value ? 'auto' : 0,
+      top: md.value ? 'middle' : 'auto',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: md.value ? ['38%', '50%'] : ['50%', '44%'],
+        data: data.value.items.map((item) => ({ name: item.language.toUpperCase(), value: item.count })),
+        cursor: 'default',
+        label: { show: false },
+        emphasis: { disabled: true },
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <ChartCard
+    title="Language Distribution"
+    :icon="Globe"
+    :color-index="2"
+    :loading
+    :error
+    :empty="!data.items.length"
+    :unknown-count="data.unknownCount"
+  >
+    <VChart :option autoresize style="height: 100%" />
+  </ChartCard>
+</template>
diff --git a/client/src/features/statistics/components/MetadataCompletenessChart.vue b/client/src/features/statistics/components/MetadataCompletenessChart.vue
new file mode 100644
index 000000000..0dd997021
--- /dev/null
+++ b/client/src/features/statistics/components/MetadataCompletenessChart.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
+import VChart from 'vue-echarts'
+import { ListChecks } from 'lucide-vue-next'
+
+import { useMetadataCompleteness } from '../composables/useMetadataCompleteness'
+import ChartCard from './ChartCard.vue'
+
+const { data, loading, error } = useMetadataCompleteness()
+const option = shallowRef({})
+
+watchEffect(() => {
+  if (!data.value.items.length) return
+  option.value = {
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      enterable: false,
+      formatter: (params: { name: string; value: number }[]) => {
+        const p = params[0]
+        if (!p) return ''
+        const item = data.value.items.find((i) => i.field === p.name)
+        if (!item) return ''
+        return `${p.name}: <strong>${p.value}%</strong> (${item.presentCount} / ${item.totalCount})`
+      },
+    },
+    grid: { left: '3%', right: '3%', bottom: '24%', top: '8%', containLabel: false },
+    xAxis: {
+      type: 'category',
+      data: [...data.value.items].reverse().map((d) => d.field),
+      axisTick: { show: false },
+      axisLabel: {
+        fontSize: 11,
+        rotate: 45,
+        interval: 0,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      axisLabel: { fontSize: 11, formatter: '{value}%' },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: [...data.value.items].reverse().map((d) => (d.totalCount > 0 ? Math.round((d.presentCount / d.totalCount) * 100) : 0)),
+        cursor: 'default',
+        itemStyle: { borderRadius: [3, 3, 0, 0] },
+        barMaxWidth: 40,
+        emphasis: { disabled: true },
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <ChartCard title="Metadata Completeness" :icon="ListChecks" :color-index="7" :loading :error :empty="!data.items.length">
+    <VChart :option autoresize style="height: 100%" />
+  </ChartCard>
+</template>
diff --git a/client/src/features/statistics/components/PublicationDecadeChart.vue b/client/src/features/statistics/components/PublicationDecadeChart.vue
new file mode 100644
index 000000000..b1a3c041a
--- /dev/null
+++ b/client/src/features/statistics/components/PublicationDecadeChart.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
+import VChart from 'vue-echarts'
+import { CalendarDays } from 'lucide-vue-next'
+
+import { usePublicationDecade } from '../composables/usePublicationDecade'
+import ChartCard from './ChartCard.vue'
+
+const { data, loading, error } = usePublicationDecade()
+const option = shallowRef({})
+
+watchEffect(() => {
+  if (!data.value.items.length) return
+  option.value = {
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      enterable: false,
+      formatter: (params: { name: string; value: number }[]) => {
+        const p = params[0]
+        if (!p) return ''
+        return `${p.name}: <strong>${p.value}</strong> books`
+      },
+    },
+    grid: { left: '3%', right: '4%', bottom: '12%', top: '8%', containLabel: true },
+    xAxis: {
+      type: 'category',
+      data: data.value.items.map((d) => `${d.decade}s`),
+      axisTick: { show: false },
+      axisLabel: { fontSize: 11 },
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      axisLabel: { fontSize: 11 },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: data.value.items.map((d) => d.count),
+        cursor: 'default',
+        itemStyle: { borderRadius: [3, 3, 0, 0] },
+        barMaxWidth: 48,
+        emphasis: { disabled: true },
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <ChartCard
+    title="Publication Decade"
+    :icon="CalendarDays"
+    :color-index="5"
+    :loading
+    :error
+    :empty="!data.items.length"
+    :unknown-count="data.unknownCount"
+  >
+    <VChart :option autoresize style="height: 100%" />
+  </ChartCard>
+</template>
diff --git a/client/src/features/statistics/components/StatisticsGrid.vue b/client/src/features/statistics/components/StatisticsGrid.vue
new file mode 100644
index 000000000..bb7ba16ca
--- /dev/null
+++ b/client/src/features/statistics/components/StatisticsGrid.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { type Component, defineAsyncComponent } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
+
+import type { ChartConfigEntry, StatisticsChartId } from '@projectx/types'
+import { useStatisticsConfig } from '../composables/useStatisticsConfig'
+
+interface ChartRegistryEntry {
+  component: Component
+  label: string
+  wide: boolean
+  fullWidth?: boolean
+}
+
+const CHART_REGISTRY: Record<StatisticsChartId, ChartRegistryEntry> = {
+  'format-distribution': {
+    component: defineAsyncComponent(() => import('./FormatDistributionChart.vue')),
+    label: 'Format Distribution',
+    wide: false,
+  },
+  'language-distribution': {
+    component: defineAsyncComponent(() => import('./LanguageDistributionChart.vue')),
+    label: 'Language Distribution',
+    wide: false,
+  },
+  'books-added-over-time': {
+    component: defineAsyncComponent(() => import('./BooksAddedOverTimeChart.vue')),
+    label: 'Books Added Over Time',
+    wide: true,
+  },
+  'storage-by-format': {
+    component: defineAsyncComponent(() => import('./StorageByFormatChart.vue')),
+    label: 'Storage by Format',
+    wide: false,
+  },
+  'publication-decade': {
+    component: defineAsyncComponent(() => import('./PublicationDecadeChart.vue')),
+    label: 'Publication Decade',
+    wide: false,
+  },
+  'top-authors': {
+    component: defineAsyncComponent(() => import('./TopAuthorsChart.vue')),
+    label: 'Top Authors',
+    wide: true,
+  },
+  'metadata-completeness': {
+    component: defineAsyncComponent(() => import('./MetadataCompletenessChart.vue')),
+    label: 'Metadata Completeness',
+    wide: false,
+  },
+  'genre-distribution': {
+    component: defineAsyncComponent(() => import('./GenreDistributionChart.vue')),
+    label: 'Genre Distribution',
+    wide: true,
+  },
+}
+
+const { visibleCharts, reorder } = useStatisticsConfig()
+
+function handleReorder(newList: ChartConfigEntry[]) {
+  reorder(newList)
+}
+</script>
+
+<template>
+  <VueDraggable
+    :model-value="visibleCharts"
+    class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
+    handle=".drag-handle"
+    :animation="200"
+    @update:model-value="handleReorder"
+  >
+    <div
+      v-for="chart in visibleCharts"
+      :key="chart.id"
+      :class="
+        CHART_REGISTRY[chart.id].fullWidth ? 'md:col-span-2 xl:col-span-3 2xl:col-span-4' : CHART_REGISTRY[chart.id].wide ? 'md:col-span-2' : ''
+      "
+    >
+      <component :is="CHART_REGISTRY[chart.id].component" />
+    </div>
+  </VueDraggable>
+</template>
diff --git a/client/src/features/statistics/components/StatisticsPage.vue b/client/src/features/statistics/components/StatisticsPage.vue
new file mode 100644
index 000000000..f61f97dac
--- /dev/null
+++ b/client/src/features/statistics/components/StatisticsPage.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import {
+  CalendarDays,
+  Check,
+  ChevronDown,
+  Globe,
+  GripVertical,
+  HardDrive,
+  ListChecks,
+  PieChart,
+  Settings2,
+  Tag,
+  TrendingUp,
+  Users,
+} from 'lucide-vue-next'
+import { VueDraggable } from 'vue-draggable-plus'
+
+import type { ChartConfigEntry, StatisticsChartId } from '@projectx/types'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import { useLibraries } from '@/features/library/composables/useLibraries'
+import { useStatisticsConfig } from '../composables/useStatisticsConfig'
+import StatisticsGrid from './StatisticsGrid.vue'
+import StatisticsSummaryCard from './StatisticsSummaryCard.vue'
+
+const CHART_LABELS: Record<StatisticsChartId, string> = {
+  'format-distribution': 'Format Distribution',
+  'language-distribution': 'Language Distribution',
+  'books-added-over-time': 'Books Added Over Time',
+  'storage-by-format': 'Storage by Format',
+  'publication-decade': 'Publication Decade',
+  'top-authors': 'Top 25 Authors',
+  'metadata-completeness': 'Metadata Completeness',
+  'genre-distribution': 'Genre Distribution',
+}
+
+const CHART_ICONS: Record<StatisticsChartId, unknown> = {
+  'format-distribution': PieChart,
+  'language-distribution': Globe,
+  'books-added-over-time': TrendingUp,
+  'storage-by-format': HardDrive,
+  'publication-decade': CalendarDays,
+  'top-authors': Users,
+  'metadata-completeness': ListChecks,
+  'genre-distribution': Tag,
+}
+
+const { orderedCharts, filters, init, toggleVisibility, reorder, resetToDefaults, setLibraryFilter } = useStatisticsConfig()
+const { libraries, fetchLibraries } = useLibraries()
+const configOpen = ref(false)
+
+// Called in setup (not onMounted) so filters are populated before chart children mount.
+init()
+onMounted(fetchLibraries)
+
+const visibleCount = computed(() => orderedCharts.value.filter((c) => c.visible).length)
+const totalCount = computed(() => orderedCharts.value.length)
+
+const libraryLabel = computed(() => {
+  const count = filters.value.libraryIds.length
+  if (count === 0 || count === libraries.value.length) return 'All Libraries'
+  return `${count} of ${libraries.value.length} Libraries`
+})
+
+const isFiltered = computed(() => filters.value.libraryIds.length > 0 && filters.value.libraryIds.length < libraries.value.length)
+
+function isLibrarySelected(id: number) {
+  return filters.value.libraryIds.length === 0 || filters.value.libraryIds.includes(id)
+}
+
+function handleToggleLibrary(id: number) {
+  const current = filters.value.libraryIds
+  if (current.length === 0) {
+    setLibraryFilter(libraries.value.map((l) => l.id).filter((lid) => lid !== id))
+  } else if (current.includes(id)) {
+    const next = current.filter((lid) => lid !== id)
+    setLibraryFilter(next.length === 0 ? [] : next)
+  } else {
+    const next = [...current, id]
+    setLibraryFilter(next.length === libraries.value.length ? [] : next)
+  }
+}
+
+function handleSelectAll() {
+  setLibraryFilter([])
+}
+
+function handleToggleChart(id: StatisticsChartId) {
+  toggleVisibility(id)
+}
+
+function handleReorder(newList: ChartConfigEntry[]) {
+  reorder(newList)
+}
+
+function handleReset() {
+  resetToDefaults()
+}
+
+function openConfig() {
+  configOpen.value = true
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 pt-4">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-foreground text-[22px] font-semibold">Library Statistics</h1>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <Popover v-if="libraries.length > 1">
+          <PopoverTrigger as-child>
+            <button
+              :class="[
+                'flex h-8 items-center gap-1.5 rounded-md border px-3 text-sm transition-colors',
+                isFiltered ? 'border-primary/40 bg-primary/10 text-primary hover:bg-primary/15' : 'border-border text-foreground hover:bg-accent',
+              ]"
+            >
+              {{ libraryLabel }}
+              <ChevronDown class="size-3.5 opacity-60" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent align="end" class="w-56 p-1.5">
+            <button
+              class="text-muted-foreground hover:bg-accent hover:text-foreground flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm"
+              @click="handleSelectAll"
+            >
+              <div :class="['flex size-4 items-center justify-center rounded border', !isFiltered ? 'border-primary bg-primary' : 'border-border']">
+                <Check v-if="!isFiltered" class="text-primary-foreground size-2.5" />
+              </div>
+              All Libraries
+            </button>
+            <div class="border-border my-1 border-t" />
+            <button
+              v-for="lib in libraries"
+              :key="lib.id"
+              class="hover:bg-accent flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm"
+              @click="handleToggleLibrary(lib.id)"
+            >
+              <div
+                :class="[
+                  'flex size-4 shrink-0 items-center justify-center rounded border',
+                  isLibrarySelected(lib.id) ? 'border-primary bg-primary' : 'border-border',
+                ]"
+              >
+                <Check v-if="isLibrarySelected(lib.id)" class="text-primary-foreground size-2.5" />
+              </div>
+              <span class="truncate">{{ lib.name }}</span>
+            </button>
+          </PopoverContent>
+        </Popover>
+
+        <button
+          class="bg-muted text-foreground hover:bg-muted/70 flex h-8 items-center gap-1.5 rounded-md px-2.5 text-sm font-medium transition-colors"
+          @click="openConfig"
+        >
+          <Settings2 class="size-3.5" />
+          Configure
+        </button>
+      </div>
+    </div>
+
+    <StatisticsSummaryCard />
+
+    <Sheet v-model:open="configOpen">
+      <SheetContent side="right" class="w-[420px] sm:max-w-[420px]">
+        <SheetHeader>
+          <div class="flex items-center justify-between pr-8">
+            <SheetTitle>Configure Charts</SheetTitle>
+            <span class="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium tabular-nums">
+              {{ visibleCount }} / {{ totalCount }}
+            </span>
+          </div>
+          <SheetDescription>Drag to reorder, toggle to show or hide.</SheetDescription>
+        </SheetHeader>
+
+        <div class="flex-1 overflow-y-auto px-4">
+          <VueDraggable
+            :model-value="orderedCharts"
+            class="flex flex-col gap-2"
+            handle=".drawer-drag-handle"
+            :animation="150"
+            @update:model-value="handleReorder"
+          >
+            <div
+              v-for="chart in orderedCharts"
+              :key="chart.id"
+              :class="[
+                'border-border/50 bg-muted/40 flex items-center gap-3 rounded-lg border px-3 py-2.5 transition-opacity',
+                !chart.visible && 'opacity-50',
+              ]"
+            >
+              <GripVertical class="text-muted-foreground/60 drawer-drag-handle size-4 shrink-0 cursor-grab active:cursor-grabbing" />
+              <component :is="CHART_ICONS[chart.id]" :class="['size-4 shrink-0', chart.visible ? 'text-primary' : 'text-muted-foreground']" />
+              <span :class="['flex-1 text-sm', chart.visible ? 'text-foreground' : 'text-muted-foreground']">
+                {{ CHART_LABELS[chart.id] }}
+              </span>
+              <ToggleSwitch :model-value="chart.visible" @update:model-value="handleToggleChart(chart.id)" />
+            </div>
+          </VueDraggable>
+        </div>
+
+        <SheetFooter>
+          <button
+            class="text-muted-foreground hover:text-foreground w-full rounded-md py-2 text-sm transition-colors hover:bg-transparent"
+            @click="handleReset"
+          >
+            Reset to defaults
+          </button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+
+    <StatisticsGrid />
+  </div>
+</template>
diff --git a/client/src/features/statistics/components/StatisticsSummaryCard.vue b/client/src/features/statistics/components/StatisticsSummaryCard.vue
new file mode 100644
index 000000000..b2ed20cd8
--- /dev/null
+++ b/client/src/features/statistics/components/StatisticsSummaryCard.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { BarChart3, BookOpen, Building2, CalendarPlus, CalendarRange, Globe, Layers, Tags, Users } from 'lucide-vue-next'
+
+import { useStatisticsSummary } from '../composables/useStatisticsSummary'
+
+const { data, loading } = useStatisticsSummary()
+
+function formatBytes(bytes: number): string {
+  if (bytes >= 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1)} GB`
+  if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1)} MB`
+  return `${(bytes / 1024).toFixed(1)} KB`
+}
+
+function formatNumber(n: number): string {
+  return n.toLocaleString()
+}
+
+const publicationRange = computed(() => {
+  if (!data.value) return '-'
+  const { publicationYearMin: min, publicationYearMax: max } = data.value
+  if (!min && !max) return '-'
+  if (min === max) return String(min)
+  return `${min} - ${max}`
+})
+
+const kpis = computed(() => [
+  { icon: BookOpen, label: 'Books', value: data.value ? formatNumber(data.value.totalBooks) : '-', colorIndex: 1 },
+  { icon: Users, label: 'Authors', value: data.value ? formatNumber(data.value.totalAuthors) : '-', colorIndex: 2 },
+  { icon: Layers, label: 'Series', value: data.value ? formatNumber(data.value.totalSeries) : '-', colorIndex: 3 },
+  { icon: Building2, label: 'Publishers', value: data.value ? formatNumber(data.value.totalPublishers) : '-', colorIndex: 4 },
+  { icon: BarChart3, label: 'Storage', value: data.value ? formatBytes(data.value.totalStorageBytes) : '-', colorIndex: 5 },
+  { icon: Tags, label: 'Genres', value: data.value ? formatNumber(data.value.totalGenres) : '-', colorIndex: 6 },
+  { icon: Globe, label: 'Languages', value: data.value ? formatNumber(data.value.totalLanguages) : '-', colorIndex: 7 },
+  { icon: CalendarRange, label: 'Published', value: publicationRange.value, colorIndex: 8 },
+  { icon: CalendarPlus, label: 'This Year', value: data.value ? formatNumber(data.value.booksAddedThisYear) : '-', colorIndex: 9 },
+])
+</script>
+
+<template>
+  <div class="relative overflow-hidden rounded-xl border bg-card">
+    <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/8 to-transparent" />
+    <BarChart3 class="pointer-events-none absolute -right-4 -top-2 opacity-[0.04]" :size="160" aria-hidden="true" />
+
+    <div class="relative p-4">
+      <div class="flex gap-3 overflow-x-auto pb-0.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <div
+          v-for="kpi in kpis"
+          :key="kpi.label"
+          :class="['border-border/60 bg-background/50 flex shrink-0 items-center gap-3 rounded-lg border px-4 py-2.5', loading ? 'opacity-60' : '']"
+        >
+          <div
+            class="shrink-0 rounded-md p-1.5"
+            :style="{
+              backgroundColor: `color-mix(in oklch, var(--chart-icon-${kpi.colorIndex}) 15%, transparent)`,
+              color: `var(--chart-icon-${kpi.colorIndex})`,
+            }"
+          >
+            <component :is="kpi.icon" class="size-4" />
+          </div>
+          <div>
+            <p class="text-foreground text-base font-semibold leading-tight tabular-nums">{{ kpi.value }}</p>
+            <p class="text-muted-foreground text-xs">{{ kpi.label }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/features/statistics/components/StorageByFormatChart.vue b/client/src/features/statistics/components/StorageByFormatChart.vue
new file mode 100644
index 000000000..17b615efe
--- /dev/null
+++ b/client/src/features/statistics/components/StorageByFormatChart.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
+import VChart from 'vue-echarts'
+import { HardDrive } from 'lucide-vue-next'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+import { useStorageByFormat } from '../composables/useStorageByFormat'
+import ChartCard from './ChartCard.vue'
+
+const { data, loading, error } = useStorageByFormat()
+const { md } = useBreakpoints(breakpointsTailwind)
+
+const option = shallowRef({})
+
+function formatBytes(bytes: number): string {
+  if (bytes >= 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1)} GB`
+  if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1)} MB`
+  return `${(bytes / 1024).toFixed(1)} KB`
+}
+
+watchEffect(() => {
+  if (!data.value.items.length) return
+  option.value = {
+    tooltip: {
+      trigger: 'item',
+      confine: true,
+      enterable: false,
+      formatter: (params: { name: string; value: number; percent: number }) => `${params.name}: ${formatBytes(params.value)} (${params.percent}%)`,
+    },
+    legend: {
+      orient: md.value ? 'vertical' : 'horizontal',
+      right: md.value ? '2%' : 'auto',
+      bottom: md.value ? 'auto' : 0,
+      top: md.value ? 'middle' : 'auto',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: md.value ? ['38%', '50%'] : ['50%', '44%'],
+        data: data.value.items.map((item) => ({ name: item.format.toUpperCase(), value: item.sizeBytes })),
+        cursor: 'default',
+        label: { show: false },
+        emphasis: { disabled: true },
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <ChartCard
+    title="Storage by Format"
+    :icon="HardDrive"
+    :color-index="4"
+    :loading
+    :error
+    :empty="!data.items.length"
+    :unknown-count="data.unknownCount"
+  >
+    <VChart :option autoresize style="height: 100%" />
+  </ChartCard>
+</template>
diff --git a/client/src/features/statistics/components/TopAuthorsChart.vue b/client/src/features/statistics/components/TopAuthorsChart.vue
new file mode 100644
index 000000000..6d6e0261f
--- /dev/null
+++ b/client/src/features/statistics/components/TopAuthorsChart.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
+import VChart from 'vue-echarts'
+import { Users } from 'lucide-vue-next'
+
+import { useTopAuthors } from '../composables/useTopAuthors'
+import ChartCard from './ChartCard.vue'
+
+const { data, loading, error } = useTopAuthors()
+const option = shallowRef({})
+
+watchEffect(() => {
+  if (!data.value.items.length) return
+  option.value = {
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      enterable: false,
+      formatter: (params: { name: string; value: number }[]) => {
+        const p = params[0]
+        if (!p) return ''
+        return `${p.name}: <strong>${p.value}</strong> books`
+      },
+    },
+    grid: { left: '3%', right: '3%', bottom: '28%', top: '8%', containLabel: false },
+    xAxis: {
+      type: 'category',
+      data: data.value.items.map((d) => d.name),
+      axisTick: { show: false },
+      axisLabel: {
+        fontSize: 11,
+        rotate: 45,
+        interval: 0,
+        overflow: 'truncate',
+        width: 80,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      axisLabel: { fontSize: 11 },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: data.value.items.map((d) => d.count),
+        cursor: 'default',
+        itemStyle: { borderRadius: [3, 3, 0, 0] },
+        barMaxWidth: 32,
+        emphasis: { disabled: true },
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <ChartCard title="Top 25 Authors" :icon="Users" :color-index="6" :loading :error :empty="!data.items.length">
+    <VChart :option autoresize style="height: 100%" />
+  </ChartCard>
+</template>
diff --git a/client/src/features/statistics/composables/useBooksAddedOverTime.ts b/client/src/features/statistics/composables/useBooksAddedOverTime.ts
new file mode 100644
index 000000000..3c622a9be
--- /dev/null
+++ b/client/src/features/statistics/composables/useBooksAddedOverTime.ts
@@ -0,0 +1,29 @@
+import { onMounted, ref, watch } from 'vue'
+
+import type { BooksAddedDataPoint, StatisticsResult } from '@projectx/types'
+import { fetchBooksAddedOverTime } from '../api/statistics.api'
+import { useStatisticsConfig } from './useStatisticsConfig'
+
+export function useBooksAddedOverTime() {
+  const data = ref<StatisticsResult<BooksAddedDataPoint>>({ items: [], unknownCount: 0 })
+  const loading = ref(true)
+  const error = ref(false)
+
+  const { filters } = useStatisticsConfig()
+
+  async function load() {
+    loading.value = true
+    error.value = false
+    try {
+      data.value = await fetchBooksAddedOverTime(filters.value)
+    } catch {
+      error.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watch([() => filters.value.libraryIds.join(','), () => filters.value.booksOverTimeGranularity, () => filters.value.booksOverTimeRange], load)
+  onMounted(load)
+  return { data, loading, error }
+}
diff --git a/client/src/features/statistics/composables/useFormatDistribution.ts b/client/src/features/statistics/composables/useFormatDistribution.ts
new file mode 100644
index 000000000..e2e800908
--- /dev/null
+++ b/client/src/features/statistics/composables/useFormatDistribution.ts
@@ -0,0 +1,29 @@
+import { onMounted, ref, watch } from 'vue'
+
+import type { FormatDistributionItem, StatisticsResult } from '@projectx/types'
+import { fetchFormatDistribution } from '../api/statistics.api'
+import { useStatisticsConfig } from './useStatisticsConfig'
+
+export function useFormatDistribution() {
+  const data = ref<StatisticsResult<FormatDistributionItem>>({ items: [], unknownCount: 0 })
+  const loading = ref(true)
+  const error = ref(false)
+
+  const { filters } = useStatisticsConfig()
+
+  async function load() {
+    loading.value = true
+    error.value = false
+    try {
+      data.value = await fetchFormatDistribution(filters.value)
+    } catch {
+      error.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watch(() => filters.value.libraryIds.join(','), load)
+  onMounted(load)
+  return { data, loading, error }
+}
diff --git a/client/src/features/statistics/composables/useGenreDistribution.ts b/client/src/features/statistics/composables/useGenreDistribution.ts
new file mode 100644
index 000000000..b4117e256
--- /dev/null
+++ b/client/src/features/statistics/composables/useGenreDistribution.ts
@@ -0,0 +1,29 @@
+import { onMounted, ref, watch } from 'vue'
+
+import type { GenreDistributionItem, StatisticsResult } from '@projectx/types'
+import { fetchGenreDistribution } from '../api/statistics.api'
+import { useStatisticsConfig } from './useStatisticsConfig'
+
+export function useGenreDistribution() {
+  const data = ref<StatisticsResult<GenreDistributionItem>>({ items: [], unknownCount: 0 })
+  const loading = ref(true)
+  const error = ref(false)
+
+  const { filters } = useStatisticsConfig()
+
+  async function load() {
+    loading.value = true
+    error.value = false
+    try {
+      data.value = await fetchGenreDistribution(filters.value)
+    } catch {
+      error.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watch(() => filters.value.libraryIds.join(','), load)
+  onMounted(load)
+  return { data, loading, error }
+}
diff --git a/client/src/features/statistics/composables/useLanguageDistribution.ts b/client/src/features/statistics/composables/useLanguageDistribution.ts
new file mode 100644
index 000000000..08fd2c1a9
--- /dev/null
+++ b/client/src/features/statistics/composables/useLanguageDistribution.ts
@@ -0,0 +1,29 @@
+import { onMounted, ref, watch } from 'vue'
+
+import type { LanguageDistributionItem, StatisticsResult } from '@projectx/types'
+import { fetchLanguageDistribution } from '../api/statistics.api'
+import { useStatisticsConfig } from './useStatisticsConfig'
+
+export function useLanguageDistribution() {
+  const data = ref<StatisticsResult<LanguageDistributionItem>>({ items: [], unknownCount: 0 })
+  const loading = ref(true)
+  const error = ref(false)
+
+  const { filters } = useStatisticsConfig()
+
+  async function load() {
+    loading.value = true
+    error.value = false
+    try {
+      data.value = await fetchLanguageDistribution(filters.value)
+    } catch {
+      error.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watch(() => filters.value.libraryIds.join(','), load)
+  onMounted(load)
+  return { data, loading, error }
+}
diff --git a/client/src/features/statistics/composables/useMetadataCompleteness.ts b/client/src/features/statistics/composables/useMetadataCompleteness.ts
new file mode 100644
index 000000000..dfdbee0cd
--- /dev/null
+++ b/client/src/features/statistics/composables/useMetadataCompleteness.ts
@@ -0,0 +1,29 @@
+import { onMounted, ref, watch } from 'vue'
+
+import type { MetadataCompletenessItem, StatisticsResult } from '@projectx/types'
+import { fetchMetadataCompleteness } from '../api/statistics.api'
+import { useStatisticsConfig } from './useStatisticsConfig'
+
+export function useMetadataCompleteness() {
+  const data = ref<StatisticsResult<MetadataCompletenessItem>>({ items: [], unknownCount: 0 })
+  const loading = ref(true)
+  const error = ref(false)
+
+  const { filters } = useStatisticsConfig()
+
+  async function load() {
+    loading.value = true
+    error.value = false
+    try {
+      data.value = await fetchMetadataCompleteness(filters.value)
+    } catch {
+      error.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watch(() => filters.value.libraryIds.join(','), load)
+  onMounted(load)
+  return { data, loading, error }
+}
diff --git a/client/src/features/statistics/composables/usePublicationDecade.ts b/client/src/features/statistics/composables/usePublicationDecade.ts
new file mode 100644
index 000000000..d773bfccb
--- /dev/null
+++ b/client/src/features/statistics/composables/usePublicationDecade.ts
@@ -0,0 +1,29 @@
+import { onMounted, ref, watch } from 'vue'
+
+import type { PublicationDecadeItem, StatisticsResult } from '@projectx/types'
+import { fetchPublicationDecade } from '../api/statistics.api'
+import { useStatisticsConfig } from './useStatisticsConfig'
+
+export function usePublicationDecade() {
+  const data = ref<StatisticsResult<PublicationDecadeItem>>({ items: [], unknownCount: 0 })
+  const loading = ref(true)
+  const error = ref(false)
+
+  const { filters } = useStatisticsConfig()
+
+  async function load() {
+    loading.value = true
+    error.value = false
+    try {
+      data.value = await fetchPublicationDecade(filters.value)
+    } catch {
+      error.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watch(() => filters.value.libraryIds.join(','), load)
+  onMounted(load)
+  return { data, loading, error }
+}
diff --git a/client/src/features/statistics/composables/useStatisticsConfig.ts b/client/src/features/statistics/composables/useStatisticsConfig.ts
new file mode 100644
index 000000000..6d8ab0a11
--- /dev/null
+++ b/client/src/features/statistics/composables/useStatisticsConfig.ts
@@ -0,0 +1,121 @@
+import { computed, ref } from 'vue'
+import { toast } from 'vue-sonner'
+
+import type {
+  ChartConfigEntry,
+  StatisticsChartId,
+  StatisticsDateRange,
+  StatisticsFilterConfig,
+  StatisticsGranularity,
+  StatisticsSettings,
+} from '@projectx/types'
+import { api } from '@/lib/api'
+import { useAuth } from '@/features/auth/composables/useAuth'
+
+// Must stay in sync with CHART_REGISTRY in StatisticsGrid.vue.
+const KNOWN_CHART_IDS: StatisticsChartId[] = [
+  'format-distribution',
+  'language-distribution',
+  'books-added-over-time',
+  'storage-by-format',
+  'publication-decade',
+  'top-authors',
+  'metadata-completeness',
+  'genre-distribution',
+]
+
+const DEFAULT_FILTERS: StatisticsFilterConfig = {
+  libraryIds: [],
+  booksOverTimeGranularity: 'monthly',
+  booksOverTimeRange: 'all-time',
+}
+
+const config = ref<ChartConfigEntry[]>([])
+const filters = ref<StatisticsFilterConfig>({ ...DEFAULT_FILTERS })
+
+function normalizeCharts(saved: ChartConfigEntry[] | undefined): ChartConfigEntry[] {
+  const knownSet = new Set<StatisticsChartId>(KNOWN_CHART_IDS)
+  const filtered = (saved ?? []).filter((e) => knownSet.has(e.id))
+  const savedIds = new Set(filtered.map((e) => e.id))
+  const newEntries: ChartConfigEntry[] = KNOWN_CHART_IDS.filter((id) => !savedIds.has(id)).map((id, i) => ({
+    id,
+    visible: true,
+    order: filtered.length + i,
+  }))
+  return [...filtered, ...newEntries]
+}
+
+function normalizeFilters(saved: StatisticsFilterConfig | undefined): StatisticsFilterConfig {
+  return {
+    libraryIds: saved?.libraryIds ?? DEFAULT_FILTERS.libraryIds,
+    booksOverTimeGranularity: saved?.booksOverTimeGranularity ?? DEFAULT_FILTERS.booksOverTimeGranularity,
+    booksOverTimeRange: saved?.booksOverTimeRange ?? DEFAULT_FILTERS.booksOverTimeRange,
+  }
+}
+
+async function persist() {
+  const payload: StatisticsSettings = { charts: config.value, filters: filters.value }
+  try {
+    await api('/api/v1/users/me', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ settings: { statisticsConfig: payload } }),
+    })
+  } catch {
+    toast.error('Failed to save chart configuration')
+  }
+}
+
+let saveTimer: ReturnType<typeof setTimeout> | null = null
+function scheduleSave() {
+  if (saveTimer) clearTimeout(saveTimer)
+  saveTimer = setTimeout(persist, 600)
+}
+
+export function useStatisticsConfig() {
+  const { user } = useAuth()
+
+  function init() {
+    const saved = user.value?.settings?.statisticsConfig
+    config.value = normalizeCharts(saved?.charts)
+    filters.value = normalizeFilters(saved?.filters)
+  }
+
+  const orderedCharts = computed(() => [...config.value].sort((a, b) => a.order - b.order))
+  const visibleCharts = computed(() => orderedCharts.value.filter((c) => c.visible))
+
+  function toggleVisibility(id: StatisticsChartId) {
+    const entry = config.value.find((c) => c.id === id)
+    if (!entry) return
+    entry.visible = !entry.visible
+    scheduleSave()
+  }
+
+  function reorder(newOrder: ChartConfigEntry[]) {
+    config.value = newOrder.map((entry, i) => ({ ...entry, order: i }))
+    scheduleSave()
+  }
+
+  function setLibraryFilter(ids: number[]) {
+    filters.value = { ...filters.value, libraryIds: ids }
+    scheduleSave()
+  }
+
+  function setGranularity(g: StatisticsGranularity) {
+    filters.value = { ...filters.value, booksOverTimeGranularity: g }
+    scheduleSave()
+  }
+
+  function setDateRange(r: StatisticsDateRange) {
+    filters.value = { ...filters.value, booksOverTimeRange: r }
+    scheduleSave()
+  }
+
+  function resetToDefaults() {
+    config.value = KNOWN_CHART_IDS.map((id, i) => ({ id, visible: true, order: i }))
+    filters.value = { ...DEFAULT_FILTERS }
+    scheduleSave()
+  }
+
+  return { orderedCharts, visibleCharts, filters, init, toggleVisibility, reorder, resetToDefaults, setLibraryFilter, setGranularity, setDateRange }
+}
diff --git a/client/src/features/statistics/composables/useStatisticsSummary.ts b/client/src/features/statistics/composables/useStatisticsSummary.ts
new file mode 100644
index 000000000..5fb0eb5af
--- /dev/null
+++ b/client/src/features/statistics/composables/useStatisticsSummary.ts
@@ -0,0 +1,27 @@
+import { ref, watch } from 'vue'
+
+import type { StatisticsSummary } from '@projectx/types'
+
+import { fetchStatisticsSummary } from '../api/statistics.api'
+import { useStatisticsConfig } from './useStatisticsConfig'
+
+export function useStatisticsSummary() {
+  const { filters } = useStatisticsConfig()
+  const data = ref<StatisticsSummary | null>(null)
+  const loading = ref(true)
+
+  async function load() {
+    loading.value = true
+    try {
+      data.value = await fetchStatisticsSummary(filters.value)
+    } catch {
+      // leave stale data on error — header degrades gracefully with dashes
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watch(() => filters.value.libraryIds.join(','), load, { immediate: true })
+
+  return { data, loading }
+}
diff --git a/client/src/features/statistics/composables/useStorageByFormat.ts b/client/src/features/statistics/composables/useStorageByFormat.ts
new file mode 100644
index 000000000..acc52896b
--- /dev/null
+++ b/client/src/features/statistics/composables/useStorageByFormat.ts
@@ -0,0 +1,29 @@
+import { onMounted, ref, watch } from 'vue'
+
+import type { StorageByFormatItem, StatisticsResult } from '@projectx/types'
+import { fetchStorageByFormat } from '../api/statistics.api'
+import { useStatisticsConfig } from './useStatisticsConfig'
+
+export function useStorageByFormat() {
+  const data = ref<StatisticsResult<StorageByFormatItem>>({ items: [], unknownCount: 0 })
+  const loading = ref(true)
+  const error = ref(false)
+
+  const { filters } = useStatisticsConfig()
+
+  async function load() {
+    loading.value = true
+    error.value = false
+    try {
+      data.value = await fetchStorageByFormat(filters.value)
+    } catch {
+      error.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watch(() => filters.value.libraryIds.join(','), load)
+  onMounted(load)
+  return { data, loading, error }
+}
diff --git a/client/src/features/statistics/composables/useTopAuthors.ts b/client/src/features/statistics/composables/useTopAuthors.ts
new file mode 100644
index 000000000..93916f258
--- /dev/null
+++ b/client/src/features/statistics/composables/useTopAuthors.ts
@@ -0,0 +1,29 @@
+import { onMounted, ref, watch } from 'vue'
+
+import type { TopAuthorItem, StatisticsResult } from '@projectx/types'
+import { fetchTopAuthors } from '../api/statistics.api'
+import { useStatisticsConfig } from './useStatisticsConfig'
+
+export function useTopAuthors() {
+  const data = ref<StatisticsResult<TopAuthorItem>>({ items: [], unknownCount: 0 })
+  const loading = ref(true)
+  const error = ref(false)
+
+  const { filters } = useStatisticsConfig()
+
+  async function load() {
+    loading.value = true
+    error.value = false
+    try {
+      data.value = await fetchTopAuthors(filters.value)
+    } catch {
+      error.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watch(() => filters.value.libraryIds.join(','), load)
+  onMounted(load)
+  return { data, loading, error }
+}
diff --git a/client/src/lib/echarts.ts b/client/src/lib/echarts.ts
new file mode 100644
index 000000000..2592be992
--- /dev/null
+++ b/client/src/lib/echarts.ts
@@ -0,0 +1,59 @@
+import { use, registerTheme } from 'echarts/core'
+import { SVGRenderer } from 'echarts/renderers'
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components'
+
+// SVG renderer: events fire on real DOM elements, not via canvas hit-test.
+// This eliminates the cursor-flicker / hover-disappear bug that canvas
+// hit-test coordinate mismatches cause with this layout.
+use([SVGRenderer, PieChart, BarChart, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
+
+function readCssColor(varName: string): string {
+  const el = document.createElement('span')
+  el.style.color = `var(${varName})`
+  document.body.appendChild(el)
+  const color = getComputedStyle(el).color
+  el.remove()
+  return color
+}
+
+function buildTheme() {
+  const border = readCssColor('--border')
+  const mutedFg = readCssColor('--muted-foreground')
+  const axisConfig = {
+    axisLine: { show: true, lineStyle: { color: border } },
+    axisTick: { show: false },
+    axisLabel: { show: true, color: mutedFg },
+    splitLine: { show: true, lineStyle: { color: [border] } },
+    splitArea: { show: false },
+  }
+  return {
+    color: [
+      readCssColor('--chart-1'),
+      readCssColor('--chart-2'),
+      readCssColor('--chart-3'),
+      readCssColor('--chart-4'),
+      readCssColor('--chart-5'),
+      readCssColor('--chart-6'),
+      readCssColor('--chart-7'),
+      readCssColor('--chart-8'),
+      readCssColor('--chart-9'),
+      readCssColor('--chart-10'),
+    ],
+    backgroundColor: 'transparent',
+    legend: { textStyle: { color: readCssColor('--foreground') } },
+    tooltip: {
+      backgroundColor: readCssColor('--card'),
+      borderColor: border,
+      textStyle: { color: readCssColor('--card-foreground') },
+    },
+    categoryAxis: axisConfig,
+    valueAxis: axisConfig,
+    logAxis: axisConfig,
+    timeAxis: axisConfig,
+  }
+}
+
+export function initChartThemes(version: number = 0): void {
+  registerTheme(`projectx-v${version}`, buildTheme())
+}
diff --git a/client/src/main.ts b/client/src/main.ts
index 6e70a93bc..b2d3e1709 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,4 +1,5 @@
 import './assets/main.css'
+import './lib/echarts'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 63727e873..4f2e8455c 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -116,6 +116,11 @@ const router = createRouter({
           name: 'staging',
           component: () => import('@/views/StagingView.vue'),
         },
+        {
+          path: '/statistics',
+          name: 'statistics',
+          component: () => import('@/features/statistics/components/StatisticsPage.vue'),
+        },
         {
           path: '/library/:id',
           name: 'library',
diff --git a/packages/types/src/auth.ts b/packages/types/src/auth.ts
index b3799b6dc..8c01e6991 100644
--- a/packages/types/src/auth.ts
+++ b/packages/types/src/auth.ts
@@ -1,5 +1,6 @@
 export interface UserSettings {
   syncReaderPreferences?: boolean;
+  statisticsConfig?: import('./statistics').StatisticsSettings;
 }
 
 export interface AuthUser {
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index aa4405df7..f99048db9 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -20,3 +20,4 @@ export * from "./epub";
 export * from "./author";
 export * from "./metadata-score";
 export * from "./book-metadata-fetch";
+export * from "./statistics";
diff --git a/packages/types/src/statistics.ts b/packages/types/src/statistics.ts
new file mode 100644
index 000000000..3cde5fa0b
--- /dev/null
+++ b/packages/types/src/statistics.ts
@@ -0,0 +1,94 @@
+export type StatisticsChartId =
+  | 'format-distribution'
+  | 'language-distribution'
+  | 'books-added-over-time'
+  | 'storage-by-format'
+  | 'publication-decade'
+  | 'top-authors'
+  | 'metadata-completeness'
+  | 'genre-distribution';
+
+export type StatisticsGranularity = 'monthly' | 'yearly';
+export type StatisticsDateRange = 'last-year' | 'last-5-years' | 'all-time';
+
+// Stored in users.settings JSONB under key 'statisticsConfig'.
+// Does NOT include 'wide' — that is fixed per chart type in CHART_REGISTRY.
+export interface ChartConfigEntry {
+  id: StatisticsChartId;
+  visible: boolean;
+  order: number;
+}
+
+export interface StatisticsFilterConfig {
+  libraryIds: number[];
+  booksOverTimeGranularity: StatisticsGranularity;
+  booksOverTimeRange: StatisticsDateRange;
+}
+
+export interface StatisticsSettings {
+  charts: ChartConfigEntry[];
+  filters: StatisticsFilterConfig;
+}
+
+// Generic wrapper returned by all statistics endpoints.
+// unknownCount = books excluded due to NULL in the relevant metadata field.
+// Is 0 for charts where the source column is never NULL (format, addedAt).
+export interface StatisticsResult<T> {
+  items: T[];
+  unknownCount: number;
+}
+
+export interface FormatDistributionItem {
+  format: string;
+  count: number;
+}
+
+export interface LanguageDistributionItem {
+  language: string;
+  count: number;
+}
+
+export interface BooksAddedDataPoint {
+  year: number;
+  month: number;
+  count: number;
+}
+
+export interface StorageByFormatItem {
+  format: string;
+  sizeBytes: number;
+}
+
+export interface PublicationDecadeItem {
+  decade: number;
+  count: number;
+}
+
+export interface TopAuthorItem {
+  name: string;
+  count: number;
+}
+
+export interface MetadataCompletenessItem {
+  field: string;
+  presentCount: number;
+  totalCount: number;
+}
+
+export interface GenreDistributionItem {
+  genre: string;
+  count: number;
+}
+
+export interface StatisticsSummary {
+  totalBooks: number;
+  totalAuthors: number;
+  totalSeries: number;
+  totalPublishers: number;
+  totalStorageBytes: number;
+  totalGenres: number;
+  totalLanguages: number;
+  publicationYearMin: number | null;
+  publicationYearMax: number | null;
+  booksAddedThisYear: number;
+}
diff --git a/server/src/app.module.ts b/server/src/app.module.ts
index 969169763..6d959301b 100644
--- a/server/src/app.module.ts
+++ b/server/src/app.module.ts
@@ -44,6 +44,7 @@ import { UserModule } from './modules/user/user.module';
 import { AuthorsModule } from './modules/authors/authors.module';
 import { BookMetadataFetchModule } from './modules/book-metadata-fetch/book-metadata-fetch.module';
 import { MetadataScoreModule } from './modules/metadata-score/metadata-score.module';
+import { StatisticsModule } from './modules/statistics/statistics.module';
 
 @Module({
   imports: [
@@ -88,6 +89,7 @@ import { MetadataScoreModule } from './modules/metadata-score/metadata-score.mod
     StagingModule,
     EmailModule,
     MetadataScoreModule,
+    StatisticsModule,
   ],
   providers: [
     { provide: APP_GUARD, useClass: JwtAuthGuard },
diff --git a/server/src/modules/statistics/dto/books-over-time-query.dto.ts b/server/src/modules/statistics/dto/books-over-time-query.dto.ts
new file mode 100644
index 000000000..0e5940520
--- /dev/null
+++ b/server/src/modules/statistics/dto/books-over-time-query.dto.ts
@@ -0,0 +1,15 @@
+import { IsEnum, IsOptional } from 'class-validator';
+
+import type { StatisticsDateRange, StatisticsGranularity } from '@projectx/types';
+
+import { StatisticsFilterQueryDto } from './statistics-filter-query.dto';
+
+export class BooksOverTimeQueryDto extends StatisticsFilterQueryDto {
+  @IsOptional()
+  @IsEnum(['monthly', 'yearly'])
+  granularity?: StatisticsGranularity;
+
+  @IsOptional()
+  @IsEnum(['last-year', 'last-5-years', 'all-time'])
+  range?: StatisticsDateRange;
+}
diff --git a/server/src/modules/statistics/dto/statistics-filter-query.dto.ts b/server/src/modules/statistics/dto/statistics-filter-query.dto.ts
new file mode 100644
index 000000000..eeff199a2
--- /dev/null
+++ b/server/src/modules/statistics/dto/statistics-filter-query.dto.ts
@@ -0,0 +1,11 @@
+import { Transform, Type } from 'class-transformer';
+import { IsArray, IsInt, IsOptional } from 'class-validator';
+
+export class StatisticsFilterQueryDto {
+  @IsOptional()
+  @Transform(({ value }) => (Array.isArray(value) ? value : value != null ? [value] : []))
+  @Type(() => Number)
+  @IsArray()
+  @IsInt({ each: true })
+  libraryIds?: number[];
+}
diff --git a/server/src/modules/statistics/statistics.controller.ts b/server/src/modules/statistics/statistics.controller.ts
new file mode 100644
index 000000000..c61d26501
--- /dev/null
+++ b/server/src/modules/statistics/statistics.controller.ts
@@ -0,0 +1,57 @@
+import { Controller, Get, Query } from '@nestjs/common';
+
+import { CurrentUser } from '../../common/decorators/current-user.decorator';
+import type { RequestUser } from '../../common/types/request-user';
+import { BooksOverTimeQueryDto } from './dto/books-over-time-query.dto';
+import { StatisticsFilterQueryDto } from './dto/statistics-filter-query.dto';
+import { StatisticsService } from './statistics.service';
+
+@Controller('statistics')
+export class StatisticsController {
+  constructor(private readonly statisticsService: StatisticsService) {}
+
+  @Get('format-distribution')
+  getFormatDistribution(@CurrentUser() user: RequestUser, @Query() query: StatisticsFilterQueryDto) {
+    return this.statisticsService.getFormatDistribution(user, query);
+  }
+
+  @Get('language-distribution')
+  getLanguageDistribution(@CurrentUser() user: RequestUser, @Query() query: StatisticsFilterQueryDto) {
+    return this.statisticsService.getLanguageDistribution(user, query);
+  }
+
+  @Get('books-added-over-time')
+  getBooksAddedOverTime(@CurrentUser() user: RequestUser, @Query() query: BooksOverTimeQueryDto) {
+    return this.statisticsService.getBooksAddedOverTime(user, query);
+  }
+
+  @Get('storage-by-format')
+  getStorageByFormat(@CurrentUser() user: RequestUser, @Query() query: StatisticsFilterQueryDto) {
+    return this.statisticsService.getStorageByFormat(user, query);
+  }
+
+  @Get('publication-decade')
+  getPublicationDecade(@CurrentUser() user: RequestUser, @Query() query: StatisticsFilterQueryDto) {
+    return this.statisticsService.getPublicationDecade(user, query);
+  }
+
+  @Get('top-authors')
+  getTopAuthors(@CurrentUser() user: RequestUser, @Query() query: StatisticsFilterQueryDto) {
+    return this.statisticsService.getTopAuthors(user, query);
+  }
+
+  @Get('metadata-completeness')
+  getMetadataCompleteness(@CurrentUser() user: RequestUser, @Query() query: StatisticsFilterQueryDto) {
+    return this.statisticsService.getMetadataCompleteness(user, query);
+  }
+
+  @Get('genre-distribution')
+  getGenreDistribution(@CurrentUser() user: RequestUser, @Query() query: StatisticsFilterQueryDto) {
+    return this.statisticsService.getGenreDistribution(user, query);
+  }
+
+  @Get('summary')
+  getSummary(@CurrentUser() user: RequestUser, @Query() query: StatisticsFilterQueryDto) {
+    return this.statisticsService.getSummary(user, query);
+  }
+}
diff --git a/server/src/modules/statistics/statistics.module.ts b/server/src/modules/statistics/statistics.module.ts
new file mode 100644
index 000000000..95faa5b56
--- /dev/null
+++ b/server/src/modules/statistics/statistics.module.ts
@@ -0,0 +1,11 @@
+import { Module } from '@nestjs/common';
+
+import { StatisticsController } from './statistics.controller';
+import { StatisticsRepository } from './statistics.repository';
+import { StatisticsService } from './statistics.service';
+
+@Module({
+  controllers: [StatisticsController],
+  providers: [StatisticsService, StatisticsRepository],
+})
+export class StatisticsModule {}
diff --git a/server/src/modules/statistics/statistics.repository.ts b/server/src/modules/statistics/statistics.repository.ts
new file mode 100644
index 000000000..1da6b26ef
--- /dev/null
+++ b/server/src/modules/statistics/statistics.repository.ts
@@ -0,0 +1,293 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { and, desc, eq, gte, inArray, isNotNull, isNull, sql } from 'drizzle-orm';
+import type { NodePgDatabase } from 'drizzle-orm/node-postgres';
+
+import type { StatisticsDateRange, StatisticsGranularity } from '@projectx/types';
+
+import { DB } from '../../db';
+import * as schema from '../../db/schema';
+import { bookAuthors, bookFiles, bookGenres, bookMetadata, books, genres, authors, userLibraryAccess } from '../../db/schema';
+
+type Db = NodePgDatabase<typeof schema>;
+
+@Injectable()
+export class StatisticsRepository {
+  constructor(@Inject(DB) private readonly db: Db) {}
+
+  private async getAccessibleLibraryIds(userId: number, isSuperuser: boolean): Promise<number[] | null> {
+    if (isSuperuser) return null;
+    const rows = await this.db.select({ libraryId: userLibraryAccess.libraryId }).from(userLibraryAccess).where(eq(userLibraryAccess.userId, userId));
+    return rows.map((r) => r.libraryId);
+  }
+
+  private intersectLibraryIds(accessible: number[] | null, requested: number[] | undefined): number[] | null {
+    if (!requested || requested.length === 0) return accessible;
+    if (accessible === null) return requested;
+    const set = new Set(accessible);
+    return requested.filter((id) => set.has(id));
+  }
+
+  private libraryFilter(libraryIds: number[] | null) {
+    if (libraryIds === null) return undefined;
+    if (libraryIds.length === 0) return sql`false`;
+    return inArray(books.libraryId, libraryIds);
+  }
+
+  async formatDistribution(userId: number, isSuperuser: boolean, filterLibraryIds?: number[]) {
+    const accessible = await this.getAccessibleLibraryIds(userId, isSuperuser);
+    const filter = this.libraryFilter(this.intersectLibraryIds(accessible, filterLibraryIds));
+    return this.db
+      .select({
+        format: bookFiles.format,
+        count: sql<number>`count(distinct ${bookFiles.bookId})::int`,
+      })
+      .from(bookFiles)
+      .innerJoin(books, eq(bookFiles.bookId, books.id))
+      .where(and(isNotNull(bookFiles.format), filter))
+      .groupBy(bookFiles.format)
+      .orderBy(desc(sql<number>`count(distinct ${bookFiles.bookId})`));
+  }
+
+  async languageDistribution(userId: number, isSuperuser: boolean, filterLibraryIds?: number[]) {
+    const accessible = await this.getAccessibleLibraryIds(userId, isSuperuser);
+    const filter = this.libraryFilter(this.intersectLibraryIds(accessible, filterLibraryIds));
+
+    const items = await this.db
+      .select({
+        language: bookMetadata.language,
+        count: sql<number>`count(*)::int`,
+      })
+      .from(books)
+      .innerJoin(bookMetadata, eq(bookMetadata.bookId, books.id))
+      .where(and(isNotNull(bookMetadata.language), filter))
+      .groupBy(bookMetadata.language)
+      .orderBy(desc(sql<number>`count(*)`));
+
+    const [{ unknownCount }] = await this.db
+      .select({ unknownCount: sql<number>`count(*)::int` })
+      .from(books)
+      .leftJoin(bookMetadata, eq(bookMetadata.bookId, books.id))
+      .where(and(isNull(bookMetadata.language), filter));
+
+    return { items, unknownCount };
+  }
+
+  async booksAddedOverTime(
+    userId: number,
+    isSuperuser: boolean,
+    filterLibraryIds?: number[],
+    granularity: StatisticsGranularity = 'monthly',
+    range: StatisticsDateRange = 'all-time',
+  ) {
+    const accessible = await this.getAccessibleLibraryIds(userId, isSuperuser);
+    const libFilter = this.libraryFilter(this.intersectLibraryIds(accessible, filterLibraryIds));
+
+    const rangeFilter =
+      range === 'last-year'
+        ? gte(books.addedAt, sql`now() - interval '1 year'`)
+        : range === 'last-5-years'
+          ? gte(books.addedAt, sql`now() - interval '5 years'`)
+          : undefined;
+
+    if (granularity === 'yearly') {
+      return this.db
+        .select({
+          year: sql<number>`extract(year from ${books.addedAt})::int`,
+          month: sql<number>`0`,
+          count: sql<number>`count(*)::int`,
+        })
+        .from(books)
+        .where(and(libFilter, rangeFilter))
+        .groupBy(sql`extract(year from ${books.addedAt})`)
+        .orderBy(sql`extract(year from ${books.addedAt})`);
+    }
+
+    return this.db
+      .select({
+        year: sql<number>`extract(year from ${books.addedAt})::int`,
+        month: sql<number>`extract(month from ${books.addedAt})::int`,
+        count: sql<number>`count(*)::int`,
+      })
+      .from(books)
+      .where(and(libFilter, rangeFilter))
+      .groupBy(sql`extract(year from ${books.addedAt})`, sql`extract(month from ${books.addedAt})`)
+      .orderBy(sql`extract(year from ${books.addedAt})`, sql`extract(month from ${books.addedAt})`);
+  }
+
+  async storageByFormat(userId: number, isSuperuser: boolean, filterLibraryIds?: number[]) {
+    const accessible = await this.getAccessibleLibraryIds(userId, isSuperuser);
+    const filter = this.libraryFilter(this.intersectLibraryIds(accessible, filterLibraryIds));
+    return this.db
+      .select({
+        format: bookFiles.format,
+        sizeBytes: sql<number>`coalesce(sum(${bookFiles.sizeBytes}), 0)::bigint`,
+      })
+      .from(bookFiles)
+      .innerJoin(books, eq(bookFiles.bookId, books.id))
+      .where(and(isNotNull(bookFiles.format), isNotNull(bookFiles.sizeBytes), filter))
+      .groupBy(bookFiles.format)
+      .orderBy(desc(sql<number>`sum(${bookFiles.sizeBytes})`));
+  }
+
+  async publicationDecade(userId: number, isSuperuser: boolean, filterLibraryIds?: number[]) {
+    const accessible = await this.getAccessibleLibraryIds(userId, isSuperuser);
+    const filter = this.libraryFilter(this.intersectLibraryIds(accessible, filterLibraryIds));
+
+    const items = await this.db
+      .select({
+        decade: sql<number>`(floor(${bookMetadata.publishedYear} / 10) * 10)::int`,
+        count: sql<number>`count(*)::int`,
+      })
+      .from(books)
+      .innerJoin(bookMetadata, eq(bookMetadata.bookId, books.id))
+      .where(and(isNotNull(bookMetadata.publishedYear), filter))
+      .groupBy(sql`floor(${bookMetadata.publishedYear} / 10) * 10`)
+      .orderBy(sql`floor(${bookMetadata.publishedYear} / 10) * 10`);
+
+    const [{ unknownCount }] = await this.db
+      .select({ unknownCount: sql<number>`count(*)::int` })
+      .from(books)
+      .leftJoin(bookMetadata, eq(bookMetadata.bookId, books.id))
+      .where(and(isNull(bookMetadata.publishedYear), filter));
+
+    return { items, unknownCount };
+  }
+
+  async topAuthors(userId: number, isSuperuser: boolean, filterLibraryIds?: number[]) {
+    const accessible = await this.getAccessibleLibraryIds(userId, isSuperuser);
+    const filter = this.libraryFilter(this.intersectLibraryIds(accessible, filterLibraryIds));
+
+    return this.db
+      .select({
+        name: authors.name,
+        count: sql<number>`count(distinct ${bookAuthors.bookId})::int`,
+      })
+      .from(bookAuthors)
+      .innerJoin(authors, eq(authors.id, bookAuthors.authorId))
+      .innerJoin(books, eq(books.id, bookAuthors.bookId))
+      .where(filter)
+      .groupBy(authors.name)
+      .orderBy(desc(sql<number>`count(distinct ${bookAuthors.bookId})`));
+  }
+
+  async metadataCompleteness(userId: number, isSuperuser: boolean, filterLibraryIds?: number[]) {
+    const accessible = await this.getAccessibleLibraryIds(userId, isSuperuser);
+    const filter = this.libraryFilter(this.intersectLibraryIds(accessible, filterLibraryIds));
+
+    const [row] = await this.db
+      .select({
+        total: sql<number>`count(*)::int`,
+        hasTitle: sql<number>`count(${bookMetadata.title})::int`,
+        hasCover: sql<number>`count(${bookMetadata.coverSource})::int`,
+        hasDescription: sql<number>`count(${bookMetadata.description})::int`,
+        hasPublisher: sql<number>`count(${bookMetadata.publisher})::int`,
+        hasYear: sql<number>`count(${bookMetadata.publishedYear})::int`,
+        hasLanguage: sql<number>`count(${bookMetadata.language})::int`,
+        hasPageCount: sql<number>`count(${bookMetadata.pageCount})::int`,
+        hasRating: sql<number>`count(${bookMetadata.rating})::int`,
+        hasSeries: sql<number>`count(${bookMetadata.seriesName})::int`,
+        hasIsbn: sql<number>`count(case when ${bookMetadata.isbn13} is not null or ${bookMetadata.isbn10} is not null then 1 end)::int`,
+        hasAuthor: sql<number>`count(distinct ba.book_id)::int`,
+      })
+      .from(books)
+      .leftJoin(bookMetadata, eq(bookMetadata.bookId, books.id))
+      .leftJoin(sql`(select distinct book_id from book_authors) ba`, sql`ba.book_id = ${books.id}`)
+      .where(filter);
+
+    return row;
+  }
+
+  async genreDistribution(userId: number, isSuperuser: boolean, filterLibraryIds?: number[]) {
+    const accessible = await this.getAccessibleLibraryIds(userId, isSuperuser);
+    const filter = this.libraryFilter(this.intersectLibraryIds(accessible, filterLibraryIds));
+
+    const items = await this.db
+      .select({
+        genre: genres.name,
+        count: sql<number>`count(distinct ${bookGenres.bookId})::int`,
+      })
+      .from(bookGenres)
+      .innerJoin(genres, eq(genres.id, bookGenres.genreId))
+      .innerJoin(books, eq(books.id, bookGenres.bookId))
+      .where(filter)
+      .groupBy(genres.name)
+      .orderBy(desc(sql<number>`count(distinct ${bookGenres.bookId})`));
+
+    const [{ unknownCount }] = await this.db
+      .select({ unknownCount: sql<number>`count(distinct ${books.id})::int` })
+      .from(books)
+      .leftJoin(bookGenres, eq(bookGenres.bookId, books.id))
+      .where(and(isNull(bookGenres.genreId), filter));
+
+    return { items, unknownCount };
+  }
+
+  async getSummary(userId: number, isSuperuser: boolean, filterLibraryIds?: number[]) {
+    const accessible = await this.getAccessibleLibraryIds(userId, isSuperuser);
+    const filter = this.libraryFilter(this.intersectLibraryIds(accessible, filterLibraryIds));
+
+    const [[booksRow], [authorsRow], [seriesRow], [publishersRow], [storageRow], [genresRow], [languagesRow], [pubRangeRow], [thisYearRow]] =
+      await Promise.all([
+        this.db
+          .select({ count: sql<number>`count(distinct ${books.id})::int` })
+          .from(books)
+          .where(filter),
+        this.db
+          .select({ count: sql<number>`count(distinct ${bookAuthors.authorId})::int` })
+          .from(bookAuthors)
+          .innerJoin(books, eq(books.id, bookAuthors.bookId))
+          .where(filter),
+        this.db
+          .select({ count: sql<number>`count(distinct ${bookMetadata.seriesName})::int` })
+          .from(bookMetadata)
+          .innerJoin(books, eq(books.id, bookMetadata.bookId))
+          .where(and(isNotNull(bookMetadata.seriesName), filter)),
+        this.db
+          .select({ count: sql<number>`count(distinct ${bookMetadata.publisher})::int` })
+          .from(bookMetadata)
+          .innerJoin(books, eq(books.id, bookMetadata.bookId))
+          .where(and(isNotNull(bookMetadata.publisher), filter)),
+        this.db
+          .select({ total: sql<number>`coalesce(sum(${bookFiles.sizeBytes}), 0)::bigint` })
+          .from(bookFiles)
+          .innerJoin(books, eq(books.id, bookFiles.bookId))
+          .where(filter),
+        this.db
+          .select({ count: sql<number>`count(distinct ${genres.id})::int` })
+          .from(genres)
+          .innerJoin(bookGenres, eq(bookGenres.genreId, genres.id))
+          .innerJoin(books, eq(books.id, bookGenres.bookId))
+          .where(filter),
+        this.db
+          .select({ count: sql<number>`count(distinct ${bookMetadata.language})::int` })
+          .from(bookMetadata)
+          .innerJoin(books, eq(books.id, bookMetadata.bookId))
+          .where(and(isNotNull(bookMetadata.language), filter)),
+        this.db
+          .select({
+            minYear: sql<number | null>`min(${bookMetadata.publishedYear})`,
+            maxYear: sql<number | null>`max(${bookMetadata.publishedYear})`,
+          })
+          .from(bookMetadata)
+          .innerJoin(books, eq(books.id, bookMetadata.bookId))
+          .where(and(isNotNull(bookMetadata.publishedYear), filter)),
+        this.db
+          .select({ count: sql<number>`count(*)::int` })
+          .from(books)
+          .where(and(gte(books.addedAt, sql`date_trunc('year', current_date)`), filter)),
+      ]);
+
+    return {
+      totalBooks: booksRow.count,
+      totalAuthors: authorsRow.count,
+      totalSeries: seriesRow.count,
+      totalPublishers: publishersRow.count,
+      totalStorageBytes: storageRow.total,
+      totalGenres: genresRow.count,
+      totalLanguages: languagesRow.count,
+      publicationYearMin: pubRangeRow.minYear,
+      publicationYearMax: pubRangeRow.maxYear,
+      booksAddedThisYear: thisYearRow.count,
+    };
+  }
+}
diff --git a/server/src/modules/statistics/statistics.service.ts b/server/src/modules/statistics/statistics.service.ts
new file mode 100644
index 000000000..e414b0e38
--- /dev/null
+++ b/server/src/modules/statistics/statistics.service.ts
@@ -0,0 +1,105 @@
+import { Injectable } from '@nestjs/common';
+
+import type {
+  BooksAddedDataPoint,
+  StatisticsSummary,
+  FormatDistributionItem,
+  GenreDistributionItem,
+  LanguageDistributionItem,
+  MetadataCompletenessItem,
+  PublicationDecadeItem,
+  StatisticsResult,
+  StorageByFormatItem,
+  TopAuthorItem,
+} from '@projectx/types';
+
+import type { RequestUser } from '../../common/types/request-user';
+import type { BooksOverTimeQueryDto } from './dto/books-over-time-query.dto';
+import type { StatisticsFilterQueryDto } from './dto/statistics-filter-query.dto';
+import { StatisticsRepository } from './statistics.repository';
+
+const STATISTICS_TOP_N = 10;
+
+@Injectable()
+export class StatisticsService {
+  constructor(private readonly repo: StatisticsRepository) {}
+
+  async getFormatDistribution(user: RequestUser, query: StatisticsFilterQueryDto): Promise<StatisticsResult<FormatDistributionItem>> {
+    const raw = await this.repo.formatDistribution(user.id, user.isSuperuser, query.libraryIds);
+    const all = raw.map((r) => ({ format: r.format!, count: r.count }));
+    return { items: this.clipToTopN(all, 'format'), unknownCount: 0 };
+  }
+
+  async getLanguageDistribution(user: RequestUser, query: StatisticsFilterQueryDto): Promise<StatisticsResult<LanguageDistributionItem>> {
+    const { items: raw, unknownCount } = await this.repo.languageDistribution(user.id, user.isSuperuser, query.libraryIds);
+    const all = raw.map((r) => ({ language: r.language!, count: r.count }));
+    return { items: this.clipToTopN(all, 'language'), unknownCount };
+  }
+
+  async getBooksAddedOverTime(user: RequestUser, query: BooksOverTimeQueryDto): Promise<StatisticsResult<BooksAddedDataPoint>> {
+    const items = await this.repo.booksAddedOverTime(user.id, user.isSuperuser, query.libraryIds, query.granularity, query.range);
+    return { items, unknownCount: 0 };
+  }
+
+  async getStorageByFormat(user: RequestUser, query: StatisticsFilterQueryDto): Promise<StatisticsResult<StorageByFormatItem>> {
+    const raw = await this.repo.storageByFormat(user.id, user.isSuperuser, query.libraryIds);
+    const all = raw.map((r) => ({ format: r.format!, sizeBytes: Number(r.sizeBytes) }));
+    return { items: this.clipStorageToTopN(all), unknownCount: 0 };
+  }
+
+  async getPublicationDecade(user: RequestUser, query: StatisticsFilterQueryDto): Promise<StatisticsResult<PublicationDecadeItem>> {
+    const { items, unknownCount } = await this.repo.publicationDecade(user.id, user.isSuperuser, query.libraryIds);
+    return { items, unknownCount };
+  }
+
+  async getTopAuthors(user: RequestUser, query: StatisticsFilterQueryDto): Promise<StatisticsResult<TopAuthorItem>> {
+    const raw = await this.repo.topAuthors(user.id, user.isSuperuser, query.libraryIds);
+    const items = raw.slice(0, 25).map((r) => ({ name: r.name, count: r.count }));
+    return { items, unknownCount: 0 };
+  }
+
+  async getMetadataCompleteness(user: RequestUser, query: StatisticsFilterQueryDto): Promise<StatisticsResult<MetadataCompletenessItem>> {
+    const row = await this.repo.metadataCompleteness(user.id, user.isSuperuser, query.libraryIds);
+    const total = row.total ?? 0;
+    const fields: Array<{ field: string; presentCount: number }> = [
+      { field: 'Cover', presentCount: row.hasCover ?? 0 },
+      { field: 'Author', presentCount: row.hasAuthor ?? 0 },
+      { field: 'Description', presentCount: row.hasDescription ?? 0 },
+      { field: 'Publisher', presentCount: row.hasPublisher ?? 0 },
+      { field: 'Year', presentCount: row.hasYear ?? 0 },
+      { field: 'Language', presentCount: row.hasLanguage ?? 0 },
+      { field: 'Page Count', presentCount: row.hasPageCount ?? 0 },
+      { field: 'Rating', presentCount: row.hasRating ?? 0 },
+      { field: 'Series', presentCount: row.hasSeries ?? 0 },
+      { field: 'ISBN', presentCount: row.hasIsbn ?? 0 },
+    ];
+    const items = fields
+      .map((f) => ({ field: f.field, presentCount: f.presentCount, totalCount: total }))
+      .sort((a, b) => b.presentCount - a.presentCount);
+    return { items, unknownCount: 0 };
+  }
+
+  async getGenreDistribution(user: RequestUser, query: StatisticsFilterQueryDto): Promise<StatisticsResult<GenreDistributionItem>> {
+    const { items: raw, unknownCount } = await this.repo.genreDistribution(user.id, user.isSuperuser, query.libraryIds);
+    const items = raw.slice(0, 25).map((r) => ({ genre: r.genre, count: r.count }));
+    return { items, unknownCount };
+  }
+
+  private clipToTopN<T extends { count: number }>(items: T[], labelKey: keyof T, n = STATISTICS_TOP_N): T[] {
+    if (items.length <= n) return items;
+    const top = items.slice(0, n);
+    const otherCount = items.slice(n).reduce((s, item) => s + item.count, 0);
+    return [...top, { [labelKey]: 'Other', count: otherCount } as unknown as T];
+  }
+
+  private clipStorageToTopN(items: StorageByFormatItem[]): StorageByFormatItem[] {
+    if (items.length <= STATISTICS_TOP_N) return items;
+    const top = items.slice(0, STATISTICS_TOP_N);
+    const otherBytes = items.slice(STATISTICS_TOP_N).reduce((s, item) => s + item.sizeBytes, 0);
+    return [...top, { format: 'Other', sizeBytes: otherBytes }];
+  }
+
+  async getSummary(user: RequestUser, query: StatisticsFilterQueryDto): Promise<StatisticsSummary> {
+    return this.repo.getSummary(user.id, user.isSuperuser, query.libraryIds);
+  }
+}