components.d.ts

@@ -13,11 +13,13 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppConfig: typeof import('./src/components/layout/AppConfig.vue')['default']
     AppTopbar: typeof import('./src/components/Holos/AppTopbar.vue')['default']
+    Badge: typeof import('primevue/badge')['default']
     Button: typeof import('primevue/button')['default']
     Column: typeof import('primevue/column')['default']
     DataTable: typeof import('primevue/datatable')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     KpiCard: typeof import('./src/components/shared/KpiCard.vue')['default']
+    Menu: typeof import('primevue/menu')['default']
     Sidebar: typeof import('./src/components/layout/Sidebar.vue')['default']
     Tag: typeof import('primevue/tag')['default']
     TopBar: typeof import('./src/components/layout/TopBar.vue')['default']

src/MainLayout.vue

@@ -15,7 +15,7 @@ import WarehouseDashboard from './modules/warehouse/components/WarehouseDashboar
             <TopBar />
             
             <!-- Page Content -->
-            <main class="flex-1 overflow-auto">
+            <main class="flex-1 overflow-auto p-4 lg:p-6">
                 <WarehouseDashboard />
             </main>
         </div>

src/components/layout/Sidebar.vue

@@ -11,30 +11,106 @@ interface MenuItem {
 const menuItems = ref<MenuItem[]>([
     {
         label: 'Dashboard',
-        icon: 'pi pi-home',
+        icon: 'pi pi-chart-line',
         to: '/'
     },
     {
-        label: 'Almacén',
+        label: 'Ventas',
-        icon: 'pi pi-warehouse',
+        icon: 'pi pi-shopping-cart',
         items: [
-            { label: 'Inventario', icon: 'pi pi-box', to: '/warehouse/inventory' },
+            { label: 'Nueva Venta', icon: 'pi pi-plus', to: '/ventas/nueva' },
-            { label: 'Movimientos', icon: 'pi pi-arrow-right-arrow-left', to: '/warehouse/movements' }
+            { label: 'Lista de Ventas', icon: 'pi pi-list', to: '/ventas/lista' },
+            { label: 'Cotizaciones', icon: 'pi pi-file-edit', to: '/ventas/cotizaciones' }
         ]
     },
+    {
+        label: 'Clientes',
+        icon: 'pi pi-users',
+        to: '/clientes'
+    },
+    {
+        label: 'Inventario',
+        icon: 'pi pi-box',
+        to: '/inventario'
+    },
+    {
+        label: 'Finanzas',
+        icon: 'pi pi-wallet',
+        items: [
+            { label: 'Ingresos', icon: 'pi pi-arrow-up', to: '/finanzas/ingresos' },
+            { label: 'Gastos', icon: 'pi pi-credit-card', to: '/finanzas/gastos' },
+            { label: 'Cuentas por Cobrar', icon: 'pi pi-money-bill', to: '/finanzas/cobrar' }
+        ]
+    },
+    {
+        label: 'Reportes',
+        icon: 'pi pi-chart-bar',
+        to: '/reportes'
+    },
+    {
+        label: 'Documentos',
+        icon: 'pi pi-file',
+        to: '/documentos'
+    },
+    {
+        label: 'Módulo Personalizado',
+        icon: 'pi pi-th-large',
+        to: '/modulo-personalizado'
+    },
     {
         label: 'Configuración',
         icon: 'pi pi-cog',
-        to: '/settings'
+        to: '/configuracion'
     }
 ]);
 
 const sidebarVisible = ref(true);
+const openItems = ref<string[]>([]);
+const currentRoute = ref(window.location.pathname);
 
 const toggleSidebar = () => {
     sidebarVisible.value = !sidebarVisible.value;
 };
 
+const toggleItem = (label: string) => {
+    const index = openItems.value.indexOf(label);
+    if (index > -1) {
+        openItems.value.splice(index, 1);
+    } else {
+        openItems.value.push(label);
+    }
+};
+
+const isItemOpen = (label: string) => {
+    return openItems.value.includes(label);
+};
+
+const isRouteActive = (to: string | undefined) => {
+    if (!to) return false;
+    return currentRoute.value === to;
+};
+
+// Simular cambio de ruta (en producción usarías Vue Router)
+const navigateTo = (to: string) => {
+    currentRoute.value = to;
+    // window.history.pushState({}, '', to);
+};
+
+// Funciones de animación para los submenús
+const onEnter = (el: Element) => {
+    const element = el as HTMLElement;
+    element.style.height = '0';
+    element.offsetHeight; // Force reflow
+    element.style.height = element.scrollHeight + 'px';
+};
+
+const onLeave = (el: Element) => {
+    const element = el as HTMLElement;
+    element.style.height = element.scrollHeight + 'px';
+    element.offsetHeight; // Force reflow
+    element.style.height = '0';
+};
+
 defineExpose({ toggleSidebar });
 </script>
 
@@ -47,15 +123,22 @@ defineExpose({ toggleSidebar });
     >
         <div class="flex flex-col h-full">
             <!-- Logo / Brand -->
-            <div class="p-4 border-b border-surface-200 dark:border-surface-700">
+            <div class="p-4">
                 <div class="flex items-center gap-3">
-                    <i class="pi pi-box text-2xl text-primary"></i>
+                    <div 
-                    <span 
+                        class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary transition-all"
-                        v-if="sidebarVisible" 
+                        :class="sidebarVisible ? 'bg-primary' : 'bg-primary/90'"
-                        class="text-lg font-semibold text-surface-900 dark:text-surface-0"
                     >
-                        GOLS Control
+                        <i class="pi pi-chart-line text-xl text-white"></i>
-                    </span>
+                    </div>
+                    <div v-if="sidebarVisible" class="flex flex-col">
+                        <h1 class="text-xl font-bold text-surface-900 dark:text-surface-0">
+                            Golscontrols
+                        </h1>
+                        <p class="text-xs text-surface-500 dark:text-surface-400">
+                            Sistema ERP
+                        </p>
+                    </div>
                 </div>
             </div>
 
@@ -67,29 +150,69 @@ defineExpose({ toggleSidebar });
                         <a 
                             v-if="!item.items"
                             :href="item.to"
-                            class="flex items-center gap-3 px-3 py-2 rounded-lg text-surface-700 dark:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
+                            @click.prevent="item.to && navigateTo(item.to)"
+                            :class="[
+                                'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all cursor-pointer',
+                                isRouteActive(item.to)
+                                    ? 'bg-primary text-white shadow-sm'
+                                    : 'text-surface-700 dark:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800'
+                            ]"
+                            :title="!sidebarVisible ? item.label : ''"
                         >
