🛒 Gestor de Pickers

Aplicación web para gestionar y coordinar personal de picking en tiempo real.

El sistema permite a un coordinador administrar la cola de pickers, asignar pedidos, controlar estados y mantener la información sincronizada entre distintos dispositivos. Los pickers pueden recibir notificaciones push cuando se les asigna un pedido.

El proyecto fue desarrollado como una solución orientada a la gestión de operaciones de picking y distribución de pedidos.

✨ Funcionalidades

Coordinador

• Inicio de sesión mediante Supabase Auth.
• Gestión de pickers.
• Asignación de pedidos.
• Finalización de pedidos como completados o cancelados.
• Gestión de turnos AM/PM.
• Control de pickers disponibles, en pedido y fuera de turno.
• Reordenamiento de la cola mediante drag & drop.
• Búsqueda de pickers.
• Contador de pedidos completados.
• Creación de nuevos turnos.
• Actualización de información en tiempo real.

Picker

• Selección del usuario.
• Cambio de estado disponible/no disponible.
• Visualización de la cola de pedidos.
• Recepción de notificaciones push al recibir una asignación.

PWA y tiempo real

• Aplicación instalable como PWA.
• Service Worker.
• Notificaciones Web Push.
• Sincronización en tiempo real mediante Supabase Realtime.
• Persistencia local como respaldo cuando Supabase no está disponible.

🧱 Tecnologías

Frontend

• React 18
• JavaScript
• Vite
• React Router
• CSS

Backend / Servicios

• Supabase
• PostgreSQL
• Supabase Auth
• Supabase Realtime
• Supabase Edge Functions

PWA

• Service Worker
• Workbox
• Web Push
• PWA

🏗️ Arquitectura

                    ┌───────────────────┐
                    │     React        │
                    │    Frontend      │
                    └─────────┬─────────┘
                              │
                ┌─────────────┼─────────────┐
                │             │             │
                ▼             ▼             ▼
          Supabase Auth   Realtime      PostgreSQL
                │             │             │
                └─────────────┼─────────────┘
                              │
                              ▼
                    Supabase Edge Functions
                              │
                              ▼
                        Web Push

📁 Estructura principal

src/
├── components/
├── hooks/
├── lib/
├── pages/
├── utils/
├── App.jsx
└── main.jsx

supabase/
└── functions/
    ├── send-push/
    └── invite-user/

public/
└── icons / recursos PWA

🚀 Instalación

Requisitos

• Node.js 18+
• npm
• Cuenta de Supabase

1. Clonar el repositorio

git clone https://github.com/SebastianDiaz97/pickers.git

cd pickers

2. Instalar dependencias

npm install

3. Configurar variables de entorno

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

VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
VITE_VAPID_PUBLIC_KEY=

4. Ejecutar en desarrollo

npm run dev

5. Generar build de producción

npm run build

🔔 Notificaciones Push

El sistema utiliza Web Push para notificar al picker cuando recibe un pedido.

Flujo simplificado:

Picker disponible
      ↓
Suscripción Web Push
      ↓
Asignación de pedido
      ↓
Supabase Edge Function
      ↓
Notificación Push
      ↓
Dispositivo del Picker

🔄 Sincronización en tiempo real

Los cambios realizados por el coordinador se sincronizan mediante Supabase Realtime para que los distintos dispositivos puedan visualizar el estado actualizado de los pickers y pedidos.

Además, la aplicación incorpora localStorage como respaldo cuando la conexión con Supabase no está disponible.

📱 PWA

La aplicación puede instalarse como una aplicación web progresiva en dispositivos compatibles.

Incluye:

• Manifest.
• Service Worker.
• Instalación en dispositivos móviles.
• Notificaciones Push.
• Soporte offline parcial.

🔮 Próximas mejoras

• Historial de turnos.
• Reportes de productividad.
• Sonido de alerta al recibir pedidos.
• Mejoras específicas para Safari/iOS.
• Métricas y estadísticas de productividad.

👨‍💻 Autor

Sebastián Díaz

Ingeniero Civil en Informática

GitHub: SebastianDiaz97