Dashboard shadcn-vue sidebar + i18n + NavProjects conectado a KAPPA API

- Dashboard-01 block de shadcn-vue instalado (sidebar con tabs) - vue-i18n para traducciones ES/EN (detecta idioma del navegador) - NavProjects ahora usa initiative_name de KAPPA API - Dashboard stats conectados a API (HUs, sesiones, planeaciones) - Work items table con datos reales de KAPPA - Login: toggle password con icono de ojo - Toggle theme restaurado en SiteHeader - i18n con locale/en.json y locale/es.json -Nuevos componentes: NavMain, NavDocuments, NavSecondary en dashboard/ - NavUser原来的 - NavUser原来的
2026-05-23 14:59:17 -05:00
parent 8312389dab
commit 640f0ea889
27 changed files with 1558 additions and 103 deletions
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import {
+  IconCreditCard,
+  IconDotsVertical,
+  IconLogout,
+  IconNotification,
+  IconUserCircle,
+} from "@tabler/icons-vue"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york-v4/ui/sidebar"
+
+interface User {
+  name: string
+  email: string
+  avatar: string
+}
+
+defineProps<{
+  user: User
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg grayscale">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg">
+                CN
+              </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-medium">{{ user.name }}</span>
+              <span class="text-muted-foreground truncate text-xs">
+                {{ user.email }}
+              </span>
+            </div>
+            <IconDotsVertical class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          :side-offset="4"
+          align="end"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg">
+                  CN
+                </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-medium">{{ user.name }}</span>
+                <span class="text-muted-foreground truncate text-xs">
+                  {{ user.email }}
+                </span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <IconUserCircle />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <IconCreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <IconNotification />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <IconLogout />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>