// Variant A — the six screens // Each screen is a self-contained component that renders inside SapShell. function SapScreen_Main() { const stepNav = [ ['Pod model', 'done'], ['External dimensions', 'done'], ['Interior acoustic finish', 'done'], ['Exterior finish', 'done'], ['Glazing', 'done'], ['Electrical outlets', 'active'], ['Ventilation & lighting', 'draft'], ['Furniture & floor', 'draft'], ['Add-ons', 'draft'], ]; return ( )} right={ <> {/* Validation banner */}
ℹ Configuration auto-saved at 14:38. Pricing applied from Wholesale EUR→CZK · 04/2026.
}/> }/> }/>
} /> ); } // ───────────────────────────────────────────────────────────── // Screen 2 — Items list (expanded) // ───────────────────────────────────────────────────────────── function SapScreen_Items() { const items = [ { n: '010', model: 'SOLO S1', dim: '1100 × 1100', status: 'done', price: '42 800,00', summary: 'Felt · Charcoal · Oak · Std ventilation' }, { n: '020', model: 'DUO M2', dim: '1500 × 1500', status: 'done', price: '64 300,00', summary: 'Wool · Dune · Laminate white' }, { n: '030', model: 'QUAD L4', dim: '2400 × 2400', status: 'active', price: '110 412,50', summary: 'Premium wool · Charcoal · Oak · HEPA · 4 sockets · Table+4' }, { n: '040', model: 'SOLO S1', dim: '1100 × 1100', status: 'draft', price: '— in progress', summary: 'Step 3 of 8 · interior finish pending' }, { n: '050', model: 'DUO M2', dim: '1500 × 1500', status: 'draft', price: '— pending', summary: 'Not started' }, { n: '060', model: 'Add-ons bundle', dim: '—', status: 'draft', price: '— pending', summary: 'Cleaning kit, wall mount' }, ]; return (

Quotation items — 6

2 complete · 4 in progress
Duplicate item Load template + New item
Line
Status · Item
Footprint
Configuration
Summary · Price
{items.map(it => (
{it.n}
{it.model}
{it.status === 'done' && 'Complete'} {it.status === 'active' && 'In progress — current'} {it.status === 'draft' && 'Not started'}
{it.dim}
{it.summary.split(' · ').slice(0, 2).join(' · ')}
{it.summary}
{it.price}
⋯
))}
All prices in CZK, excl. VAT. From price list: Wholesale EUR→CZK · 04/2026.
Subtotal: 217 512,50
VAT 21%: 45 677,63
Total: 263 190,13 CZK
); } // ───────────────────────────────────────────────────────────── // Screen 3 — Completed with total // ───────────────────────────────────────────────────────────── function SapScreen_Complete() { return (
Item 030 · QUAD L4 is complete
All 9 mandatory steps filled. Ready to update quotation in SAP B1.
Edit configuration Next item →

Configuration summary

Duplicate Save as template Print preview
{[ ['01 · Pod model', 'QUAD L4 — 4 persons team room'], ['02 · External dimensions', '2400 × 2400 × 2250 mm'], ['03 · Interior acoustic finish', 'Premium wool blend · Charcoal'], ['04 · Exterior finish', 'Oak veneer — natural rift-cut, matte'], ['05 · Glazing & door', 'Double glazing · Right-hinged'], ['06 · Ventilation & lighting', 'HEPA 80 m³/h · Dimmable 3000 K'], ['07 · Electrical outlets', '4× EU socket, 2× USB-C, RJ45 network'], ['08 · Furniture & floor', 'Integrated table + 4 upholstered seats · Carpet floor'], ['09 · Add-ons', 'Whiteboard (reverse side), Wireless charger ×2'], ].map(([k, v], i) => (
{k}
{v}
))}
); } // ───────────────────────────────────────────────────────────── // Screen 4 — Invalid configuration (inactive SKU warning) // ───────────────────────────────────────────────────────────── function SapScreen_Invalid() { return (
Configuration no longer valid — 2 issues require attention
This configuration was loaded from a template saved on 12/01/2026. Some options have changed since. You cannot save or update the quotation until the issues are resolved.
Dismiss
Issues detected
{[ { sev: 'error', step: 'Step 04 · Exterior finish', item: 'ART-VENEER-WLN-05 — Walnut veneer (discontinued)', msg: 'This article has been marked inactive in SAP. Select a replacement finish to continue.', action: 'Pick replacement' }, { sev: 'warn', step: 'Step 06 · Ventilation', item: 'ART-VENT-STD-H60 — HEPA 60 m³/h', msg: 'Price changed by +14.2% since template was saved (now 10 160,00 CZK). Review before updating the quotation.', action: 'Review price' }, ].map((iss, i) => (
{iss.sev === 'error' ? '×' : '!'}
{iss.step}
{iss.item}
{iss.msg}
{iss.action}
))}
{/* Inline fix on the broken step */}
Walnut veneer is no longer available. Suggested alternatives sorted by visual similarity:
}/>
}/>
}/>
); } // ───────────────────────────────────────────────────────────── // Screen 5 — Save as template modal // ───────────────────────────────────────────────────────────── function SapScreen_SaveTemplate() { return (
{/* Blurred/dimmed background */}
{/* Modal backdrop */}
{/* Modal */}

Save configuration as template

Source: Item 030 · QUAD L4 · 2400×2400 · Premium wool / Oak