Роли, переделывание отчета, изменение на главной странице

resources/js/Pages/Report/Components/ReportSectionHeader.vue

@@ -0,0 +1,55 @@
+<script setup>
+import {computed, onMounted, ref} from "vue";
+import {NSkeleton, NText} from 'naive-ui'
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: null
+    },
+    status: {
+        type: String,
+        default: null
+    }
+})
+
+const isLoading = ref(true)
+const countPatient = ref(null)
+const fetchPatientCount = async () => {
+    if (props.status === 'plan' || props.status === 'emergency') {
+        isLoading.value = true
+        await axios.post('/api/mis/patients/count', {
+            status: props.status
+        }).then((res) => {
+            countPatient.value = res.data
+        }).finally(() => {
+            isLoading.value = false
+        })
+    } else {
+        isLoading.value = false
+    }
+}
+
+const computedHeader = computed(() => {
+    if (countPatient.value !== null) {
+        return `${props.title} (${countPatient.value})`
+    } else {
+        return props.title
+    }
+})
+
+onMounted(async () => {
+    await fetchPatientCount()
+})
+</script>
+
+<template>
+    <NSkeleton text style="width: 128px; height: 22px" round v-if="isLoading" />
+    <NText v-else>
+        {{ computedHeader }}
+    </NText>
+</template>
+
+<style scoped>
+
+</style>