📦 OdirPack - Sistema de Gestión Logística

Aplicación web para la gestión integral de operaciones logísticas y optimización de rutas de distribución

🎯 Funcionalidades Principales

🗺️ Operaciones Día a Día

Visualización en tiempo real de:

Rutas activas en el mapa
Estado de entregas
Ubicación de vehículos
Alertas y notificaciones

🎮 Simulaciones

Crear escenarios de distribución
Optimizar rutas antes de ejecutarlas
Comparar diferentes estrategias
Análisis de eficiencia

🚛 Gestión de Flota

Registro de vehículos
Estado de mantenimiento
Asignación de conductores
Historial de rutas

📦 Pedidos

Listado de pedidos
Estados de entrega
Asignación a rutas
Historial completo

📝 Descripción

OdirPack es una solución web moderna para la gestión de operaciones logísticas en tiempo real. La plataforma permite a las empresas de distribución optimizar sus rutas, gestionar su flota de vehículos, administrar almacenes y oficinas, y realizar simulaciones para mejorar la eficiencia operativa.

🎯 Objetivo

Proporcionar una herramienta integral que permita a los gestores logísticos:

Visualizar operaciones en tiempo real
Optimizar rutas de entrega
Gestionar recursos de manera eficiente
Simular escenarios de distribución
Tomar decisiones basadas en datos

✨ Características

🚀 Funcionalidades Principales

🗺️ Operaciones Día a Día: Monitoreo en tiempo real de entregas y rutas activas con integración de Google Maps
🎮 Simulaciones: Motor de simulación para optimizar rutas antes de ejecutarlas
🚛 Gestión de Flota: Control completo de vehículos, mantenimiento y disponibilidad
🏢 Almacenes y Oficinas: Administración de ubicaciones y recursos
📦 Gestión de Pedidos: Seguimiento completo del ciclo de vida de los pedidos
⚙️ Configuración: Panel de administración y personalización del sistema

🎨 Características Técnicas

✅ Interfaz responsive y moderna con Material-UI
✅ Autenticación y rutas protegidas
✅ Gestión de estado con Context API
✅ Integración con Google Maps para visualización geoespacial
✅ Componentes reutilizables y modulares
✅ TypeScript para type-safety
✅ Optimización de rendimiento con Vite

🛠 Tecnologías

Frontend Core

React 18.3.1 - Biblioteca de UI
TypeScript 5.5.3 - Superset tipado de JavaScript
Vite 5.4.8 - Build tool y dev server

UI/UX

Material-UI (MUI) 6.1.4 - Sistema de diseño
@mui/x-data-grid 7.23.1 - Tablas avanzadas
@mui/x-date-pickers 7.21.0 - Selectores de fecha
@mui/icons-material 6.1.4 - Iconografía

Maps & Geolocalización

@vis.gl/react-google-maps 1.3.0 - Integración con Google Maps

HTTP & API

Axios 1.7.7 - Cliente HTTP

Routing

React Router DOM 6.27.0 - Enrutamiento SPA

Utilidades

Day.js 1.11.13 - Manipulación de fechas
@fontsource/roboto 5.1.0 - Tipografía

Development Tools

ESLint - Linting
Vitest - Testing framework

📋 Requisitos Previos

Antes de comenzar, asegúrate de tener instalado:

Node.js >= 18.x
npm >= 9.x o yarn >= 1.22.x
Git

🚀 Instalación

1. Clonar el repositorio

git clone https://github.com/GRUPO-3-DP1/OdirPack-client.git
cd OdirPack-client

2. Instalar dependencias

npm install
# o
yarn install

3. Configurar variables de entorno

Crea un archivo .env en la raíz del proyecto:

VITE_API_URL=http://localhost:8080/api
VITE_GOOGLE_MAPS_API_KEY=tu_api_key_aqui

4. Ejecutar en desarrollo

npm run dev
# o
yarn dev

La aplicación estará disponible en: http://localhost:5173

📜 Scripts Disponibles

Script	Descripción
`npm run dev`	Inicia el servidor de desarrollo
`npm run build`	Compila la aplicación para producción
`npm run lint`	Ejecuta el linter ESLint
`npm run preview`	Preview de la build de producción
`npm run test`	Ejecuta los tests con Vitest

📁 Estructura del Proyecto

OdirPack-client/
├── public/                    # Archivos estáticos
├── src/
│   ├── components/           # Componentes reutilizables
│   │   ├── Dashboard/       # Layout principal
│   │   └── ProtectedRoute/  # HOC para rutas protegidas
│   ├── pages/               # Páginas de la aplicación
│   │   ├── Login/          # Página de autenticación
│   │   ├── OperacionesDiaDia/
│   │   ├── Simulaciones/
│   │   ├── Flota/
│   │   ├── AlmacenesOficinas/
│   │   ├── Pedidos/
│   │   └── Configuracion/
│   ├── context/            # Context API providers
│   │   ├── Archivos/
│   │   ├── Buscador/
│   │   ├── Operacion/
│   │   └── Simulacion/
│   ├── routes/            # Configuración de rutas
│   ├── App.tsx            # Componente raíz
│   └── main.tsx           # Entry point
├── config. ts              # Configuraciones globales
├── Dockerfile             # Configuración Docker
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

⚙️ Configuración

Google Maps API

Para habilitar las funcionalidades de mapas, necesitas:

Obtener una API key de Google Cloud Console
Habilitar las siguientes APIs:
- Maps JavaScript API
- Places API
- Directions API
- Geocoding API
Configurar la key en src/App.tsx o en variables de entorno

Temas y Estilos

El tema personalizado se encuentra en src/App.tsx:

const customTheme = createTheme({
  palette: {
    primary: {
      main:  "#00A76F",
    },
    secondary: {
      main: "#8E33FF",
    },
  },
  typography: {
    fontFamily: "Public Sans",
  },
});

🐳 Docker

Build de la imagen

docker build -t odirpack-client .

Ejecutar el contenedor

docker run -p 80:80 odirpack-client

🤝 Contribución

Las contribuciones son bienvenidas. Para contribuir:

Fork el proyecto
Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add some AmazingFeature')
Push a la rama (git push origin feature/AmazingFeature)
Abre un Pull Request

Convenciones de Código

Seguir las reglas de ESLint configuradas
Usar TypeScript para type-safety
Documentar componentes complejos
Escribir tests para nuevas funcionalidades

📄 Licencia

Este proyecto es privado y está protegido por derechos de autor.

❤️ Soporte

Para reportar bugs o solicitar features, abre un issue.

Name		Name	Last commit message	Last commit date
Latest commit History 526 Commits
.devcontainer		.devcontainer
.github/workflows		.github/workflows
public		public
src		src
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
config.ts		config.ts
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

daoch/OdirPack-client

Folders and files

Latest commit

History

Repository files navigation