From 13dfcc3e0536745212fcf63cc536e947cee0c868 Mon Sep 17 00:00:00 2001
From: brusnitsyn <brusnitsyn@gmail.com>
Date: Mon, 22 Jun 2026 17:02:36 +0900
Subject: [PATCH] =?UTF-8?q?UI=20=D0=BA=D0=BE=D1=81=D1=82=D1=80=D1=83=D0=BA?=
 =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B0=20=D0=BE=D1=82=D1=87=D0=B5=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Analytics/Export/AnalyticsExcelExport.php |  40 ++
 resources/js/Pages/Analytics/Builder.vue      | 370 ++++++++++++++++++
 .../Components/CustomMeasureModal.vue         |  85 ++++
 .../Analytics/Components/EditReportModal.vue  |  60 +++
 .../Analytics/Components/PickerPanel.vue      | 114 ++++++
 .../Pages/Analytics/Components/PresetCard.vue |  78 ++++
 .../Analytics/Components/ReportChart.vue      | 270 +++++++++++++
 .../Analytics/Components/ResultTable.vue      |  43 ++
 .../Analytics/Components/SettingsPanel.vue    | 312 +++++++++++++++
 .../Components/TemplatePickerModal.vue        | 104 +++++
 resources/js/Pages/Analytics/Index.vue        | 188 +++++++++
 11 files changed, 1664 insertions(+)
 create mode 100644 app/Services/Analytics/Export/AnalyticsExcelExport.php
 create mode 100644 resources/js/Pages/Analytics/Builder.vue
 create mode 100644 resources/js/Pages/Analytics/Components/CustomMeasureModal.vue
 create mode 100644 resources/js/Pages/Analytics/Components/EditReportModal.vue
 create mode 100644 resources/js/Pages/Analytics/Components/PickerPanel.vue
 create mode 100644 resources/js/Pages/Analytics/Components/PresetCard.vue
 create mode 100644 resources/js/Pages/Analytics/Components/ReportChart.vue
 create mode 100644 resources/js/Pages/Analytics/Components/ResultTable.vue
 create mode 100644 resources/js/Pages/Analytics/Components/SettingsPanel.vue
 create mode 100644 resources/js/Pages/Analytics/Components/TemplatePickerModal.vue
 create mode 100644 resources/js/Pages/Analytics/Index.vue