-                            <i :class="item.icon"></i>
+                            <i :class="[item.icon, 'shrink-0']"></i>
                             <span v-if="sidebarVisible">{{ item.label }}</span>
                         </a>
 
-                        <!-- Item con subitems -->
+                        <!-- Item con subitems (Collapsible) -->
                         <div v-else>
-                            <div class="flex items-center gap-3 px-3 py-2 text-surface-700 dark:text-surface-200 font-medium">
+                            <button
-                                <i :class="item.icon"></i>
+                                @click="toggleItem(item.label)"
-                                <span v-if="sidebarVisible">{{ item.label }}</span>
+                                :class="[
-                            </div>
+                                    'w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-                            <ul v-if="sidebarVisible" class="ml-6 mt-1 space-y-1">
+                                    'text-surface-700 dark:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800'
-                                <li v-for="subItem in item.items" :key="subItem.label">
+                                ]"
-                                    <a 
+                                :title="!sidebarVisible ? item.label : ''"
-                                        :href="subItem.to"
+                            >
-                                        class="flex items-center gap-2 px-3 py-2 rounded-lg text-surface-600 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors text-sm"
+                                <div class="flex items-center gap-3">
-                                    >
+                                    <i :class="[item.icon, 'shrink-0']"></i>
-                                        <i :class="subItem.icon" class="text-xs"></i>
+                                    <span v-if="sidebarVisible">{{ item.label }}</span>
-                                        <span>{{ subItem.label }}</span>
+                                </div>
-                                    </a>
+                                <i 
-                                </li>
+                                    v-if="sidebarVisible"
-                            </ul>
+                                    :class="[
+                                        'pi pi-chevron-down text-xs transition-transform duration-200',
+                                        isItemOpen(item.label) && 'rotate-180'
+                                    ]"
+                                ></i>
+                            </button>
+
+                            <!-- Subitems con animación -->
+                            <Transition
+                                name="submenu"
+                                @enter="onEnter"
+                                @leave="onLeave"
+                            >
+                                <ul 
+                                    v-if="sidebarVisible && isItemOpen(item.label)" 
+                                    class="ml-6 mt-1 space-y-1 overflow-hidden"
+                                >
+                                    <li v-for="subItem in item.items" :key="subItem.label">
+                                        <a 
+                                            :href="subItem.to"
+                                            @click.prevent="subItem.to && navigateTo(subItem.to)"
+                                            :class="[
+                                                'flex items-center gap-2 px-3 py-2 pl-6 rounded-lg text-sm font-medium transition-all cursor-pointer',
+                                                isRouteActive(subItem.to)
+                                                    ? 'bg-primary text-white shadow-sm'
+                                                    : 'text-surface-600 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800'
+                                            ]"
+                                        >
+                                            <i :class="[subItem.icon, 'text-xs shrink-0']"></i>
+                                            <span>{{ subItem.label }}</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </Transition>
                         </div>
                     </li>
                 </ul>
