nav activa con activeTab, SectionCards dinámicas, fondo light 0.95 oklch

src/components/dashboard/AppSidebar.vue

@@ -23,6 +23,14 @@ import {
   SidebarFooter,
   SidebarHeader,
 } from "@/components/ui/sidebar"
+
+defineProps<{
+  activeTab?: string
+}>()
+
+const emit = defineEmits<{
+  'update:activeTab': [value: string]
+}>()
 </script>
 
 <template>
@@ -34,8 +42,14 @@ import {
       </div>
     </SidebarHeader>
     <SidebarContent>
-      <NavMain />
+      <NavMain
-      <NavDocuments />
+        :active-tab="activeTab"
+        @update:active-tab="emit('update:activeTab', $event)"
+      />
+      <NavDocuments
+        :active-tab="activeTab"
+        @update:active-tab="emit('update:activeTab', $event)"
+      />
       <NavSecondary :items="[]" class="mt-auto" />
     </SidebarContent>
     <SidebarFooter>

src/components/dashboard/NavDocuments.vue

@@ -26,6 +26,14 @@ const documentItems = [
   { name: 'nav.wordAssistant', icon: IconFileWord, id: 'word-assistant' },
   { name: 'nav.templates', icon: IconFileDescription, id: 'templates' },
 ]
+
+defineProps<{
+  activeTab?: string
+}>()
+
+const emit = defineEmits<{
+  'update:activeTab': [value: string]
+}>()
 </script>
 
 <template>
@@ -33,11 +41,12 @@ const documentItems = [
     <SidebarGroupLabel>{{ t('nav.documents') }}</SidebarGroupLabel>
     <SidebarMenu>
       <SidebarMenuItem v-for="item in documentItems" :key="item.id">
-        <SidebarMenuButton as-child>
+        <SidebarMenuButton
-          <a href="#">
+          :is-active="activeTab === item.id"
-            <component :is="item.icon" />
+          @click="emit('update:activeTab', item.id)"
-            <span>{{ t(item.name) }}</span>
+        >
-          </a>
+          <component :is="item.icon" />
+          <span>{{ t(item.name) }}</span>
         </SidebarMenuButton>
       </SidebarMenuItem>
     </SidebarMenu>

src/components/dashboard/NavMain.vue

@@ -30,6 +30,11 @@ const mainNavItems = [
 
 defineProps<{
   items?: { title: string; url: string; icon?: Component }[]
+  activeTab?: string
+}>()
+
+const emit = defineEmits<{
+  'update:activeTab': [value: string]
 }>()
 </script>
 
@@ -49,7 +54,11 @@ defineProps<{
       </SidebarMenu>
       <SidebarMenu>
         <SidebarMenuItem v-for="item in mainNavItems" :key="item.id">
-          <SidebarMenuButton :tooltip="t(item.title)">
+          <SidebarMenuButton
+            :tooltip="t(item.title)"
+            :is-active="activeTab === item.id"
+            @click="emit('update:activeTab', item.id)"
+          >
             <component :is="item.icon" v-if="item.icon" />
             <span>{{ t(item.title) }}</span>
           </SidebarMenuButton>

src/components/dashboard/SectionCards.vue

@@ -10,95 +10,41 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
+
+interface CardData {
+  label: string
+  value: string
+  trend: string
+  up: boolean
+}
+
+defineProps<{
+  cards?: CardData[]
+}>()
 </script>
 
 <template>
   <div class="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
-    <Card class="@container/card">
+    <Card v-for="(card, i) in cards" :key="i" class="@container/card">
       <CardHeader>
-        <CardDescription>Total Revenue</CardDescription>
+        <CardDescription>{{ card.label }}</CardDescription>
         <CardTitle class="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-          $1,250.00
+          {{ card.value }}
         </CardTitle>
         <CardAction>
           <Badge variant="outline">
-            <IconTrendingUp />
+            <IconTrendingUp v-if="card.up" />
-            +12.5%
+            <IconTrendingDown v-else />
+            {{ card.trend }}
           </Badge>
         </CardAction>
       </CardHeader>
       <CardFooter class="flex-col items-start gap-1.5 text-sm">
         <div class="line-clamp-1 flex gap-2 font-medium">
-          Trending up this month <IconTrendingUp class="size-4" />
+          {{ card.up ? 'Trending up' : 'Trending down' }}
         </div>
         <div class="text-muted-foreground">
-          Visitors for the last 6 months
+          {{ card.label }}
-        </div>
-      </CardFooter>
-    </Card>
-    <Card class="@container/card">
-      <CardHeader>
-        <CardDescription>New Customers</CardDescription>
-        <CardTitle class="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-          1,234
-        </CardTitle>
-        <CardAction>
-          <Badge variant="outline">
-            <IconTrendingDown />
-            -20%
-          </Badge>
-        </CardAction>
-      </CardHeader>
-      <CardFooter class="flex-col items-start gap-1.5 text-sm">
-        <div class="line-clamp-1 flex gap-2 font-medium">
-          Down 20% this period <IconTrendingDown class="size-4" />
-        </div>
-        <div class="text-muted-foreground">
-          Acquisition needs attention
-        </div>
-      </CardFooter>
-    </Card>
-    <Card class="@container/card">
-      <CardHeader>
-        <CardDescription>Active Accounts</CardDescription>
-        <CardTitle class="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-          45,678
-        </CardTitle>
-        <CardAction>
-          <Badge variant="outline">
-            <IconTrendingUp />
-            +12.5%
-          </Badge>
-        </CardAction>
-      </CardHeader>
-      <CardFooter class="flex-col items-start gap-1.5 text-sm">
-        <div class="line-clamp-1 flex gap-2 font-medium">
-          Strong user retention <IconTrendingUp class="size-4" />
-        </div>
-        <div class="text-muted-foreground">
-          Engagement exceed targets
-        </div>
-      </CardFooter>
-    </Card>
-    <Card class="@container/card">
-      <CardHeader>
-        <CardDescription>Growth Rate</CardDescription>
-        <CardTitle class="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-          4.5%
-        </CardTitle>
-        <CardAction>
-          <Badge variant="outline">
-            <IconTrendingUp />
-            +4.5%
-          </Badge>
-        </CardAction>
-      </CardHeader>
-      <CardFooter class="flex-col items-start gap-1.5 text-sm">
-        <div class="line-clamp-1 flex gap-2 font-medium">
-          Steady performance increase <IconTrendingUp class="size-4" />
-        </div>
-        <div class="text-muted-foreground">
-          Meets growth projections
         </div>
       </CardFooter>
     </Card>

src/components/dashboard/SiteHeader.vue

@@ -149,9 +149,13 @@ const groupedResults = computed(() => {
             <path d="M12 14.3l7.37 -7.37" />
             <path d="M12 19.6l8.85 -8.85" />
           </svg>
-          <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-[18px]">
+          <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4.5">
             <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
+            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+            <path d="M12 3l0 18" />
+            <path d="M12 9l4.65 -4.65" />
+            <path d="M12 14.3l7.37 -7.37" />
+            <path d="M12 19.6l8.85 -8.85" />
           </svg>
           <span class="sr-only">Toggle theme</span>
         </Button>

src/style.css

@@ -24,13 +24,13 @@
   --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
 
-  --secondary: oklch(0.97 0 0);
+  --secondary: oklch(0.95 0 0);
   --secondary-foreground: oklch(0.205 0 0);
 
-  --muted: oklch(0.97 0 0);
+  --muted: oklch(0.95 0 0);
   --muted-foreground: oklch(0.556 0 0);
 
-  --accent: oklch(0.97 0 0);
+  --accent: oklch(0.95 0 0);
   --accent-foreground: oklch(0.205 0 0);
 
   --destructive: oklch(0.577 0.245 27.325);
@@ -50,7 +50,7 @@
   --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: oklch(0.95 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);

src/views/NewDashboardView.vue

@@ -1,24 +1,139 @@
 <script setup lang="ts">
+import { ref } from "vue"
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
 import AppSidebar from "@/components/dashboard/AppSidebar.vue"
 import SiteHeader from "@/components/dashboard/SiteHeader.vue"
+import SectionCards from "@/components/dashboard/SectionCards.vue"
 import DashboardView from "@/views/DashboardView.vue"
 
 const sidebarStyle = {
   '--sidebar-width': '16rem',
   '--header-height': '3rem',
 }
+
+const activeTab = ref('dashboard')
+
+const tabContent: Record<string, { title: string; description: string; cards: { label: string; value: string; trend: string; up: boolean }[] }> = {
+  dashboard: {
+    title: 'Tablero',
+    description: 'Resumen general del proyecto',
+    cards: [
+      { label: 'Total Revenue', value: '$1,250.00', trend: '+12.5%', up: true },
+      { label: 'New Customers', value: '1,234', trend: '-20%', up: false },
+      { label: 'Active Accounts', value: '45,678', trend: '+12.5%', up: true },
+      { label: 'Growth Rate', value: '4.5%', trend: '+4.5%', up: true },
+    ],
+  },
+  projects: {
+    title: 'Proyectos',
+    description: 'Gestión de proyectos activos',
+    cards: [
+      { label: 'Proyectos activos', value: '12', trend: '+3', up: true },
+      { label: 'Completados', value: '48', trend: '+8', up: true },
+      { label: 'En pausa', value: '5', trend: '-2', up: false },
+      { label: 'Por iniciar', value: '7', trend: '+1', up: true },
+    ],
+  },
+  lifecycle: {
+    title: 'Ciclo de Vida',
+    description: 'Seguimiento del ciclo de vida de los proyectos',
+    cards: [
+      { label: 'En planificación', value: '8', trend: '+2', up: true },
+      { label: 'En desarrollo', value: '15', trend: '+5', up: true },
+      { label: 'En revisión', value: '6', trend: '-1', up: false },
+      { label: 'Entregados', value: '32', trend: '+4', up: true },
+    ],
+  },
+  analytics: {
+    title: 'Analíticas',
+    description: 'Métricas y estadísticas',
+    cards: [
+      { label: 'Horas registradas', value: '1,240h', trend: '+8%', up: true },
+      { label: 'HU entregadas', value: '89', trend: '+12%', up: true },
+      { label: 'Tiempo promedio', value: '3.2d', trend: '-5%', up: true },
+      { label: 'Satisfacción', value: '92%', trend: '+2%', up: true },
+    ],
+  },
+  team: {
+    title: 'Equipo',
+    description: 'Miembros del equipo y su carga de trabajo',
+    cards: [
+      { label: 'Miembros', value: '8', trend: '+1', up: true },
+      { label: 'Asignados', value: '6', trend: '0', up: true },
+      { label: 'Disponibles', value: '2', trend: '-1', up: false },
+      { label: 'Productividad', value: '87%', trend: '+3%', up: true },
+    ],
+  },
+  documents: {
+    title: 'Documentos',
+    description: 'Biblioteca de documentos',
+    cards: [
+      { label: 'Documentos', value: '156', trend: '+12', up: true },
+      { label: 'Compartidos', value: '43', trend: '+5', up: true },
+      { label: 'Borradores', value: '18', trend: '-3', up: false },
+      { label: 'Plantillas', value: '24', trend: '+2', up: true },
+    ],
+  },
+  'data-library': {
+    title: 'Biblioteca de Datos',
+    description: 'Repositorio de datos y recursos',
+    cards: [
+      { label: 'Archivos', value: '89', trend: '+7', up: true },
+      { label: 'Bases de datos', value: '4', trend: '0', up: true },
+      { label: 'APIs conectadas', value: '6', trend: '+1', up: true },
+      { label: 'Storage usado', value: '2.4GB', trend: '+12%', up: false },
+    ],
+  },
+  reports: {
+    title: 'Reportes',
+    description: 'Reportes generados',
+    cards: [
+      { label: 'Reportes este mes', value: '23', trend: '+8', up: true },
+      { label: 'Programados', value: '5', trend: '+2', up: true },
+      { label: 'Exportados', value: '156', trend: '+18', up: true },
+      { label: 'Pendientes', value: '3', trend: '-1', up: true },
+    ],
+  },
+  'word-assistant': {
+    title: 'Asistente Word',
+    description: 'Generación de documentos con IA',
+    cards: [
+      { label: 'Documentos creados', value: '34', trend: '+6', up: true },
+      { label: 'Plantillas usadas', value: '12', trend: '+3', up: true },
+      { label: 'Tokens consumidos', value: '45.2K', trend: '+22%', up: false },
+      { label: 'Docs pendientes', value: '8', trend: '-2', up: true },
+    ],
+  },
+  templates: {
+    title: 'Plantillas',
+    description: 'Gestión de plantillas',
+    cards: [
+      { label: 'Plantillas activas', value: '18', trend: '+2', up: true },
+      { label: 'Usadas este mes', value: '9', trend: '+4', up: true },
+      { label: 'Categorías', value: '5', trend: '0', up: true },
+      { label: 'Próximas', value: '3', trend: '+1', up: true },
+    ],
+  },
+}
 </script>
 
 <template>
   <SidebarProvider :style="sidebarStyle">
-    <AppSidebar variant="inset" />
+    <AppSidebar
+      :active-tab="activeTab"
+      @update:active-tab="activeTab = $event"
+    />
     <SidebarInset>
       <SiteHeader />
       <div class="flex flex-1 flex-col">
         <div class="@container/main flex flex-1 flex-col gap-2">
           <div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-            <DashboardView />
+            <template v-if="activeTab === 'dashboard'">
+              <DashboardView />
+            </template>
+            <template v-else>
+              <SectionCards :cards="tabContent[activeTab]?.cards ?? []" />
+            </template>
           </div>
         </div>
       </div>