PyPI - makea-cli - Versions diffs - 0.1.5__tar.gz → 0.1.7__tar.gz - Mend

makea-cli 0.1.5tar.gz → 0.1.7tar.gz

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1732) hide show

makea_cli-0.1.7/.claude/worktrees/vigilant-bartik-a79dc8/collection-design.html ADDED Viewed

@@ -0,0 +1,905 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Makea — Intra-Collection Navigation</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f0eef8; color: #1a1a2e; font-size: 14px; }
+  /* NAV */
+  nav { background: white; padding: 10px 24px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #e8e4f4; position: sticky; top: 0; z-index: 200; }
+  .logo { background: #7c3aed; color: white; font-weight: 800; font-size: 14px; padding: 5px 10px; border-radius: 7px; }
+  .nav-link { color: #666; font-size: 13px; }
+  .nav-link.active { color: #7c3aed; font-weight: 600; }
+  .nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+  /* TAB SWITCHER */
+  .tab-bar { background: white; border-bottom: 2px solid #e8e4f4; padding: 0 24px; display: flex; gap: 0; position: sticky; top: 45px; z-index: 190; }
+  .tab { padding: 12px 18px; font-size: 13px; font-weight: 600; cursor: pointer; color: #888; border-bottom: 2px solid transparent; margin-bottom: -2px; }
+  .tab.active { color: #7c3aed; border-bottom-color: #7c3aed; }
+  /* LAYOUT: main content + optional side panel */
+  .layout { display: flex; height: calc(100vh - 90px); overflow: hidden; }
+  .main { flex: 1; overflow-y: auto; padding: 24px; min-width: 0; }
+  .side-panel { width: 340px; flex-shrink: 0; background: white; border-left: 1.5px solid #e8e4f4; overflow-y: auto; transition: width 0.2s; }
+  .side-panel.closed { width: 0; overflow: hidden; border: none; }
+  /* COLLECTION CONTEXT BAR */
+  .coll-context-bar { background: white; border: 1.5px solid #c4b5fd; border-radius: 12px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+  .coll-context-label { font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
+  .coll-context-divider { width: 1px; height: 20px; background: #e8e4f4; flex-shrink: 0; }
+  /* SKU PILLS in context bar */
+  .sku-pills { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
+  .sku-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; flex-shrink: 0; transition: all 0.15s; }
+  .sku-pill.active { background: #7c3aed; color: white; border-color: #7c3aed; }
+  .sku-pill.same-step { background: #f5f3ff; color: #5b21b6; border-color: #c4b5fd; }
+  .sku-pill.other-step { background: #f9fafb; color: #6b7280; border-color: #e8e4f4; }
+  .sku-pill-status { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+  .sku-pill .step-tag { font-size: 9px; opacity: 0.8; }
+  .btn-panel-toggle { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 14px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid #c4b5fd; background: white; color: #7c3aed; white-space: nowrap; flex-shrink: 0; }
+  .btn-panel-toggle.open { background: #7c3aed; color: white; border-color: #7c3aed; }
+  /* SKU HEADER */
+  .sku-header { margin-bottom: 16px; }
+  .sku-eyebrow { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
+  .sku-eyebrow .coll-tag { background: #ede9fe; color: #5b21b6; padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; }
+  .sku-title { font-size: 22px; font-weight: 800; }
+  /* STEP PROGRESS */
+  .step-progress { background: white; border-radius: 12px; border: 1px solid #e8e4f4; padding: 14px 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 0; overflow-x: auto; }
+  .sp-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 72px; }
+  .sp-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 2px solid #e8e4f4; background: white; flex-shrink: 0; }
+  .sp-circle.done { background: #ede9fe; border-color: #7c3aed; }
+  .sp-circle.active { background: #7c3aed; border-color: #7c3aed; color: white; }
+  .sp-circle.inherited { background: #d1fae5; border-color: #10b981; }
+  .sp-label { font-size: 9px; text-align: center; color: #aaa; font-weight: 500; line-height: 1.3; }
+  .sp-label.active { color: #7c3aed; font-weight: 800; }
+  .sp-label.inherited { color: #059669; font-weight: 700; }
+  .sp-conn { flex: 1; height: 2px; min-width: 12px; background: #e8e4f4; }
+  .sp-conn.done { background: #7c3aed; }
+  /* QUOTE CARDS */
+  .quote-section-title { font-size: 13px; font-weight: 700; color: #555; margin-bottom: 10px; }
+  .quote-card { background: white; border-radius: 12px; border: 1.5px solid #e8e4f4; padding: 14px 16px; margin-bottom: 10px; }
+  .quote-card.selected { border-color: #7c3aed; }
+  .quote-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
+  .supplier-name { font-size: 14px; font-weight: 700; }
+  .supplier-loc { font-size: 11px; color: #888; }
+  .quote-price { text-align: right; }
+  .quote-price .main { font-size: 18px; font-weight: 800; color: #1a1a2e; }
+  .quote-price .unit { font-size: 11px; color: #888; }
+  .quote-details { display: flex; gap: 16px; font-size: 12px; color: #666; }
+  .quote-detail { display: flex; flex-direction: column; gap: 2px; }
+  .quote-detail .lbl { font-size: 10px; color: #aaa; font-weight: 600; }
+  .quote-detail .val { font-weight: 600; }
+  .quote-actions { display: flex; gap: 8px; margin-top: 12px; }
+  /* BUTTONS */
+  .btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; }
+  .btn-primary { background: #7c3aed; color: white; }
+  .btn-secondary { background: white; color: #7c3aed; border: 1.5px solid #7c3aed; }
+  .btn-ghost { background: transparent; color: #888; border: 1.5px solid #e8e4f4; }
+  .btn-green { background: #10b981; color: white; }
+  .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 14px; }
+  /* SIDE PANEL CONTENT */
+  .panel-header { padding: 14px 16px; border-bottom: 1px solid #f0eef8; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: white; z-index: 10; }
+  .panel-header h3 { font-size: 14px; font-weight: 800; }
+  .panel-close { cursor: pointer; font-size: 18px; color: #888; line-height: 1; }
+  /* SKU ROWS IN PANEL */
+  .panel-sku { border-bottom: 1px solid #f5f3ff; }
+  .panel-sku-header { padding: 12px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
+  .panel-sku-header:hover { background: #fafafa; }
+  .panel-sku-icon { font-size: 20px; width: 36px; height: 36px; background: #f5f3ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+  .panel-sku-info { flex: 1; min-width: 0; }
+  .panel-sku-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .panel-sku-step { font-size: 11px; color: #888; margin-top: 2px; }
+  .panel-sku-status { flex-shrink: 0; }
+  .tag { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 7px; font-size: 10px; font-weight: 700; }
+  .tag-purple { background: #ede9fe; color: #5b21b6; }
+  .tag-yellow { background: #fef3c7; color: #92400e; }
+  .tag-green { background: #d1fae5; color: #065f46; }
+  .tag-gray { background: #f3f4f6; color: #6b7280; }
+  .tag-active { background: #7c3aed; color: white; }
+  /* QUOTE MINI IN PANEL */
+  .panel-quote { margin: 0 16px 12px; background: #f9f8ff; border-radius: 10px; padding: 10px 12px; border: 1px solid #e8e4f4; }
+  .panel-quote.selected { border-color: #7c3aed; background: #f5f3ff; }
+  .panel-quote-supplier { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
+  .panel-quote-row { display: flex; justify-content: space-between; font-size: 11px; color: #666; margin-bottom: 2px; }
+  .panel-quote-row .val { font-weight: 700; color: #1a1a2e; }
+  .panel-quote-accept { display: flex; gap: 6px; margin-top: 8px; }
+  /* PANEL COLLECTION ACTION */
+  .panel-coll-action { margin: 12px 16px; padding: 12px; background: #f5f3ff; border-radius: 10px; border: 1.5px solid #c4b5fd; }
+  .panel-coll-action-title { font-size: 12px; font-weight: 800; color: #4c1d95; margin-bottom: 6px; }
+  .panel-coll-action-desc { font-size: 11px; color: #6d28d9; line-height: 1.4; margin-bottom: 8px; }
+  /* STICKY BOTTOM BAR */
+  .bottom-bar { background: white; border-top: 1.5px solid #e8e4f4; padding: 12px 24px; display: flex; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 100; }
+  .bottom-bar-label { font-size: 13px; color: #555; }
+  .bottom-bar-label strong { color: #1a1a2e; }
+  .bottom-bar-right { margin-left: auto; display: flex; gap: 8px; }
+  /* NOTE */
+  .note { background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #78350f; margin-bottom: 14px; line-height: 1.5; }
+  /* CURRENTLY VIEWING indicator */
+  .viewing-indicator { font-size: 11px; color: #7c3aed; font-weight: 700; background: #ede9fe; padding: 2px 8px; border-radius: 8px; }
+</style>
+</head>
+<body>
+<nav>
+  <div class="logo">makea</div>
+  <span class="nav-link">Home</span>
+  <span class="nav-link">Admin</span>
+  <span class="nav-link active">Manufacture</span>
+  <span class="nav-link">Restock</span>
+  <div class="nav-right">
+    <span style="font-size:12px;color:#888">admin_test</span>
+  </div>
+</nav>
+<!-- TAB SWITCHER -->
+<div class="tab-bar">
+  <div class="tab active" onclick="showTab('dashboard')">① Dashboard</div>
+  <div class="tab" onclick="showTab('nogrouping')">② No Grouping</div>
+  <div class="tab" onclick="showTab('bycollection')">③ By Collection</div>
+  <div class="tab" onclick="showTab('view1')">④ SKU 页 + Context Bar</div>
+  <div class="tab" onclick="showTab('view2')">⑤ Collection Panel</div>
+  <div class="tab" onclick="showTab('view3')">⑥ 切换 SKU</div>
+  <div class="tab" onclick="showTab('view4')">⑦ Accept All</div>
+</div>
+<!-- ══════════════════════════════════════════════════ -->
+<!-- DASHBOARD                                            -->
+<!-- ══════════════════════════════════════════════════ -->
+<div id="dashboard">
+<div class="layout"><div class="main">
+  <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px">
+    <div>
+      <div style="font-size:24px;font-weight:800">Manufacturing processes</div>
+      <div style="font-size:13px;color:#888;margin-top:3px">Manage your manufacturing orders and production workflows</div>
+    </div>
+    <div style="display:flex;gap:8px;flex-shrink:0">
+      <button class="btn btn-ghost btn-sm">🗂 See all collections</button>
+      <button class="btn btn-sm" style="background:#fde047;color:#1a1a2e;border:none;font-weight:700">＋ Create new collection</button>
+      <button class="btn btn-primary btn-sm">＋ Make a new product</button>
+    </div>
+  </div>
+  <!-- STAT CARDS -->
+  <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:20px">
+    <!-- By Status -->
+    <div style="background:white;border-radius:12px;padding:18px;border:1px solid #e8e4f4">
+      <div style="font-size:11px;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;display:flex;justify-content:space-between"><span>By Status</span><span style="color:#1a1a2e;text-transform:none;letter-spacing:0;font-size:13px;font-weight:700">10 total</span></div>
+      <div style="display:flex;align-items:center;gap:14px">
+        <svg width="60" height="60" viewBox="0 0 42 42" style="flex-shrink:0">
+          <circle cx="21" cy="21" r="15.9" fill="none" stroke="#e8e4f4" stroke-width="5"/>
+          <circle cx="21" cy="21" r="15.9" fill="none" stroke="#7c3aed" stroke-width="5" stroke-dasharray="30 70" stroke-dashoffset="25"/>
+          <circle cx="21" cy="21" r="15.9" fill="none" stroke="#10b981" stroke-width="5" stroke-dasharray="20 80" stroke-dashoffset="-5"/>
+          <circle cx="21" cy="21" r="15.9" fill="none" stroke="#f59e0b" stroke-width="5" stroke-dasharray="20 80" stroke-dashoffset="-25"/>
+          <circle cx="21" cy="21" r="15.9" fill="none" stroke="#ef4444" stroke-width="5" stroke-dasharray="10 90" stroke-dashoffset="-45"/>
+          <circle cx="21" cy="21" r="15.9" fill="none" stroke="#6366f1" stroke-width="5" stroke-dasharray="20 80" stroke-dashoffset="-55"/>
+        </svg>
+        <div style="font-size:11px;color:#555;line-height:1.9">
+          <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#7c3aed;margin-right:4px"></span>In Review: 3</div>
+          <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;margin-right:4px"></span>Ready for Prod: 2</div>
+          <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#f59e0b;margin-right:4px"></span>Sampling: 2</div>
+          <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:4px"></span>In Progress: 1</div>
+          <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#6366f1;margin-right:4px"></span>Completed: 2</div>
+        </div>
+      </div>
+    </div>
+    <!-- By Collection -->
+    <div style="background:white;border-radius:12px;padding:18px;border:1.5px solid #c4b5fd">
+      <div style="font-size:11px;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;display:flex;justify-content:space-between"><span>By Collection</span><span style="color:#1a1a2e;text-transform:none;letter-spacing:0;font-size:13px;font-weight:700">10 total</span></div>
+      <div>
+        <div style="display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f5f3ff;font-size:12px">
+          <div style="display:flex;align-items:center;gap:6px;font-weight:600"><span style="width:8px;height:8px;border-radius:50%;background:#7c3aed;display:inline-block"></span>Summer 2025</div>
+          <div style="display:flex;gap:6px"><span class="tag tag-green">On track</span><span class="tag tag-purple">3 SKUs</span></div>
+        </div>
+        <div style="display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f5f3ff;font-size:12px">
+          <div style="display:flex;align-items:center;gap:6px;font-weight:600"><span style="width:8px;height:8px;border-radius:50%;background:#f59e0b;display:inline-block"></span>FW 2025</div>
+          <div style="display:flex;gap:6px"><span class="tag tag-yellow">2 pending spec</span><span class="tag tag-purple">4 SKUs</span></div>
+        </div>
+        <div style="display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:12px;opacity:0.6">
+          <div style="display:flex;align-items:center;gap:6px;font-weight:600"><span style="width:8px;height:8px;border-radius:50%;background:#9ca3af;display:inline-block"></span>Unassigned</div>
+          <div style="display:flex;gap:6px"><span class="tag tag-gray">No collection</span><span class="tag tag-gray">3 SKUs</span></div>
+        </div>
+      </div>
+    </div>
+    <!-- By Category -->
+    <div style="background:white;border-radius:12px;padding:18px;border:1px solid #e8e4f4">
+      <div style="font-size:11px;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;display:flex;justify-content:space-between"><span>By Category</span><span style="color:#1a1a2e;text-transform:none;letter-spacing:0;font-size:13px;font-weight:700">10 total</span></div>
+      <div style="display:flex;align-items:center;gap:14px">
+        <svg width="60" height="60" viewBox="0 0 42 42" style="flex-shrink:0">
+          <circle cx="21" cy="21" r="15.9" fill="none" stroke="#e8e4f4" stroke-width="5"/>
+          <circle cx="21" cy="21" r="15.9" fill="none" stroke="#7c3aed" stroke-width="5" stroke-dasharray="50 50" stroke-dashoffset="25"/>
+          <circle cx="21" cy="21" r="15.9" fill="none" stroke="#10b981" stroke-width="5" stroke-dasharray="20 80" stroke-dashoffset="-25"/>
+          <circle cx="21" cy="21" r="15.9" fill="none" stroke="#f59e0b" stroke-width="5" stroke-dasharray="20 80" stroke-dashoffset="-45"/>
+        </svg>
+        <div style="font-size:11px;color:#555;line-height:1.9">
+          <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#7c3aed;margin-right:4px"></span>Clothing: 5</div>
+          <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;margin-right:4px"></span>Merch: 2</div>
+          <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#f59e0b;margin-right:4px"></span>Soft Accessories: 2</div>
+          <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#e8e4f4;margin-right:4px"></span>Uncategorized: 1</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- FILTERS + PRODUCT GRID (preview) -->
+  <div style="display:flex;gap:10px;margin-bottom:14px;align-items:center">
+    <div style="flex:1;max-width:280px;border:1.5px solid #e8e4f4;border-radius:20px;padding:7px 14px;font-size:13px;color:#aaa;background:white">🔍 Search by product name...</div>
+    <select class="filter-select" style="background:white;border:1.5px solid #e8e4f4;border-radius:20px;padding:7px 14px;font-size:13px;color:#555;appearance:none">
+      <option>No Grouping</option><option>By Collection</option>
+    </select>
+    <select class="filter-select" style="background:white;border:1.5px solid #e8e4f4;border-radius:20px;padding:7px 14px;font-size:13px;color:#555;appearance:none"><option>All Collections</option></select>
+    <select class="filter-select" style="background:white;border:1.5px solid #e8e4f4;border-radius:20px;padding:7px 14px;font-size:13px;color:#555;appearance:none"><option>All Status</option></select>
+  </div>
+  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px">
+    <!-- Collection SKU -->
+    <div style="background:white;border-radius:14px;border:1.5px solid #c4b5fd;overflow:hidden">
+      <div style="width:100%;height:120px;background:#fef9c3;display:flex;align-items:center;justify-content:center;font-size:44px">👗</div>
+      <div style="padding:12px 14px">
+        <div style="display:inline-flex;align-items:center;gap:4px;background:#ede9fe;color:#5b21b6;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;margin-bottom:6px">🗂 Summer 2025</div>
+        <div style="font-size:13px;font-weight:700;margin-bottom:3px">Linen Maxi Dress 001</div>
+        <div style="font-size:11px;color:#888;margin-bottom:6px">Clothing · 200 pcs</div>
+        <span class="tag tag-yellow">Sampling</span>
+      </div>
+    </div>
+    <!-- Collection SKU -->
+    <div style="background:white;border-radius:14px;border:1.5px solid #c4b5fd;overflow:hidden">
+      <div style="width:100%;height:120px;background:#ede9fe;display:flex;align-items:center;justify-content:center;font-size:44px">🧥</div>
+      <div style="padding:12px 14px">
+        <div style="display:inline-flex;align-items:center;gap:4px;background:#ede9fe;color:#5b21b6;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;margin-bottom:6px">🗂 Summer 2025</div>
+        <div style="font-size:13px;font-weight:700;margin-bottom:3px">Cropped Linen Jacket 002</div>
+        <div style="font-size:11px;color:#888;margin-bottom:6px">Clothing · 150 pcs</div>
+        <span class="tag tag-yellow">Sampling</span>
+      </div>
+    </div>
+    <!-- Standalone SKU -->
+    <div style="background:white;border-radius:14px;border:1.5px solid #e8e4f4;overflow:hidden">
+      <div style="width:100%;height:120px;background:#e0f2fe;display:flex;align-items:center;justify-content:center;font-size:44px">👖</div>
+      <div style="padding:12px 14px">
+        <div style="display:inline-flex;align-items:center;gap:4px;background:#f3f4f6;color:#6b7280;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;margin-bottom:6px;cursor:pointer">＋ Add to collection</div>
+        <div style="font-size:13px;font-weight:700;margin-bottom:3px">Classic Denim Jeans</div>
+        <div style="font-size:11px;color:#888;margin-bottom:6px">Clothing · 300 pcs</div>
+        <span class="tag tag-yellow">In Review</span>
+      </div>
+    </div>
+  </div>
+</div></div>
+</div>
+<!-- ══════════════════════════════════════════════════ -->
+<!-- NO GROUPING                                         -->
+<!-- ══════════════════════════════════════════════════ -->
+<div id="nogrouping" style="display:none">
+<div class="layout"><div class="main">
+  <div style="display:flex;gap:10px;margin-bottom:14px;align-items:center">
+    <div style="flex:1;max-width:280px;border:1.5px solid #e8e4f4;border-radius:20px;padding:7px 14px;font-size:13px;color:#aaa;background:white">🔍 Search by product name...</div>
+    <select style="background:white;border:1.5px solid #7c3aed;border-radius:20px;padding:7px 14px;font-size:13px;color:#7c3aed;font-weight:700;appearance:none"><option>No Grouping</option></select>
+    <select style="background:white;border:1.5px solid #e8e4f4;border-radius:20px;padding:7px 14px;font-size:13px;color:#555;appearance:none"><option>All Collections</option></select>
+    <select style="background:white;border:1.5px solid #e8e4f4;border-radius:20px;padding:7px 14px;font-size:13px;color:#555;appearance:none"><option>All Status</option></select>
+  </div>
+  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px">
+    <div style="background:white;border-radius:14px;border:1.5px solid #c4b5fd;overflow:hidden">
+      <div style="height:120px;background:#fef9c3;display:flex;align-items:center;justify-content:center;font-size:44px">👗</div>
+      <div style="padding:12px 14px">
+        <div style="display:inline-flex;align-items:center;gap:4px;background:#ede9fe;color:#5b21b6;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;margin-bottom:6px">🗂 Summer 2025</div>
+        <div style="font-size:13px;font-weight:700;margin-bottom:3px">Linen Maxi Dress 001</div>
+        <div style="font-size:11px;color:#888;margin-bottom:6px">Clothing · 200 pcs · $21.40 locked</div>
+        <span class="tag tag-yellow">Sampling</span>
+        <div style="display:flex;gap:3px;margin-top:8px">
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;background:#ede9fe;border:1.5px solid #7c3aed;color:#7c3aed">✓</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;background:#ede9fe;border:1.5px solid #7c3aed;color:#7c3aed">✓</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;background:#7c3aed;border:1.5px solid #7c3aed;color:white">🧵</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:8px;display:flex;align-items:center;justify-content:center;background:#d1fae5;border:1.5px solid #10b981;color:#065f46">✓</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">5</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">6</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">7</div>
+        </div>
+        <div style="font-size:9px;color:#10b981;margin-top:3px;font-weight:600">Step 4 inherited from collection</div>
+      </div>
+    </div>
+    <div style="background:white;border-radius:14px;border:1.5px solid #c4b5fd;overflow:hidden">
+      <div style="height:120px;background:#ede9fe;display:flex;align-items:center;justify-content:center;font-size:44px">🧥</div>
+      <div style="padding:12px 14px">
+        <div style="display:inline-flex;align-items:center;gap:4px;background:#ede9fe;color:#5b21b6;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;margin-bottom:6px">🗂 Summer 2025</div>
+        <div style="font-size:13px;font-weight:700;margin-bottom:3px">Cropped Linen Jacket 002</div>
+        <div style="font-size:11px;color:#888;margin-bottom:6px">Clothing · 150 pcs · $21.42 locked</div>
+        <span class="tag tag-yellow">Sampling</span>
+        <div style="display:flex;gap:3px;margin-top:8px">
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;background:#ede9fe;border:1.5px solid #7c3aed;color:#7c3aed">✓</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;background:#ede9fe;border:1.5px solid #7c3aed;color:#7c3aed">✓</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;background:#7c3aed;border:1.5px solid #7c3aed;color:white">🧵</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:8px;display:flex;align-items:center;justify-content:center;background:#d1fae5;border:1.5px solid #10b981;color:#065f46">✓</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">5</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">6</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">7</div>
+        </div>
+        <div style="font-size:9px;color:#10b981;margin-top:3px;font-weight:600">Step 4 inherited from collection</div>
+      </div>
+    </div>
+    <div style="background:white;border-radius:14px;border:1.5px solid #e8e4f4;overflow:hidden">
+      <div style="height:120px;background:#e0f2fe;display:flex;align-items:center;justify-content:center;font-size:44px">👖</div>
+      <div style="padding:12px 14px">
+        <div style="display:inline-flex;align-items:center;gap:4px;background:#f3f4f6;color:#6b7280;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;margin-bottom:6px;cursor:pointer">＋ Add to collection</div>
+        <div style="font-size:13px;font-weight:700;margin-bottom:3px">Classic Denim Jeans</div>
+        <div style="font-size:11px;color:#888;margin-bottom:6px">Clothing · 300 pcs</div>
+        <span class="tag tag-yellow">In Review</span>
+        <div style="display:flex;gap:3px;margin-top:8px">
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;background:#ede9fe;border:1.5px solid #7c3aed;color:#7c3aed">✓</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;background:#7c3aed;border:1.5px solid #7c3aed;color:white">✅</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">3</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">4</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">5</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">6</div>
+          <div style="width:20px;height:20px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e8e4f4;color:#ccc">7</div>
+        </div>
+        <div style="font-size:9px;color:#888;margin-top:3px">Full 7 steps, no inheritance</div>
+      </div>
+    </div>
+  </div>
+  <div style="margin-top:14px;display:flex;gap:16px;font-size:12px;color:#666;align-items:center;padding:10px 14px;background:white;border-radius:10px;border:1px solid #e8e4f4">
+    <span><span style="display:inline-block;width:10px;height:10px;background:#d1fae5;border:1.5px solid #10b981;border-radius:50%;margin-right:4px;vertical-align:middle"></span>Step inherited from collection</span>
+    <span><span style="display:inline-block;width:10px;height:10px;background:#7c3aed;border-radius:50%;margin-right:4px;vertical-align:middle"></span>Active step</span>
+    <span style="margin-left:auto">Purple border = collection SKU &nbsp;·&nbsp; Gray border = standalone SKU</span>
+  </div>
+</div></div>
+</div>
+<!-- ══════════════════════════════════════════════════ -->
+<!-- BY COLLECTION                                       -->
+<!-- ══════════════════════════════════════════════════ -->
+<div id="bycollection" style="display:none">
+<div class="layout"><div class="main">
+  <div style="display:flex;gap:10px;margin-bottom:14px;align-items:center">
+    <div style="flex:1;max-width:280px;border:1.5px solid #e8e4f4;border-radius:20px;padding:7px 14px;font-size:13px;color:#aaa;background:white">🔍 Search by product name...</div>
+    <select style="background:white;border:1.5px solid #7c3aed;border-radius:20px;padding:7px 14px;font-size:13px;color:#7c3aed;font-weight:700;appearance:none"><option>By Collection</option></select>
+  </div>
+  <!-- Collection Group -->
+  <div style="margin-bottom:24px">
+    <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
+      <span style="width:10px;height:10px;border-radius:50%;background:#7c3aed;display:inline-block;flex-shrink:0"></span>
+      <span style="font-size:15px;font-weight:800">Summer 2025</span>
+      <span style="font-size:12px;color:#888">3 SKUs · Guangzhou Textile Co. · Target Aug 2025</span>
+      <div style="margin-left:auto;display:flex;gap:6px">
+        <button class="btn btn-ghost btn-sm">+ Add SKU</button>
+        <button class="btn btn-ghost btn-sm">View brief</button>
+      </div>
+    </div>
+    <!-- Collection summary bar -->
+    <div style="background:white;border-radius:12px;border:1.5px solid #c4b5fd;padding:12px 16px;margin-bottom:10px;display:flex;align-items:center;gap:16px">
+      <div style="text-align:center"><div style="font-size:16px;font-weight:800;color:#7c3aed">3</div><div style="font-size:10px;color:#888;font-weight:600">SKUs</div></div>
+      <div style="width:1px;height:32px;background:#e8e4f4"></div>
+      <div style="text-align:center"><div style="font-size:16px;font-weight:800;color:#7c3aed">530</div><div style="font-size:10px;color:#888;font-weight:600">Total pcs</div></div>
+      <div style="width:1px;height:32px;background:#e8e4f4"></div>
+      <div style="text-align:center"><div style="font-size:16px;font-weight:800;color:#7c3aed">$11,345</div><div style="font-size:10px;color:#888;font-weight:600">Collection PO</div></div>
+      <div style="width:1px;height:32px;background:#e8e4f4"></div>
+      <div style="text-align:center"><div style="font-size:16px;font-weight:800;color:#7c3aed">Aug 2025</div><div style="font-size:10px;color:#888;font-weight:600">Delivery</div></div>
+      <div style="margin-left:auto;display:flex;align-items:center;gap:8px"><span class="tag tag-green">On track</span><span style="font-size:12px;color:#888">All 3 SKUs in Sampling</span></div>
+    </div>
+    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
+      <div style="background:white;border-radius:12px;border:1.5px solid #c4b5fd;overflow:hidden">
+        <div style="height:100px;background:#fef9c3;display:flex;align-items:center;justify-content:center;font-size:36px">👗</div>
+        <div style="padding:10px 12px"><div style="font-size:12px;font-weight:700;margin-bottom:2px">Linen Maxi Dress 001</div><div style="font-size:11px;color:#888;margin-bottom:6px">200 pcs · $21.40/pc</div><span class="tag tag-yellow">Sampling</span></div>
+      </div>
+      <div style="background:white;border-radius:12px;border:1.5px solid #c4b5fd;overflow:hidden">
+        <div style="height:100px;background:#ede9fe;display:flex;align-items:center;justify-content:center;font-size:36px">🧥</div>
+        <div style="padding:10px 12px"><div style="font-size:12px;font-weight:700;margin-bottom:2px">Cropped Linen Jacket 002</div><div style="font-size:11px;color:#888;margin-bottom:6px">150 pcs · $21.42/pc</div><span class="tag tag-yellow">Sampling</span></div>
+      </div>
+      <div style="background:white;border-radius:12px;border:1.5px solid #c4b5fd;overflow:hidden">
+        <div style="height:100px;background:#f0fdf4;display:flex;align-items:center;justify-content:center;font-size:36px">👖</div>
+        <div style="padding:10px 12px"><div style="font-size:12px;font-weight:700;margin-bottom:2px">Wide Leg Trousers 003</div><div style="font-size:11px;color:#888;margin-bottom:6px">180 pcs · $21.40/pc</div><span class="tag tag-green">Ready for Prod</span></div>
+      </div>
+    </div>
+  </div>
+  <!-- Unassigned Group -->
+  <div style="opacity:0.75">
+    <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
+      <span style="width:10px;height:10px;border-radius:50%;background:#9ca3af;display:inline-block;flex-shrink:0"></span>
+      <span style="font-size:15px;font-weight:800;color:#888">Unassigned</span>
+      <span style="font-size:12px;color:#aaa">3 standalone SKUs · no collection</span>
+      <div style="margin-left:auto"><button class="btn btn-ghost btn-sm">Create collection from these →</button></div>
+    </div>
+    <div style="background:#fafafa;border:1.5px dashed #e8e4f4;border-radius:10px;padding:10px 14px;margin-bottom:10px;font-size:12px;color:#888">These SKUs were created without a collection. They go through the full 7-step flow independently.</div>
+    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
+      <div style="background:white;border-radius:12px;border:1.5px solid #e8e4f4;overflow:hidden">
+        <div style="height:100px;background:#e0f2fe;display:flex;align-items:center;justify-content:center;font-size:36px">👖</div>
+        <div style="padding:10px 12px">
+          <div style="display:inline-flex;align-items:center;gap:4px;background:#f3f4f6;color:#6b7280;font-size:10px;font-weight:700;padding:2px 7px;border-radius:7px;margin-bottom:5px;cursor:pointer">＋ Add to collection</div>
+          <div style="font-size:12px;font-weight:700;margin-bottom:2px">Classic Denim Jeans</div><div style="font-size:11px;color:#888;margin-bottom:6px">300 pcs</div><span class="tag tag-yellow">In Review</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div></div>
+</div>
+<!-- ══════════════════════════════════════════════════ -->
+<!-- VIEW 1: SKU PAGE, PANEL CLOSED                      -->
+<!-- ══════════════════════════════════════════════════ -->
+<div id="view1">
+<div class="layout">
+<div class="main">
+  <!-- COLLECTION CONTEXT BAR -->
+  <div class="coll-context-bar">
+    <span class="coll-context-label">🗂 Summer 2025</span>
+    <div class="coll-context-divider"></div>
+    <div class="sku-pills">
+      <!-- CURRENT SKU -->
+      <div class="sku-pill active">
+        <span class="sku-pill-status" style="background:#fff;opacity:0.7"></span>
+        Linen Maxi Dress 001
+        <span class="step-tag">· Sampling</span>
+      </div>
+      <!-- SAME STEP -->
+      <div class="sku-pill same-step" onclick="showTab('view3')">
+        <span class="sku-pill-status" style="background:#7c3aed"></span>
+        Cropped Jacket 002
+        <span class="step-tag">· Sampling ↗</span>
+      </div>
+      <!-- DIFFERENT STEP -->
+      <div class="sku-pill other-step">
+        <span class="sku-pill-status" style="background:#10b981"></span>
+        Wide Leg Trousers 003
+        <span class="step-tag">· Prod Config</span>
+      </div>
+    </div>
+    <button class="btn-panel-toggle" onclick="showTab('view2')">☰ Collection Panel</button>
+  </div>
+  <!-- SKU HEADER -->
+  <div class="sku-header">
+    <div class="sku-eyebrow">
+      Manufacturing Style
+      <span class="coll-tag">🗂 Summer 2025 · SKU 1 of 3</span>
+    </div>
+    <div class="sku-title">Linen Maxi Dress 001</div>
+  </div>
+  <!-- STEP PROGRESS -->
+  <div class="step-progress">
+    <div class="sp-step"><div class="sp-circle done">📋</div><div class="sp-label">Spec</div></div>
+    <div class="sp-conn done"></div>
+    <div class="sp-step"><div class="sp-circle done">✅</div><div class="sp-label">Approval</div></div>
+    <div class="sp-conn done"></div>
+    <div class="sp-step"><div class="sp-circle active">🧵</div><div class="sp-label active">Sampling</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle inherited">🏭</div><div class="sp-label inherited">Suppliers ✓</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle">⚙️</div><div class="sp-label">Prod Config</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle">💳</div><div class="sp-label">Payments</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle">📦</div><div class="sp-label">Progress</div></div>
+  </div>
+  <!-- NOTE -->
+  <div class="note">
+    💡 <strong>Cropped Jacket 002</strong> is also at Sampling step — click it in the bar above to compare quotes side-by-side.
+  </div>
+  <!-- SAMPLING QUOTES -->
+  <div class="quote-section-title">STEP 3: SAMPLING — Select Sampling Supplier</div>
+  <div class="quote-card selected">
+    <div class="quote-card-header">
+      <div>
+        <div class="supplier-name">Guangzhou Textile Co.</div>
+        <div class="supplier-loc">📍 Guangzhou · 4.8★ · Also quoted Jacket 002</div>
+      </div>
+      <div class="quote-price">
+        <div class="main">$320</div>
+        <div class="unit">sample set · 3 pcs</div>
+      </div>
+    </div>
+    <div class="quote-details">
+      <div class="quote-detail"><div class="lbl">LEAD TIME</div><div class="val">14 days</div></div>
+      <div class="quote-detail"><div class="lbl">REVISIONS</div><div class="val">2 included</div></div>
+      <div class="quote-detail"><div class="lbl">COVERS OTHER SKUS</div><div class="val" style="color:#059669">+Jacket 002 ✓</div></div>
+    </div>
+    <div class="quote-actions">
+      <button class="btn btn-primary btn-sm">Accept for this SKU</button>
+      <button class="btn btn-green btn-sm" onclick="showTab('view4')">Accept for whole collection ✨</button>
+      <button class="btn btn-ghost btn-sm">View details</button>
+    </div>
+  </div>
+  <div class="quote-card">
+    <div class="quote-card-header">
+      <div>
+        <div class="supplier-name">Suzhou Apparel Factory</div>
+        <div class="supplier-loc">📍 Suzhou · 4.5★</div>
+      </div>
+      <div class="quote-price">
+        <div class="main">$280</div>
+        <div class="unit">sample set · 3 pcs</div>
+      </div>
+    </div>
+    <div class="quote-details">
+      <div class="quote-detail"><div class="lbl">LEAD TIME</div><div class="val">18 days</div></div>
+      <div class="quote-detail"><div class="lbl">REVISIONS</div><div class="val">1 included</div></div>
+      <div class="quote-detail"><div class="lbl">COVERS OTHER SKUS</div><div class="val" style="color:#aaa">This SKU only</div></div>
+    </div>
+    <div class="quote-actions">
+      <button class="btn btn-secondary btn-sm">Accept for this SKU</button>
+      <button class="btn btn-ghost btn-sm">View details</button>
+    </div>
+  </div>
+</div>
+<div class="side-panel closed"></div>
+</div>
+</div>
+<!-- ══════════════════════════════════════════════════ -->
+<!-- VIEW 2: PANEL OPEN                                  -->
+<!-- ══════════════════════════════════════════════════ -->
+<div id="view2" style="display:none">
+<div class="layout">
+<div class="main">
+  <div class="coll-context-bar">
+    <span class="coll-context-label">🗂 Summer 2025</span>
+    <div class="coll-context-divider"></div>
+    <div class="sku-pills">
+      <div class="sku-pill active">
+        <span class="sku-pill-status" style="background:#fff;opacity:0.7"></span>
+        Linen Maxi Dress 001
+        <span class="step-tag">· Sampling</span>
+      </div>
+      <div class="sku-pill same-step" onclick="showTab('view3')">
+        <span class="sku-pill-status" style="background:#7c3aed"></span>
+        Cropped Jacket 002
+        <span class="step-tag">· Sampling ↗</span>
+      </div>
+      <div class="sku-pill other-step">
+        <span class="sku-pill-status" style="background:#10b981"></span>
+        Wide Leg Trousers 003
+        <span class="step-tag">· Prod Config</span>
+      </div>
+    </div>
+    <button class="btn-panel-toggle open" onclick="showTab('view1')">☰ Collection Panel</button>
+  </div>
+  <div class="sku-header">
+    <div class="sku-eyebrow">Manufacturing Style <span class="coll-tag">🗂 Summer 2025 · SKU 1 of 3</span></div>
+    <div class="sku-title">Linen Maxi Dress 001</div>
+  </div>
+  <div class="step-progress">
+    <div class="sp-step"><div class="sp-circle done">📋</div><div class="sp-label">Spec</div></div>
+    <div class="sp-conn done"></div>
+    <div class="sp-step"><div class="sp-circle done">✅</div><div class="sp-label">Approval</div></div>
+    <div class="sp-conn done"></div>
+    <div class="sp-step"><div class="sp-circle active">🧵</div><div class="sp-label active">Sampling</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle inherited">🏭</div><div class="sp-label inherited">Suppliers ✓</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle">⚙️</div><div class="sp-label">Prod Config</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle">💳</div><div class="sp-label">Payments</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle">📦</div><div class="sp-label">Progress</div></div>
+  </div>
+  <div class="quote-section-title">STEP 3: SAMPLING — Select Sampling Supplier</div>
+  <div class="quote-card selected">
+    <div class="quote-card-header">
+      <div><div class="supplier-name">Guangzhou Textile Co.</div><div class="supplier-loc">📍 Guangzhou · Also quoted Jacket 002</div></div>
+      <div class="quote-price"><div class="main">$320</div><div class="unit">sample set · 3 pcs</div></div>
+    </div>
+    <div class="quote-details">
+      <div class="quote-detail"><div class="lbl">LEAD TIME</div><div class="val">14 days</div></div>
+      <div class="quote-detail"><div class="lbl">COVERS OTHER SKUS</div><div class="val" style="color:#059669">+Jacket 002 ✓</div></div>
+    </div>
+    <div class="quote-actions">
+      <button class="btn btn-primary btn-sm">Accept for this SKU</button>
+      <button class="btn btn-green btn-sm" onclick="showTab('view4')">Accept for whole collection ✨</button>
+    </div>
+  </div>
+</div>
+<!-- SIDE PANEL -->
+<div class="side-panel">
+  <div class="panel-header">
+    <div>
+      <h3>🗂 Summer 2025</h3>
+      <div style="font-size:11px;color:#888;margin-top:2px">3 SKUs · Sampling stage</div>
+    </div>
+    <div class="panel-close" onclick="showTab('view1')">✕</div>
+  </div>
+  <!-- Collection-level action -->
+  <div class="panel-coll-action">
+    <div class="panel-coll-action-title">2 SKUs have quotes at Sampling</div>
+    <div class="panel-coll-action-desc">Guangzhou Textile Co. has quoted both. Accept together for aligned timeline + better pricing.</div>
+    <button class="btn btn-primary btn-sm" onclick="showTab('view4')" style="width:100%;justify-content:center">Accept sampling for collection →</button>
+  </div>
+  <!-- SKU 1 - CURRENT -->
+  <div class="panel-sku">
+    <div class="panel-sku-header" style="background:#f5f3ff">
+      <div class="panel-sku-icon">👗</div>
+      <div class="panel-sku-info">
+        <div class="panel-sku-name">Linen Maxi Dress 001</div>
+        <div class="panel-sku-step">Step 3 · Sampling</div>
+      </div>
+      <div class="panel-sku-status">
+        <span class="viewing-indicator">Viewing</span>
+      </div>
+    </div>
+    <div class="panel-quote selected">
+      <div class="panel-quote-supplier">Guangzhou Textile Co.</div>
+      <div class="panel-quote-row"><span>Sample price</span><span class="val">$320</span></div>
+      <div class="panel-quote-row"><span>Lead time</span><span class="val">14 days</span></div>
+      <div class="panel-quote-row"><span>Status</span><span class="val" style="color:#d97706">Pending acceptance</span></div>
+    </div>
+    <div class="panel-quote">
+      <div class="panel-quote-supplier">Suzhou Apparel Factory</div>
+      <div class="panel-quote-row"><span>Sample price</span><span class="val">$280</span></div>
+      <div class="panel-quote-row"><span>Lead time</span><span class="val">18 days</span></div>
+    </div>
+  </div>
+  <!-- SKU 2 - SAME STEP -->
+  <div class="panel-sku">
+    <div class="panel-sku-header" onclick="showTab('view3')" style="cursor:pointer">
+      <div class="panel-sku-icon">🧥</div>
+      <div class="panel-sku-info">
+        <div class="panel-sku-name">Cropped Linen Jacket 002</div>
+        <div class="panel-sku-step">Step 3 · Sampling</div>
+      </div>
+      <div class="panel-sku-status">
+        <span class="tag tag-purple" style="font-size:9px">Switch →</span>
+      </div>
+    </div>
+    <div class="panel-quote selected">
+      <div class="panel-quote-supplier">Guangzhou Textile Co.</div>
+      <div class="panel-quote-row"><span>Sample price</span><span class="val">$290</span></div>
+      <div class="panel-quote-row"><span>Lead time</span><span class="val">14 days</span></div>
+      <div class="panel-quote-row"><span>Status</span><span class="val" style="color:#d97706">Pending acceptance</span></div>
+    </div>
+  </div>
+  <!-- SKU 3 - DIFFERENT STEP -->
+  <div class="panel-sku">
+    <div class="panel-sku-header">
+      <div class="panel-sku-icon">👖</div>
+      <div class="panel-sku-info">
+        <div class="panel-sku-name">Wide Leg Trousers 003</div>
+        <div class="panel-sku-step">Step 5 · Production Config</div>
+      </div>
+      <div class="panel-sku-status">
+        <span class="tag tag-green" style="font-size:9px">Ahead</span>
+      </div>
+    </div>
+    <div style="padding:0 16px 12px;font-size:11px;color:#888">Already past sampling — in Production Config</div>
+  </div>
+</div>
+</div>
+</div>
+<!-- ══════════════════════════════════════════════════ -->
+<!-- VIEW 3: SWITCHED TO JACKET 002                      -->
+<!-- ══════════════════════════════════════════════════ -->
+<div id="view3" style="display:none">
+<div class="layout">
+<div class="main">
+  <div class="coll-context-bar">
+    <span class="coll-context-label">🗂 Summer 2025</span>
+    <div class="coll-context-divider"></div>
+    <div class="sku-pills">
+      <div class="sku-pill same-step" onclick="showTab('view2')">
+        <span class="sku-pill-status" style="background:#7c3aed"></span>
+        Linen Maxi Dress 001
+        <span class="step-tag">· Sampling ↗</span>
+      </div>
+      <!-- NOW ACTIVE: JACKET 002 -->
+      <div class="sku-pill active">
+        <span class="sku-pill-status" style="background:#fff;opacity:0.7"></span>
+        Cropped Jacket 002
+        <span class="step-tag">· Sampling</span>
+      </div>
+      <div class="sku-pill other-step">
+        <span class="sku-pill-status" style="background:#10b981"></span>
+        Wide Leg Trousers 003
+        <span class="step-tag">· Prod Config</span>
+      </div>
+    </div>
+    <button class="btn-panel-toggle" onclick="">☰ Collection Panel</button>
+  </div>
+  <!-- BREADCRUMB showing you switched -->
+  <div style="font-size:12px;color:#888;margin-bottom:12px;display:flex;align-items:center;gap:6px">
+    <span style="color:#7c3aed;cursor:pointer" onclick="showTab('view2')">← Linen Maxi Dress 001</span>
+    <span>·</span>
+    <span>Switched within Summer 2025 collection</span>
+  </div>
+  <div class="sku-header">
+    <div class="sku-eyebrow">Manufacturing Style <span class="coll-tag">🗂 Summer 2025 · SKU 2 of 3</span></div>
+    <div class="sku-title">Cropped Linen Jacket 002</div>
+  </div>
+  <div class="step-progress">
+    <div class="sp-step"><div class="sp-circle done">📋</div><div class="sp-label">Spec</div></div>
+    <div class="sp-conn done"></div>
+    <div class="sp-step"><div class="sp-circle done">✅</div><div class="sp-label">Approval</div></div>
+    <div class="sp-conn done"></div>
+    <div class="sp-step"><div class="sp-circle active">🧵</div><div class="sp-label active">Sampling</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle inherited">🏭</div><div class="sp-label inherited">Suppliers ✓</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle">⚙️</div><div class="sp-label">Prod Config</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle">💳</div><div class="sp-label">Payments</div></div>
+    <div class="sp-conn"></div>
+    <div class="sp-step"><div class="sp-circle">📦</div><div class="sp-label">Progress</div></div>
+  </div>
+  <div class="note" style="background:#f0fdf4;border-color:#86efac;color:#14532d">
+    ✓ <strong>Same supplier available:</strong> Guangzhou Textile Co. quoted this SKU too. You can accept both together from the collection panel.
+  </div>
+  <div class="quote-section-title">STEP 3: SAMPLING — Select Sampling Supplier</div>
+  <div class="quote-card selected">
+    <div class="quote-card-header">
+      <div><div class="supplier-name">Guangzhou Textile Co.</div><div class="supplier-loc">📍 Guangzhou · Also quoted Maxi Dress 001</div></div>
+      <div class="quote-price"><div class="main">$290</div><div class="unit">sample set · 3 pcs</div></div>
+    </div>
+    <div class="quote-details">
+      <div class="quote-detail"><div class="lbl">LEAD TIME</div><div class="val">14 days</div></div>
+      <div class="quote-detail"><div class="lbl">COVERS OTHER SKUS</div><div class="val" style="color:#059669">+Maxi Dress 001 ✓</div></div>
+    </div>
+    <div class="quote-actions">
+      <button class="btn btn-primary btn-sm">Accept for this SKU</button>
+      <button class="btn btn-green btn-sm" onclick="showTab('view4')">Accept for whole collection ✨</button>
+    </div>
+  </div>
+</div>
+<div class="side-panel closed"></div>
+</div>
+</div>
+<!-- ══════════════════════════════════════════════════ -->
+<!-- VIEW 4: ACCEPT ALL — COLLECTION QUOTE REVIEW       -->
+<!-- ══════════════════════════════════════════════════ -->
+<div id="view4" style="display:none">
+<div class="layout">
+<div class="main" style="max-width:700px">
+  <div style="margin-bottom:20px">
+    <div style="font-size:11px;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px">Collection · Summer 2025</div>
+    <div style="font-size:22px;font-weight:800;margin-bottom:4px">Accept Sampling for Collection</div>
+    <div style="font-size:13px;color:#888">Review and accept sampling quotes for all SKUs in one action</div>
+  </div>
+  <!-- SKU 1 -->
+  <div style="background:white;border-radius:14px;border:1.5px solid #c4b5fd;overflow:hidden;margin-bottom:12px">
+    <div style="padding:12px 16px;background:#f5f3ff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e4f4">
+      <div style="display:flex;align-items:center;gap:10px">
+        <span style="font-size:20px">👗</span>
+        <div>
+          <div style="font-size:13px;font-weight:700">Linen Maxi Dress 001</div>
+          <div style="font-size:11px;color:#888">Step 3 · Sampling</div>
+        </div>
+      </div>
+      <span class="tag tag-purple">Included</span>
+    </div>
+    <div style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between">
+      <div>
+        <div style="font-size:13px;font-weight:700">Guangzhou Textile Co.</div>
+        <div style="font-size:11px;color:#888">14 days · 3 sample pcs · 2 revisions</div>
+      </div>
+      <div style="text-align:right">
+        <div style="font-size:17px;font-weight:800">$320</div>
+        <div style="font-size:10px;color:#888">sample set</div>
+      </div>
+    </div>
+  </div>
+  <!-- SKU 2 -->
+  <div style="background:white;border-radius:14px;border:1.5px solid #c4b5fd;overflow:hidden;margin-bottom:12px">
+    <div style="padding:12px 16px;background:#f5f3ff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e4f4">
+      <div style="display:flex;align-items:center;gap:10px">
+        <span style="font-size:20px">🧥</span>
+        <div>
+          <div style="font-size:13px;font-weight:700">Cropped Linen Jacket 002</div>
+          <div style="font-size:11px;color:#888">Step 3 · Sampling</div>
+        </div>
+      </div>
+      <span class="tag tag-purple">Included</span>
+    </div>
+    <div style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between">
+      <div>
+        <div style="font-size:13px;font-weight:700">Guangzhou Textile Co.</div>
+        <div style="font-size:11px;color:#888">14 days · 3 sample pcs · 2 revisions</div>
+      </div>
+      <div style="text-align:right">
+        <div style="font-size:17px;font-weight:800">$290</div>
+        <div style="font-size:10px;color:#888">sample set</div>
+      </div>
+    </div>
+  </div>
+  <!-- SKU 3 - SKIPPED -->
+  <div style="background:white;border-radius:14px;border:1.5px solid #e8e4f4;overflow:hidden;margin-bottom:20px;opacity:0.5">
+    <div style="padding:12px 16px;background:#f9fafb;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e4f4">
+      <div style="display:flex;align-items:center;gap:10px">
+        <span style="font-size:20px">👖</span>
+        <div>
+          <div style="font-size:13px;font-weight:700">Wide Leg Trousers 003</div>
+          <div style="font-size:11px;color:#888">Step 5 · Production Config (already past sampling)</div>
+        </div>
+      </div>
+      <span class="tag tag-gray">Skipped — already accepted</span>
+    </div>
+  </div>
+  <!-- SUMMARY -->
+  <div style="background:#f5f3ff;border-radius:12px;border:1.5px solid #c4b5fd;padding:16px;margin-bottom:20px">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
+      <span style="font-size:13px;font-weight:700;color:#4c1d95">Collection Sampling Total</span>
+      <span style="font-size:20px;font-weight:800;color:#7c3aed">$610</span>
+    </div>
+    <div style="font-size:12px;color:#6d28d9">2 SKUs · Guangzhou Textile Co. · Aligned timeline: 14 days · Both samples due same date</div>
+  </div>
+  <div style="display:flex;gap:10px">
+    <button class="btn btn-primary" style="flex:1;justify-content:center">✓ Accept Sampling for Both SKUs</button>
+    <button class="btn btn-ghost" onclick="showTab('view2')">← Back</button>
+  </div>
+</div>
+<div class="side-panel closed"></div>
+</div>
+</div>
+<script>
+const ALL_VIEWS = ['dashboard','nogrouping','bycollection','view1','view2','view3','view4'];
+function showTab(id) {
+  ALL_VIEWS.forEach(v => {
+    const el = document.getElementById(v);
+    if (el) el.style.display = v === id ? 'block' : 'none';
+  });
+  const tabs = document.querySelectorAll('.tab');
+  const map = {'dashboard':0,'nogrouping':1,'bycollection':2,'view1':3,'view2':4,'view3':5,'view4':6};
+  tabs.forEach((t,i) => t.classList.toggle('active', i === map[id]));
+  window.scrollTo(0,0);
+}
+// Init: show dashboard by default, hide rest
+ALL_VIEWS.forEach(v => {
+  const el = document.getElementById(v);
+  if (el && v !== 'dashboard') el.style.display = 'none';
+});
+</script>
+</body>
+</html>

makea-cli 0.1.5__tar.gz → 0.1.7__tar.gz

makea-cli 0.1.5tar.gz → 0.1.7tar.gz