95 lines
5.2 KiB
HTML
95 lines
5.2 KiB
HTML
<!DOCTYPE html><html lang="fr"><head><meta charset="UTF-8"><title>DMAIC Workbench</title>
|
|
<style>
|
|
body{font-family:system-ui;background:#0a0e1a;color:#e2e8f0;margin:0;padding:20px}
|
|
h1{color:#a5b4fc;font-size:1.4rem}
|
|
.cycle-list{background:#151e33;border-radius:8px;padding:16px;margin-bottom:20px}
|
|
.cycle{padding:10px;border-bottom:1px solid #1e293b;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
|
|
.cycle:hover{background:#1e293b}
|
|
.phase-badge{padding:3px 10px;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase}
|
|
.phase-define{background:#fbbf24;color:#000}
|
|
.phase-measure{background:#3b82f6;color:#fff}
|
|
.phase-analyze{background:#a855f7;color:#fff}
|
|
.phase-improve{background:#22c55e;color:#fff}
|
|
.phase-control{background:#14b8a6;color:#fff}
|
|
.progress{display:flex;align-items:center;gap:8px}
|
|
.progress-bar{width:120px;height:6px;background:#1e293b;border-radius:3px;overflow:hidden}
|
|
.progress-fill{height:100%;background:linear-gradient(90deg,#6366f1,#a855f7)}
|
|
.tabs{display:flex;gap:2px;margin-bottom:14px;background:#151e33;padding:4px;border-radius:8px}
|
|
.tab{flex:1;padding:10px;text-align:center;cursor:pointer;border-radius:6px;font-weight:500;color:#94a3b8}
|
|
.tab.active{background:#6366f1;color:#fff}
|
|
.tab-content{background:#151e33;border-radius:8px;padding:20px;display:none;min-height:200px}
|
|
.tab-content.active{display:block}
|
|
.breadcrumb{color:#64748b;font-size:.8rem;margin-bottom:10px}
|
|
.breadcrumb a{color:#a5b4fc;text-decoration:none}
|
|
.btn{padding:8px 16px;background:#6366f1;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500}
|
|
.btn:hover{background:#4f46e5}
|
|
</style></head>
|
|
<body>
|
|
<div class="breadcrumb"><a href="/vsm-hub.html">VSM Hub</a> / DMAIC Workbench</div>
|
|
<h1>🔬 DMAIC Workbench — <span id="tenant-name">weval</span></h1>
|
|
|
|
<div id="cycle-list" class="cycle-list"><h3>Cycles DMAIC actifs</h3><div>Loading...</div></div>
|
|
|
|
<div id="detail" style="display:none">
|
|
<div class="tabs">
|
|
<div class="tab active" data-tab="define">📋 Define</div>
|
|
<div class="tab" data-tab="measure">📏 Measure</div>
|
|
<div class="tab" data-tab="analyze">🔍 Analyze</div>
|
|
<div class="tab" data-tab="improve">🚀 Improve</div>
|
|
<div class="tab" data-tab="control">🎯 Control</div>
|
|
</div>
|
|
<div id="tab-define" class="tab-content active"><h3>Define — Charter & scope</h3><p id="define-data">Loading...</p></div>
|
|
<div id="tab-measure" class="tab-content"><h3>Measure — Baseline KPIs</h3><p id="measure-data">Loading...</p></div>
|
|
<div id="tab-analyze" class="tab-content"><h3>Analyze — Root causes (Ishikawa 5Why)</h3><p id="analyze-data">Loading...</p></div>
|
|
<div id="tab-improve" class="tab-content"><h3>Improve — Actions & tests</h3><p id="improve-data">Loading...</p></div>
|
|
<div id="tab-control" class="tab-content"><h3>Control — SPC & sustain</h3><p id="control-data">Loading...</p></div>
|
|
<button class="btn" onclick="advance()">Avancer phase</button>
|
|
</div>
|
|
|
|
<script>
|
|
const q = new URLSearchParams(location.search);
|
|
const TENANT = q.get('tenant') || 'weval';
|
|
const VS = q.get('vs_id') || null;
|
|
document.getElementById('tenant-name').textContent = TENANT;
|
|
|
|
fetch(`/api/em/dmaic?tenant=${TENANT}`).then(r=>r.json()).then(d=>{
|
|
const list = document.getElementById('cycle-list');
|
|
list.innerHTML = '<h3>Cycles DMAIC actifs</h3>' + (d.cycles||[]).map(c=>`
|
|
<div class="cycle" onclick="location='?tenant=${TENANT}&vs_id=${c.vs_id}'">
|
|
<div><strong>${c.name}</strong><div style="color:#64748b;font-size:.75rem">${c.vs_id}</div></div>
|
|
<div class="progress">
|
|
<span class="phase-badge phase-${c.phase}">${c.phase}</span>
|
|
<div class="progress-bar"><div class="progress-fill" style="width:${c.progress}%"></div></div>
|
|
<span style="color:#64748b">${c.progress}%</span>
|
|
</div>
|
|
</div>`).join('');
|
|
if (VS) loadDetail(VS);
|
|
});
|
|
|
|
function loadDetail(vsId){
|
|
document.getElementById('detail').style.display='block';
|
|
fetch(`/api/em/dmaic/${TENANT}/${vsId}`).then(r=>r.json()).then(d=>{
|
|
['define','measure','analyze','improve','control'].forEach(ph=>{
|
|
const data = d[`${ph}_data`];
|
|
document.getElementById(`${ph}-data`).textContent = data && Object.keys(data).length ? JSON.stringify(data,null,2) : '(vide — à compléter)';
|
|
});
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.tab').forEach(t=>t.onclick=function(){
|
|
document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
|
|
document.querySelectorAll('.tab-content').forEach(x=>x.classList.remove('active'));
|
|
this.classList.add('active');
|
|
document.getElementById('tab-'+this.dataset.tab).classList.add('active');
|
|
});
|
|
|
|
function advance(){
|
|
if (!VS) return;
|
|
const phases = ['define','measure','analyze','improve','control'];
|
|
const current = document.querySelector('.phase-badge')?.textContent || 'define';
|
|
const next = phases[Math.min(phases.indexOf(current)+1, 4)];
|
|
fetch(`/api/em/dmaic?action=advance&tenant=${TENANT}&vs_id=${VS}`, {method:'POST',body:`phase=${next}&progress=${(phases.indexOf(next)+1)*20}`,headers:{'Content-Type':'application/x-www-form-urlencoded'}})
|
|
.then(r=>r.json()).then(d=>{alert('Phase: '+d.phase);location.reload()});
|
|
}
|
|
</script></body></html>
|