A professional, engineering-first web application designed to decouple Operational Capacity (Pallet Positions) from Strategic Capacity (Cubic Volume). This tool visualizes the efficiency gap in warehouse storage, helping supply chain leaders avoid premature facility expansion.
Most Warehouse Management Systems (WMS) report capacity based on slots. If every rack position has a pallet, the WMS says the building is "100% Full."
However, if those pallets are only 1 meter high, but the rack beams are set for 2 meters, you are storing 50% air. The building is operationally full, but strategicaly empty.
This application solves this by measuring two distinct metrics simultaneously:
- Pallet Position Utilization: "Do I have a place to put the next truckload?"
- Cubic Utilization: "Am I utilizing the vertical volume I am paying rent for?"
- Real-Time Computation: Instant recalculation of utilization percentages as dimensional inputs change.
- Dual-Metric Dashboard:
- Traffic Light System: Visual alerts for Pallet Gridlock (>90%).
- Density Gradient: Visual indicators for Volumetric efficiency.
- Paradox Detection: Automatic logic that flags when a facility is "Operationally Full but Strategically Empty," suggesting rack re-profiling instead of expansion.
- Unit Agnostic: Seamless toggle between Metric (m) and Imperial (ft) systems.
- Responsive UI: A modern, glassmorphism-inspired interface built with Tailwind CSS, fully responsive for tablet and desktop analysis.
Built with a focus on type safety, performance, and component modularity.
| Category | Technology | Usage |
|---|---|---|
| Core | React 18 | Component architecture and state management |
| Language | TypeScript | Strict typing for dimensional logic and data structures |
| Build Tool | Vite | HMR and optimized production bundling |
| Styling | Tailwind CSS | Utility-first styling with custom typography configurations |
| Visualization | Recharts | Data visualization (Pie/Donut charts) |
| Icons | Lucide React | Consistent SVG iconography |
This project is built using npm and vite.
- Node.js v18+ (Recommended v20 LTS)
-
Clone the repository
git clone https://github.com/Dev0psKing/warehouse-utilization-engine.git cd warehouse-utilization-engine -
Install Dependencies
npm install
-
Run Development Server
npm run dev
-
Build for Production
npm run build
The calculator uses the following logic to derive its status indicators:
Represents the 2D slot availability. $$ \text{Utilization} = \frac{\text{Current Pallet Count}}{(\text{Bays} \times \text{Levels} \times \text{Deep})} $$
- < 75% (Safe): Optimal flow.
- 75-90% (Congestion): Put-away times increase.
- > 90% (Gridlock): Incoming freight cannot be processed efficiently.
Represents the 3D volumetric efficiency. $$ \text{Gross Cube} = L \times W \times H $$ $$ \text{Usable Cube} = \text{Gross Cube} \times \text{Usable Factor (e.g., 0.85)} $$ $$ \text{Inventory Cube} = \text{Pallet Count} \times (\text{Pallet } L \times W \times H) $$ $$ \text{Cubic Utilization} = \frac{\text{Inventory Cube}}{\text{Usable Cube}} $$
(Add screenshots of your dashboard here once running)
Uwabor Building technical solutions for Supply Chain & Logistics.
This project is licensed under the MIT License - see the LICENSE file for details.