Warehouse Planning App

Project Overview

The Warehouse Planning App is a web-based internal tool designed to streamline the visualization and management of outbound orders in a warehouse environment. The application integrates directly with an ERP system (SAOP), from which it retrieves real-time data about dispatch orders, delivery dates, and logistics details.

The core goal of the project was to replace static or fragmented planning processes with a dynamic, interactive interface that allows warehouse staff to:

• Monitor upcoming dispatches
• Organize orders by date or delivery location
• Access detailed order contents
• Track readiness and delivery status

The result is a responsive, data-driven interface tailored for operational efficiency in logistics workflows.

The application replaces manual coordination with an interactive interface, helping warehouse staff quickly understand what needs to be prepared, where it is going, and when it is scheduled.

Try demo

Follow this link to try a demo version of an app:

To demo

To enter the app, authentication is required. Use following login credentials:

• Username: user
• Password: user

Concept & Design

The concept of the application is built around clarity, speed, and usability in a warehouse context, where users need immediate insight rather than complex interactions.

Dual View System

The app introduces two complementary visualization modes:

• Date-based view
  A 14-day rolling calendar centered around the current day, allowing users to plan ahead and review past dispatches.
• Location-based view
  A grouped layout where all orders are clustered by delivery location, enabling optimized logistics planning.

This duality addresses two key operational questions:

When is something being dispatched?

Where is it going?

Visual Language

• Color coding (pink = in preparation, green = ready) provides instant status recognition
• Grid-based calendar layout mimics familiar scheduling tools
• Modal-based details reduce clutter while allowing deep inspection of orders

The UI prioritizes low cognitive load, which is critical in fast-paced warehouse environments.

Technical Implementation

Frontend

The frontend is developed in vanilla JavaScript using an IIFE pattern, ensuring encapsulation and avoiding global scope pollution. The application uses a state-driven approach, where a central jobs array holds all active data.

Key features include:

• Dynamic calendar rendering with a custom date generation system
• Multi-day job visualization, where tasks span across grid columns
• Custom overlap resolution algorithm to prevent UI collisions
• Event-driven interactions for opening modals and displaying order details
• Localization support via dynamic text injection

Backend

The backend consists of lightweight PHP API endpoints:

• Fetching orders and order lines
• Updating delivery status
• Serving JSON data to the frontend

Data Handling

Data is fetched asynchronously using the Fetch API and refreshed every 5 seconds, ensuring near real-time synchronization with the ERP system.

Key Challenges Solved

• Multi-day scheduling logic: Implemented span calculations and row-packing to correctly display overlapping jobs
• Real-time updates: Achieved with efficient polling without overloading the system
• Data inconsistencies: Handled edge cases such as invalid dates and missing value
• UI scalability: Designed flexible grouping and rendering to handle varying data volumes

Result

The application significantly improves warehouse workflow by:

• Providing a clear and real-time overview of dispatch operations
• Reducing planning errors
• Enabling faster and more informed decision-making
• Improving coordination between preparation and delivery processes

Conclusion

This project highlights how a lightweight, custom-built solution can outperform generic tools when tailored to a specific operational problem. By combining efficient frontend rendering logic with simple backend APIs, the application delivers high performance, clarity, and usability without relying on heavy frameworks.