Migración a shadcn-vue + Tailwind CSS v4
- 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
This commit is contained in:
+84
-132
@@ -1,145 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useProjectsStore } from '@/stores/projects'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
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 auth = useAuthStore()
|
||||
|
||||
const project = computed(() => projects.selected)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard" v-if="project">
|
||||
<header class="dash-header">
|
||||
<div>
|
||||
<h2 class="dash-title">{{ project.name }}</h2>
|
||||
<div class="dash-meta-row">
|
||||
<span v-if="project.key" class="dash-meta">Clave: {{ project.key }}</span>
|
||||
<span v-if="project.status" class="dash-badge">{{ project.status }}</span>
|
||||
</div>
|
||||
<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 class="dash-user">
|
||||
<span class="user-name">{{ auth.user?.name }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="dash-grid">
|
||||
<section class="card">
|
||||
<h3>Historia clínica</h3>
|
||||
<p class="card-desc" v-if="project.description">{{ project.description }}</p>
|
||||
<p class="card-empty" v-else>Sin descripción del paciente</p>
|
||||
<dl class="card-dl" v-if="project.start_date">
|
||||
<dt>Ingreso</dt><dd>{{ project.start_date }}</dd>
|
||||
<dt v-if="project.end_date">Alta prevista</dt><dd v-if="project.end_date">{{ project.end_date }}</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h3>Síntomas</h3>
|
||||
<p class="card-empty">Historias de Usuario detectadas</p>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h3>Bitácora</h3>
|
||||
<p class="card-empty">Registro de sesiones</p>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h3>Tratamiento</h3>
|
||||
<p class="card-empty">Planeación del proyecto</p>
|
||||
</section>
|
||||
|
||||
<section class="card card-wide">
|
||||
<h3>Transcripciones</h3>
|
||||
<p class="card-empty">Pipeline consultas → diagnóstico</p>
|
||||
</section>
|
||||
</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>
|
||||
|
||||
<style scoped>
|
||||
.dashboard { max-width: 1200px; }
|
||||
|
||||
.dash-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.dash-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.dash-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.dash-meta {
|
||||
font-size: 12px;
|
||||
color: #8888AA;
|
||||
}
|
||||
.dash-badge {
|
||||
font-size: 11px;
|
||||
padding: 2px 10px;
|
||||
background: rgba(230,57,70,0.12);
|
||||
color: #E63946;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.dash-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.user-name {
|
||||
font-size: 12px;
|
||||
color: #8888AA;
|
||||
}
|
||||
|
||||
.dash-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #141428;
|
||||
border: 1px solid #2A2A45;
|
||||
border-radius: 8px;
|
||||
padding: 22px;
|
||||
}
|
||||
.card-wide { grid-column: 1 / -1; }
|
||||
.card h3 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #E63946;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.card-desc {
|
||||
margin: 0 0 12px;
|
||||
font-size: 13px;
|
||||
color: #B0B0CC;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.card-empty {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #555577;
|
||||
}
|
||||
.card-dl {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 4px 12px;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.card-dl dt { color: #8888AA; font-size: 12px; }
|
||||
.card-dl dd { color: #E6EDF3; margin: 0; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user