ricardo/Alpha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Alpha: eliminar referencias Teloprax + dashboard estilo shadcn demo

Browse Source 
- 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:
Ricardo Gonzalez
2026-05-22 22:44:30 -05:00
parent ee6610e8df
commit 5761538cb9
12 changed files with 318 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"$schema": "https://shadcn-vue.com/schema.json",
"style": "default",
"style": "reka-nova",
"font": "geist-sans",
"typescript": true,
"tailwind": {
index.html
+1 -1
View File
@@ -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 />
public/favicon.svg
+2 -4
View File
@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 338 B

After

Width:  |  Height:  |  Size: 247 B

src/components/AppSidebar.vue
+61 -37
View File
@@ -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>
</div>
</div>
<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>
src/components/NavMain.vue
-41
View File
@@ -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>
src/components/ui/collapsible/Collapsible.vue
+19
View File
@@ -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>
src/components/ui/collapsible/CollapsibleContent.vue
+15
View File
@@ -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>
src/components/ui/collapsible/CollapsibleTrigger.vue
+15
View File
@@ -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>
src/components/ui/collapsible/index.ts
+3
View File
@@ -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'
src/style.css
+66 -65
View File
@@ -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;
}
}
src/views/DashboardView.vue
+126 -63
View File
@@ -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>
src/views/LoginView.vue
+8 -20
View File
@@ -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>