A modern, interactive web-based warehouse visualization and inventory management system. This single-page HTML application provides real-time visualization of warehouse storage locations, merchant density analysis, and consolidation management with an intuitive interface for efficient warehouse operations.
- Hall & Aisle Overview - Visualize your entire warehouse layout organized by halls and aisles
- Shelf & Slot Grid - Detailed view of shelves, levels, and storage columns with real-time occupancy data
- Heat Map Visualization - Color-coded occupancy indicator showing box density across locations
- Interactive Details - Click any storage location to view detailed inventory information including:
- Box identifiers and merchant information
- SKU, description, and quantity details
- Pickable status and tracking codes
- Batch numbers and expiry dates
- Search & Navigation - Quickly find inventory by:
- SKU number
- Merchant name
- Box ID (with auto-jump to location)
- Zone Grouping - Automatic organization of aisles into logical zones (000-099, 100-199, etc.)
- Merchant Distribution - Analyze merchant concentration across warehouse locations
- Color-Coded Intensity - Visual representation of merchant stock levels
- Per-Merchant Filtering - Focus on specific merchant inventory distribution
- Aisle Details - Break-down of which merchants occupy each aisle and their box counts
- Comparative Statistics - View merchant stats including:
- Total boxes per merchant
- Aisles occupied
- Density percentage by location
- Floor Plan View - Schematic representation of warehouse layout
- Merchant Analysis Cards - Comprehensive metrics for each merchant including:
- Box counts and location distribution
- Stock concentration analysis
- Aisle occupancy breakdown
- Aisle Purity Analysis - Understand merchant segregation and identify consolidation opportunities
- Summary Statistics - Aggregate warehouse metrics at a glance
- Dark/Light Theme - Toggle between dark and light modes for comfortable viewing in any environment
- Responsive Layout - Optimized for various screen sizes with flexible sidebar navigation
- Intuitive Navigation - Breadcrumb navigation for easy location tracking
- Real-time Tooltips - Hover over elements for detailed information
- Accessibility - Keyboard shortcuts and screen-reader friendly interface
- Professional Styling - Modern UI built with CSS variables for easy customization
Upload your warehouse inventory data in CSV format with the following column structure:
| Column | Field | Description |
|---|---|---|
| A | storage_location | Storage location code (e.g., H1-F1-01-A-001) |
| B | storage_boxes | Box ID/identifier |
| C | merchants | Merchant/vendor name |
| D | skus | SKU number |
| E | sku_description | Product description |
| F | pickable_type | Pickability status (pickable, non_pickable, bulk_pickable) |
| G | tracking_code | Tracking/reference code |
| H | expiry_date | Product expiry date |
| I | quantity | Quantity of units in box |
| J | storage_box_type | Box type/dimensions (optional) |
Features:
- Drag & drop file upload or click to browse
- Progress indication during upload
- Error handling with detailed feedback
- Support for up to 184,159+ storage slots
- Real-time data validation
warehouse-visualization-model/
└── index.html # Complete single-page application
├── CSS Styles # Responsive design with dark/light theme
├── HTML Structure # Semantic markup for all views
└── JavaScript # Core logic and interactivity
- Open
index.htmlin a modern web browser - Click "↑ Upload CSV" in the bottom of the sidebar
- Upload your warehouse inventory CSV file
- Navigate between views using the sidebar menu:
- 🗺 Storage Map - Explore warehouse layout
- 🔥 Density Heatmap - Analyze merchant distribution
- 📦 Consolidation - Review consolidation opportunities
- Pure HTML/CSS/JavaScript application
- Runs entirely in the browser
- No backend server or dependencies needed
- Data processed client-side for privacy
- Select a Hall from the hall tabs in the sidebar
- Click an Aisle to view its shelf layout
- Click any storage slot to see detailed inventory
- Use the search box to find items by SKU, merchant, or box ID
- Click the "Find Storage Box" feature to jump to a specific box location
- Select a Hall and merchant from the filters
- Color intensity represents merchant stock concentration
- Hover over aisles to see merchant breakdown
- Click an aisle to see detailed merchant distribution
- Choose between Floor Plan or Merchant Analysis views
- Review merchant statistics and aisle purity metrics
- Analyze consolidation opportunities based on merchant distribution
- Identify zones with mixed vs. pure merchant storage
- Enter in Box Search - Jump to box location
- Click breadcrumb - Navigate back to hall overview
- Theme Toggle - Switch between dark/light modes
The application displays real-time inventory metrics:
- Total Boxes - Number of storage boxes in warehouse
- Total Units - Quantity of items across all boxes
- Total Aisles - Number of active aisles
- Merchants - Number of unique merchants
Modify CSS variables in the :root and [data-theme="dark"] sections:
:root {
--bg: #f0f2f7; /* Background color */
--accent: #0077cc; /* Primary accent color */
--accent2: #e85d04; /* Secondary accent color */
/* ... more variables */
}- Professional blue/orange accent colors
- Green for available/good status
- Red for critical/error states
- Yellow for warnings
- Purple for bulk items
- Client-Side Processing - All data processing happens in your browser
- No Data Transmission - Inventory data stays on your device
- No External Dependencies - No API calls or third-party services
- Local Storage Ready - Can be extended with local browser storage
- Chrome/Chromium 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Compact single-file deployment (~145 KB)
- Optimized for fast loading and responsiveness
- Efficient DOM manipulation
- Optimized rendering for large datasets
- Smooth animations and transitions
- Zero layout shift
- Syne - Display font for headings (800 weight)
- JetBrains Mono - Monospace font for data and labels
- Type SKU in the "Search" box (sidebar)
- Matching locations highlight in aisle overview
- Click an aisle to view shelf details
- Click the slot to see full inventory details
- Go to "Density Heatmap" tab
- Select a merchant from the left panel
- Review color-coded aisle distribution
- Click aisles to see merchant box counts
- Go to "Consolidation" tab
- Click "Merchant Analysis" view
- Review merchant concentration scores
- Check "Aisle Purity" metrics for consolidation opportunities
- Real-time Visibility - Always know where inventory is stored
- Quick Lookups - Find boxes in seconds using multiple search criteria
- Density Analysis - Optimize storage allocation based on merchant distribution
- Pick Planning - Identify consolidation opportunities to reduce pick time
- Inventory Validation - Verify storage location data accuracy
- Export/Print warehouse reports
- Historical tracking and analytics
- Multi-location support
- Integration with warehouse management systems
- Mobile app version
- Advanced filtering and custom views
- Barcode scanning integration
- Real-time inventory sync
This project is provided as-is for warehouse management purposes.
Created by prabathSoft
Need Help? This application is self-contained in a single HTML file. Simply open it in your browser and start uploading your warehouse data!