Copy Create an inventory replenishment cockpit with Tailwind CSS. Show days-of-cover, stockout risk, open purchase-order value, and supplier reliability metrics. Include a priority table for SKUs with forecast, inbound quantity, lead time, and recommended order, plus a side panel for the selected item with demand bars and a Create purchase order action. Add JavaScript that selects inventory rows and fills the detail panel.<div class="min-h-screen bg-stone-100 p-5"><section class="mx-auto max-w-6xl rounded-2xl border border-stone-200 bg-white shadow-sm"><header class="flex items-center justify-between border-b border-stone-200 p-5"><div><h1 class="font-semibold text-stone-900">Replenishment cockpit</h1><p class="text-xs text-stone-400">Warehouse EU-02 · forecast refreshed 8 min ago</p></div><button class="rounded-xl bg-stone-900 px-4 py-2 text-xs font-medium text-white">Review purchase plan</button></header><div class="grid grid-cols-2 divide-x divide-y divide-stone-100 lg:grid-cols-4 lg:divide-y-0"><div class="p-4"><p class="text-xs text-stone-400">Median cover</p><b class="mt-1 block text-xl">18.4 days</b></div><div class="p-4"><p class="text-xs text-stone-400">At-risk SKUs</p><b class="mt-1 block text-xl text-red-600">12</b></div><div class="p-4"><p class="text-xs text-stone-400">Open PO value</p><b class="mt-1 block text-xl">€184k</b></div><div class="p-4"><p class="text-xs text-stone-400">Supplier OTIF</p><b class="mt-1 block text-xl text-green-700">93.1%</b></div></div><div class="grid border-t border-stone-200 lg:grid-cols-[1.35fr_0.65fr]"><div class="overflow-x-auto border-b lg:border-b-0 lg:border-r"><table class="w-full text-left text-xs"><thead class="bg-stone-50 text-stone-400"><tr><th class="px-4 py-3">Item</th><th class="px-3 py-3">Cover</th><th class="px-3 py-3">Inbound</th><th class="px-3 py-3">Lead time</th><th class="px-3 py-3">Order</th></tr></thead><tbody><tr data-stock="linen" class="cursor-pointer border-t bg-red-50"><td class="px-4 py-3"><b>Linen overshirt</b><span class="block text-stone-400">SKU LN-204</span></td><td class="px-3 text-red-600">4.2d</td><td class="px-3">0</td><td class="px-3">21d</td><td class="px-3 font-semibold">1,200</td></tr><tr data-stock="tote" class="cursor-pointer border-t"><td class="px-4 py-3"><b>Canvas tote</b><span class="block text-stone-400">SKU CT-118</span></td><td class="px-3 text-amber-600">8.7d</td><td class="px-3">400</td><td class="px-3">14d</td><td class="px-3 font-semibold">650</td></tr><tr data-stock="mug" class="cursor-pointer border-t"><td class="px-4 py-3"><b>Stoneware mug</b><span class="block text-stone-400">SKU SM-044</span></td><td class="px-3">16.1d</td><td class="px-3">800</td><td class="px-3">18d</td><td class="px-3 font-semibold">300</td></tr></tbody></table></div><aside class="p-5"><p class="text-xs uppercase tracking-wider text-stone-400">Recommendation</p><h2 id="stockTitle" class="mt-2 font-semibold"></h2><p id="stockMeta" class="mt-1 text-xs text-stone-400"></p><div id="stockBars" class="mt-6 flex h-24 items-end gap-2"></div><div class="mt-5 flex justify-between text-sm"><span class="text-stone-500">Suggested quantity</span><b id="stockOrder"></b></div><button id="stockCreate" class="mt-4 w-full rounded-xl bg-stone-900 px-4 py-2.5 text-sm font-medium text-white">Create purchase order</button></aside></div></section></div>var stocks = { linen: ["Linen overshirt", "North Loom · 21 day lead time", "1,200 units", [42, 58, 71, 86, 93, 78]], tote: ["Canvas tote", "Arbor Textiles · 14 day lead time", "650 units", [38, 42, 49, 53, 61, 66]], mug: ["Stoneware mug", "Kiln Works · 18 day lead time", "300 units", [61, 55, 68, 49, 58, 52]] }; var stockRows = [].slice.call(document.querySelectorAll("[data-stock]")); function showStock(row) { var item = stocks[row.getAttribute("data-stock")]; stockRows.forEach(function (candidate) { candidate.classList.toggle("bg-red-50", candidate === row); }); document.getElementById("stockTitle").textContent = item[0]; document.getElementById("stockMeta").textContent = item[1]; document.getElementById("stockOrder").textContent = item[2]; document.getElementById("stockBars").innerHTML = item[3].map(function (value) { return '<span class="flex-1 rounded-t bg-stone-300" style="height:' + value + '%" title="Forecast index ' + value + '"></span>'; }).join(""); } stockRows.forEach(function (row) { row.addEventListener("click", function () { showStock(row); }); }); document.getElementById("stockCreate").addEventListener("click", function () { this.textContent = "Draft purchase order created ✓"; this.disabled = true; }); showStock(stockRows[0]); 