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

resources/js/Pages/Path/Patient.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { ref } from 'vue'
+import {useVueFlow, VueFlow} from '@vue-flow/core'
+import AppLayout from "../../Layouts/AppLayout.vue";
+
+const props = defineProps({
+    path: {
+        type: Object,
+        default: {}
+    }
+})
+
+
+const elements = ref([
+    // Ноды (блоки)
+    {
+        id: '1',
+        type: 'input',
+        label: 'Поступление',
+        position: { x: 100, y: 50 },
+        data: {
+            patient: 'Иванов И.И.',
+            time: '09:00',
+            status: 'arrival'
+        },
+        class: 'node-arrival'
+    },
+    {
+        id: '2',
+        label: 'Первичный осмотр',
+        position: { x: 300, y: 50 },
+        data: {
+            doctor: 'Петров П.П.',
+            diagnosis: 'Предварительный',
+            duration: '30 мин'
+        },
+        class: 'node-examination'
+    },
+    {
+        id: '3',
+        label: 'Анализы',
+        position: { x: 500, y: 50 },
+        data: {
+            tests: ['Кровь', 'Моча', 'УЗИ'],
+            lab: 'Лаборатория №1'
+        },
+        class: 'node-tests'
+    },
+    {
+        id: '4',
+        label: 'Лечение',
+        position: { x: 300, y: 200 },
+        data: {
+            procedures: ['Капельница', 'Уколы'],
+            ward: 'Палата 304'
+        },
+        class: 'node-treatment'
+    },
+    {
+        id: '5',
+        type: 'output',
+        label: 'Выписка',
+        position: { x: 100, y: 350 },
+        data: {
+            outcome: 'Выздоровление',
+            date: '2024-01-15'
+        },
+        class: 'node-discharge'
+    },
+])
+
+const edges = ref([
+    { id: 'e1-2', source: '1', target: '2', label: 'Направлен' },
+    { id: 'e2-3', source: '2', target: '3', label: 'На анализы' },
+    { id: 'e3-4', source: '3', target: '4', label: 'Результаты' },
+    { id: 'e4-5', source: '4', target: '5', label: 'Завершено' }
+])
+</script>
+
+<template>
+    <AppLayout>
+        <div class="h-[calc(100vh-48px)]">
+            <VueFlow v-model:nodes="elements" v-model:edges="edges" :fit-view-on-init="true">
+                <template #node-custom="{ data, label }">
+                    <div class="patient-node">
+                        <div class="node-icon">
+                            <span v-if="data.status === 'arrival'">🏥</span>
+                            <span v-else-if="data.doctor">👨‍⚕️</span>
+                            <span v-else-if="data.tests">🧪</span>
+                            <span v-else-if="data.procedures">💉</span>
+                            <span v-else>✅</span>
+                        </div>
+                        <div class="node-info">
+                            <strong>{{ label }}</strong>
+                            <div v-if="data.patient" class="patient-name">
+                                {{ data.patient }}
+                            </div>
+                            <div v-if="data.time" class="node-time">
+                                ⏰ {{ data.time }}
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </VueFlow>
+        </div>
+    </AppLayout>
+</template>
+
+<style scoped>
+/* Цвета для разных типов нод */
+.node-arrival { border-color: #4CAF50; }
+.node-examination { border-color: #2196F3; }
+.node-tests { border-color: #FF9800; }
+.node-treatment { border-color: #9C27B0; }
+.node-discharge { border-color: #607D8B; }
+</style>