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
2026-05-22 22:44:30 -05:00
parent ee6610e8df
commit 5761538cb9
12 changed files with 318 additions and 233 deletions
@@ -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>

@@ -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'