* блокировка изменения отчета для врача

* вывод данных из отчетов для ролей адм и зав
* поправил ширину стобцов ввода
* добавил календарь на страницу статистики
* переделал календарь у заведующего на странице отчета
* добавил и привязал метрики в статистику

resources/js/Components/DatePickerQuery.vue

@@ -0,0 +1,117 @@
+<script setup>
+import {NDatePicker, NIcon, } from 'naive-ui'
+import {computed, onMounted, ref, watch} from "vue";
+import {router} from "@inertiajs/vue3";
+import {TbCalendar} from 'vue-icons-plus/tb'
+import {formatRussianDate, formatRussianDateRange} from "../Utils/dateFormatter.js";
+const props = defineProps({
+    // Пользователь с ролью админ или зав
+    isHeadOrAdmin: {
+        type: Boolean,
+        default: false
+    },
+    date: {
+        type: [Number, Array]
+    },
+    isOneDay: {
+        type: Boolean
+    }
+})
+
+const isUseDateRange = computed(() => props.isHeadOrAdmin)
+const datePicker = ref()
+const showCalendar = ref(false)
+const dateType = computed(() => {
+    if (isUseDateRange.value) return 'daterange'
+    return 'date'
+})
+
+const queryDate = ref([null, null])
+const modelValue = ref(props.date)
+
+const setQueryDate = () => {
+    router.reload({
+        data: {
+            startAt: queryDate.value[0],
+            endAt: queryDate.value[1]
+        }
+    })
+}
+
+// Форматированное значение для отображения
+const formattedValue = computed(() => {
+    const value = modelValue.value
+
+    if (props.isHeadOrAdmin) {
+        if (props.isOneDay) {
+            const dateToFormat = Array.isArray(value) ? value[1] : value
+            return formatRussianDate(dateToFormat)
+        } else if (Array.isArray(value) && value.length >= 2 && value[0] && value[1]) { // Для админа - диапазон дат
+            return formatRussianDateRange(value)
+        }
+
+        // Если что-то пошло не так, форматируем как одиночную дату
+        if (value) {
+            const dateToFormat = Array.isArray(value) ? value[0] : value
+            return formatRussianDate(dateToFormat)
+        }
+
+        return ''
+    } else {
+        // Для врача - одиночная дата
+        let dateToFormat
+
+        if (Array.isArray(value)) {
+            dateToFormat = value[1] || value[0]
+        } else {
+            dateToFormat = value
+        }
+
+        // Если выбрана сегодняшняя дата - показываем текущее время
+        if (dateToFormat) {
+            return formatRussianDate(dateToFormat)
+        }
+        return ''
+    }
+})
+
+watch(() => modelValue.value, (newVal) => {
+    if (isUseDateRange.value) {
+        queryDate.value = newVal
+    } else {
+        queryDate.value = [newVal, newVal]
+    }
+
+    setQueryDate()
+})
+</script>
+
+<template>
+    <div class="relative inline-flex items-center">
+        <div v-if="formattedValue" class="font-medium leading-3 cursor-pointer" @click="showCalendar = true">
+            {{ formattedValue }}
+        </div>
+
+        <NDatePicker v-model:value="modelValue"
+                     v-model:show="showCalendar"
+                     ref="datePicker"
+                     class="opacity-0 absolute! inset-x-0 bottom-full -translate-y-1/2"
+                     placement="top-start"
+                     input-readonly
+                     bind-calendar-months
+                     update-value-on-close
+                     :type="dateType" />
+        <div class="cursor-pointer p-2 flex items-center justify-center" @click="showCalendar = true">
+            <NIcon size="20">
+                <TbCalendar />
+            </NIcon>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+:deep(.n-input) {
+    position: absolute;
+    pointer-events: none;
+}
+</style>