# 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
```ts
// En App.vue
const currentView = ref<'color' | 'warehouse'>('color');
```

### Ver Dashboard de Almacén
```ts
// 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`