-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path06-data-quality-summary.html
More file actions
146 lines (137 loc) · 11.3 KB
/
Copy path06-data-quality-summary.html
File metadata and controls
146 lines (137 loc) · 11.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Validate & scale — Task Mining</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="nav.js"></script>
</head>
<body>
<div class="app-shell">
<nav class="left-rail">
<img src="celonis-logo.svg" class="rail-logo" alt="Celonis" height="20">
<div class="rail-nav">
<button class="rail-item active" data-label="Data" onclick="navigate('01-choose-capture-path.html')"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><ellipse cx="9" cy="4.5" rx="6" ry="2.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 4.5v9c0 1.38 2.69 2.5 6 2.5s6-1.12 6-2.5v-9" stroke="currentColor" stroke-width="1.5"/><path d="M3 9c0 1.38 2.69 2.5 6 2.5s6-1.12 6-2.5" stroke="currentColor" stroke-width="1.5"/></svg></button>
<button class="rail-item" data-label="Studio"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2.5" y="2.5" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="10.5" y="2.5" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="2.5" y="10.5" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="10.5" y="10.5" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5"/></svg></button>
<button class="rail-item" data-label="Apps"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="4" cy="4" r="1.5" fill="currentColor"/><circle cx="9" cy="4" r="1.5" fill="currentColor"/><circle cx="14" cy="4" r="1.5" fill="currentColor"/><circle cx="4" cy="9" r="1.5" fill="currentColor"/><circle cx="9" cy="9" r="1.5" fill="currentColor"/><circle cx="14" cy="9" r="1.5" fill="currentColor"/><circle cx="4" cy="14" r="1.5" fill="currentColor"/><circle cx="9" cy="14" r="1.5" fill="currentColor"/><circle cx="14" cy="14" r="1.5" fill="currentColor"/></svg></button>
</div>
<div class="rail-bottom">
<button class="rail-item" data-label="Settings"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 5h12M3 9h12M3 13h12" stroke="currentColor" stroke-width="1.5"/><circle cx="6" cy="5" r="2" fill="var(--surface-card)" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="9" r="2" fill="var(--surface-card)" stroke="currentColor" stroke-width="1.5"/><circle cx="7" cy="13" r="2" fill="var(--surface-card)" stroke="currentColor" stroke-width="1.5"/></svg></button>
<button class="rail-item" data-label="Help"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M7.2 7a1.8 1.8 0 1 1 2.4 1.7c-.5.2-.9.6-.9 1.2v.3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8.7" cy="12.4" r=".8" fill="currentColor"/></svg></button>
<div class="avatar">CK</div>
</div>
</nav>
<div class="app-right">
<div class="context-bar">
<div class="context-bar-left">
<span class="context-bar-title">Data</span>
<span class="breadcrumb-sep">›</span>
<div class="breadcrumb"><a href="01-choose-capture-path.html">Task Mining</a><span class="breadcrumb-sep">›</span><span style="color:var(--text-primary);">Validate & scale</span></div>
</div>
</div>
<div class="body-layout">
<aside class="sidebar">
<div class="nav-group-label">Onboarding</div>
<a class="nav-item done" data-screen="01-choose-capture-path.html" onclick="navigate('01-choose-capture-path.html')"><span class="dot"></span> 1. Choose capture path</a>
<a class="nav-item done" data-screen="02-record-sample.html" onclick="navigate('02-record-sample.html')"><span class="dot"></span> 2. Record a sample</a>
<a class="nav-item done" data-screen="03-privacy-gdpr-scan.html" onclick="navigate('03-privacy-gdpr-scan.html')"><span class="dot"></span> 3. Privacy & GDPR scan</a>
<a class="nav-item done" data-screen="04-case-ids-object-coverage.html" onclick="navigate('04-case-ids-object-coverage.html')"><span class="dot"></span> 4. Case IDs & objects</a>
<a class="nav-item done" data-screen="05-enrich-process-context.html" onclick="navigate('05-enrich-process-context.html')"><span class="dot"></span> 5. Enrich from process</a>
<a class="nav-item active" data-screen="06-data-quality-summary.html"><span class="dot"></span> 6. Validate & scale</a>
</aside>
<main class="main-content">
<div class="stepper">
<div class="step done"><span class="step-num">✓</span><span class="step-label">Capture path</span></div>
<span class="step-line"></span>
<div class="step done"><span class="step-num">✓</span><span class="step-label">Record</span></div>
<span class="step-line"></span>
<div class="step done"><span class="step-num">✓</span><span class="step-label">Privacy</span></div>
<span class="step-line"></span>
<div class="step done"><span class="step-num">✓</span><span class="step-label">Coverage</span></div>
<span class="step-line"></span>
<div class="step done"><span class="step-num">✓</span><span class="step-label">Enrich</span></div>
<span class="step-line"></span>
<div class="step active"><span class="step-num">6</span><span class="step-label">Scale</span></div>
</div>
<div class="page-header">
<div>
<h1 class="page-title">Your data is validated — ready to scale</h1>
<p class="page-subtitle">One verdict for compliance, case IDs, and process joinability. Confirm the capture scope to roll out to a few representative users.</p>
</div>
<button class="btn-secondary"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 2v8m0 0 2.5-2.5M8 10 5.5 7.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 11v1.5A1.5 1.5 0 0 0 4.5 14h7a1.5 1.5 0 0 0 1.5-1.5V11" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg> Download report</button>
</div>
<div class="grid-3" style="margin-bottom:24px;">
<div class="card" style="border-left:4px solid var(--color-success);">
<div class="row-between"><span class="kpi-label">Privacy & GDPR</span><span class="badge badge-success">● Pass</span></div>
<div class="kpi" style="margin-top:8px;">37/37</div>
<div class="kpi-label">PII fields handled · 1 column masked by your choice</div>
</div>
<div class="card" style="border-left:4px solid var(--color-success);">
<div class="row-between"><span class="kpi-label">Case IDs</span><span class="badge badge-success">● Strong</span></div>
<div class="kpi" style="margin-top:8px;">4 types</div>
<div class="kpi-label">Invoice, Sales Order, Ticket, Vendor</div>
</div>
<div class="card" style="border-left:4px solid var(--color-success);">
<div class="row-between"><span class="kpi-label">Process joinability</span><span class="badge badge-success">● 100%</span></div>
<div class="kpi" style="margin-top:8px;">4/4 objects</div>
<div class="kpi-label">Covered after enrichment</div>
</div>
</div>
<div class="grid-2" style="grid-template-columns:1.3fr 1fr; align-items:start;">
<div class="card">
<div class="card-header"><span class="card-title">Capture scope to roll out</span></div>
<table class="tbl">
<thead><tr><th>Application</th><th>Capture path</th><th>Status</th></tr></thead>
<tbody>
<tr><td><span class="app-chip"><span class="app-glyph" style="background:#0a6ed1;">SN</span>ServiceNow</span></td><td>Browser extension</td><td><span class="badge badge-success">Included</span></td></tr>
<tr><td><span class="app-chip"><span class="app-glyph" style="background:#1a73e8;">SF</span>Salesforce</span></td><td>Browser extension</td><td><span class="badge badge-success">Included</span></td></tr>
<tr><td><span class="app-chip"><span class="app-glyph" style="background:#217346;">XL</span>Excel</span></td><td>Windows client</td><td><span class="badge badge-success">Included</span></td></tr>
<tr><td><span class="app-chip"><span class="app-glyph" style="background:#7a7a7a;">SAP</span>SAP GUI</span></td><td>Windows client</td><td><span class="badge badge-warning">Add client to include</span></td></tr>
</tbody>
</table>
</div>
<div class="card">
<div class="card-header"><span class="card-title">Invite representative users</span></div>
<label class="form-label" style="font-size:12px;font-weight:500;color:var(--text-secondary);">Users (1–3 recommended for pilot)</label>
<div style="display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px;">
<span class="app-chip">a.mueller@bosch-pilot ✕</span>
<span class="app-chip">j.weber@bosch-pilot ✕</span>
</div>
<input class="input" placeholder="Add email…" style="width:100%;height:36px;padding:0 12px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:14px;">
<div class="divider"></div>
<button class="btn-primary btn-block btn-lg" onclick="openModal('confirm')">Confirm scope & scale</button>
<p class="hint" style="margin-top:8px;text-align:center;">Capture begins only after each user accepts consent.</p>
</div>
</div>
<div class="wizard-footer">
<button class="btn-secondary" onclick="navigate('05-enrich-process-context.html')">‹ Back</button>
<button class="btn-ghost" onclick="navigate('01-choose-capture-path.html')">Run another test</button>
</div>
</main>
</div>
</div>
</div>
<!-- Confirmation modal -->
<div class="modal-backdrop" id="confirm" style="display:none;">
<div class="modal">
<div class="modal-header">
<h2>Confirm capture scope?</h2>
<button class="icon-btn" onclick="closeModal('confirm')">✕</button>
</div>
<div class="modal-body">
<p style="margin-bottom:12px;">You're about to enable Task Mining capture for <strong>2 users</strong> across <strong>3 applications</strong> with the validated masking rules.</p>
<div class="callout" style="margin-bottom:4px;">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" style="flex-shrink:0;"><path d="M9 1.5 3 4.2v4c0 3.6 2.5 6.9 6 8 3.5-1.1 6-4.4 6-8v-4L9 1.5Z" stroke="#264AFF" stroke-width="1.4" stroke-linejoin="round"/><path d="M6.6 8.8 8.2 10.4 11.6 7" stroke="#264AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div>Each user must accept a consent prompt before any capture starts. You can pause or revoke at any time.</div>
</div>
</div>
<div class="modal-footer">
<button class="btn-secondary" onclick="closeModal('confirm')">Cancel</button>
<button class="btn-primary" onclick="closeModal('confirm')">Enable capture</button>
</div>
</div>
</div>
</body>
</html>