# Frontend - ERP Mecanicas Diesel

## Stack Tecnologico

| Tecnologia | Version | Proposito |
|------------|---------|-----------|
| React | 18.x | Framework UI |
| Vite | 6.x | Build tool |
| TypeScript | 5.x | Lenguaje |
| React Router | 6.x | Routing |
| Zustand | 5.x | State management |
| React Query | 5.x | Data fetching/caching |
| Tailwind CSS | 3.x | Styling |
| React Hook Form | 7.x | Formularios |
| Zod | 3.x | Validacion |
| Axios | 1.x | HTTP client |
| Lucide React | - | Iconos |

## Estructura del Proyecto

```
src/
├── components/
│   ├── common/              # Componentes reutilizables (Button, Input, etc)
│   ├── layout/              # Layout principal (Sidebar, Header, MainLayout)
│   └── features/            # Componentes especificos por modulo
├── features/                # Logica por modulo/epic
│   ├── auth/               # Autenticacion
│   ├── service-orders/     # MMD-002: Ordenes de servicio
│   ├── diagnostics/        # MMD-003: Diagnosticos
│   ├── inventory/          # MMD-004: Inventario
│   ├── vehicles/           # MMD-005: Vehiculos
│   ├── quotes/             # MMD-006: Cotizaciones
│   └── settings/           # MMD-001: Configuracion
├── store/                   # Zustand stores
│   ├── authStore.ts        # Estado de autenticacion
│   └── tallerStore.ts      # Estado del taller
├── services/
│   └── api/                # Clientes API
│       ├── client.ts       # Axios instance con interceptors
│       ├── auth.ts         # Endpoints de auth
│       └── serviceOrders.ts # Endpoints de ordenes
├── pages/                   # Paginas/Vistas
│   ├── Login.tsx
│   └── Dashboard.tsx
├── hooks/                   # Custom React hooks
├── types/                   # TypeScript types
│   └── index.ts            # Tipos base
├── utils/                   # Utilidades
├── App.tsx                  # Router principal
├── main.tsx                 # Entry point
└── index.css               # Tailwind imports
```

## Comandos

```bash
# Instalar dependencias
npm install

# Desarrollo
npm run dev

# Build produccion
npm run build

# Preview build
npm run preview

# Lint
npm run lint
```

## Variables de Entorno

Crear archivo `.env.local`:

```env
VITE_API_URL=http://localhost:3041/api/v1
```

## Modulos por Implementar

### MMD-001: Fundamentos (Sprint 1-2)
- [ ] Configuracion de taller (wizard)
- [ ] Gestion de roles
- [ ] Catalogo de servicios
- [ ] Gestion de bahias

### MMD-002: Ordenes de Servicio (Sprint 2-5)
- [ ] Lista de ordenes con filtros
- [ ] Detalle de orden
- [ ] Crear orden (wizard 4 pasos)
- [ ] Tablero Kanban
- [ ] Registro de trabajos

### MMD-003: Diagnosticos (Sprint 2-4)
- [ ] Lista de diagnosticos
- [ ] Scanner OBD (DTC codes)
- [ ] Pruebas de banco
- [ ] Galeria de fotos

### MMD-004: Inventario (Sprint 4-6)
- [ ] Catalogo de refacciones
- [ ] Kardex de movimientos
- [ ] Alertas de stock
- [ ] Recepcion de mercancia

### MMD-005: Vehiculos (Sprint 4-6)
- [ ] Lista de vehiculos
- [ ] Ficha tecnica
- [ ] Especificaciones de motor
- [ ] Historial de servicios

### MMD-006: Cotizaciones (Sprint 6)
- [ ] Lista de cotizaciones
- [ ] Crear cotizacion
- [ ] Generar PDF
- [ ] Envio por email/WhatsApp

## Convenciones

### Nombres de Archivos
- Componentes: `PascalCase.tsx`
- Hooks: `useCamelCase.ts`
- Stores: `camelCaseStore.ts`
- Types: `camelCase.types.ts`
- Services: `camelCase.ts`

### Estructura de Feature
```
features/{feature}/
├── components/     # Componentes UI
├── hooks/          # Custom hooks
├── types/          # TypeScript types
└── index.ts        # Exports publicos
```

## Dependencias del Backend

Este frontend requiere el backend de mecanicas-diesel corriendo en el puerto 3041.

```bash
# Desde la raiz del proyecto
cd ../backend
npm run dev
```

---

*ERP Mecanicas Diesel - Sistema NEXUS*
*Creado: 2025-12-08*