erp-mecanicas-diesel-frontend-v2/README.md

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

# 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:

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.

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

---

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