Estructura del Proyecto - GOLS Control Frontend

📁 Estructura de Carpetas

src/
├── App.vue                      # Componente raíz (cambia entre demos)
├── main.ts                      # Punto de entrada
├── MainLayout.vue               # Layout principal con Sidebar + TopBar
├── ColorDemo.vue                # Demo de personalización de colores
│
├── assets/                      # Recursos estáticos
│   └── styles/
│       └── main.css            # Estilos globales y variables CSS
│
├── components/                  # Componentes globales
│   ├── layout/                 # Componentes de layout
│   │   ├── TopBar.vue          # Barra superior
│   │   ├── Sidebar.vue         # Menú lateral
│   │   └── AppConfig.vue       # Panel de configuración de colores
│   │
│   ├── shared/                 # Componentes compartidos
│   │   └── KpiCard.vue         # Tarjeta de KPI
│   │
│   ├── ui/                     # Componentes UI reutilizables
│   │   └── (vacío por ahora)
│   │
│   └── Holos/                  # (Legacy - se puede eliminar)
│       ├── AppTopbar.vue
│       └── AppConfig.vue
│
├── composables/                # Composables globales
│   └── useLayout.ts           # Gestión de tema y colores
│
├── modules/                    # Módulos de negocio
│   └── warehouse/             # Módulo de almacén
│       ├── components/
│       │   ├── WarehouseDashboard.vue    # Dashboard principal
│       │   └── InventoryTable.vue        # Tabla de inventario
│       │
│       ├── composables/
│       │   └── useWarehouse.ts           # Lógica de negocio
│       │
│       ├── services/
│       │   └── warehouseService.ts       # API del módulo
│       │
│       └── types/
│           └── warehouse.d.ts            # Tipos TypeScript
│
├── services/                   # Servicios globales
│   └── api.ts                 # Cliente HTTP base
│
└── types/                      # Tipos globales
    └── global.d.ts            # Definiciones TypeScript globales

🎯 Convenciones

Módulos

Cada módulo sigue la estructura:

modules/[nombre-modulo]/
├── components/         # Componentes específicos del módulo
├── composables/        # Lógica de negocio del módulo
├── services/          # API calls del módulo
└── types/             # Types específicos del módulo

Componentes

• Layout: Componentes de estructura (TopBar, Sidebar, etc.)
• Shared: Componentes reutilizables entre módulos
• UI: Componentes de interfaz básicos

Composables

• Prefijo use (ej: useWarehouse, useLayout)
• Encapsulan lógica reutilizable
• Retornan estado reactivo y métodos

Services

• Manejan comunicaciones HTTP
• Retornan Promises
• Usan el cliente api.ts base

🚀 Uso

Ver Demo de Colores

// En App.vue
const currentView = ref<'color' | 'warehouse'>('color');

Ver Dashboard de Almacén

// En App.vue
const currentView = ref<'color' | 'warehouse'>('warehouse');

📦 Crear un Nuevo Módulo

1. Crear estructura en src/modules/[nombre]/
2. Definir tipos en types/[nombre].d.ts
3. Crear servicio en services/[nombre]Service.ts
4. Crear composable en composables/use[Nombre].ts
5. Crear componentes en components/

🎨 Sistema de Colores

• Color primario: Azul (fijo)
• Colores de superficie: 5 opciones (slate, gray, zinc, neutral, stone)
• Modo oscuro: Activable desde TopBar

📝 Notas

• Los componentes de PrimeVue se auto-importan
• TypeScript configurado con strict mode
• Tailwind CSS v4 integrado
• Variables CSS personalizadas en main.css