@@ -100,9 +223,10 @@ defineExpose({ toggleSidebar });
                 <button
                     @click="toggleSidebar"
                     class="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-surface-700 dark:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
+                    :title="sidebarVisible ? 'Contraer sidebar' : 'Expandir sidebar'"
                 >
                     <i :class="sidebarVisible ? 'pi pi-angle-left' : 'pi pi-angle-right'"></i>
-                    <span v-if="sidebarVisible">Contraer</span>
+                    <span v-if="sidebarVisible" class="text-sm font-medium">Contraer</span>
                 </button>
             </div>
         </div>
@@ -114,5 +238,57 @@ aside {
     height: 100vh;
     position: sticky;
     top: 0;
+    z-index: 40;
+}
+
+/* Animación para submenús */
+.submenu-enter-active,
+.submenu-leave-active {
+    transition: height 0.3s ease, opacity 0.3s ease;
+    overflow: hidden;
+}
+
+.submenu-enter-from,
+.submenu-leave-to {
+    height: 0;
+    opacity: 0;
+}
+
+.submenu-enter-to,
+.submenu-leave-from {
+    opacity: 1;
+}
+
+/* Animación de rotación para el chevron */
+.rotate-180 {
+    transform: rotate(180deg);
+}
+
+/* Efecto de sombra en item activo */
+.shadow-sm {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+/* Scroll suave */
+nav {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
+}
+
+nav::-webkit-scrollbar {
+    width: 6px;
+}
+
+nav::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+nav::-webkit-scrollbar-thumb {
+    background-color: rgba(155, 155, 155, 0.5);
+    border-radius: 3px;
+}
+
+nav::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(155, 155, 155, 0.7);
 }
 </style>

src/components/layout/TopBar.vue

@@ -1,32 +1,100 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useLayout } from "../../composables/useLayout";
 import AppConfig from "./AppConfig.vue";
 
 const { isDarkMode, toggleDarkMode } = useLayout();
+
+// Referencia al menú de usuario
+const userMenu = ref();
+
+// Función para toggle del menú
+const toggleUserMenu = (event: Event) => {
+    userMenu.value.toggle(event);
+};
+
+// Opciones del menú de usuario
+const userMenuItems = ref([
+    {
+        label: 'Mi Perfil',
+        icon: 'pi pi-user',
+        command: () => {
+            console.log('Ir a perfil');
+            // Aquí puedes agregar la navegación: router.push('/profile')
+        }
+    },
+    {
+        label: 'Configuración',
+        icon: 'pi pi-cog',
+        command: () => {
+            console.log('Ir a configuración');
+            // Aquí puedes agregar la navegación: router.push('/settings')
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Cerrar Sesión',
+        icon: 'pi pi-sign-out',
+        command: () => {
+            console.log('Cerrar sesión');
+            // Aquí puedes agregar la lógica de logout
+            // Por ejemplo: authStore.logout() o router.push('/login')
+        }
+    }
+]);
 </script>
 
 <template>
-    <div class="bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700 px-6 py-4">
+    <header class="bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700 px-6 py-4">
         <div class="flex items-center justify-between">
+            <!-- Left Section: Branding -->
             <div class="flex items-center gap-3">
-                <span class="text-xl font-semibold text-surface-900 dark:text-surface-0">
+                <!-- <i class="pi pi-box text-2xl text-primary"></i>
-                    GOLS Control
+                <div class="flex flex-col">
-                </span>
+                    <span class="text-lg font-bold text-surface-900 dark:text-surface-0">
+                        GOLS Control
+                    </span>
+                    <span class="text-xs text-surface-500 dark:text-surface-400">
+                        Sistema de Gestión
+                    </span>
+                </div> -->
             </div>
-            
+
+            <!-- Right Section: Actions -->
             <div class="flex items-center gap-2">
-                <!-- Botón de modo oscuro -->
+                <!-- Search Button (opcional) -->
+               <!--  <button
+                    type="button"
+                    class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-surface-700 dark:text-surface-200"
+                    title="Buscar"
+                >
+                    <i class="pi pi-search"></i>
+                </button> -->
+
+                <!-- Notifications Button (opcional) -->
+                <!-- <button
+                    type="button"
+                    class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-surface-700 dark:text-surface-200 relative"
+                    title="Notificaciones"
+                >
+                    <i class="pi pi-bell"></i>
+                    <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+                </button> -->
+
+                <!-- Dark Mode Toggle -->
                 <button
                     type="button"
-                    class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-surface-900 dark:text-surface-0 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 dark:focus-visible:ring-offset-surface-950"
+                    class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-surface-900 dark:text-surface-0"
                     @click="toggleDarkMode"
                     :title="isDarkMode ? 'Modo claro' : 'Modo oscuro'"
                 >
                     <i :class="['pi', isDarkMode ? 'pi-sun' : 'pi-moon']" />
                 </button>
 
-                <!-- Botón de configuración de colores -->
+                <!-- Settings/Config Button -->
-                <div class="relative">
+                <!-- <div class="relative">
                     <button
                         v-styleclass="{
                             selector: '@next',
@@ -37,16 +105,67 @@ const { isDarkMode, toggleDarkMode } = useLayout();
                             hideOnOutsideClick: true,
                         }"
                         type="button"
