Vendor Managed Inventory — clickable HTML prototype

A static, clickable prototype of Vendor Managed Inventory.

▶ View the live prototype: https://liemnguyen-afk.github.io/vendor-managed-inventory-prototype/

To run it locally, open index.html — it opens the Supplier Portal Stock Levels → Stock Balances page.

No build step: plain HTML, CSS and JavaScript.

Flows

Inventory Settings — Figma 2:2

Page

What you can do

inventory-settings.html

Classic Setup page with Adjustment Codes, Inventory Valuation, Cycle Count, Receipts, On-Hand Balances, Lot Management and Inventory Options. The green + adds an adjustment-code row. On-Hand Balances has a new Allow Vendor Managed Inventory checkbox (off by default). Save validates (a reason needs a code and vice versa; day fields must be whole numbers) and stores the settings in localStorage; Cancel reverts to the last save. Valuation Method is read-only because an inventory balance exists.

Warehouses — Figma 11:14

Page	What you can do
warehouse-create.html	Warehouse Create form — Figma 12:14. Name, Description and Country/Region are required (duplicate names are rejected). The Address block uses Clarity tokens; + Address Line 3 reveals a third line, picking a State fills its ISO code, Add Tax Registration adds a country + tax ID row, and Add location adds rows to Warehouse Locations. Standalone creates one blank location if none are entered. Create saves the warehouse and opens its detail page.
warehouse.html	Warehouse detail page (?id= picks a saved warehouse; defaults to the Laughlin Nevada sample) (classic blue header). The Locations table filters by View (All / Active / Inactive) and Search (aisle, bin or level), switches Per page between 15 / 45 / 90, and highlights the row you click. Create, Load from file, Export, Advanced search, the edit pencils and Edit Laughlin Nevada are not part of this flow yet.

Supplier Portal — Items — Figma 33:18892

Page	What you can do
supplier-items.html	Items tab — the supplier's view of VMI stock they manage at a customer's warehouses (Coupa Supplier Portal → Items). Twelve sample items across Laughlin Nevada, Reno DC and Phoenix DC; Available to Promise = on hand − reserved, shown in red at or below the item's reorder point. Select Customer switches data (Coupa Demo Co has no items, which shows the empty state from the screengrab). Views filters All / Low Availability / Out of Stock, Search matches item #, name, warehouse or location, the filter button filters by warehouse, column headers sort, and the toolbar ⋮ exports the visible rows to CSV. Row ⋮ menus (View item details, Create ASN, View cycle count history) are not part of this flow yet.
supplier-stock-locations.html	Stock Levels → Stock Locations (R48 concept S4): one row per supplier stock location for the selected customer — name/code, description, address, attention + email, Stock Management Type (OWN / SCON), number of storage locations, created by, active. The chevron expands a row to its storage locations (aisle / bin / level) with a link to the items stored there. Create opens the create form; locations created by the buyer show a lock and are read-only. ⋮ exports to CSV (location / storage-location loads are not built).
supplier-stock-location-new.html	Create Stock Location (S5): General, Address and Storage Locations sections. Name, Address Line 1 and at least one storage location are required; duplicate names per customer are rejected. Saves to localStorage and returns to the list.
supplier-stock-location.html

Enterprise (buyer) — On-Hand Balances — Figma section Enterprise

Page	What you can do
ohb.html	Inventory → On-Hand Balances (Figma 90:7266). The buyer's stock: Item #, Name, Warehouse, Qty, Allocated, Available, UOM, Unit Price, Stock Value, Currency, Aisle, Bin, Level. Views, search, warehouse filter, sorting and ⋮ exports work as on the Supplier Portal.
ohb-vendor-stock.html	New Vendor Stock Balances tab (Figma 89:6073) — the same data as the Supplier Portal Stock Balances tab, plus Supplier and Open Order Quantity columns, a Supplier filter and the last-upload / next-update strip, read-only for the buyer. It reads the same saved balances, so a supplier's inline edit or bulk load shows up here. Item Supply and Demand Reports is a placeholder tab.

R48 concept — end-to-end flow — Figma page 133:7488

Proposed from the Confluence requirements [R48][R49] Vendor Managed Inventory. The Figma page has the swimlane flow (buyer admin → supplier → Coupa → buyer), open questions, and screens S1–S12. Use the Prototype ▾ panel (bottom left) to jump between steps.

Page	What you can do
item-vmi.html	Item page (Setup → Items → Lock,Combination), built from the current item screen — Figma frame 163:7675 in the Enterprise section. The Inventory section has a new checkbox, Allow Supplier to upload stock levels for this item in CSP, next to Allow partial quantity with decimals in Cycle Count. It's off (No) by default. Edit unlocks the checkboxes, and Save stores the setting. The Supplier Item tab lists the suppliers linked to this item and whether each can share its stock levels. Upload is allowed only when the item setting is on and the supplier profile allows it.
supplier-vmi.html	Classic Edit Supplier (S3) with Allow Supplier to upload Stock levels and Update frequency (Daily / Weekly / Monthly), which drives the "next update due" date shown to both sides.
supplier-edit.html	Full Edit Supplier page (Suppliers → Super Printers), built from the current Coupa screen — Figma frame 164:7675 in the Enterprise section. Supply Chain Collaboration gets two new fields: Allow Supplier to upload Stock levels and Update frequency (Daily / Weekly / Monthly). Frequency is editable only when upload is allowed. Save stores both fields. The other sections and tables are static.

Design-system notes

• Colours, spacing, radius, type and shadows use Clarity token values (css/clarity-tokens.css, copied from the Inventory Optimization prototype).
• Page styles live in css/styles.css; shared behaviour in js/app.js.
• The Supplier Portal and Enterprise On-Hand Balances pages are Clarity-styled (Nunito Sans + tokens), tables included, so they match the Figma frames (the original Supplier Portal screengrab used Helvetica in the table).
• The classic page body (Helvetica, legacy blues) and global header have no Clarity equivalents; those values are literals scoped in the CSS, as in Inventory Optimization.
• Exported Figma icons go in assets/.