# Don Confiao - Frontend

## Tech Stack
- **Framework:** Vue 3 (Composition API)
- **UI Library:** Vuetify 3
- **Routing:** Vue Router 4 (auto-routes con `unplugin-vue-router`)
- **State:** Pinia
- **HTTP:** Axios
- **Build:** Vite
- **Linting:** ESLint

## Project Structure
```
src/
├── assets/          # Imágenes, iconos estáticos
├── components/      # Componentes Vue reutilizables
├── layouts/         # Layouts de página
├── pages/           # Vistas (auto-routed desde文件名)
├── plugins/         # Configuración de Vuetify, etc.
├── router/          # Configuración de rutas
├── services/        # API services (auth.js, etc.)
├── stores/          # Pinia stores
└── styles/          # SCSS settings
```

## Important Conventions

### Auto-imports
- Componentes en `src/components/` se auto-importan por nombre
- Los archivos en `src/pages/*.vue` se routing automáticamente via `unplugin-vue-router`
- Alias `@` = `src/`

### Pages (CRITICAL)
**Siempre importar componentes en los archivos de página:**
```vue
<template>
  <MiComponente />
</template>

<script setup>
import MiComponente from '@/components/MiComponente.vue';
</script>
```

### Componentes
- Usar Composition API (`<script setup>` o `export default { }`)
- Naming: PascalCase (ej: `LoginDialog.vue`, `CartGrid.vue`)
- Componentes de página van en `pages/`, componentes reutilizables en `components/`

### Servicios API
- Ubicación: `src/services/`
- Usar Axios para HTTP requests
- JWT tokens en localStorage (`access_token`, `refresh_token`)

### Routing
- Rutas automáticas basadas en archivos en `src/pages/`
- No requiere configuración manual en `router/index.js`

## Environment Variables
- `VITE_DJANGO_BASE_URL` - URL del backend Django

## Commands
```bash
npm run dev      # Desarrollo (puerto 3000)
npm run build    # Producción
npm run preview  # Preview build
npm run lint     # ESLint fix
```

## Common Issues
1. **Página en blanco:** Verificar que los componentes en `src/pages/*.vue` tengan import explícito
2. **Errores de lint:** Ejecutar `npm run lint`

## Git Commits
**Antes de hacer commit:**
1. Pedir permiso al usuario
2. Mostrar resumen de los cambios que se incluirán

**Formato de mensajes:**
- Usar prefijo `#<numero>` para referenciar el issue (ej: `#28 feat: add login` donde #28 es el número del issue en GitHub/GitLab)
- Prefijos válidos: `feat`, `fix`, `chore`, `docs`, `refactor`, `style`