diff --git a/app/Services/Analytics/Export/AnalyticsExcelExport.php b/app/Services/Analytics/Export/AnalyticsExcelExport.php
new file mode 100644
index 0000000..b35ff7a
--- /dev/null
+++ b/app/Services/Analytics/Export/AnalyticsExcelExport.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Services\Analytics\Export;
+
+use App\Exports\Sheets\ArraySheetExport;
+use App\Services\Analytics\AnalyticsResult;
+use App\Services\Analytics\Column;
+use Maatwebsite\Excel\Concerns\WithMultipleSheets;
+
+class AnalyticsExcelExport implements WithMultipleSheets
+{
+    public function __construct(
+        private readonly AnalyticsResult $result,
+        private readonly string $title,
+    ) {}
+
+    public function sheets(): array
+    {
+        $rows = [array_map(fn (Column $c) => $c->label, $this->result->columns)];
+
+        if ($this->result->rows === []) {
+            $rows[] = ['Нет данных за выбранный период'];
+        }
+
+        foreach ($this->result->rows as $row) {
+            $line = [];
+            foreach ($this->result->columns as $column) {
+                $line[] = $row[$column->key] ?? '';
+            }
+            $rows[] = $line;
+        }
+
+        return [new ArraySheetExport($this->sheetTitle(), $rows)];
+    }
+
+    private function sheetTitle(): string
+    {
+        return mb_substr(preg_replace('/[\\\\\/\?\*\[\]:]/', ' ', $this->title), 0, 31) ?: 'Отчёт';
+    }
+}
diff --git a/resources/js/Pages/Analytics/Builder.vue b/resources/js/Pages/Analytics/Builder.vue
new file mode 100644
index 0000000..7f9c811
--- /dev/null
+++ b/resources/js/Pages/Analytics/Builder.vue
@@ -0,0 +1,370 @@
+<script setup>
+import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { router, Link } from '@inertiajs/vue3'
+import axios from 'axios'
+import {
+    NButton, NText, NIcon, NSelect, NFlex, NSpin, NDropdown, useMessage, NEl
+} from 'naive-ui'
+import {
+    TbArrowLeft, TbPencil, TbSettings, TbDeviceFloppy, TbDownload,
+    TbChevronUp, TbChevronDown, TbBuildingHospital, TbReportMedical,
+} from 'vue-icons-plus/tb'
+import AppLayout from '../../Layouts/AppLayout.vue'
+import AppContainer from '../../Components/AppContainer.vue'
+import SectionCard from '../../Components/SectionCard.vue'
+import DatePickerQuery from '../../Components/DatePickerQuery.vue'
+import SettingsPanel from './Components/SettingsPanel.vue'
+import ResultTable from './Components/ResultTable.vue'
+import ReportChart from './Components/ReportChart.vue'
+import EditReportModal from './Components/EditReportModal.vue'
+import CustomMeasureModal from './Components/CustomMeasureModal.vue'
+
+const props = defineProps({
+    document: { type: Object, default: null },
+    name: { type: String, default: 'Новый отчёт' },
+    description: { type: String, default: '' },
+    config: { type: Object, default: () => ({}) },
+    datasets: { type: Array, default: () => [] },
+    presets: { type: Array, default: () => [] },
+    categories: { type: Array, default: () => [] },
+    departments: { type: Array, default: () => [] },
+    selectedDepartmentId: { type: [Number, String], default: null },
+    isHeadOrAdmin: { type: Boolean, default: false },
+    canManage: { type: Boolean, default: false },
+    date: { type: Array, default: () => [] },
+})
+
+const message = useMessage()
+
+const reportName = ref(props.name)
+const reportDescription = ref(props.description)
+
+const config = reactive({
+    dataset: props.config.dataset ?? null,
+    dimensions: props.config.dimensions ?? [],
+    measures: props.config.measures ?? [],
+    filters: props.config.filters ?? [],
+    mode: props.config.mode ?? 'period',
+    detalization: props.config.detalization ?? 'month',
+    chart: { metric: props.config.chart?.metric ?? null, type: props.config.chart?.type ?? 'bar' },
+})
+
+const result = ref(null)
+const loading = ref(false)
+const showSettings = ref(true)
+const showEdit = ref(false)
+const showMeasureModal = ref(false)
+const chartCollapsed = ref(false)
+
+const departmentModel = ref(props.selectedDepartmentId)
+const dateModel = ref(props.date?.length ? [...props.date] : null)
+
+const currentDataset = computed(() => props.datasets.find((d) => d.key === config.dataset) ?? null)
+const departmentOptions = computed(() => props.departments.map((d) => ({ label: d.name, value: d.id })))
+const isFixed = computed(() => !!currentDataset.value?.fixed)
+const canGenerate = computed(() => !!config.dataset && (isFixed.value || config.measures.length > 0))
+
+const metricOptions = computed(() => {
+    const ds = currentDataset.value
+    if (ds && config.measures.length) {
+        return config.measures
+            .map((key) => ds.measures.find((m) => m.key === key))
+            .filter(Boolean)
+            .map((m) => ({ label: m.label, value: m.key }))
+    }
+    // Фиксированный отчёт: показатели для графика берём из колонок результата
+    return (result.value?.columns ?? [])
+        .filter((c) => c.kind === 'measure')
+        .map((c) => ({ label: c.label, value: c.key }))
+})
+
+const baseMeasureOptions = computed(() => (currentDataset.value?.measures ?? []).map((m) => ({ label: m.label, value: m.key })))
+
+const ensureChartMetric = () => {
+    if (config.chart.metric === '__all') return // спец-режим «сравнение показателей»
+    if (!config.chart.metric || !config.measures.includes(config.chart.metric)) {
+        config.chart.metric = config.measures[0] ?? null
+    }
+}
+
+const payload = () => ({
+    dataset: config.dataset,
+    dimensions: config.dimensions,
+    measures: config.measures,
+    filters: config.filters,
+    mode: config.mode,
+    detalization: config.detalization,
+    chart: config.chart,
+    name: reportName.value,
+    departmentId: departmentModel.value,
+    startAt: dateModel.value?.[0],
+    endAt: dateModel.value?.[1],
+})
+
+const generate = async () => {
+    if (!canGenerate.value) {
+        message.warning('Выберите источник и хотя бы один показатель')
+        return
+    }
+    ensureChartMetric()
+    loading.value = true
+    try {
+        const { data } = await axios.post('/reports/run', payload())
+        result.value = data
+    } catch (e) {
+        message.error('Не удалось сформировать отчёт')
+    } finally {
+        loading.value = false
+    }
+}
+
+const onChangeDataset = (key) => {
+    config.dataset = key
+    config.dimensions = []
+    config.measures = []
+    config.filters = []
+    config.chart = { metric: null, type: 'bar' }
+    result.value = null
+}
+
+const onApplyPreset = (preset) => {
+    const c = preset.config
+    config.dataset = c.dataset
+    config.dimensions = [...(c.dimensions ?? [])]
+    config.measures = [...(c.measures ?? [])]
+    config.filters = [...(c.filters ?? [])]
+    config.mode = c.mode ?? 'period'
+    config.detalization = c.detalization ?? 'month'
+    config.chart = { metric: c.chart?.metric ?? null, type: c.chart?.type ?? 'bar' }
+    if (preset.key !== 'blank' && reportName.value === 'Новый отчёт') reportName.value = preset.label
+    result.value = null
+}
+
+const onChartUpdate = (chart) => {
+    const metricChanged = chart.metric !== config.chart.metric
+    config.chart = chart
+    if (config.mode === 'dynamics' && metricChanged && result.value) generate()
+}
+
+const saveEdit = ({ name, description }) => {
+    reportName.value = name
+    reportDescription.value = description
+}
+
+const save = () => {
+    const body = {
+        name: reportName.value,
+        description: reportDescription.value,
+        dataset: config.dataset,
+        config: {
+            dimensions: config.dimensions,
+            measures: config.measures,
+            filters: config.filters,
+            mode: config.mode,
+            detalization: config.detalization,
+            chart: config.chart,
+        },
+        period: dateModel.value ? { start: dateModel.value[0], end: dateModel.value[1] } : null,
+    }
+    if (props.document?.id) {
+        router.put(`/reports/${props.document.id}`, body, { onSuccess: () => message.success('Отчёт сохранён') })
+    } else {
+        router.post('/reports', body)
+    }
+}
+
+const download = async (kind) => {
+    try {
+        const { data } = await axios.post(`/reports/export/${kind}`, payload(), { responseType: 'blob' })
+        const url = window.URL.createObjectURL(new Blob([data]))
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `${reportName.value || 'report'}.${kind === 'excel' ? 'xlsx' : 'pdf'}`
+        document.body.appendChild(a)
+        a.click()
+        a.remove()
+        window.URL.revokeObjectURL(url)
+    } catch (e) {
+        message.error('Не удалось выгрузить файл')
+    }
+}
+
+const exportMenu = [
+    { key: 'excel', label: 'Excel (.xlsx)' },
+    { key: 'pdf', label: 'PDF' },
+]
+
+onMounted(() => {
+    if (canGenerate.value) generate()
+})
+
+watch(() => config.dataset, ensureChartMetric)
+
+// Смена периода/отделения — сразу пересобираем уже сформированный отчёт.
+watch([dateModel, departmentModel], () => {
+    if (result.value) generate()
+})
+</script>
+
+<template>
+    <AppLayout>
+        <AppContainer>
+            <div class="builder">
+                <div class="builder-main">
+                    <NButton text size="small" :tag="Link" href="/reports" style="margin-bottom: 8px;">
+                        <template #icon><TbArrowLeft /></template>
+                        Назад
+                    </NButton>
+
+                    <div class="builder-header">
+                        <div>
+                            <div class="title-row">
+                                <h1 class="report-title text-nowrap">{{ reportName }}</h1>
+                                <NButton v-if="canManage" text @click="showEdit = true"><NIcon :size="16"><TbPencil /></NIcon></NButton>
+                            </div>
+                            <NText v-if="reportDescription" depth="3" style="font-size: 13px;">{{ reportDescription }}</NText>
+                        </div>
+                        <NFlex :size="8" align="center">
+                            <NButton type="primary" :loading="loading" @click="generate">Сформировать отчёт</NButton>
+                            <NDropdown trigger="click" :options="exportMenu" @select="download">
+                                <NButton>
+                                    <template #icon><TbDownload /></template>
+                                    Скачать
+                                </NButton>
+                            </NDropdown>
+                            <NButton v-if="canManage" @click="save">
+                                <template #icon><TbDeviceFloppy /></template>
+                                Сохранить
+                            </NButton>
+                            <NButton :type="showSettings ? 'primary' : 'default'" ghost @click="showSettings = !showSettings">
+                                <template #icon><TbSettings /></template>
+                                Настройки
+                            </NButton>
+                        </NFlex>
+                    </div>
+
+                    <NFlex align="center" :size="12" :wrap="true" class="builder-toolbar">
+                        <NSelect
+                            v-if="departmentOptions.length > 1"
+                            v-model:value="departmentModel"
+                            :options="departmentOptions"
+                            style="width: 240px;"
+                        >
+                            <template #prefix><TbBuildingHospital /></template>
+                        </NSelect>
+                        <DatePickerQuery
+                            v-model:date="dateModel"
+                            :is-head-or-admin="true"
+                            local
+                            hint
+                        />
+                    </NFlex>
+
+                    <NSpin :show="loading">
+                        <SectionCard no-padding title="Визуализация" style="margin-bottom: 16px;">
+                            <div class="chart-block">
+                                <ReportChart
+                                    v-show="!chartCollapsed"
+                                    :columns="result?.columns ?? []"
+                                    :rows="result?.rows ?? []"
+                                    :chart="config.chart"
+                                    :mode="config.mode"
+                                    :metric-options="metricOptions"
+                                    @update:chart="onChartUpdate"
+                                />
+                                <div class="collapse-toggle" @click="chartCollapsed = !chartCollapsed">
+                                    <NIcon><component :is="chartCollapsed ? TbChevronDown : TbChevronUp" /></NIcon>
+                                </div>
+                            </div>
+                        </SectionCard>
+
+                        <SectionCard title="Данные" no-padding>
+                            <ResultTable :columns="result?.columns ?? []" :rows="result?.rows ?? []" />
+                        </SectionCard>
+                    </NSpin>
+                </div>
+
+                <transition name="slide">
+                    <NEl v-if="showSettings" class="builder-side">
+                        <SettingsPanel
+                            :config="config"
+                            :datasets="datasets"
+                            :presets="presets"
+                            :categories="categories"
+                            :can-manage="canManage"
+                            @close="showSettings = false"
+                            @change-dataset="onChangeDataset"
+                            @apply-preset="onApplyPreset"
+                            @create-measure="showMeasureModal = true"
+                        />
+                    </NEl>
+                </transition>
+            </div>
+
+            <EditReportModal
+                v-model:show="showEdit"
+                :name="reportName"
+                :description="reportDescription"
+                @save="saveEdit"
+            />
+            <CustomMeasureModal
+                v-model:show="showMeasureModal"
+                :dataset="config.dataset"
+                :base-measures="baseMeasureOptions"
+            />
+        </AppContainer>
+    </AppLayout>
+</template>
+
+<style scoped>
+:deep(.n-data-table-th) { background: transparent !important; }
+:deep(.n-data-table) { background: transparent; }
+:deep(.n-data-table-wrapper) { border-radius: 0; }
+:deep(.n-data-table-th .n-data-table-th__title) { font-size: 12px; }
+:deep(.n-data-table-td) { font-size: 13px; }
+
+.builder { display: flex; gap: 16px; align-items: flex-start; }
+.builder-main { flex: 1; min-width: 0; }
+.builder-side {
+    width: 360px;
+    flex-shrink: 0;
+    position: sticky;
+    top: 12px;
+    border: 1px solid var(--n-border-color, rgba(255,255,255,.1));
+    border-radius: 14px;
+    background: var(--card-color);
+    padding: 14px;
+}
+.builder-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 12px;
+}
+.title-row { display: flex; align-items: center; gap: 6px; }
+.report-title { font-size: 22px; font-weight: 700; margin: 0; }
+.builder-toolbar { margin-bottom: 16px; }
+.chart-block { position: relative; padding: 16px; }
+.collapse-toggle {
+    position: absolute;
+    left: 50%;
+    bottom: -12px;
+    transform: translateX(-50%);
+    width: 28px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--n-border-color, rgba(255,255,255,.12));
+    border-radius: 8px;
+    background: var(--n-card-color);
+    cursor: pointer;
+}
+.slide-enter-active, .slide-leave-active { transition: opacity .15s, transform .15s; }
+.slide-enter-from, .slide-leave-to { opacity: 0; transform: translateX(12px); }
+@media (max-width: 1100px) {
+    .builder { flex-direction: column; }
+    .builder-side { width: 100%; position: static; }
+}
+</style>
diff --git a/resources/js/Pages/Analytics/Components/CustomMeasureModal.vue b/resources/js/Pages/Analytics/Components/CustomMeasureModal.vue
new file mode 100644
index 0000000..3ab19b7
--- /dev/null
+++ b/resources/js/Pages/Analytics/Components/CustomMeasureModal.vue
@@ -0,0 +1,85 @@
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { router } from '@inertiajs/vue3'
+import { NModal, NForm, NFormItem, NInput, NSelect, NInputNumber, NButton, NFlex, NText } from 'naive-ui'
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    dataset: { type: String, default: null },
+    baseMeasures: { type: Array, default: () => [] }, // [{ label, value }]
+})
+
+const emit = defineEmits(['update:show'])
+
+const name = ref('')
+const baseMeasure = ref(null)
+const factor = ref(1)
+const unit = ref(null)
+
+const unitOptions = [
+    { label: 'Число', value: 'count' },
+    { label: 'Процент', value: 'percent' },
+    { label: 'Деньги (₽)', value: 'money' },
+    { label: 'Без единицы', value: null },
+]
+
+watch(() => props.show, (value) => {
+    if (value) {
+        name.value = ''
+        baseMeasure.value = props.baseMeasures[0]?.value ?? null
+        factor.value = 1
+        unit.value = 'count'
+    }
+})
+
+const canSave = computed(() => name.value.trim() && baseMeasure.value)
+
+const save = () => {
+    if (!canSave.value) return
+    router.post('/reports/measures', {
+        name: name.value.trim(),
+        dataset: props.dataset,
+        base_measure: baseMeasure.value,
+        factor: factor.value,
+        unit: unit.value,
+    }, {
+        preserveScroll: true,
+        preserveState: false,
+        onSuccess: () => emit('update:show', false),
+    })
+}
+</script>
+
+<template>
+    <NModal
+        :show="show"
+        preset="card"
+        title="Новый показатель"
+        style="width: 460px; max-width: 94vw;"
+        @update:show="emit('update:show', $event)"
+    >
+        <NText depth="3" style="font-size: 12px; display: block; margin-bottom: 12px;">
+            Производный показатель — базовый показатель, умноженный на коэффициент
+        </NText>
+        <NForm>
+            <NFormItem label="Название">
+                <NInput v-model:value="name" maxlength="50" placeholder="Например: Выписано (×100)" />
+            </NFormItem>
+            <NFormItem label="Базовый показатель">
+                <NSelect v-model:value="baseMeasure" :options="baseMeasures" placeholder="Выберите показатель" />
+            </NFormItem>
+            <NFormItem label="Коэффициент">
+                <NInputNumber v-model:value="factor" :step="0.1" style="width: 100%;" />
+            </NFormItem>
+            <NFormItem label="Единица">
+                <NSelect v-model:value="unit" :options="unitOptions" />
+            </NFormItem>
+        </NForm>
+        <template #footer>
+            <NFlex justify="end" :size="8">
+                <NButton @click="emit('update:show', false)">Отменить</NButton>
+                <NButton type="primary" :disabled="!canSave" @click="save">Создать</NButton>
+            </NFlex>
+        </template>
+    </NModal>
+</template>
diff --git a/resources/js/Pages/Analytics/Components/EditReportModal.vue b/resources/js/Pages/Analytics/Components/EditReportModal.vue
new file mode 100644
index 0000000..8424926
--- /dev/null
+++ b/resources/js/Pages/Analytics/Components/EditReportModal.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { NModal, NForm, NFormItem, NInput, NButton, NFlex } from 'naive-ui'
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    name: { type: String, default: '' },
+    description: { type: String, default: '' },
+})
+
+const emit = defineEmits(['update:show', 'save'])
+
+const localName = ref(props.name)
+const localDescription = ref(props.description)
+
+watch(() => props.show, (value) => {
+    if (value) {
+        localName.value = props.name
+        localDescription.value = props.description
+    }
+})
+
+const save = () => {
+    if (!localName.value.trim()) return
+    emit('save', { name: localName.value.trim(), description: localDescription.value.trim() })
+    emit('update:show', false)
+}
+</script>
+
+<template>
+    <NModal
+        :show="show"
+        preset="card"
+        title="Редактирование отчёта"
+        style="width: 460px; max-width: 94vw;"
+        @update:show="emit('update:show', $event)"
+    >
+        <NForm>
+            <NFormItem label="Название">
+                <NInput v-model:value="localName" maxlength="50" show-count placeholder="Название отчёта" />
+            </NFormItem>
+            <NFormItem label="Описание (необязательно)">
+                <NInput
+                    v-model:value="localDescription"
+                    type="textarea"
+                    maxlength="200"
+                    show-count
+                    placeholder="Введите описание отчёта"
+                    :autosize="{ minRows: 2, maxRows: 4 }"
+                />
+            </NFormItem>
+        </NForm>
+        <template #footer>
+            <NFlex justify="end" :size="8">
+                <NButton @click="emit('update:show', false)">Отменить</NButton>
+                <NButton type="primary" :disabled="!localName.trim()" @click="save">Сохранить</NButton>
+            </NFlex>
+        </template>
+    </NModal>
+</template>
diff --git a/resources/js/Pages/Analytics/Components/PickerPanel.vue b/resources/js/Pages/Analytics/Components/PickerPanel.vue
new file mode 100644
index 0000000..299ea5d
--- /dev/null
+++ b/resources/js/Pages/Analytics/Components/PickerPanel.vue
@@ -0,0 +1,114 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { NInput, NButton, NCheckbox, NText, NScrollbar, NIcon, NEmpty } from 'naive-ui'
+import { VueDraggableNext as draggable } from 'vue-draggable-next'
+import { TbArrowLeft, TbSearch, TbGripVertical, TbX, TbPlus } from 'vue-icons-plus/tb'
+
+const props = defineProps({
+    title: { type: String, required: true },
+    description: { type: String, default: '' },
+    items: { type: Array, default: () => [] },     // [{ key, label, unit? }]
+    modelValue: { type: Array, default: () => [] }, // выбранные ключи (в порядке)
+    searchPlaceholder: { type: String, default: 'Поиск' },
+    allowCreate: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'back', 'create'])
+
+const search = ref('')
+
+const itemMap = computed(() => Object.fromEntries(props.items.map((i) => [i.key, i])))
+
+// Список «Выбрано» — объекты в порядке modelValue (для draggable).
+const selectedItems = computed({
+    get: () => props.modelValue.map((key) => itemMap.value[key]).filter(Boolean),
+    set: (list) => emit('update:modelValue', list.map((i) => i.key)),
+})
+
+const availableItems = computed(() => props.items.filter((i) =>
+    !search.value || i.label.toLowerCase().includes(search.value.toLowerCase())
+))
+
+const isSelected = (key) => props.modelValue.includes(key)
+
+const toggle = (key) => {
+    const next = isSelected(key)
+        ? props.modelValue.filter((k) => k !== key)
+        : [...props.modelValue, key]
+    emit('update:modelValue', next)
+}
+
+const remove = (key) => emit('update:modelValue', props.modelValue.filter((k) => k !== key))
+const reset = () => emit('update:modelValue', [])
+</script>
+
+<template>
+    <div class="picker-panel">
+        <div class="panel-head">
+            <NButton text size="small" @click="emit('back')">
+                <template #icon><TbArrowLeft /></template>
+                Назад
+            </NButton>
+            <NButton v-if="allowCreate" text size="small" type="primary" @click="emit('create')">
+                <template #icon><TbPlus /></template>
+                Создать
+            </NButton>
+        </div>
+
+        <div class="panel-title">{{ title }}</div>
+        <NText v-if="description" depth="3" style="font-size: 12px; display: block; margin-bottom: 10px;">{{ description }}</NText>
+
+        <NInput v-model:value="search" :placeholder="searchPlaceholder" clearable size="small" style="margin-bottom: 12px;">
+            <template #prefix><TbSearch :size="14" /></template>
+        </NInput>
+
+        <NScrollbar style="max-height: calc(100vh - 320px);">
+            <div class="block-head">
+                <NText depth="2" style="font-size: 12px; font-weight: 600;">Выбрано</NText>
+                <NButton v-if="modelValue.length" text size="tiny" @click="reset">Сбросить</NButton>
+            </div>
+
+            <NEmpty v-if="!selectedItems.length" description="Ничего не выбрано" size="small" style="padding: 8px 0;" />
+            <draggable v-else v-model="selectedItems" handle=".drag-handle" item-key="key" class="selected-list">
+                <div v-for="item in selectedItems" :key="item.key" class="selected-row">
+                    <NIcon class="drag-handle" :size="16"><TbGripVertical /></NIcon>
+                    <span class="row-label">{{ item.label }}</span>
+                    <NButton text size="tiny" @click="remove(item.key)"><NIcon><TbX /></NIcon></NButton>
+                </div>
+            </draggable>
+
+            <div class="block-head" style="margin-top: 14px;">
+                <NText depth="2" style="font-size: 12px; font-weight: 600;">Доступно</NText>
+            </div>
+            <div class="available-list">
+                <NCheckbox
+                    v-for="item in availableItems"
+                    :key="item.key"
+                    :checked="isSelected(item.key)"
+                    style="display: flex; padding: 5px 0;"
+                    @update:checked="toggle(item.key)"
+                >
+                    {{ item.label }}
+                </NCheckbox>
+            </div>
+        </NScrollbar>
+    </div>
+</template>
+
+<style scoped>
+.picker-panel { padding: 4px; }
+.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+.panel-title { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
+.block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.selected-list { display: flex; flex-direction: column; gap: 4px; }
+.selected-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
+}
+.row-label { flex: 1; font-size: 13px; }
+.drag-handle { cursor: grab; color: var(--n-text-color-3, #999); }
+</style>
diff --git a/resources/js/Pages/Analytics/Components/PresetCard.vue b/resources/js/Pages/Analytics/Components/PresetCard.vue
new file mode 100644
index 0000000..f1d29df
--- /dev/null
+++ b/resources/js/Pages/Analytics/Components/PresetCard.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { NText } from 'naive-ui'
+import { TbPlus } from 'vue-icons-plus/tb'
+
+defineProps({
+    preset: { type: Object, required: true },
+})
+</script>
+
+<template>
+    <div class="preset-card">
+        <div v-if="preset.key === 'blank'" class="preset-blank">
+            <TbPlus :size="26" />
+        </div>
+        <div v-else class="preset-thumb">
+            <span v-for="(col, i) in preset.thumbnail" :key="i" class="thumb-chip">{{ col }}</span>
+        </div>
+        <NText class="preset-title">{{ preset.label }}</NText>
+        <NText depth="3" class="preset-desc">{{ preset.description }}</NText>
+    </div>
+</template>
+
+<style scoped>
+.preset-card {
+    border: 1px solid var(--n-border-color, rgba(255,255,255,.1));
+    border-radius: 12px;
+    padding: 14px;
+    cursor: pointer;
+    transition: border-color .15s, transform .15s;
+    background: var(--n-card-color);
+    height: 100%;
+}
+.preset-card:hover {
+    border-color: var(--primary-color);
+    transform: translateY(-2px);
+}
+.preset-blank {
+    height: 84px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary-color);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+    margin-bottom: 10px;
+}
+.preset-thumb {
+    height: 84px;
+    display: flex;
+    gap: 4px;
+    align-items: flex-start;
+    padding: 8px;
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
+    margin-bottom: 10px;
+    overflow: hidden;
+}
+.thumb-chip {
+    font-size: 9px;
+    line-height: 1.2;
+    padding: 3px 5px;
+    border-radius: 4px;
+    background: var(--n-card-color);
+    color: var(--n-text-color-3, #888);
+    white-space: nowrap;
+    box-shadow: 0 1px 2px rgba(0,0,0,.06);
+}
+.preset-title {
+    display: block;
+    font-weight: 600;
+    font-size: 14px;
+}
+.preset-desc {
+    display: block;
+    font-size: 12px;
+    margin-top: 2px;
+}
+</style>
diff --git a/resources/js/Pages/Analytics/Components/ReportChart.vue b/resources/js/Pages/Analytics/Components/ReportChart.vue
new file mode 100644
index 0000000..cf9efc4
--- /dev/null
+++ b/resources/js/Pages/Analytics/Components/ReportChart.vue
@@ -0,0 +1,270 @@
+<script setup>
+import { computed } from 'vue'
+import { NSelect, NEmpty, useThemeVars } from 'naive-ui'
+import VueApexCharts from 'vue3-apexcharts'
+
+const props = defineProps({
+    columns: { type: Array, default: () => [] },
+    rows: { type: Array, default: () => [] },
+    chart: { type: Object, default: () => ({ metric: null, type: 'bar' }) },
+    mode: { type: String, default: 'period' },
+    metricOptions: { type: Array, default: () => [] }, // [{ label, value }]
+})
+
+const emit = defineEmits(['update:chart'])
+
+const themeVars = useThemeVars()
+
+// --- Стили графиков, перенесённые со страницы «Статистика» (Headquarters) ---
+const FONT = "'v-sans', ui-sans-serif, system-ui, sans-serif"
+const cAxis = computed(() => themeVars.value.textColor3)
+const cGrid = computed(() => themeVars.value.dividerColor)
+
+// soften(color) = цвет темы, разбавленный фоном карточки (ApexCharts не понимает color-mix)
+const SOFT_AMOUNT = 0.35
+function parseColor(c) {
+    if (!c) return { r: 0, g: 0, b: 0 }
+    c = c.trim()
+    if (c[0] === '#') {
+        let h = c.slice(1)
+        if (h.length === 3) h = h.split('').map((x) => x + x).join('')
+        const n = parseInt(h, 16)
+        return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }
+    }
+    const m = c.match(/rgba?\(([^)]+)\)/i)
+    if (m) {
+        const [r, g, b] = m[1].split(',').map((s) => parseFloat(s))
+        return { r, g, b }
+    }
+    return { r: 0, g: 0, b: 0 }
+}
+function toHex({ r, g, b }) {
+    const h = (v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0')
+    return `#${h(r)}${h(g)}${h(b)}`
+}
+function soften(color, amount = SOFT_AMOUNT) {
+    const a = parseColor(color)
+    const b = parseColor(themeVars.value.cardColor)
+    return toHex({
+        r: a.r * (1 - amount) + b.r * amount,
+        g: a.g * (1 - amount) + b.g * amount,
+        b: a.b * (1 - amount) + b.b * amount,
+    })
+}
+
+// Семантические цвета + различимая палитра (без двух зелёных, как было раньше).
+// Приглушённая палитра (для заливок: столбцы/донат) и яркая (для тонких линий).
+const buildColors = (vivid) => {
+    const f = vivid ? (c) => c : (c) => soften(c)
+    return {
+        green: f(themeVars.value.successColor),
+        red: f(themeVars.value.errorColor),
+        gray: f(themeVars.value.textColor3),
+        blue: f(themeVars.value.infoColor),
+        orange: f(themeVars.value.warningColor),
+        purple: f('#8a63d2'),
+        teal: f('#13c2c2'),
+        pink: f('#eb6ea5'),
+    }
+}
+const SOFT = computed(() => buildColors(false))
+const VIVID = computed(() => buildColors(true))
+
+const fallbackPalette = (c) => [c.green, c.blue, c.orange, c.purple, c.teal, c.pink, c.gray, c.red]
+
+// Цвет категории: экстренное/смерть → красный, плановое → серый, иначе — различимый из палитры.
+function colorFor(label, index, vivid = false) {
+    const c = vivid ? VIVID.value : SOFT.value
+    const t = String(label ?? '').toLowerCase()
+    if (/экстрен|неотлож|emergency/.test(t)) return c.red
+    if (/умер|смерт|летал|decease|death/.test(t)) return c.red
+    if (/планов|plan/.test(t)) return c.gray
+    const p = fallbackPalette(c)
+    return p[index % p.length]
+}
+
+const baseChart = (type) => ({
+    type,
+    background: 'transparent',
+    toolbar: { show: false },
+    fontFamily: FONT,
+    animations: { enabled: true, speed: 600, dynamicAnimation: { enabled: true, speed: 400 } },
+})
+const baseTooltip = computed(() => ({ theme: 'dark', style: { fontSize: '12px', fontFamily: FONT } }))
+const baseGrid = computed(() => ({ borderColor: cGrid.value, strokeDashArray: 4, xaxis: { lines: { show: false } } }))
+
+const typeOptions = [
+    { label: 'Столбцы', value: 'bar' },
+    { label: 'Линия', value: 'line' },
+    { label: 'Круговая', value: 'donut' },
+]
+
+const dimensionCols = computed(() => props.columns.filter((c) => c.kind === 'dimension'))
+const periodCols = computed(() => props.columns.filter((c) => c.kind === 'period'))
+
+const metric = computed(() => props.chart.metric ?? props.metricOptions[0]?.value ?? null)
+const metricLabel = computed(() => props.metricOptions.find((m) => m.value === metric.value)?.label ?? 'Показатель')
+
+// Режим «сравнение показателей»: слайсы/столбцы = сами показатели (Поступило/Выписано/…),
+// а не категории измерения. Доступен, когда выбрано ≥2 показателей и это не динамика.
+const ALL_METRICS = '__all'
+const isAllMetrics = computed(() => metric.value === ALL_METRICS && props.mode !== 'dynamics')
+const metricSelectOptions = computed(() => {
+    const opts = props.metricOptions.map((m) => ({ label: m.label, value: m.value }))
+    if (opts.length > 1) opts.unshift({ label: 'Все показатели (сравнение)', value: ALL_METRICS })
+    return opts
+})
+
+const setMetric = (value) => emit('update:chart', { ...props.chart, metric: value })
+const setType = (value) => emit('update:chart', { ...props.chart, type: value })
+
+const num = (v) => {
+    const n = Number(v)
+    return Number.isNaN(n) ? 0 : n
+}
+
+const apexType = computed(() => {
+    if (props.chart.type === 'donut') return props.mode === 'dynamics' ? 'line' : 'donut'
+    return props.chart.type === 'line' ? 'line' : 'bar'
+})
+
+const categories = computed(() => {
+    if (props.mode === 'dynamics') return periodCols.value.map((c) => c.label)
+    if (isAllMetrics.value) return props.metricOptions.map((m) => m.label)
+    const dim = dimensionCols.value[0]
+    return dim ? props.rows.map((r) => r[dim.key]) : props.rows.map((_, i) => `#${i + 1}`)
+})
+
+const series = computed(() => {
+    if (props.mode === 'dynamics') {
+        const labelKey = dimensionCols.value[0]?.key ?? '__metric'
+        return props.rows.map((r) => ({
+            name: r[labelKey] ?? metricLabel.value,
+            data: periodCols.value.map((c) => num(r[c.key])),
+        }))
+    }
+
+    // Сравнение показателей: каждое значение = сумма показателя по всем строкам.
+    if (isAllMetrics.value) {
+        const sums = props.metricOptions.map((m) => props.rows.reduce((s, r) => s + num(r[m.value]), 0))
+        return apexType.value === 'donut' ? sums : [{ name: 'Показатели', data: sums }]
+    }
+
+    const data = props.rows.map((r) => num(r[metric.value]))
+    return apexType.value === 'donut' ? data : [{ name: metricLabel.value, data }]
+})
+
+// Раскрашивать каждый столбец отдельно, когда это одна серия по нескольким категориям
+// (напр. срочность/исход/показатели) и категорий немного.
+const distributedBar = computed(() =>
+    props.mode !== 'dynamics' && apexType.value === 'bar' && (isAllMetrics.value || categories.value.length <= 12),
+)
+
+const isLine = computed(() => apexType.value === 'line')
+
+const chartColors = computed(() => {
+    // Линии берут яркие цвета, заливки (столбцы/донат) — приглушённые.
+    if (props.mode === 'dynamics') {
+        return series.value.map((s, i) => colorFor(s.name, i, isLine.value))
+    }
+    // Круговая и «распределённый» столбчатый: цвет на категорию.
+    if (apexType.value === 'donut' || distributedBar.value) {
+        return categories.value.map((c, i) => colorFor(c, i, false))
+    }
+    // Одна серия линией/столбцами без распределения — один цвет.
+    return [colorFor(metricLabel.value, 0, isLine.value)]
+})
+
+const options = computed(() => {
+    const base = {
+        chart: baseChart(apexType.value),
+        colors: chartColors.value,
+        dataLabels: { enabled: false },
+        tooltip: baseTooltip.value,
+        legend: { position: 'bottom', labels: { colors: cAxis.value }, fontSize: '12px', fontFamily: FONT, markers: { size: 6, shape: 'circle' } },
+        noData: { text: 'Нет данных', style: { fontFamily: FONT } },
+    }
+
+    if (apexType.value === 'donut') {
+        return {
+            ...base,
+            labels: categories.value,
+            stroke: { width: 0 },
+            legend: { ...base.legend, position: 'right' },
+            plotOptions: { pie: { donut: { size: '62%' } } },
+        }
+    }
+
+    return {
+        ...base,
+        grid: baseGrid.value,
+        plotOptions: { bar: { borderRadius: 5, borderRadiusApplication: 'end', columnWidth: '60%', distributed: distributedBar.value } },
+        legend: { ...base.legend, show: props.mode === 'dynamics' },
+        stroke: isLine.value
+            ? { width: 4, curve: 'smooth', lineCap: 'round' }
+            : { width: 0 },
+        markers: isLine.value
+            ? { size: 5, strokeWidth: 0, hover: { sizeOffset: 2 } }
+            : { size: 0 },
+        fill: { type: 'solid', opacity: 1 },
+        xaxis: {
+            categories: categories.value,
+            labels: {
+                style: { colors: cAxis.value, fontSize: '11px', fontFamily: FONT },
+                rotate: -40,
+                rotateAlways: categories.value.length > 6,
+                hideOverlappingLabels: true,
+                trim: true,
+            },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+        },
+        yaxis: { labels: { style: { colors: cAxis.value, fontFamily: FONT } }, tickAmount: 4 },
+    }
+})
+
+const hasData = computed(() => props.rows.length > 0 && series.value.length > 0)
+</script>
+
+<template>
+    <div class="chart-wrap">
+        <div class="chart-toolbar">
+            <NSelect
+                v-if="metricOptions.length"
+                :value="metric"
+                :options="metricSelectOptions"
+                size="small"
+                style="width: 240px;"
+                :disabled="mode === 'dynamics' && metricOptions.length <= 1"
+                @update:value="setMetric"
+            />
+            <NSelect
+                :value="chart.type"
+                :options="typeOptions"
+                size="small"
+                style="width: 140px;"
+                @update:value="setType"
+            />
+        </div>
+
+        <NEmpty v-if="!hasData" description="Диаграмма появится после формирования отчёта" style="padding: 32px;" />
+        <VueApexCharts
+            v-else
+            :key="apexType + '|' + mode"
+            :type="apexType"
+            height="280"
+            :options="options"
+            :series="series"
+        />
+    </div>
+</template>
+
+<style scoped>
+.chart-wrap { position: relative; }
+.chart-toolbar {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+</style>
diff --git a/resources/js/Pages/Analytics/Components/ResultTable.vue b/resources/js/Pages/Analytics/Components/ResultTable.vue
new file mode 100644
index 0000000..2b42597
--- /dev/null
+++ b/resources/js/Pages/Analytics/Components/ResultTable.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { computed, h } from 'vue'
+import { NDataTable, NEmpty, NText } from 'naive-ui'
+
+const props = defineProps({
+    columns: { type: Array, default: () => [] },
+    rows: { type: Array, default: () => [] },
+})
+
+const formatValue = (value, column) => {
+    if (column.kind === 'dimension') return value ?? '—'
+    if (value === null || value === undefined || value === '') return '—'
+    const num = Number(value)
+    if (Number.isNaN(num)) return value
+    if (column.unit === 'percent') return `${Math.round(num * 10) / 10}%`
+    if (column.unit === 'money') return `${num.toLocaleString('ru-RU')} ₽`
+    return Number.isInteger(num) ? num.toLocaleString('ru-RU') : (Math.round(num * 100) / 100).toLocaleString('ru-RU')
+}
+
+const tableColumns = computed(() => props.columns.map((col) => ({
+    title: col.label,
+    key: col.key,
+    fixed: col.kind === 'dimension' && props.columns.indexOf(col) === 0 ? 'left' : undefined,
+    minWidth: col.kind === 'dimension' ? 160 : 120,
+    align: col.kind === 'dimension' ? 'left' : 'right',
+    render: (row) => formatValue(row[col.key], col),
+})))
+</script>
+
+<template>
+    <NEmpty v-if="!rows.length" description="Сформируйте отчёт, чтобы увидеть данные" style="padding: 32px;" />
+    <NDataTable
+        v-else
+        min-height="calc(100vh - 740px)"
+        max-height="calc(100vh - 740px)"
+        :columns="tableColumns"
+        :data="rows"
+        :bordered="false"
+        :scroll-x="columns.length * 160"
+        size="small"
+        striped
+    />
+</template>
diff --git a/resources/js/Pages/Analytics/Components/SettingsPanel.vue b/resources/js/Pages/Analytics/Components/SettingsPanel.vue
new file mode 100644
index 0000000..82b9d82
--- /dev/null
+++ b/resources/js/Pages/Analytics/Components/SettingsPanel.vue
@@ -0,0 +1,312 @@
+<script setup>
+import { ref, computed } from 'vue'
+import {
+    NButton, NText, NIcon, NSelect, NScrollbar, NGrid, NGi, NAlert, NRadio, NEmpty,
+} from 'naive-ui'
+import {
+    TbX, TbChevronRight, TbCalendar, TbTrendingUp, TbLayoutGrid, TbDatabase,
+    TbStack2, TbChartBar, TbFilter, TbClockHour4, TbArrowLeft,
+} from 'vue-icons-plus/tb'
+import PickerPanel from './PickerPanel.vue'
+import PresetCard from './PresetCard.vue'
+
+const props = defineProps({
+    config: { type: Object, required: true },
+    datasets: { type: Array, default: () => [] },
+    presets: { type: Array, default: () => [] },
+    categories: { type: Array, default: () => [] },
+    // Шаблон и Данные доступны только администратору / глав. врачу / зам. ГВ
+    canManage: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['close', 'change-dataset', 'apply-preset', 'create-measure'])
+
+const view = ref('root') // root | data | template | dimensions | measures | filters
+const templateCategory = ref('Все')
+
+const currentDataset = computed(() => props.datasets.find((d) => d.key === props.config.dataset) ?? null)
+const isFixed = computed(() => !!currentDataset.value?.fixed)
+const dimensions = computed(() => currentDataset.value?.dimensions ?? [])
+const measures = computed(() => currentDataset.value?.measures ?? [])
+const filterDefs = computed(() => currentDataset.value?.filters ?? [])
+
+const detalizationOptions = [
+    { label: 'По дням', value: 'day' },
+    { label: 'По неделям', value: 'week' },
+    { label: 'По месяцам', value: 'month' },
+]
+
+const filteredPresets = computed(() => props.presets.filter((p) =>
+    templateCategory.value === 'Все' || p.category === templateCategory.value || p.key === 'blank'
+))
+
+const selectDataset = (key) => {
+    if (key !== props.config.dataset) emit('change-dataset', key)
+}
+
+const applyPreset = (preset) => {
+    emit('apply-preset', preset)
+    view.value = 'root'
+}
+
+const filterValue = (key) => props.config.filters.find((f) => f.key === key)?.value ?? null
+
+const setFilterValue = (key, value) => {
+    const rest = props.config.filters.filter((f) => f.key !== key)
+    props.config.filters = (value === null || value === '') ? rest : [...rest, { key, value }]
+}
+
+const filterOptions = (def) => (def.options ?? [])
+</script>
+
+<template>
+    <div class="settings">
+        <!-- ROOT -->
+        <template v-if="view === 'root'">
+            <div class="head">
+                <span class="head-title">Настройки</span>
+                <NButton text @click="emit('close')"><NIcon :size="18"><TbX /></NIcon></NButton>
+            </div>
+
+            <div v-if="canManage" class="row" @click="view = 'template'">
+                <NIcon :size="18" class="row-icon"><TbLayoutGrid /></NIcon>
+                <span class="row-label">Шаблон</span>
+                <span class="row-value">{{ presets.find(p => p.dataset === config.dataset && p.key !== 'blank')?.label ?? 'Без шаблона' }}</span>
+                <NIcon class="row-chevron"><TbChevronRight /></NIcon>
+            </div>
+            <div v-if="canManage" class="row" @click="view = 'data'">
+                <NIcon :size="18" class="row-icon"><TbDatabase /></NIcon>
+                <span class="row-label">Данные</span>
+                <span class="row-value">{{ currentDataset?.label ?? 'Не выбрано' }}</span>
+                <NIcon class="row-chevron"><TbChevronRight /></NIcon>
+            </div>
+
+            <NAlert v-if="isFixed" type="info" :bordered="false" style="margin-top: 8px; font-size: 12px;">
+                Готовый отчёт с фиксированными колонками. Выберите период и нажмите «Сформировать отчёт».
+            </NAlert>
+
+            <template v-if="!isFixed">
+            <div class="section-label">Параметры данных</div>
+
+            <div class="segment">
+                <button class="seg-btn" :class="{ active: config.mode === 'period' }" @click="config.mode = 'period'">
+                    <NIcon :size="15"><TbCalendar /></NIcon> За период
+                </button>
+                <button class="seg-btn" :class="{ active: config.mode === 'dynamics' }" @click="config.mode = 'dynamics'">
+                    <NIcon :size="15"><TbTrendingUp /></NIcon> В динамике
+                </button>
+            </div>
+
+            <div class="row" :class="{ disabled: !currentDataset }" @click="currentDataset && (view = 'dimensions')">
+                <NIcon :size="18" class="row-icon"><TbStack2 /></NIcon>
+                <span class="row-label">Группировки</span>
+                <span class="row-value">{{ config.dimensions.length || 'Не выбрано' }}</span>
+                <NIcon class="row-chevron"><TbChevronRight /></NIcon>
+            </div>
+            <div class="row" :class="{ disabled: !currentDataset }" @click="currentDataset && (view = 'measures')">
+                <NIcon :size="18" class="row-icon"><TbChartBar /></NIcon>
+                <span class="row-label">Показатели</span>
+                <span class="row-value">{{ config.measures.length || 'Не выбрано' }}</span>
+                <NIcon class="row-chevron"><TbChevronRight /></NIcon>
+            </div>
+
+            <div v-if="config.mode === 'dynamics'" class="row static">
+                <NIcon :size="18" class="row-icon"><TbClockHour4 /></NIcon>
+                <span class="row-label">Детализация</span>
+                <NSelect
+                    :value="config.detalization"
+                    :options="detalizationOptions"
+                    size="small"
+                    style="width: 150px;"
+                    @update:value="config.detalization = $event"
+                />
+            </div>
+
+            <div class="row" :class="{ disabled: !filterDefs.length }" @click="filterDefs.length && (view = 'filters')">
+                <NIcon :size="18" class="row-icon"><TbFilter /></NIcon>
+                <span class="row-label">Фильтры</span>
+                <span class="row-value">{{ config.filters.length || 'Не выбрано' }}</span>
+                <NIcon class="row-chevron"><TbChevronRight /></NIcon>
+            </div>
+            </template>
+        </template>
+
+        <!-- DATA -->
+        <template v-else-if="view === 'data'">
+            <div class="sub-head">
+                <NButton text size="small" @click="view = 'root'">Назад</NButton>
+                <NButton text @click="emit('close')"><NIcon :size="18"><TbX /></NIcon></NButton>
+            </div>
+            <div class="panel-title">Данные</div>
+            <NText depth="3" style="font-size: 12px; display: block; margin-bottom: 12px;">
+                Данные определяют группировки и показатели отчёта
+            </NText>
+            <div class="data-list">
+                <div
+                    v-for="ds in datasets"
+                    :key="ds.key"
+                    class="data-card"
+                    :class="{ active: ds.key === config.dataset }"
+                    @click="selectDataset(ds.key)"
+                >
+                    <div>
+                        <div class="data-title">{{ ds.label }}</div>
+                        <div class="data-desc">{{ ds.description }}</div>
+                    </div>
+                    <NRadio :checked="ds.key === config.dataset" />
+                </div>
+            </div>
+            <NAlert type="warning" :bordered="false" style="margin-top: 12px; font-size: 12px;">
+                При изменении набора данных выбранные группировки и показатели сбросятся
+            </NAlert>
+        </template>
+
+        <!-- TEMPLATE -->
+        <template v-else-if="view === 'template'">
+            <div class="sub-head">
+                <NButton text size="small" @click="view = 'root'">
+                    <template #icon><TbArrowLeft /></template>
+                    Назад
+                </NButton>
+                <NButton text @click="emit('close')"><NIcon :size="18"><TbX /></NIcon></NButton>
+            </div>
+            <div class="panel-title">Шаблон</div>
+            <NText depth="3" style="font-size: 12px; display: block; margin-bottom: 10px;">
+                Создавайте отчёт по популярным шаблонам
+            </NText>
+            <NSelect
+                v-model:value="templateCategory"
+                :options="categories.map(c => ({ label: c, value: c }))"
+                size="small"
+                style="margin-bottom: 12px;"
+            />
+            <NScrollbar style="max-height: calc(100vh - 320px);" class="scrollbar-gutter-stable">
+                <NGrid cols="1" :y-gap="10" class="py-0.5">
+                    <NGi v-for="preset in filteredPresets" :key="preset.key">
+                        <PresetCard :preset="preset" @click="applyPreset(preset)" />
+                    </NGi>
+                </NGrid>
+            </NScrollbar>
+        </template>
+
+        <!-- DIMENSIONS -->
+        <PickerPanel
+            v-else-if="view === 'dimensions'"
+            title="Группировки"
+            description="Выберите, какие данные отображать в таблице"
+            search-placeholder="Поиск по группировке"
+            :items="dimensions"
+            :model-value="config.dimensions"
+            @update:model-value="config.dimensions = $event"
+            @back="view = 'root'"
+        />
+
+        <!-- MEASURES -->
+        <PickerPanel
+            v-else-if="view === 'measures'"
+            title="Показатели"
+            search-placeholder="Поиск по показателям"
+            allow-create
+            :items="measures"
+            :model-value="config.measures"
+            @update:model-value="config.measures = $event"
+            @back="view = 'root'"
+            @create="emit('create-measure')"
+        />
+
+        <!-- FILTERS -->
+        <template v-else-if="view === 'filters'">
+            <div class="sub-head">
+                <NButton text size="small" @click="view = 'root'">
+                    <template #icon><TbArrowLeft /></template>
+                    Назад
+                </NButton>
+                <NButton text @click="emit('close')"><NIcon :size="18"><TbX /></NIcon></NButton>
+            </div>
+            <div class="panel-title">Фильтры</div>
+            <NText depth="3" style="font-size: 12px; display: block; margin-bottom: 12px;">
+                Выберите параметры, по которым фильтровать таблицу
+            </NText>
+            <NEmpty v-if="!filterDefs.length" description="Нет доступных фильтров" size="small" />
+            <div v-for="def in filterDefs" :key="def.key" class="filter-row">
+                <span class="row-label">{{ def.label }}</span>
+                <NSelect
+                    v-if="def.type === 'select'"
+                    :value="filterValue(def.key)"
+                    :options="filterOptions(def)"
+                    clearable
+                    size="small"
+                    placeholder="Все"
+                    style="width: 160px;"
+                    @update:value="setFilterValue(def.key, $event)"
+                />
+            </div>
+        </template>
+    </div>
+</template>
+
+<style scoped>
+.settings { padding: 4px 2px; background: var(--n-) }
+.head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.head-title { font-size: 18px; font-weight: 600; }
+.sub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.panel-title { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
+.section-label { font-size: 12px; color: var(--n-text-color-3, #999); margin: 16px 0 8px; }
+.row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    border: 1px solid var(--n-border-color, rgba(255,255,255,.1));
+    border-radius: 12px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    background: var(--n-card-color);
+    transition: border-color .15s;
+}
+.row:hover { border-color: var(--primary-color); }
+.row.static, .row.static:hover { cursor: default; border-color: var(--n-border-color, rgba(255,255,255,.1)); }
+.row.disabled { opacity: .5; pointer-events: none; }
+.row-icon { color: var(--primary-color); }
+.row-label { flex: 1; font-weight: 500; }
+.row-value { color: var(--n-text-color-3, #999); font-size: 13px; }
+.row-chevron { color: var(--n-text-color-3, #bbb); }
+.segment {
+    display: flex;
+    gap: 4px;
+    padding: 4px;
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
+    margin-bottom: 12px;
+}
+.seg-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 8px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--n-text-color-2);
+}
+.seg-btn.active { background: var(--n-card-color); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
+.data-list { display: flex; flex-direction: column; gap: 8px; }
+.data-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 12px 14px;
+    border: 1px solid var(--n-border-color, rgba(255,255,255,.1));
+    border-radius: 12px;
+    cursor: pointer;
+}
+.data-card.active { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 6%, transparent); }
+.data-title { font-weight: 600; }
+.data-desc { font-size: 12px; color: var(--n-text-color-3, #999); margin-top: 2px; }
+.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; }
+</style>
diff --git a/resources/js/Pages/Analytics/Components/TemplatePickerModal.vue b/resources/js/Pages/Analytics/Components/TemplatePickerModal.vue
new file mode 100644
index 0000000..0120d5c
--- /dev/null
+++ b/resources/js/Pages/Analytics/Components/TemplatePickerModal.vue
@@ -0,0 +1,104 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { NModal, NInput, NScrollbar, NGrid, NGi, NText } from 'naive-ui'
+import { TbSearch } from 'vue-icons-plus/tb'
+import PresetCard from './PresetCard.vue'
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    presets: { type: Array, default: () => [] },
+    categories: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['update:show', 'select'])
+
+const search = ref('')
+const activeCategory = ref('Все')
+
+const filtered = computed(() => props.presets.filter((p) => {
+    const byCat = activeCategory.value === 'Все' || p.category === activeCategory.value || p.key === 'blank'
+    const byText = !search.value || p.label.toLowerCase().includes(search.value.toLowerCase())
+    return byCat && byText
+}))
+
+const pick = (preset) => {
+    emit('select', preset)
+    emit('update:show', false)
+}
+</script>
+
+<template>
+    <NModal
+        :show="show"
+        preset="card"
+        title="Шаблоны для отчёта"
+        style="width: 860px; max-width: 94vw;"
+        class="h-[580px]"
+        @update:show="emit('update:show', $event)"
+    >
+        <template #header-extra>
+            <NText depth="3" style="font-size: 13px;">Создавайте отчёт по шаблонам</NText>
+        </template>
+
+        <div class="picker">
+            <div class="picker-side">
+                <NInput v-model:value="search" placeholder="Поиск" clearable size="small">
+                    <template #prefix><TbSearch :size="14" /></template>
+                </NInput>
+                <div class="cat-list">
+                    <div
+                        v-for="cat in categories"
+                        :key="cat"
+                        class="cat-item"
+                        :class="{ active: cat === activeCategory }"
+                        @click="activeCategory = cat"
+                    >
+                        {{ cat }}
+                    </div>
+                </div>
+            </div>
+
+            <NScrollbar style="max-height: 60vh;" class="picker-main">
+                <NGrid responsive="screen" cols="2 s:3" :x-gap="12" :y-gap="12" class="pt-0.5">
+                    <NGi v-for="preset in filtered" :key="preset.key">
+                        <PresetCard :preset="preset" @click="pick(preset)" />
+                    </NGi>
+                </NGrid>
+            </NScrollbar>
+        </div>
+    </NModal>
+</template>
+
+<style scoped>
+.picker {
+    display: flex;
+    gap: 16px;
+}
+.picker-side {
+    width: 180px;
+    flex-shrink: 0;
+}
+.cat-list {
+    margin-top: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.cat-item {
+    padding: 7px 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 13px;
+}
+.cat-item:hover {
+    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+}
+.cat-item.active {
+    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
+    color: var(--primary-color);
+    font-weight: 600;
+}
+.picker-main {
+    flex: 1;
+}
+</style>
diff --git a/resources/js/Pages/Analytics/Index.vue b/resources/js/Pages/Analytics/Index.vue
new file mode 100644
index 0000000..a2424ca
--- /dev/null
+++ b/resources/js/Pages/Analytics/Index.vue
@@ -0,0 +1,188 @@
+<script setup>
+import { ref, h, computed } from 'vue'
+import { router, Link } from '@inertiajs/vue3'
+import {
+    NButton, NText, NDataTable, NEmpty, NDropdown, NIcon, NScrollbar,
+    NTag, useDialog, useMessage,
+} from 'naive-ui'
+import { TbReportMedical, TbPlus, TbDotsVertical, TbLayoutGrid } from 'vue-icons-plus/tb'
+import AppLayout from '../../Layouts/AppLayout.vue'
+import AppContainer from '../../Components/AppContainer.vue'
+import SectionCard from '../../Components/SectionCard.vue'
+import PageBanner from '../../Components/PageBanner.vue'
+import PresetCard from './Components/PresetCard.vue'
+import TemplatePickerModal from './Components/TemplatePickerModal.vue'
+
+const props = defineProps({
+    documents: { type: Array, default: () => [] },
+    presets: { type: Array, default: () => [] },
+    categories: { type: Array, default: () => [] },
+    canManage: { type: Boolean, default: false },
+})
+
+const dialog = useDialog()
+const message = useMessage()
+const showPicker = ref(false)
+
+// «Отчёт с нуля» + первые шаблоны в ленте создания.
+const blankPreset = computed(() => props.presets.find((p) => p.key === 'blank'))
+const featured = computed(() => props.presets.filter((p) => p.key !== 'blank').slice(0, 5))
+
+const openPreset = (preset) => {
+    router.get(preset.key === 'blank' ? '/reports/new' : `/reports/new?preset=${preset.key}`)
+}
+
+const openDocument = (id) => router.get(`/reports/${id}`)
+
+const rowProps = (row) => ({ style: 'cursor: pointer;', onClick: () => openDocument(row.id) })
+
+const duplicate = (row) => router.post(`/reports/${row.id}/duplicate`)
+
+const remove = (row) => {
+    dialog.warning({
+        title: 'Удалить отчёт',
+        content: `Удалить «${row.name}»? Действие необратимо.`,
+        positiveText: 'Удалить',
+        negativeText: 'Отмена',
+        onPositiveClick: () => router.delete(`/reports/${row.id}`, {
+            preserveScroll: true,
+            onSuccess: () => message.success('Отчёт удалён'),
+        }),
+    })
+}
+
+const rowMenu = (row) => [
+    { key: 'open', label: 'Открыть' },
+    { key: 'duplicate', label: 'Дублировать' },
+    { key: 'delete', label: 'Удалить', props: { style: 'color: var(--error-color);' } },
+]
+
+const onMenuSelect = (key, row) => {
+    if (key === 'open') openDocument(row.id)
+    if (key === 'duplicate') duplicate(row)
+    if (key === 'delete') remove(row)
+}
+
+const columns = computed(() => [
+    {
+        title: 'Название',
+        key: 'name',
+        render: (row) => h('div', {}, [
+            h('div', { style: 'font-weight: 600;' }, row.name),
+            row.description ? h(NText, { depth: 3, style: 'font-size: 12px;' }, () => row.description) : null,
+        ]),
+    },
+    { title: 'Источник', key: 'datasetLabel', width: 200, render: (row) => h(NTag, { size: 'small', bordered: false, round: true }, () => row.datasetLabel) },
+    { title: 'Автор', key: 'author', width: 180, render: (row) => row.author ?? '—' },
+    { title: 'Изменено', key: 'updatedAt', width: 130, render: (row) => row.updatedAt ?? '—' },
+    {
+        title: '',
+        key: 'actions',
+        width: 56,
+        render: (row) => props.canManage
+            ? h(NDropdown, {
+                trigger: 'click',
+                options: rowMenu(row),
+                onSelect: (key) => onMenuSelect(key, row),
+            }, () => h(NButton, {
+                text: true,
+                onClick: (e) => e.stopPropagation(),
+            }, () => h(NIcon, null, () => h(TbDotsVertical)))) : null,
+    },
+])
+</script>
+
+<template>
+    <AppLayout>
+        <AppContainer>
+            <PageBanner
+                title="Отчёты"
+                :icon="TbReportMedical"
+                :breadcrumbs="[{ label: 'Главная', href: '/', tag: Link }]"
+            >
+                <template #meta>
+                    <NText depth="3" style="font-size: 13px;">Создавайте отчёты с нуля или по готовым шаблонам</NText>
+                </template>
+            </PageBanner>
+
+            <SectionCard v-if="canManage" title="Создание отчёта">
+                <template #header-extra>
+                    <NButton text type="primary" @click="showPicker = true">
+                        <template #icon><TbLayoutGrid /></template>
+                        Открыть все шаблоны
+                    </NButton>
+                </template>
+                <NScrollbar x-scrollable class="pb-3">
+                    <div class="create-row">
+                        <div class="create-card" @click="openPreset({ key: 'blank' })">
+                            <div class="blank-tile"><NIcon :size="28"><TbPlus /></NIcon></div>
+                            <NText class="blank-title">Отчёт с нуля</NText>
+                        </div>
+                        <div v-for="preset in featured" :key="preset.key" class="create-card" @click="openPreset(preset)">
+                            <PresetCard :preset="preset" />
+                        </div>
+                    </div>
+                </NScrollbar>
+            </SectionCard>
+
+            <SectionCard title="Отчёты" no-padding>
+                <NEmpty v-if="!documents.length" description="Пока нет сохранённых отчётов" style="padding: 32px;" />
+                <NDataTable
+                    v-else
+                    min-height="calc(100vh - 570px)"
+                    :columns="columns"
+                    :data="documents"
+                    :row-props="rowProps"
+                    :bordered="false"
+                    size="small"
+                />
+            </SectionCard>
+
+            <TemplatePickerModal
+                v-model:show="showPicker"
+                :presets="presets"
+                :categories="categories"
+                @select="openPreset"
+            />
+        </AppContainer>
+    </AppLayout>
+</template>
+
+<style scoped>
+:deep(.n-data-table-th) { background: transparent !important; }
+:deep(.n-data-table) { background: transparent; }
+:deep(.n-data-table-wrapper) { border-radius: 0; }
+:deep(.n-data-table-th .n-data-table-th__title) { font-size: 12px; }
+:deep(.n-data-table-td) { font-size: 13px; }
+
+.create-row {
+    display: flex;
+    gap: 12px;
+    padding-top: 2px;
+}
+.create-card {
+    width: 220px;
+    flex-shrink: 0;
+}
+.blank-tile {
+    height: 84px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary-color);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+    margin-bottom: 10px;
+}
+.create-card .blank-tile { border: 1px dashed color-mix(in srgb, var(--primary-color) 40%, transparent); }
+.create-card:first-child {
+    border: 1px solid var(--n-border-color, rgba(255,255,255,.1));
+    border-radius: 12px;
+    padding: 14px;
+    cursor: pointer;
+    transition: border-color .15s, transform .15s;
+    background: var(--n-card-color);
+}
+.create-card:first-child:hover { border-color: var(--primary-color); transform: translateY(-2px); }
+.blank-title { display: block; font-weight: 600; font-size: 14px; }
+</style>