From 151f21bb0b8fc422ade135dc37e7c036e5736e5b Mon Sep 17 00:00:00 2001
From: Ricardo Gonzalez <ricardogonzalez@MacBook-Air-de-Ricardo.local>
Date: Sat, 23 May 2026 20:46:02 -0500
Subject: [PATCH] =?UTF-8?q?nav=20activa=20con=20activeTab,=20SectionCards?=
 =?UTF-8?q?=20din=C3=A1micas,=20fondo=20light=200.95=20oklch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/AppSidebar.vue   |  20 +++-
 src/components/dashboard/NavDocuments.vue |  21 ++--
 src/components/dashboard/NavMain.vue      |  13 ++-
 src/components/dashboard/SectionCards.vue |  92 ++++------------
 src/components/dashboard/SiteHeader.vue   |   8 +-
 src/style.css                             |   8 +-
 src/views/NewDashboardView.vue            | 121 +++++++++++++++++++++-
 7 files changed, 190 insertions(+), 93 deletions(-)

diff --git a/src/components/dashboard/AppSidebar.vue b/src/components/dashboard/AppSidebar.vue
index c1678c0..ce6ad46 100644
--- a/src/components/dashboard/AppSidebar.vue
+++ b/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,12 +42,18 @@ import {
       </div>
     </SidebarHeader>
     <SidebarContent>
-      <NavMain />
-      <NavDocuments />
+      <NavMain
+        :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>
       <NavUser />
     </SidebarFooter>
   </Sidebar>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/dashboard/NavDocuments.vue b/src/components/dashboard/NavDocuments.vue
index 6ed9613..5461522 100644
--- a/src/components/dashboard/NavDocuments.vue
+++ b/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,13 +41,14 @@ const documentItems = [
     <SidebarGroupLabel>{{ t('nav.documents') }}</SidebarGroupLabel>
     <SidebarMenu>
       <SidebarMenuItem v-for="item in documentItems" :key="item.id">
-        <SidebarMenuButton as-child>
-          <a href="#">
-            <component :is="item.icon" />
-            <span>{{ t(item.name) }}</span>
-          </a>
+        <SidebarMenuButton
+          :is-active="activeTab === item.id"
+          @click="emit('update:activeTab', item.id)"
+        >
+          <component :is="item.icon" />
+          <span>{{ t(item.name) }}</span>
         </SidebarMenuButton>
       </SidebarMenuItem>
     </SidebarMenu>
   </SidebarGroup>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/dashboard/NavMain.vue b/src/components/dashboard/NavMain.vue
index f3f44b8..44f70fa 100644
--- a/src/components/dashboard/NavMain.vue
+++ b/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>
@@ -57,4 +66,4 @@ defineProps<{
       </SidebarMenu>
     </SidebarGroupContent>
   </SidebarGroup>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/dashboard/SectionCards.vue b/src/components/dashboard/SectionCards.vue
index 6e9e73b..6291770 100644
--- a/src/components/dashboard/SectionCards.vue
+++ b/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 />
-            +12.5%
+            <IconTrendingUp v-if="card.up" />
+            <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
-        </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
+          {{ card.label }}
         </div>
       </CardFooter>
     </Card>
diff --git a/src/components/dashboard/SiteHeader.vue b/src/components/dashboard/SiteHeader.vue
index 96236bc..4d2878e 100644
--- a/src/components/dashboard/SiteHeader.vue
+++ b/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>
diff --git a/src/style.css b/src/style.css
index d8be4af..b5830c0 100644
--- a/src/style.css
+++ b/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);
diff --git a/src/views/NewDashboardView.vue b/src/views/NewDashboardView.vue
index 954d1a2..e3c452c 100644
--- a/src/views/NewDashboardView.vue
+++ b/src/views/NewDashboardView.vue
@@ -1,27 +1,142 @@
 <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>
     </SidebarInset>
   </SidebarProvider>
-</template>
\ No newline at end of file
+</template>