153 lines
4.0 KiB
Markdown
153 lines
4.0 KiB
Markdown
# 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*
|