Alpha: eliminar referencias Teloprax + dashboard estilo shadcn demo
- Sidebar: logo 'A', título Alpha / KAPPA Hub - Login: icono Alpha, sin branding Teloprax - Dashboard rediseñado: 4 stats cards + historia clínica + actividad + tabla - Theme: default shadcn-vue (colores demo page) - Favicon: 'A' sobre fondo neutral - Eliminado NavMain.vue no usado
This commit is contained in:
+126
-63
@@ -1,97 +1,160 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useProjectsStore } from '@/stores/projects'
|
||||
import { Activity, AlertTriangle, ClipboardList, FileText } from 'lucide-vue-next'
|
||||
import { Activity, CreditCard, DollarSign, FileText, Users } from 'lucide-vue-next'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
|
||||
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 v-if="project" class="flex flex-1 flex-col gap-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight">{{ project.name }}</h1>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<Badge v-if="project.key" variant="outline" class="text-xs">{{ project.key }}</Badge>
|
||||
<Badge v-if="project.status" variant="secondary" class="text-xs capitalize">{{ project.status }}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="outline" class="text-xs">v0.1.0</Badge>
|
||||
</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>
|
||||
<p class="text-xs text-muted-foreground">Total HUs del 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">En progreso</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 activas</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 detectados</CardTitle>
|
||||
<CreditCard class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">—</div>
|
||||
<p class="text-xs text-muted-foreground">Desde transcripciones</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">Sesiones</CardTitle>
|
||||
<Users class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">—</div>
|
||||
<p class="text-xs text-muted-foreground">Transcripciones procesadas</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="text-sm font-medium">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/50 italic">Sin descripción</p>
|
||||
|
||||
<div v-if="project.start_date" class="mt-4 space-y-2">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-muted-foreground">Ingreso</span>
|
||||
<span class="font-medium">{{ project.start_date }}</span>
|
||||
</div>
|
||||
<div v-if="project.end_date" class="flex items-center justify-between text-sm">
|
||||
<span class="text-muted-foreground">Alta prevista</span>
|
||||
<span class="font-medium">{{ project.end_date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="text-sm font-medium">Actividad reciente</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="space-y-4">
|
||||
<div v-for="i in 3" :key="i" class="flex items-center gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-muted-foreground/30" />
|
||||
<div class="flex-1 space-y-1">
|
||||
<p class="text-sm font-medium leading-none">Sesión {{ 4 - i }}</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ new Date(2026, 4, 15 - i * 4).toLocaleDateString('es-CO', { month: 'long', day: 'numeric' }) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground/50 mt-4 italic">Datos de KAPPA pendientes de carga</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Historia clínica</CardTitle>
|
||||
<CardHeader class="flex flex-row items-center justify-between">
|
||||
<CardTitle class="text-sm font-medium">Work Items</CardTitle>
|
||||
<Badge variant="outline" class="text-[10px]">Próximamente</Badge>
|
||||
</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>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Código</TableHead>
|
||||
<TableHead>Título</TableHead>
|
||||
<TableHead>Estado</TableHead>
|
||||
<TableHead class="text-right">Prioridad</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow v-for="i in 5" :key="i">
|
||||
<TableCell class="font-mono text-xs text-muted-foreground">HU-{{ String(i).padStart(3, '0') }}</TableCell>
|
||||
<TableCell class="text-muted-foreground/50 italic">Pendiente de carga</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" class="text-[10px]">backlog</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="text-right text-muted-foreground/50">—</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</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 v-else class="flex flex-1 items-center justify-center">
|
||||
<div class="text-center space-y-2">
|
||||
<p v-if="projects.loading" class="text-sm text-muted-foreground">Cargando...</p>
|
||||
<p v-else class="text-sm text-muted-foreground">Seleccioná un proyecto del panel lateral</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user