don_confiao_frontend/AGENTS.md

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.)
│   ├── api.js                 # Clase wrapper que делегат methods
│   ├── api-implementation.js # Factory que selecciona implementación
│   ├── auth.js                # Manejo de auth (login, tokens JWT)
│   ├── django-api.js         # Implementación de API para Django
│   └── http.js               # Axios instance con interceptors
├── 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:

<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)
• La API se inyecta globalmente via app.provide('api', api) y se usa con inject('api')

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

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. SIEMPRE pedir permiso al usuario antes de hacer commit
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

Análisis del Proyecto

Flujo de Autenticación

1. Login: AuthService.login(credentials) → obtiene JWT tokens → guarda en localStorage
2. Token: Se envía en headers via interceptor en http.js (Authorization: Bearer <token>)
3. Refresh: El interceptor renueva automáticamente el token si expira (401)
4. Logout: AuthService.logout() → limpia localStorage

Estructura de API

• api.js: Interfaz genérica con métodos como getCustomers(), getProducts(), etc.
• api-implementation.js: Factory que selecciona implementación (actualmente solo Django)
• django-api.js: Implementación concreta con endpoints de Django

Componentes Principales

• NavBar.vue: Barra de navegación con menú de usuario
• LoginDialog.vue: Diálogo de inicio de sesión
• Purchase.vue / AdminPurchase.vue: Componentes de compra
• Cart.vue: Carrito de compras
• SummaryPurchase.vue: Resumen de compra

Endpoints Django Comunes

• /api/token/ - Autenticación (login/refresh)
• /users/me/ - Usuario actual
• /don_confiao/api/customers/ - Clientes
• /don_confiao/api/products/ - Productos
• /don_confiao/api/sales/ - Ventas