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",
|
"$schema": "https://shadcn-vue.com/schema.json",
|
||||||
"style": "default",
|
"style": "reka-nova",
|
||||||
"font": "geist-sans",
|
"font": "geist-sans",
|
||||||
"typescript": true,
|
"typescript": true,
|
||||||
"tailwind": {
|
"tailwind": {
|
||||||
|
|||||||
+1
-1
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<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">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||||
<rect width="32" height="32" rx="6" fill="#1A1A2E"/>
|
<rect width="32" height="32" rx="8" fill="#18181b"/>
|
||||||
<circle cx="10" cy="16" r="4.5" fill="none" stroke="#E63946" stroke-width="2"/>
|
<text x="16" y="22" text-anchor="middle" fill="#fafafa" font-size="18" font-weight="700" font-family="system-ui">A</text>
|
||||||
<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"/>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 338 B After Width: | Height: | Size: 247 B |
@@ -4,20 +4,28 @@ import {
|
|||||||
LayoutDashboard,
|
LayoutDashboard,
|
||||||
Calendar,
|
Calendar,
|
||||||
Clock,
|
Clock,
|
||||||
type Component,
|
ChevronRight,
|
||||||
} from 'lucide-vue-next'
|
} from 'lucide-vue-next'
|
||||||
import {
|
import {
|
||||||
Sidebar,
|
Sidebar,
|
||||||
SidebarContent,
|
SidebarContent,
|
||||||
SidebarFooter,
|
SidebarFooter,
|
||||||
|
SidebarGroup,
|
||||||
|
SidebarGroupLabel,
|
||||||
SidebarHeader,
|
SidebarHeader,
|
||||||
|
SidebarMenu,
|
||||||
|
SidebarMenuButton,
|
||||||
|
SidebarMenuItem,
|
||||||
|
SidebarMenuSub,
|
||||||
|
SidebarMenuSubButton,
|
||||||
|
SidebarMenuSubItem,
|
||||||
SidebarRail,
|
SidebarRail,
|
||||||
} from '@/components/ui/sidebar'
|
} from '@/components/ui/sidebar'
|
||||||
import NavMain from './NavMain.vue'
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
||||||
import NavProjects from './NavProjects.vue'
|
import NavProjects from './NavProjects.vue'
|
||||||
import NavUser from './NavUser.vue'
|
import NavUser from './NavUser.vue'
|
||||||
|
|
||||||
const props = defineProps<{
|
defineProps<{
|
||||||
activeTab: string
|
activeTab: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
@@ -28,47 +36,63 @@ const emit = defineEmits<{
|
|||||||
function setTab(tab: string) {
|
function setTab(tab: string) {
|
||||||
emit('update:activeTab', tab)
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Sidebar collapsible="icon">
|
<Sidebar collapsible="icon" variant="inset">
|
||||||
<SidebarHeader>
|
<SidebarHeader>
|
||||||
<div class="flex items-center gap-2 px-2 py-1 group-data-[collapsible=icon]:justify-center">
|
<SidebarMenu>
|
||||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
<SidebarMenuItem>
|
||||||
<span class="block rounded-full border-2 border-primary opacity-35 w-2 h-2" />
|
<SidebarMenuButton size="lg" as="button" @click="setTab('dashboard')">
|
||||||
<span class="block rounded-full border-2 border-primary opacity-65 w-[11px] h-[11px]" />
|
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
|
||||||
<span class="block rounded-full bg-primary w-[14px] h-[14px]" />
|
<span class="font-bold text-sm">A</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="group-data-[collapsible=icon]:hidden flex flex-col min-w-0">
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
||||||
<span class="font-display font-bold text-base leading-tight">teloprax</span>
|
<span class="truncate font-semibold">Alpha</span>
|
||||||
<span class="text-[10px] text-muted-foreground leading-tight">ideas en progreso</span>
|
<span class="truncate text-xs">KAPPA Hub</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
</SidebarMenu>
|
||||||
</SidebarHeader>
|
</SidebarHeader>
|
||||||
|
|
||||||
<SidebarContent>
|
<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 />
|
<NavProjects />
|
||||||
</SidebarContent>
|
</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'
|
||||||
+67
-66
@@ -10,8 +10,8 @@
|
|||||||
@custom-variant dark (&:is(.dark *));
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
--font-sans: 'Geist Variable', sans-serif;
|
||||||
--font-heading: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
|
--font-heading: var(--font-sans);
|
||||||
--color-sidebar-ring: var(--sidebar-ring);
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
--color-sidebar-border: var(--sidebar-border);
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
@@ -50,85 +50,85 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--radius: 0.5rem;
|
--radius: 0.625rem;
|
||||||
|
|
||||||
--background: oklch(0.15 0.025 280);
|
--background: oklch(1 0 0);
|
||||||
--foreground: oklch(0.92 0.005 260);
|
--foreground: oklch(0.145 0 0);
|
||||||
|
|
||||||
--card: oklch(0.12 0.02 280);
|
--card: oklch(1 0 0);
|
||||||
--card-foreground: oklch(0.92 0.005 260);
|
--card-foreground: oklch(0.145 0 0);
|
||||||
|
|
||||||
--popover: oklch(0.12 0.02 280);
|
--popover: oklch(1 0 0);
|
||||||
--popover-foreground: oklch(0.92 0.005 260);
|
--popover-foreground: oklch(0.145 0 0);
|
||||||
|
|
||||||
--primary: oklch(0.55 0.22 20);
|
--primary: oklch(0.205 0 0);
|
||||||
--primary-foreground: oklch(1 0 0);
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
--secondary: oklch(0.17 0.02 280);
|
--secondary: oklch(0.97 0 0);
|
||||||
--secondary-foreground: oklch(0.92 0.005 260);
|
--secondary-foreground: oklch(0.205 0 0);
|
||||||
|
|
||||||
--muted: oklch(0.12 0.02 280);
|
--muted: oklch(0.97 0 0);
|
||||||
--muted-foreground: oklch(0.6 0.03 280);
|
--muted-foreground: oklch(0.556 0 0);
|
||||||
|
|
||||||
--accent: oklch(0.17 0.02 280);
|
--accent: oklch(0.97 0 0);
|
||||||
--accent-foreground: oklch(0.92 0.005 260);
|
--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);
|
--destructive-foreground: oklch(1 0 0);
|
||||||
|
|
||||||
--border: oklch(0.22 0.03 280);
|
--border: oklch(0.922 0 0);
|
||||||
--input: oklch(0.15 0.025 280);
|
--input: oklch(0.922 0 0);
|
||||||
--ring: oklch(0.55 0.22 20);
|
--ring: oklch(0.708 0 0);
|
||||||
|
|
||||||
--chart-1: oklch(0.55 0.22 20);
|
--chart-1: oklch(0.87 0 0);
|
||||||
--chart-2: oklch(0.6 0.15 180);
|
--chart-2: oklch(0.556 0 0);
|
||||||
--chart-3: oklch(0.65 0.2 80);
|
--chart-3: oklch(0.439 0 0);
|
||||||
--chart-4: oklch(0.5 0.2 300);
|
--chart-4: oklch(0.371 0 0);
|
||||||
--chart-5: oklch(0.55 0.1 40);
|
--chart-5: oklch(0.269 0 0);
|
||||||
|
|
||||||
--sidebar: oklch(0.12 0.02 280);
|
--sidebar: oklch(0.985 0 0);
|
||||||
--sidebar-foreground: oklch(0.92 0.005 260);
|
--sidebar-foreground: oklch(0.145 0 0);
|
||||||
--sidebar-primary: oklch(0.55 0.22 20);
|
--sidebar-primary: oklch(0.205 0 0);
|
||||||
--sidebar-primary-foreground: oklch(1 0 0);
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
--sidebar-accent: oklch(0.17 0.02 280);
|
--sidebar-accent: oklch(0.97 0 0);
|
||||||
--sidebar-accent-foreground: oklch(0.92 0.005 260);
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
--sidebar-border: oklch(0.22 0.03 280);
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
--sidebar-ring: oklch(0.55 0.22 20);
|
--sidebar-ring: oklch(0.708 0 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: oklch(0.15 0.025 280);
|
--background: oklch(0.145 0 0);
|
||||||
--foreground: oklch(0.92 0.005 260);
|
--foreground: oklch(0.985 0 0);
|
||||||
--card: oklch(0.12 0.02 280);
|
--card: oklch(0.205 0 0);
|
||||||
--card-foreground: oklch(0.92 0.005 260);
|
--card-foreground: oklch(0.985 0 0);
|
||||||
--popover: oklch(0.12 0.02 280);
|
--popover: oklch(0.205 0 0);
|
||||||
--popover-foreground: oklch(0.92 0.005 260);
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
--primary: oklch(0.55 0.22 20);
|
--primary: oklch(0.922 0 0);
|
||||||
--primary-foreground: oklch(1 0 0);
|
--primary-foreground: oklch(0.205 0 0);
|
||||||
--secondary: oklch(0.17 0.02 280);
|
--secondary: oklch(0.269 0 0);
|
||||||
--secondary-foreground: oklch(0.92 0.005 260);
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
--muted: oklch(0.12 0.02 280);
|
--muted: oklch(0.269 0 0);
|
||||||
--muted-foreground: oklch(0.6 0.03 280);
|
--muted-foreground: oklch(0.708 0 0);
|
||||||
--accent: oklch(0.17 0.02 280);
|
--accent: oklch(0.269 0 0);
|
||||||
--accent-foreground: oklch(0.92 0.005 260);
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
--destructive: oklch(0.55 0.22 20);
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
--destructive-foreground: oklch(1 0 0);
|
--destructive-foreground: oklch(1 0 0);
|
||||||
--border: oklch(0.22 0.03 280);
|
--border: oklch(1 0 0 / 10%);
|
||||||
--input: oklch(0.15 0.025 280);
|
--input: oklch(1 0 0 / 15%);
|
||||||
--ring: oklch(0.55 0.22 20);
|
--ring: oklch(0.556 0 0);
|
||||||
--chart-1: oklch(0.55 0.22 20);
|
--chart-1: oklch(0.87 0 0);
|
||||||
--chart-2: oklch(0.6 0.15 180);
|
--chart-2: oklch(0.556 0 0);
|
||||||
--chart-3: oklch(0.65 0.2 80);
|
--chart-3: oklch(0.439 0 0);
|
||||||
--chart-4: oklch(0.5 0.2 300);
|
--chart-4: oklch(0.371 0 0);
|
||||||
--chart-5: oklch(0.55 0.1 40);
|
--chart-5: oklch(0.269 0 0);
|
||||||
--sidebar: oklch(0.12 0.02 280);
|
--sidebar: oklch(0.205 0 0);
|
||||||
--sidebar-foreground: oklch(0.92 0.005 260);
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
--sidebar-primary: oklch(0.55 0.22 20);
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
--sidebar-primary-foreground: oklch(1 0 0);
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
--sidebar-accent: oklch(0.17 0.02 280);
|
--sidebar-accent: oklch(0.269 0 0);
|
||||||
--sidebar-accent-foreground: oklch(0.92 0.005 260);
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
--sidebar-border: oklch(0.22 0.03 280);
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
--sidebar-ring: oklch(0.55 0.22 20);
|
--sidebar-ring: oklch(0.556 0 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -150,5 +150,6 @@ body {
|
|||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
|
@apply font-sans;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+126
-63
@@ -1,97 +1,160 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { useProjectsStore } from '@/stores/projects'
|
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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table'
|
||||||
|
|
||||||
const projects = useProjectsStore()
|
const projects = useProjectsStore()
|
||||||
const project = computed(() => projects.selected)
|
const project = computed(() => projects.selected)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="project" class="space-y-6">
|
<div v-if="project" class="flex flex-1 flex-col gap-4">
|
||||||
<div>
|
<div class="flex items-center justify-between">
|
||||||
<h1 class="text-2xl font-bold tracking-tight">{{ project.name }}</h1>
|
<div>
|
||||||
<div class="flex items-center gap-2 mt-1">
|
<h1 class="text-2xl font-bold tracking-tight">{{ project.name }}</h1>
|
||||||
<span v-if="project.key" class="text-sm text-muted-foreground">Clave: {{ project.key }}</span>
|
<div class="flex items-center gap-2 mt-1">
|
||||||
<Badge v-if="project.status" variant="outline" class="text-xs">
|
<Badge v-if="project.key" variant="outline" class="text-xs">{{ project.key }}</Badge>
|
||||||
{{ project.status }}
|
<Badge v-if="project.status" variant="secondary" class="text-xs capitalize">{{ project.status }}</Badge>
|
||||||
</Badge>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<Badge variant="outline" class="text-xs">v0.1.0</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
<CardTitle class="text-sm font-medium">Historias de Usuario</CardTitle>
|
<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" />
|
<FileText class="h-4 w-4 text-muted-foreground" />
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div class="text-2xl font-bold">—</div>
|
<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>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader class="flex flex-row items-center justify-between">
|
||||||
<CardTitle>Historia clínica</CardTitle>
|
<CardTitle class="text-sm font-medium">Work Items</CardTitle>
|
||||||
|
<Badge variant="outline" class="text-[10px]">Próximamente</Badge>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<p v-if="project.description" class="text-sm text-muted-foreground leading-relaxed">
|
<Table>
|
||||||
{{ project.description }}
|
<TableHeader>
|
||||||
</p>
|
<TableRow>
|
||||||
<p v-else class="text-sm text-muted-foreground italic">Sin descripción del paciente</p>
|
<TableHead>Código</TableHead>
|
||||||
|
<TableHead>Título</TableHead>
|
||||||
<div v-if="project.start_date" class="grid grid-cols-2 gap-4 mt-4">
|
<TableHead>Estado</TableHead>
|
||||||
<div>
|
<TableHead class="text-right">Prioridad</TableHead>
|
||||||
<span class="text-xs text-muted-foreground">Ingreso</span>
|
</TableRow>
|
||||||
<p class="text-sm font-medium">{{ project.start_date }}</p>
|
</TableHeader>
|
||||||
</div>
|
<TableBody>
|
||||||
<div v-if="project.end_date">
|
<TableRow v-for="i in 5" :key="i">
|
||||||
<span class="text-xs text-muted-foreground">Alta prevista</span>
|
<TableCell class="font-mono text-xs text-muted-foreground">HU-{{ String(i).padStart(3, '0') }}</TableCell>
|
||||||
<p class="text-sm font-medium">{{ project.end_date }}</p>
|
<TableCell class="text-muted-foreground/50 italic">Pendiente de carga</TableCell>
|
||||||
</div>
|
<TableCell>
|
||||||
</div>
|
<Badge variant="outline" class="text-[10px]">backlog</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell class="text-right text-muted-foreground/50">—</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</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>
|
<div v-else class="flex flex-1 items-center justify-center">
|
||||||
<p v-else>Seleccioná un paciente del panel lateral</p>
|
<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>
|
</div>
|
||||||
</template>
|
</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">
|
<div class="flex min-h-svh flex-col items-center justify-center bg-background p-6">
|
||||||
<Card class="w-full max-w-[400px]">
|
<Card class="w-full max-w-[400px]">
|
||||||
<CardHeader class="text-center pb-4">
|
<CardHeader class="text-center pb-4">
|
||||||
<div class="flex items-center justify-center gap-1.5 mb-3">
|
<div class="flex aspect-square size-12 items-center justify-center rounded-xl bg-primary text-primary-foreground mx-auto mb-3">
|
||||||
<span class="block rounded-full border-2 border-primary opacity-35 w-[10px] h-[10px]" />
|
<span class="font-bold text-xl">A</span>
|
||||||
<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>
|
</div>
|
||||||
<CardTitle class="font-display text-2xl font-bold">teloprax</CardTitle>
|
<CardTitle class="text-2xl font-bold tracking-tight">Alpha</CardTitle>
|
||||||
<CardDescription class="text-xs mt-1">ideas en progreso</CardDescription>
|
<CardDescription class="text-xs mt-1">KAPPA Hub</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<form @submit.prevent="handleLogin" class="flex flex-col gap-4">
|
<form @submit.prevent="handleLogin" class="flex flex-col gap-4">
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</label>
|
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</label>
|
||||||
<Input
|
<Input v-model="email" type="email" placeholder="ricardo@..." autocomplete="email" />
|
||||||
v-model="email"
|
|
||||||
type="email"
|
|
||||||
placeholder="ricardo@..."
|
|
||||||
autocomplete="email"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contraseña</label>
|
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contraseña</label>
|
||||||
<Input
|
<Input v-model="password" type="password" placeholder="••••••••" autocomplete="current-password" />
|
||||||
v-model="password"
|
|
||||||
type="password"
|
|
||||||
placeholder="••••••••"
|
|
||||||
autocomplete="current-password"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="auth.error" class="text-xs text-destructive bg-destructive/10 rounded-md px-3 py-2">
|
<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>
|
</div>
|
||||||
|
|
||||||
<Button type="submit" class="w-full mt-2" :disabled="auth.loading">
|
<Button type="submit" class="w-full mt-2" :disabled="auth.loading">
|
||||||
{{ auth.loading ? 'Ingresando...' : 'Iniciar diagnóstico' }}
|
{{ auth.loading ? 'Ingresando...' : 'Iniciar sesión' }}
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</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
|
kappa.lambdaanalytics.co
|
||||||
</p>
|
</p>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|||||||
Reference in New Issue
Block a user