ricardo
c0b983e016
- Tailwind CSS v4 con @tailwindcss/vite - shadcn-vue: 19 componentes UI (button, card, dialog, table, select, tabs, sidebar, separator, breadcrumb, badge, avatar, dropdown-menu, tooltip, input, switch, sheet, skeleton) - Sidebar collapsible con íconos Lucide - Theme Teloprax en CSS variables (rojo #E63946, negro #1A1A2E) - LoginView, DashboardView, CalendarView, SchedulerView migrados - Eliminado AppShell.vue manual (reemplazado por SidebarProvider) - Layout con breadcrumb, sidebar trigger, header unificado
98 lines
3.7 KiB
Vue
98 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useProjectsStore } from '@/stores/projects'
|
|
import { Activity, AlertTriangle, ClipboardList, FileText } from 'lucide-vue-next'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
const projects = useProjectsStore()
|
|
const project = computed(() => projects.selected)
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="project" class="space-y-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold tracking-tight">{{ project.name }}</h1>
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<span v-if="project.key" class="text-sm text-muted-foreground">Clave: {{ project.key }}</span>
|
|
<Badge v-if="project.status" variant="outline" class="text-xs">
|
|
{{ project.status }}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<Card>
|
|
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle class="text-sm font-medium">Historias de Usuario</CardTitle>
|
|
<ClipboardList class="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="text-2xl font-bold">—</div>
|
|
<p class="text-xs text-muted-foreground">HUs en el proyecto</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle class="text-sm font-medium">Síntomas activos</CardTitle>
|
|
<Activity class="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="text-2xl font-bold">—</div>
|
|
<p class="text-xs text-muted-foreground">HUs en progreso</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle class="text-sm font-medium">Riesgos</CardTitle>
|
|
<AlertTriangle class="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="text-2xl font-bold">—</div>
|
|
<p class="text-xs text-muted-foreground">Riesgos detectados</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle class="text-sm font-medium">Transcripciones</CardTitle>
|
|
<FileText class="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="text-2xl font-bold">—</div>
|
|
<p class="text-xs text-muted-foreground">Sesiones procesadas</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Historia clínica</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p v-if="project.description" class="text-sm text-muted-foreground leading-relaxed">
|
|
{{ project.description }}
|
|
</p>
|
|
<p v-else class="text-sm text-muted-foreground italic">Sin descripción del paciente</p>
|
|
|
|
<div v-if="project.start_date" class="grid grid-cols-2 gap-4 mt-4">
|
|
<div>
|
|
<span class="text-xs text-muted-foreground">Ingreso</span>
|
|
<p class="text-sm font-medium">{{ project.start_date }}</p>
|
|
</div>
|
|
<div v-if="project.end_date">
|
|
<span class="text-xs text-muted-foreground">Alta prevista</span>
|
|
<p class="text-sm font-medium">{{ project.end_date }}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<div v-else class="flex items-center justify-center h-full text-muted-foreground text-sm">
|
|
<p v-if="projects.loading">Cargando pacientes...</p>
|
|
<p v-else>Seleccioná un paciente del panel lateral</p>
|
|
</div>
|
|
</template>
|