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:
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "https://shadcn-vue.com/schema.json",
|
||||
"style": "default",
|
||||
"style": "reka-nova",
|
||||
"font": "geist-sans",
|
||||
"typescript": true,
|
||||
"tailwind": {
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Teloprax Alpha</title>
|
||||
<title>Alpha — KAPPA Hub</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
+2
-4
@@ -1,6 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="6" fill="#1A1A2E"/>
|
||||
<circle cx="10" cy="16" r="4.5" fill="none" stroke="#E63946" stroke-width="2"/>
|
||||
<circle cx="18" cy="16" r="5.5" fill="none" stroke="#E63946" stroke-width="2"/>
|
||||
<circle cx="26" cy="16" r="6.5" fill="#E63946"/>
|
||||
<rect width="32" height="32" rx="8" fill="#18181b"/>
|
||||
<text x="16" y="22" text-anchor="middle" fill="#fafafa" font-size="18" font-weight="700" font-family="system-ui">A</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 338 B After Width: | Height: | Size: 247 B |
@@ -4,20 +4,28 @@ import {
|
||||
LayoutDashboard,
|
||||
Calendar,
|
||||
Clock,
|
||||
type Component,
|
||||
ChevronRight,
|
||||
} from 'lucide-vue-next'
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
SidebarRail,
|
||||
} from '@/components/ui/sidebar'
|
||||
import NavMain from './NavMain.vue'
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
||||
import NavProjects from './NavProjects.vue'
|
||||
import NavUser from './NavUser.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
defineProps<{
|
||||
activeTab: string
|
||||
}>()
|
||||
|
||||
@@ -28,47 +36,63 @@ const emit = defineEmits<{
|
||||
function setTab(tab: string) {
|
||||
emit('update:activeTab', tab)
|
||||
}
|
||||
|
||||
const mainItems = computed(() => [
|
||||
{
|
||||
title: 'Diagnóstico',
|
||||
icon: LayoutDashboard,
|
||||
isActive: props.activeTab === 'dashboard',
|
||||
onClick: () => setTab('dashboard'),
|
||||
},
|
||||
{
|
||||
title: 'Calendario',
|
||||
icon: Calendar,
|
||||
isActive: props.activeTab === 'calendar',
|
||||
onClick: () => setTab('calendar'),
|
||||
},
|
||||
{
|
||||
title: 'Recetas',
|
||||
icon: Clock,
|
||||
isActive: props.activeTab === 'scheduler',
|
||||
onClick: () => setTab('scheduler'),
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Sidebar collapsible="icon">
|
||||
<Sidebar collapsible="icon" variant="inset">
|
||||
<SidebarHeader>
|
||||
<div class="flex items-center gap-2 px-2 py-1 group-data-[collapsible=icon]:justify-center">
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span class="block rounded-full border-2 border-primary opacity-35 w-2 h-2" />
|
||||
<span class="block rounded-full border-2 border-primary opacity-65 w-[11px] h-[11px]" />
|
||||
<span class="block rounded-full bg-primary w-[14px] h-[14px]" />
|
||||
</div>
|
||||
<div class="group-data-[collapsible=icon]:hidden flex flex-col min-w-0">
|
||||
<span class="font-display font-bold text-base leading-tight">teloprax</span>
|
||||
<span class="text-[10px] text-muted-foreground leading-tight">ideas en progreso</span>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg" as="button" @click="setTab('dashboard')">
|
||||
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
|
||||
<span class="font-bold text-sm">A</span>
|
||||
</div>
|
||||
<div class="grid flex-1 text-left text-sm leading-tight">
|
||||
<span class="truncate font-semibold">Alpha</span>
|
||||
<span class="truncate text-xs">KAPPA Hub</span>
|
||||
</div>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<NavMain :items="mainItems" label="Navegación" />
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Navegación</SidebarGroupLabel>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
:is-active="activeTab === 'dashboard'"
|
||||
:tooltip="'Diagnóstico'"
|
||||
@click="setTab('dashboard')"
|
||||
>
|
||||
<LayoutDashboard />
|
||||
<span>Diagnóstico</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
:is-active="activeTab === 'calendar'"
|
||||
:tooltip="'Calendario'"
|
||||
@click="setTab('calendar')"
|
||||
>
|
||||
<Calendar />
|
||||
<span>Calendario</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
:is-active="activeTab === 'scheduler'"
|
||||
:tooltip="'Recetas'"
|
||||
@click="setTab('scheduler')"
|
||||
>
|
||||
<Clock />
|
||||
<span>Recetas</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
|
||||
<NavProjects />
|
||||
</SidebarContent>
|
||||
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { type Component, computed } from 'vue'
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from '@/components/ui/sidebar'
|
||||
|
||||
export interface NavItem {
|
||||
title: string
|
||||
icon: Component
|
||||
isActive?: boolean
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
items: NavItem[]
|
||||
label?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel v-if="label">{{ label }}</SidebarGroupLabel>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem v-for="item in items" :key="item.title">
|
||||
<SidebarMenuButton
|
||||
as="button"
|
||||
:is-active="item.isActive"
|
||||
:tooltip="item.title"
|
||||
@click="item.onClick?.()"
|
||||
>
|
||||
<component :is="item.icon" v-if="item.icon" class="size-4" />
|
||||
<span>{{ item.title }}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
|
||||
import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
|
||||
|
||||
const props = defineProps<CollapsibleRootProps>()
|
||||
const emits = defineEmits<CollapsibleRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CollapsibleRoot
|
||||
v-slot="slotProps"
|
||||
data-slot="collapsible"
|
||||
v-bind="forwarded"
|
||||
>
|
||||
<slot v-bind="slotProps" />
|
||||
</CollapsibleRoot>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import type { CollapsibleContentProps } from 'reka-ui'
|
||||
import { CollapsibleContent } from 'reka-ui'
|
||||
|
||||
const props = defineProps<CollapsibleContentProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CollapsibleContent
|
||||
data-slot="collapsible-content"
|
||||
v-bind="props"
|
||||
>
|
||||
<slot />
|
||||
</CollapsibleContent>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import type { CollapsibleTriggerProps } from 'reka-ui'
|
||||
import { CollapsibleTrigger } from 'reka-ui'
|
||||
|
||||
const props = defineProps<CollapsibleTriggerProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CollapsibleTrigger
|
||||
data-slot="collapsible-trigger"
|
||||
v-bind="props"
|
||||
>
|
||||
<slot />
|
||||
</CollapsibleTrigger>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as Collapsible } from './Collapsible.vue'
|
||||
export { default as CollapsibleContent } from './CollapsibleContent.vue'
|
||||
export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
|
||||
+66
-65
@@ -10,8 +10,8 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-heading: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-sans: 'Geist Variable', sans-serif;
|
||||
--font-heading: var(--font-sans);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
@@ -50,85 +50,85 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.5rem;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--background: oklch(0.15 0.025 280);
|
||||
--foreground: oklch(0.92 0.005 260);
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
|
||||
--card: oklch(0.12 0.02 280);
|
||||
--card-foreground: oklch(0.92 0.005 260);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
|
||||
--popover: oklch(0.12 0.02 280);
|
||||
--popover-foreground: oklch(0.92 0.005 260);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
|
||||
--primary: oklch(0.55 0.22 20);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
|
||||
--secondary: oklch(0.17 0.02 280);
|
||||
--secondary-foreground: oklch(0.92 0.005 260);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
|
||||
--muted: oklch(0.12 0.02 280);
|
||||
--muted-foreground: oklch(0.6 0.03 280);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
|
||||
--accent: oklch(0.17 0.02 280);
|
||||
--accent-foreground: oklch(0.92 0.005 260);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
|
||||
--destructive: oklch(0.55 0.22 20);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
|
||||
--border: oklch(0.22 0.03 280);
|
||||
--input: oklch(0.15 0.025 280);
|
||||
--ring: oklch(0.55 0.22 20);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
|
||||
--chart-1: oklch(0.55 0.22 20);
|
||||
--chart-2: oklch(0.6 0.15 180);
|
||||
--chart-3: oklch(0.65 0.2 80);
|
||||
--chart-4: oklch(0.5 0.2 300);
|
||||
--chart-5: oklch(0.55 0.1 40);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
|
||||
--sidebar: oklch(0.12 0.02 280);
|
||||
--sidebar-foreground: oklch(0.92 0.005 260);
|
||||
--sidebar-primary: oklch(0.55 0.22 20);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.17 0.02 280);
|
||||
--sidebar-accent-foreground: oklch(0.92 0.005 260);
|
||||
--sidebar-border: oklch(0.22 0.03 280);
|
||||
--sidebar-ring: oklch(0.55 0.22 20);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.15 0.025 280);
|
||||
--foreground: oklch(0.92 0.005 260);
|
||||
--card: oklch(0.12 0.02 280);
|
||||
--card-foreground: oklch(0.92 0.005 260);
|
||||
--popover: oklch(0.12 0.02 280);
|
||||
--popover-foreground: oklch(0.92 0.005 260);
|
||||
--primary: oklch(0.55 0.22 20);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.17 0.02 280);
|
||||
--secondary-foreground: oklch(0.92 0.005 260);
|
||||
--muted: oklch(0.12 0.02 280);
|
||||
--muted-foreground: oklch(0.6 0.03 280);
|
||||
--accent: oklch(0.17 0.02 280);
|
||||
--accent-foreground: oklch(0.92 0.005 260);
|
||||
--destructive: oklch(0.55 0.22 20);
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.22 0.03 280);
|
||||
--input: oklch(0.15 0.025 280);
|
||||
--ring: oklch(0.55 0.22 20);
|
||||
--chart-1: oklch(0.55 0.22 20);
|
||||
--chart-2: oklch(0.6 0.15 180);
|
||||
--chart-3: oklch(0.65 0.2 80);
|
||||
--chart-4: oklch(0.5 0.2 300);
|
||||
--chart-5: oklch(0.55 0.1 40);
|
||||
--sidebar: oklch(0.12 0.02 280);
|
||||
--sidebar-foreground: oklch(0.92 0.005 260);
|
||||
--sidebar-primary: oklch(0.55 0.22 20);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.17 0.02 280);
|
||||
--sidebar-accent-foreground: oklch(0.92 0.005 260);
|
||||
--sidebar-border: oklch(0.22 0.03 280);
|
||||
--sidebar-ring: oklch(0.55 0.22 20);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -150,5 +150,6 @@ body {
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
+115
-52
@@ -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 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">
|
||||
<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>
|
||||
<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>Historia clínica</CardTitle>
|
||||
<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 italic">Sin descripción del paciente</p>
|
||||
<p v-else class="text-sm text-muted-foreground/50 italic">Sin descripción</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 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">
|
||||
<span class="text-xs text-muted-foreground">Alta prevista</span>
|
||||
<p class="text-sm font-medium">{{ project.end_date }}</p>
|
||||
<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 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>
|
||||
<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 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 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>
|
||||
|
||||
+8
-20
@@ -19,34 +19,22 @@ async function handleLogin() {
|
||||
<div class="flex min-h-svh flex-col items-center justify-center bg-background p-6">
|
||||
<Card class="w-full max-w-[400px]">
|
||||
<CardHeader class="text-center pb-4">
|
||||
<div class="flex items-center justify-center gap-1.5 mb-3">
|
||||
<span class="block rounded-full border-2 border-primary opacity-35 w-[10px] h-[10px]" />
|
||||
<span class="block rounded-full border-2 border-primary opacity-65 w-[14px] h-[14px]" />
|
||||
<span class="block rounded-full bg-primary w-[18px] h-[18px]" />
|
||||
<div class="flex aspect-square size-12 items-center justify-center rounded-xl bg-primary text-primary-foreground mx-auto mb-3">
|
||||
<span class="font-bold text-xl">A</span>
|
||||
</div>
|
||||
<CardTitle class="font-display text-2xl font-bold">teloprax</CardTitle>
|
||||
<CardDescription class="text-xs mt-1">ideas en progreso</CardDescription>
|
||||
<CardTitle class="text-2xl font-bold tracking-tight">Alpha</CardTitle>
|
||||
<CardDescription class="text-xs mt-1">KAPPA Hub</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<form @submit.prevent="handleLogin" class="flex flex-col gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</label>
|
||||
<Input
|
||||
v-model="email"
|
||||
type="email"
|
||||
placeholder="ricardo@..."
|
||||
autocomplete="email"
|
||||
/>
|
||||
<Input v-model="email" type="email" placeholder="ricardo@..." autocomplete="email" />
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contraseña</label>
|
||||
<Input
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
<Input v-model="password" type="password" placeholder="••••••••" autocomplete="current-password" />
|
||||
</div>
|
||||
|
||||
<div v-if="auth.error" class="text-xs text-destructive bg-destructive/10 rounded-md px-3 py-2">
|
||||
@@ -54,11 +42,11 @@ async function handleLogin() {
|
||||
</div>
|
||||
|
||||
<Button type="submit" class="w-full mt-2" :disabled="auth.loading">
|
||||
{{ auth.loading ? 'Ingresando...' : 'Iniciar diagnóstico' }}
|
||||
{{ auth.loading ? 'Ingresando...' : 'Iniciar sesión' }}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p class="text-center text-[11px] text-muted-foreground/50 mt-6">
|
||||
<p class="text-center text-[11px] text-muted-foreground/40 mt-6">
|
||||
kappa.lambdaanalytics.co
|
||||
</p>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user