Профиль хирургии

resources/js/Layouts/AppLayout.vue

@@ -26,6 +26,10 @@ const themeOverrides = {
                     <template #headerExtra>
                         <slot name="headerExtra" />
                     </template>
+
+                    <template #headerSuffix>
+                        <slot name="headerSuffix" />
+                    </template>
                 </AppHeader>
             </NLayoutHeader>
 

resources/js/Layouts/Components/AppHeader.vue

@@ -7,7 +7,19 @@ import AppHeaderRole from "./AppHeaderRole.vue";
 import {computed, useSlots} from "vue";
 
 const slots = useSlots()
-const hasHeaderExtra = computed(() => !!slots.headerExtra)
+const hasHeaderExtra = computed(() => {
+    if (!slots.headerExtra) return false
+
+    const slotContent = slots.headerExtra()
+    return slotContent && slotContent.length > 0 && slotContent[0].children.length > 0
+})
+
+const hasHeaderSuffix = computed(() => {
+    if (!slots.headerExtra) return false
+
+    const slotContent = slots.headerExtra()
+    return slotContent && slotContent.length > 0 && slotContent[0].children.length > 0
+})
 </script>
 
 <template>
@@ -20,7 +32,11 @@ const hasHeaderExtra = computed(() => !!slots.headerExtra)
             <slot name="headerExtra" />
         </NSpace>
         <div></div>
-        <AppUserButton />
+        <NFlex align="center" justify="end">
+            <slot name="headerSuffix" />
+            <NDivider v-if="hasHeaderSuffix" vertical />
+            <AppUserButton />
+        </NFlex>
     </div>
 </template>
 

resources/js/Layouts/Components/Statistic/StatisticRecipientPlanOfYear.vue

@@ -0,0 +1,45 @@
+<script setup>
+import {NNumberAnimation, NTag, NFlex} from "naive-ui"
+import {computed} from "vue";
+const props = defineProps({
+    plan: {
+        type: Number,
+        default: 0
+    },
+    progress: {
+        type: Number,
+        default: 0
+    }
+})
+
+const percentProgress = computed(() => {
+    if (!Number(props.plan) && !Number(props.progress)) return 0
+    return (props.progress * 100) / props.plan
+})
+
+const percentColor = computed(() => {
+    if (percentProgress.value < 50) return 'color: var(--color-red-500);' // Ужасно
+    if (percentProgress.value >= 50 && percentProgress.value < 80) return 'color: var(--color-amber-500);' // Плохо
+    if (percentProgress.value >= 80) return 'color: var(--color-emerald-500);' // Хорошо
+})
+
+</script>
+
+<template>
+    <NTag round :bordered="true">
+        <NFlex align="center" justify="center">
+            <div>
+                План:
+                <span :style="percentColor">
+                    <NNumberAnimation  show-separator :from="0" :to="progress" />
+                </span>
+                из
+                <NNumberAnimation show-separator :from="0" :to="plan" />
+            </div>
+        </NFlex>
+    </NTag>
+</template>
+
+<style scoped>
+
+</style>