-                        class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-surface-900 dark:text-surface-0 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 dark:focus-visible:ring-offset-surface-950"
+                        class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-surface-700 dark:text-surface-200"
-                        title="Configurar colores"
+                        title="Configuración"
                     >
-                        <i class="pi pi-palette" />
+                        <i class="pi pi-cog" />
                     </button>
                     <AppConfig />
+                </div> -->
+
+                <!-- User Profile Button with Menu -->
+                <div class="relative">
+                    <button
+                        type="button"
+                        class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface-100 dark:hover:bg-surface-800 transition-all"
+                        title="Perfil"
+                        @click="toggleUserMenu"
+                        aria-haspopup="true"
+                        aria-controls="user_menu"
+                    >
+                        <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white text-sm font-semibold">
+                            JD
+                        </div>
+                        <span class="text-sm font-medium text-surface-900 dark:text-surface-0 hidden md:block">
+                            John Doe
+                        </span>
+                        <i class="pi pi-angle-down text-sm text-surface-500 hidden md:block"></i>
+                    </button>
+
+                    <!-- Menu de Usuario -->
+                    <Menu 
+                        ref="userMenu" 
+                        id="user_menu" 
+                        :model="userMenuItems" 
+                        :popup="true"
+                        class="w-56"
+                    >
+                        <template #start>
+                            <div class="px-4 py-3 border-b border-surface-200 dark:border-surface-700">
+                                <p class="text-sm font-semibold text-surface-900 dark:text-surface-0">John Doe</p>
+                                <p class="text-xs text-surface-500 dark:text-surface-400">john.doe@example.com</p>
+                            </div>
+                        </template>
+                        <template #item="{ item, props }">
+                            <a 
+                                v-bind="props.action" 
+                                class="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
+                                :class="{ 'text-red-600 dark:text-red-400': item.label === 'Cerrar Sesión' }"
+                            >
+                                <i :class="item.icon"></i>
+                                <span class="text-sm font-medium">{{ item.label }}</span>
+                            </a>
+                        </template>
+                        <template #end>
+                            <div class="px-4 py-2 border-t border-surface-200 dark:border-surface-700">
+                                <p class="text-xs text-surface-400 dark:text-surface-500">Versión 1.0.0</p>
+                            </div>
+                        </template>
+                    </Menu>
                 </div>
             </div>
         </div>
-    </div>
+    </header>
 </template>
 
 <style scoped>
@@ -63,6 +182,7 @@ const { isDarkMode, toggleDarkMode } = useLayout();
         opacity: 0;
         transform: scale(0.9);
     }
+
     to {
         opacity: 1;
         transform: scale(1);
@@ -73,6 +193,7 @@ const { isDarkMode, toggleDarkMode } = useLayout();
     from {
         opacity: 1;
     }
+
     to {
         opacity: 0;
     }