CP Supply Chain Planning System - UI Prototype

A modern, interactive UI prototype for the CP stock-and-ship inventory planning system.

🚀 Live Demo

The application is automatically deployed to GitHub Pages: https://ikatsov.github.io/cp-buying-system/

Overview

This prototype implements all four main screens specified in the UI requirements:

1. Command Center - Executive dashboard with global KPIs, inbound pipeline, DC capacity heatmap, and exception inbox
2. Forecasting Hub - Outbound demand trends, inbound container flow projections, and mover type segmentation
3. Policy Simulator - Digital twin sandbox for testing "what if" scenarios with adjustable levers
4. Replenishment Workbench - Daily transactional hub for converting forecasts into Container POs (CPOs)

Tech Stack

• React 18 - Modern React with hooks
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework for modern UI
• Recharts - Composable charting library for data visualizations
• Lucide React - Beautiful icon library

Getting Started

Prerequisites

• Node.js 16+ and npm

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

The application will be available at http://localhost:5173

Deployment

Automatic Deployment (GitHub Pages)

This project is configured for automatic deployment to GitHub Pages:

1. Push to GitHub:

   git add .
   git commit -m "Initial commit"
   git push origin main

2. Enable GitHub Pages:

   • Go to your repository settings on GitHub
   • Navigate to "Pages" in the left sidebar
   • Under "Build and deployment", select "GitHub Actions" as the source
   • The workflow will automatically deploy on every push to main

3. Access your site:

   • Your site will be live at: https://YOUR_USERNAME.github.io/cp-buying-system/

Manual Deployment

Alternatively, you can deploy manually using gh-pages:

# Install gh-pages package
npm install

# Deploy to GitHub Pages
npm run deploy

Features

Command Center

• Real-time KPI tracking (forecast accuracy, automated PO rate, OOS rate)
• Visual inbound container pipeline (At Origin → On Water → Port/Customs → Inland Transit → DC Gate-In)
• DC capacity heatmap with utilization metrics
• Prioritized exception inbox with actionable alerts
• Global filters for timeframe and location

Forecasting Hub

• Historical vs. normalized vs. forecasted demand visualization
• Inbound container arrival projections by DC
• Drill-down controls by SKU, warehouse, or vendor
• Mover type segmentation (A, B, C, D, E movers)
• Macro event override capabilities (competitor pricing, tax returns)

Policy Simulator

• Interactive sliders for safety stock, lead times, and sales scenarios
• Side-by-side comparison of baseline vs. scenario impacts
• Inventory value and OOS risk projections
• Simulated container flow visualization
• Constraint inputs for MOQ, box quantities, and lead times

Replenishment Workbench

• Smart PO grid with system-generated buy recommendations
• Inline parameter editing for vendor cost, quantities, MOQ
• Soft constraint indicators (capacity warnings)
• Digital CGM review integration with exception reasons
• Automation toggles for email, auto-release, and overage/shortage handling
• Bulk selection and CPO release capabilities

UI/UX Design Principles

• Management by Exception - Focus on actionable insights and deviations
• Progressive Disclosure - Show overview first, drill down as needed
• Visual Hierarchy - Use color coding for status (green/yellow/red)
• Responsive Design - Works on desktop and tablet screens
• Modern Aesthetics - Clean, professional interface with proper spacing
• Accessibility - Proper contrast ratios and semantic HTML

Project Structure

src/
├── components/
│   ├── CommandCenter.jsx       # Screen 1: Executive dashboard
│   ├── ForecastingHub.jsx      # Screen 2: Forecasting & demand
│   ├── PolicySimulator.jsx     # Screen 3: Digital twin sandbox
│   └── ReplenishmentWorkbench.jsx # Screen 4: Buying workbench
├── App.jsx                      # Main application with navigation
├── main.jsx                     # React entry point
└── index.css                    # Global styles with Tailwind

Future Enhancements

• Real API integration for live data
• User authentication and role-based access
• Container fill optimization algorithm visualization
• Historical performance analytics
• Mobile responsive optimizations
• Export functionality for reports
• Real-time notifications system
• Advanced filtering and search capabilities