Работа над журналом для ст. мед сестер

resources/js/Components/AppPanel.vue

@@ -61,10 +61,13 @@ watch(() => [props.minH, props.maxH], ([minH, maxH]) => {
 
 <template>
     <NFormItem :show-label="hasHeaderInOutside" :label="header" :show-feedback="hasFeedback" :feedback="feedback">
-        <NCard :class="noPadding ? 'no-padding h-full' : ''">
-            <template v-if="!hasHeaderInOutside" #header>
+        <NCard :class="noPadding ? 'no-padding h-full' : 'h-full'">
+            <template v-if="!hasHeaderInOutside && header" #header>
                 {{ header }}
             </template>
+            <template #header-extra>
+                <slot name="header-extra" />
+            </template>
             <NScrollbar :style="styles">
                 <slot />
             </NScrollbar>

resources/js/Components/AppRadio.vue

@@ -0,0 +1,60 @@
+<script setup>
+import {NRadio} from 'naive-ui'
+const props = defineProps({
+    title: { type: String },
+    description: { type: String, default: null }
+})
+</script>
+
+<template>
+    <NRadio value="pro" class="radio-card">
+        <div class="card-content">
+            <strong class="card-title">{{ title }}</strong>
+            <span v-if="description">{{ description }}</span>
+        </div>
+    </NRadio>
+</template>
+
+<style scoped>
+/* Убираем стандартные отступы Naive UI */
+.radio-card {
+    margin-right: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+/* Скрываем стандартный радио-кружок */
+.radio-card :deep(.n-radio__action) {
+    display: none;
+}
+
+/* Превращаем сам n-radio в карточку */
+.radio-card {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--n-text-color-disabled);
+    border-radius: 8px;
+    padding: 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-width: 200px;
+    flex: 1;
+}
+
+.radio-card:hover {
+    border-color: var(--n-dot-color-active);
+}
+
+/* Состояние "выбрано" */
+.radio-card.n-radio--checked {
+    border-color: var(--n-dot-color-active);
+}
+
+/* Отключаем выделение текста внутри карточки */
+.card-content {
+    pointer-events: none;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    padding-left: 8px;
+}
+</style>

resources/js/Components/UrgencyBadge.vue

@@ -0,0 +1,24 @@
+<script setup>
+import {computed} from "vue";
+import {NTag} from 'naive-ui'
+
+const props = defineProps({
+    urgencyId: {
+        type: Number,
+        default: 0
+    }
+})
+
+const typeForUrgency = computed(() => props.urgencyId === 1 ? 'success' : 'error')
+const textForUrgency = computed(() => props.urgencyId === 1 ? 'Планово' : 'Экстренно')
+</script>
+
+<template>
+    <NTag :type="typeForUrgency" round :bordered="false" size="small">
+        {{ textForUrgency }}
+    </NTag>
+</template>
+
+<style scoped>
+
+</style>