1474 lines
88 KiB
HTML
1474 lines
88 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>DocuSign Migration Console</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
/* ── Docusign 2024 brand palette ──
|
||
Source: brand.docusign.com (official guidelines, April 2024 rebrand)
|
||
Inkwell: #130032 — dark nav / headline text (replaces old navy)
|
||
Deep Violet:#26065D — dark-theme backgrounds
|
||
Cobalt: #4C00FF — PRIMARY brand color, CTAs, active states
|
||
Mist: #CBC2FF — light purple, nav text / highlights
|
||
Ecru: #F8F3F0 — warm page background (light theme)
|
||
Poppy: #FF5252 — accent red (errors, used sparingly)
|
||
Wordmark: "docusign" all lowercase, proprietary Docusign Indigo typeface
|
||
Nexus icon: two converging shapes forming an inkwell / agreement shape
|
||
── */
|
||
:root {
|
||
--nav-bg: #130032;
|
||
--nav-hover: #26065D;
|
||
--nav-active: #4C00FF;
|
||
--nav-text: #A899CC;
|
||
--nav-text-active: #FFFFFF;
|
||
--nav-width: 228px;
|
||
--header-h: 56px;
|
||
--page-bg: #F8F3F0;
|
||
--card-bg: #FFFFFF;
|
||
--border: #E2DDF0;
|
||
--text: #130032;
|
||
--text-muted: #6B5F8A;
|
||
--blue: #4C00FF;
|
||
--blue-hover: #3A00CC;
|
||
--blue-light: #EDE8FF;
|
||
--green: #027A48;
|
||
--green-bg: #ECFDF3;
|
||
--amber: #92400E;
|
||
--amber-bg: #FFFBEB;
|
||
--red: #FF5252;
|
||
--red-bg: #FFF0F0;
|
||
--gray-bg: #F8F3F0;
|
||
--gray-text: #6B5F8A;
|
||
--shadow: 0 1px 3px rgba(19,0,50,0.08), 0 1px 2px rgba(19,0,50,0.04);
|
||
--shadow-md: 0 4px 16px rgba(19,0,50,0.14);
|
||
--ds-violet: #26065D;
|
||
--ds-mist: #CBC2FF;
|
||
--ds-cobalt: #4C00FF;
|
||
}
|
||
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--page-bg); color: var(--text); display: flex; height: 100vh; overflow: hidden; font-size: 14px; }
|
||
|
||
/* ── Left nav ── */
|
||
.nav { width: var(--nav-width); background: var(--nav-bg); display: flex; flex-direction: column; flex-shrink: 0; }
|
||
.nav-logo { padding: 14px 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||
.nav-logo .ds-wordmark { display: flex; align-items: center; gap: 0; margin-bottom: 10px; }
|
||
.nav-logo .logo-sub { font-size: 11px; color: var(--nav-text); font-weight: 500; letter-spacing: 0.02em; margin-top: 2px; }
|
||
/* Project switcher */
|
||
.project-switcher { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 8px 10px; cursor: pointer; transition: background 0.15s; display: flex; align-items: center; gap: 8px; }
|
||
.project-switcher:hover { background: rgba(255,255,255,0.10); }
|
||
.project-icon { width: 24px; height: 24px; border-radius: 4px; background: var(--ds-cobalt); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; }
|
||
.project-name { font-size: 12px; font-weight: 600; color: #fff; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.project-switch-arrow { font-size: 10px; color: var(--nav-text); flex-shrink: 0; }
|
||
.nav-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(189,201,217,0.5); padding: 16px 20px 6px; }
|
||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: var(--nav-text); cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; font-size: 13px; user-select: none; }
|
||
.nav-item:hover { background: var(--nav-hover); color: var(--nav-text-active); }
|
||
.nav-item.active { background: rgba(76,0,255,0.22); color: var(--nav-text-active); border-left-color: var(--nav-active); }
|
||
.nav-item .icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
|
||
.nav-item .badge { margin-left: auto; background: var(--red); color: #fff; border-radius: 10px; font-size: 10px; font-weight: 700; padding: 1px 6px; }
|
||
.nav-item .badge.amber { background: var(--amber); }
|
||
.nav-bottom { margin-top: auto; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.08); }
|
||
.nav-customer { padding: 10px 20px; }
|
||
.nav-customer-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(189,201,217,0.5); margin-bottom: 4px; }
|
||
.nav-customer-name { font-size: 12px; font-weight: 600; color: var(--nav-text-active); }
|
||
.nav-customer-sub { font-size: 11px; color: var(--nav-text); }
|
||
|
||
/* ── Main area ── */
|
||
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||
|
||
/* ── Top header ── */
|
||
.topbar { height: var(--header-h); background: var(--card-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 16px; flex-shrink: 0; box-shadow: var(--shadow); }
|
||
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
|
||
.breadcrumb .sep { color: var(--border); }
|
||
.breadcrumb .current { color: var(--text); font-weight: 600; }
|
||
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
|
||
.conn-pill { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); }
|
||
.conn-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
|
||
.conn-pill.connected .dot { background: var(--green); }
|
||
.conn-pill.disconnected .dot { background: var(--red); }
|
||
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
||
|
||
/* ── Content area ── */
|
||
.content { flex: 1; overflow-y: auto; padding: 24px; }
|
||
|
||
/* ── Screen titles ── */
|
||
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
|
||
.page-title { font-size: 20px; font-weight: 700; color: var(--text); }
|
||
.page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
|
||
.page-actions { display: flex; gap: 8px; align-items: center; }
|
||
|
||
/* ── Buttons ── */
|
||
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; user-select: none; white-space: nowrap; }
|
||
.btn-primary { background: var(--blue); color: #fff; }
|
||
.btn-primary:hover { background: var(--blue-hover); }
|
||
.btn-secondary { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); }
|
||
.btn-secondary:hover { background: var(--gray-bg); }
|
||
.btn-ghost { background: transparent; color: var(--blue); padding: 6px 10px; }
|
||
.btn-ghost:hover { background: var(--blue-light); }
|
||
.btn-danger { background: var(--red); color: #fff; }
|
||
.btn-sm { padding: 5px 10px; font-size: 12px; }
|
||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||
|
||
/* ── Stat cards ── */
|
||
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 24px; }
|
||
.stat-card { background: var(--card-bg); border-radius: 8px; padding: 16px 18px; border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer; transition: box-shadow 0.15s; }
|
||
.stat-card:hover { box-shadow: var(--shadow-md); }
|
||
.stat-card .stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; }
|
||
.stat-card .stat-value { font-size: 28px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
|
||
.stat-card .stat-sub { font-size: 11px; color: var(--text-muted); }
|
||
.stat-card.blue .stat-value { color: var(--blue); }
|
||
.stat-card.green .stat-value { color: var(--green); }
|
||
.stat-card.amber .stat-value { color: var(--amber); }
|
||
.stat-card.red .stat-value { color: var(--red); }
|
||
.stat-card.gray .stat-value { color: var(--gray-text); }
|
||
|
||
/* ── Cards ── */
|
||
.card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: 16px; }
|
||
.card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
|
||
.card-title { font-size: 14px; font-weight: 700; }
|
||
.card-body { padding: 16px 20px; }
|
||
|
||
/* ── Progress bar ── */
|
||
.progress-wrap { margin-bottom: 24px; }
|
||
.progress-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; color: var(--text-muted); }
|
||
.progress-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; display: flex; }
|
||
.progress-seg { height: 100%; transition: width 0.3s; }
|
||
.progress-seg.green { background: var(--green); }
|
||
.progress-seg.amber { background: #FFAB00; }
|
||
.progress-seg.red { background: var(--red); }
|
||
.progress-seg.gray { background: #B0BAC7; }
|
||
|
||
/* ── Status badges ── */
|
||
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
|
||
.badge-green { background: var(--green-bg); color: var(--green); }
|
||
.badge-amber { background: var(--amber-bg); color: var(--amber); }
|
||
.badge-red { background: var(--red-bg); color: var(--red); }
|
||
.badge-blue { background: var(--blue-light); color: var(--blue); }
|
||
.badge-gray { background: #EDF0F4; color: var(--gray-text); }
|
||
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||
|
||
/* ── Tables ── */
|
||
.table-wrap { overflow-x: auto; }
|
||
table { width: 100%; border-collapse: collapse; }
|
||
th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); background: #FAFBFC; white-space: nowrap; }
|
||
td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
|
||
tr:last-child td { border-bottom: none; }
|
||
tr:hover td { background: #FAFBFC; }
|
||
.table-name { font-weight: 600; color: var(--text); cursor: pointer; }
|
||
.table-name:hover { color: var(--blue); }
|
||
.table-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
|
||
.issue-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
|
||
.issue-count.has-issues { color: var(--amber); cursor: pointer; }
|
||
.issue-count.no-issues { color: var(--green); }
|
||
.issue-count.blocked { color: var(--red); }
|
||
|
||
/* ── Filter bar ── */
|
||
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
|
||
.search-input { flex: 1; min-width: 200px; max-width: 320px; padding: 7px 12px 7px 32px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center; outline: none; }
|
||
.search-input:focus { border-color: var(--blue); }
|
||
.filter-tabs { display: flex; background: var(--card-bg); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
|
||
.filter-tab { padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-muted); border-right: 1px solid var(--border); white-space: nowrap; transition: all 0.1s; }
|
||
.filter-tab:last-child { border-right: none; }
|
||
.filter-tab:hover { background: var(--gray-bg); }
|
||
.filter-tab.active { background: var(--blue); color: #fff; }
|
||
.filter-tab .tab-count { font-size: 10px; margin-left: 4px; opacity: 0.8; }
|
||
.bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--blue-light); border: 1px solid var(--blue); border-radius: 6px; margin-bottom: 12px; }
|
||
.bulk-bar-text { font-size: 13px; font-weight: 600; color: var(--blue); flex: 1; }
|
||
|
||
/* ── Checkbox ── */
|
||
.cb { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; }
|
||
|
||
/* ── Attention items ── */
|
||
.attention-list { display: flex; flex-direction: column; gap: 8px; }
|
||
.attention-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 6px; border: 1px solid var(--border); }
|
||
.attention-item.blocker { border-left: 3px solid var(--red); background: var(--red-bg); }
|
||
.attention-item.warning { border-left: 3px solid #FFAB00; background: #FFFBF0; }
|
||
.attention-icon { font-size: 16px; flex-shrink: 0; }
|
||
.attention-name { font-weight: 600; font-size: 13px; }
|
||
.attention-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
||
.attention-action { margin-left: auto; flex-shrink: 0; }
|
||
|
||
/* ── Template detail tabs ── */
|
||
.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
|
||
.tab { padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.1s; }
|
||
.tab:hover { color: var(--text); }
|
||
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
|
||
|
||
/* ── Field mapping table ── */
|
||
.mapping-row td:first-child { font-family: monospace; font-size: 12px; }
|
||
.arrow { color: var(--text-muted); padding: 0 4px; }
|
||
.map-ok { color: var(--green); font-weight: 600; font-size: 12px; }
|
||
.map-warn { color: var(--amber); font-weight: 600; font-size: 12px; }
|
||
.map-skip { color: var(--red); font-weight: 600; font-size: 12px; text-decoration: line-through; }
|
||
|
||
/* ── Issue rows ── */
|
||
.issue-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
|
||
.issue-row:last-child { border-bottom: none; }
|
||
.issue-severity { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; flex-shrink: 0; margin-top: 1px; }
|
||
.issue-severity.warn { background: var(--amber-bg); color: var(--amber); }
|
||
.issue-severity.info { background: var(--blue-light); color: var(--blue); }
|
||
.issue-body { flex: 1; }
|
||
.issue-title { font-weight: 600; font-size: 13px; }
|
||
.issue-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
|
||
.issue-fix { font-size: 11px; margin-top: 6px; padding: 4px 10px; background: var(--gray-bg); border-radius: 4px; color: var(--text); display: inline-block; }
|
||
|
||
/* ── Verification panel ── */
|
||
.verify-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
|
||
.verify-step:last-child { border-bottom: none; }
|
||
.verify-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
|
||
.verify-icon.pass { background: var(--green-bg); color: var(--green); }
|
||
.verify-icon.fail { background: var(--red-bg); color: var(--red); }
|
||
.verify-icon.pending { background: #EDF0F4; color: var(--text-muted); }
|
||
.verify-icon.running { background: var(--blue-light); color: var(--blue); }
|
||
.verify-title { font-weight: 600; font-size: 13px; }
|
||
.verify-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
||
|
||
/* ── Results screen ── */
|
||
.result-row { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
|
||
.result-header { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; background: var(--card-bg); }
|
||
.result-header:hover { background: #FAFBFC; }
|
||
.result-icon { font-size: 16px; flex-shrink: 0; }
|
||
.result-name { font-weight: 600; flex: 1; }
|
||
.result-meta { font-size: 11px; color: var(--text-muted); }
|
||
.result-body { padding: 12px 16px; border-top: 1px solid var(--border); background: #FAFBFC; display: none; }
|
||
.result-row.open .result-body { display: block; }
|
||
.result-warn-item { display: flex; gap: 8px; font-size: 12px; padding: 4px 0; color: var(--amber); }
|
||
.result-warn-item .ri { flex-shrink: 0; }
|
||
.ds-link { font-size: 12px; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
|
||
.ds-link:hover { text-decoration: underline; }
|
||
|
||
/* ── Migration options panel ── */
|
||
.options-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin-bottom: 16px; }
|
||
.options-title { font-weight: 700; font-size: 14px; margin-bottom: 14px; }
|
||
.option-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
|
||
.option-row:last-child { border-bottom: none; }
|
||
.option-toggle { width: 36px; height: 20px; background: var(--border); border-radius: 10px; cursor: pointer; position: relative; flex-shrink: 0; margin-top: 2px; transition: background 0.2s; }
|
||
.option-toggle.on { background: var(--blue); }
|
||
.option-toggle::after { content: ''; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
|
||
.option-toggle.on::after { left: 19px; }
|
||
.option-label { font-weight: 600; font-size: 13px; }
|
||
.option-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
||
.option-select { padding: 5px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; color: var(--text); }
|
||
|
||
/* ── Activity list ── */
|
||
.activity-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
|
||
.activity-item:last-child { border-bottom: none; }
|
||
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
|
||
.activity-dot.green { background: var(--green); }
|
||
.activity-dot.amber { background: #FFAB00; }
|
||
.activity-dot.red { background: var(--red); }
|
||
.activity-dot.blue { background: var(--blue); }
|
||
.activity-text { font-size: 13px; flex: 1; }
|
||
.activity-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
|
||
|
||
/* ── Two-col layout ── */
|
||
.two-col { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
|
||
.three-col-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
|
||
.mini-stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; text-align: center; }
|
||
.mini-stat-val { font-size: 24px; font-weight: 800; }
|
||
.mini-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
|
||
.mini-stat.green .mini-stat-val { color: var(--green); }
|
||
.mini-stat.amber .mini-stat-val { color: var(--amber); }
|
||
.mini-stat.red .mini-stat-val { color: var(--red); }
|
||
|
||
/* ── Screen visibility ── */
|
||
.screen { display: none; }
|
||
.screen.active { display: block; }
|
||
|
||
/* ── Callout ── */
|
||
.callout { padding: 12px 16px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
|
||
.callout.info { background: var(--blue-light); border: 1px solid #B3D4FF; color: #0052A3; }
|
||
.callout.warn { background: var(--amber-bg); border: 1px solid #FFD280; color: #7A3E00; }
|
||
.callout.success { background: var(--green-bg); border: 1px solid #B3E8D5; color: #006644; }
|
||
.callout-icon { font-size: 16px; flex-shrink: 0; }
|
||
|
||
/* ── Misc ── */
|
||
.divider { height: 1px; background: var(--border); margin: 16px 0; }
|
||
.tag { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--gray-bg); color: var(--text-muted); margin-right: 4px; }
|
||
.mono { font-family: monospace; font-size: 12px; background: var(--gray-bg); padding: 1px 6px; border-radius: 3px; }
|
||
.select-all-bar { font-size: 12px; color: var(--blue); cursor: pointer; padding: 4px 0; }
|
||
|
||
/* ── Verification score ── */
|
||
.score-ring { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--green) 288deg, var(--border) 0deg); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
|
||
.score-inner { width: 60px; height: 60px; border-radius: 50%; background: var(--card-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||
.score-val { font-size: 16px; font-weight: 800; color: var(--green); line-height: 1; }
|
||
.score-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
|
||
|
||
/* ── Scrollbar ── */
|
||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||
|
||
/* ── DS template preview pill ── */
|
||
.ds-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #EAF2FF; border: 1px solid #B3D4FF; border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--blue); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ─────────────── LEFT NAV ─────────────── -->
|
||
<nav class="nav">
|
||
<div class="nav-logo">
|
||
<!-- Docusign 2024 logo: Nexus icon + lowercase wordmark -->
|
||
<div class="ds-wordmark">
|
||
<svg width="158" height="32" viewBox="0 0 158 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<!--
|
||
Nexus icon: two shapes converging to form "the shape of an agreement" (inkwell).
|
||
Left shape = deep violet teardrop; right shape = cobalt teardrop; overlap = mist.
|
||
-->
|
||
<!-- Left lobe (Deep Violet) -->
|
||
<path d="M8 26 C8 26 4 22 4 16 C4 10 8 6 14 6 C17 6 19.5 7.5 21 10 L14 16 Z"
|
||
fill="#CBC2FF" opacity="0.85"/>
|
||
<!-- Right lobe (Cobalt) -->
|
||
<path d="M20 6 C26 6 30 10 30 16 C30 22 26 26 20 26 C17 26 14.5 24.5 13 22 L20 16 Z"
|
||
fill="#4C00FF"/>
|
||
<!-- Centre convergence point (Inkwell/white) — the "agreement" -->
|
||
<circle cx="17" cy="16" r="3.5" fill="#FFFFFF" opacity="0.95"/>
|
||
|
||
<!-- Wordmark: "docusign" all lowercase per 2024 brand guidelines -->
|
||
<text x="38" y="22"
|
||
font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif"
|
||
font-size="15.5"
|
||
font-weight="700"
|
||
fill="#FFFFFF"
|
||
letter-spacing="-0.3">docusign</text>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-sub">Template Migration Console</div>
|
||
<div style="height:10px"></div>
|
||
<!-- Project / customer switcher -->
|
||
<div class="project-switcher" onclick="showProjectModal()">
|
||
<div class="project-icon">AC</div>
|
||
<div class="project-name">Acme Corporation</div>
|
||
<div class="project-switch-arrow">⇅</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-section-label">Migration</div>
|
||
<div class="nav-item active" onclick="showScreen('dashboard')">
|
||
<span class="icon">⊞</span> Dashboard
|
||
</div>
|
||
<div class="nav-item" onclick="showScreen('templates')">
|
||
<span class="icon">☰</span> Templates
|
||
<span class="badge amber">8</span>
|
||
</div>
|
||
<div class="nav-item" onclick="showScreen('results')">
|
||
<span class="icon">⬡</span> Migration Results
|
||
</div>
|
||
<div class="nav-item" onclick="showScreen('issues')">
|
||
<span class="icon">⚠</span> Issues & Warnings
|
||
<span class="badge">3</span>
|
||
</div>
|
||
|
||
<div class="nav-section-label">Post-Migration</div>
|
||
<div class="nav-item" onclick="showScreen('verification')">
|
||
<span class="icon">✓</span> Verification
|
||
</div>
|
||
<div class="nav-item" onclick="showScreen('history')">
|
||
<span class="icon">◷</span> History & Audit
|
||
</div>
|
||
|
||
<div class="nav-section-label">Admin</div>
|
||
<div class="nav-item" onclick="showScreen('settings')">
|
||
<span class="icon">⚙</span> Settings & Connections
|
||
</div>
|
||
|
||
<div class="nav-bottom">
|
||
<div class="nav-item" onclick="showScreen('settings')">
|
||
<span class="icon" style="font-size:14px">👤</span>
|
||
<div>
|
||
<div style="font-size:12px;font-weight:600;color:#fff">Paul Huliganga</div>
|
||
<div style="font-size:10px;color:var(--nav-text)">paje0101@gmail.com</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ─────────────── MAIN ─────────────── -->
|
||
<div class="main">
|
||
|
||
<!-- TOP BAR -->
|
||
<div class="topbar" id="topbar">
|
||
<div class="breadcrumb">
|
||
<span id="bc-root">Dashboard</span>
|
||
<span class="sep" id="bc-sep" style="display:none">›</span>
|
||
<span class="current" id="bc-current"></span>
|
||
</div>
|
||
<div class="topbar-right">
|
||
<div class="conn-pill connected"><div class="dot"></div> Adobe Sign</div>
|
||
<div class="conn-pill connected"><div class="dot"></div> DocuSign</div>
|
||
<div class="avatar">PH</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
SCREEN: DASHBOARD
|
||
═══════════════════════════════════════ -->
|
||
<div class="screen active" id="screen-dashboard">
|
||
<div class="page-header">
|
||
<div>
|
||
<div class="page-title">Migration Dashboard</div>
|
||
<div class="page-subtitle">Acme Corporation · 312 templates in Adobe Sign account</div>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn btn-secondary btn-sm" onclick="showScreen('templates')">Analyze All Templates</button>
|
||
<button class="btn btn-primary" onclick="showScreen('templates')">▶ Start Batch Migration</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats -->
|
||
<div class="stat-grid">
|
||
<div class="stat-card blue" onclick="filterTemplates('all')">
|
||
<div class="stat-label">Total Templates</div>
|
||
<div class="stat-value">312</div>
|
||
<div class="stat-sub">in Adobe Sign</div>
|
||
</div>
|
||
<div class="stat-card green" onclick="filterTemplates('migrated')">
|
||
<div class="stat-label">Migrated</div>
|
||
<div class="stat-value">187</div>
|
||
<div class="stat-sub">60% complete</div>
|
||
</div>
|
||
<div class="stat-card gray" onclick="filterTemplates('ready')">
|
||
<div class="stat-label">Ready to Migrate</div>
|
||
<div class="stat-value">96</div>
|
||
<div class="stat-sub">no issues detected</div>
|
||
</div>
|
||
<div class="stat-card amber" onclick="filterTemplates('caveats')">
|
||
<div class="stat-label">Needs Review</div>
|
||
<div class="stat-value">21</div>
|
||
<div class="stat-sub">unsupported features</div>
|
||
</div>
|
||
<div class="stat-card red" onclick="filterTemplates('blocked')">
|
||
<div class="stat-label">Blocked</div>
|
||
<div class="stat-value">8</div>
|
||
<div class="stat-sub">hard stoppers found</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Progress -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="card-title">Overall Migration Progress</span>
|
||
<span style="font-size:13px;color:var(--text-muted)">187 / 312 templates</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="progress-wrap" style="margin-bottom:0">
|
||
<div class="progress-label">
|
||
<span style="color:var(--green);font-weight:600">■ Migrated 60%</span>
|
||
<span style="color:var(--green)">■ Verified 31%</span>
|
||
<span style="color:#B0BAC7">■ Ready 31%</span>
|
||
<span style="color:#FFAB00">■ Needs Review 7%</span>
|
||
<span style="color:var(--red)">■ Blocked 3%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-seg green" style="width:29%"></div>
|
||
<div class="progress-seg" style="width:31%;background:var(--green);opacity:0.4"></div>
|
||
<div class="progress-seg gray" style="width:31%"></div>
|
||
<div class="progress-seg amber" style="width:7%"></div>
|
||
<div class="progress-seg red" style="width:3%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
|
||
<!-- Attention required -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="card-title">🚨 Requires Attention</span>
|
||
<button class="btn btn-ghost btn-sm" onclick="showScreen('issues')">View All Issues →</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="attention-list">
|
||
<div class="attention-item blocker">
|
||
<span class="attention-icon">🚫</span>
|
||
<div>
|
||
<div class="attention-name">Master Services Agreement</div>
|
||
<div class="attention-detail">No PDF document attached — cannot migrate until document is linked in Adobe Sign</div>
|
||
</div>
|
||
<div class="attention-action"><button class="btn btn-secondary btn-sm" onclick="showScreen('detail')">View</button></div>
|
||
</div>
|
||
<div class="attention-item blocker">
|
||
<span class="attention-icon">🚫</span>
|
||
<div>
|
||
<div class="attention-name">NDA - Multi-party (3 signers)</div>
|
||
<div class="attention-detail">Recipient routing order has gaps: roles jump from 1 → 3, missing role 2</div>
|
||
</div>
|
||
<div class="attention-action"><button class="btn btn-secondary btn-sm" onclick="showScreen('detail')">View</button></div>
|
||
</div>
|
||
<div class="attention-item warning">
|
||
<span class="attention-icon">⚠️</span>
|
||
<div>
|
||
<div class="attention-name">Sales Commission Agreement</div>
|
||
<div class="attention-detail">8 conditional SHOW/HIDE rules — only SHOW conditions supported in DocuSign</div>
|
||
</div>
|
||
<div class="attention-action"><button class="btn btn-secondary btn-sm" onclick="showScreen('detail')">View</button></div>
|
||
</div>
|
||
<div class="attention-item warning">
|
||
<span class="attention-icon">⚠️</span>
|
||
<div>
|
||
<div class="attention-name">Employee Onboarding Form</div>
|
||
<div class="attention-detail">3 JavaScript-calculated fields (auto-sum) — no DocuSign equivalent</div>
|
||
</div>
|
||
<div class="attention-action"><button class="btn btn-secondary btn-sm">View</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Recent activity -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="card-title">Recent Activity</span>
|
||
<button class="btn btn-ghost btn-sm" onclick="showScreen('history')">Full History →</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="activity-item">
|
||
<div class="activity-dot green"></div>
|
||
<div class="activity-text"><strong>Batch migration completed</strong> — 47 templates migrated, 2 warnings</div>
|
||
<div class="activity-time">2h ago</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-dot green"></div>
|
||
<div class="activity-text"><strong>Verification passed</strong> — Purchase Order v3 · test envelope sent successfully</div>
|
||
<div class="activity-time">3h ago</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-dot amber"></div>
|
||
<div class="activity-text"><strong>Migration with warnings</strong> — Sales Commission Agreement · 3 conditional rules skipped</div>
|
||
<div class="activity-time">3h ago</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-dot red"></div>
|
||
<div class="activity-text"><strong>Migration blocked</strong> — Master Services Agreement · no document attached</div>
|
||
<div class="activity-time">4h ago</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-dot blue"></div>
|
||
<div class="activity-text"><strong>Analysis completed</strong> — 312 templates scanned, 29 issues found</div>
|
||
<div class="activity-time">5h ago</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-dot green"></div>
|
||
<div class="activity-text"><strong>Session started</strong> — Connected to Acme Corporation Adobe Sign account</div>
|
||
<div class="activity-time">5h ago</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /dashboard -->
|
||
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
SCREEN: TEMPLATES
|
||
═══════════════════════════════════════ -->
|
||
<div class="screen" id="screen-templates">
|
||
<div class="page-header">
|
||
<div>
|
||
<div class="page-title">Templates</div>
|
||
<div class="page-subtitle">312 templates from Adobe Sign · Select templates to migrate</div>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn btn-secondary btn-sm">⬇ Export List</button>
|
||
<button class="btn btn-secondary btn-sm">🔍 Analyze All</button>
|
||
<button class="btn btn-primary" onclick="showBulkBar()">▶ Migrate Selected</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-bar">
|
||
<input class="search-input" type="text" placeholder="Search templates…" oninput="filterBySearch(this.value)">
|
||
<div class="filter-tabs" id="filter-tabs">
|
||
<div class="filter-tab active" onclick="setFilter(this,'all')">All <span class="tab-count">312</span></div>
|
||
<div class="filter-tab" onclick="setFilter(this,'ready')">✅ Ready <span class="tab-count">96</span></div>
|
||
<div class="filter-tab" onclick="setFilter(this,'migrated')">✓ Migrated <span class="tab-count">187</span></div>
|
||
<div class="filter-tab" onclick="setFilter(this,'caveats')">⚠ Caveats <span class="tab-count">21</span></div>
|
||
<div class="filter-tab" onclick="setFilter(this,'blocked')">🚫 Blocked <span class="tab-count">8</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="bulk-bar" style="display:none">
|
||
<div class="bulk-bar">
|
||
<span class="bulk-bar-text" id="bulk-count">3 templates selected</span>
|
||
<button class="btn btn-secondary btn-sm">▷ Dry Run</button>
|
||
<button class="btn btn-primary btn-sm" onclick="showScreen('results')">▶ Migrate Now</button>
|
||
<button class="btn btn-ghost btn-sm" onclick="hideBulkBar()">✕ Deselect</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="table-wrap">
|
||
<table id="templates-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:32px"><input type="checkbox" class="cb" onchange="selectAll(this)"></th>
|
||
<th>Template Name</th>
|
||
<th>Fields</th>
|
||
<th>Recipients</th>
|
||
<th>Readiness</th>
|
||
<th>Status</th>
|
||
<th>Issues</th>
|
||
<th>Modified</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><input type="checkbox" class="cb row-cb" onchange="countChecked()"></td>
|
||
<td><div class="table-name" onclick="showScreen('detail')">David Tag Demo Form</div><div class="table-sub">ID: CBJCHBCA_abc123</div></td>
|
||
<td>14</td><td>2</td>
|
||
<td><span class="badge badge-green"><span class="badge-dot"></span>Ready</span></td>
|
||
<td><span class="badge badge-gray">Not Started</span></td>
|
||
<td><span class="issue-count no-issues">✓ None</span></td>
|
||
<td style="color:var(--text-muted);font-size:12px">Apr 15</td>
|
||
<td><button class="btn btn-ghost btn-sm" onclick="showScreen('detail')">Analyze →</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="cb row-cb" onchange="countChecked()"></td>
|
||
<td><div class="table-name" onclick="showScreen('detail')">NDA — Standard</div><div class="table-sub">ID: CBJCHBCA_def456</div></td>
|
||
<td>9</td><td>2</td>
|
||
<td><span class="badge badge-green"><span class="badge-dot"></span>Ready</span></td>
|
||
<td><span class="badge badge-blue">Migrated</span></td>
|
||
<td><span class="issue-count no-issues">✓ None</span></td>
|
||
<td style="color:var(--text-muted);font-size:12px">Apr 17</td>
|
||
<td><button class="btn btn-ghost btn-sm">View in DS →</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="cb row-cb" onchange="countChecked()"></td>
|
||
<td><div class="table-name" onclick="showScreen('detail')">Sales Commission Agreement</div><div class="table-sub">ID: CBJCHBCA_ghi789</div></td>
|
||
<td>28</td><td>3</td>
|
||
<td><span class="badge badge-amber"><span class="badge-dot"></span>Caveats</span></td>
|
||
<td><span class="badge badge-blue">Migrated</span></td>
|
||
<td><span class="issue-count has-issues" onclick="showScreen('issues')">⚠ 5 warnings</span></td>
|
||
<td style="color:var(--text-muted);font-size:12px">Apr 10</td>
|
||
<td><button class="btn btn-ghost btn-sm" onclick="showScreen('detail')">View Detail →</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="cb row-cb" onchange="countChecked()"></td>
|
||
<td><div class="table-name">Master Services Agreement</div><div class="table-sub">ID: CBJCHBCA_jkl012</div></td>
|
||
<td>—</td><td>—</td>
|
||
<td><span class="badge badge-red">🚫 Blocked</span></td>
|
||
<td><span class="badge badge-gray">Not Started</span></td>
|
||
<td><span class="issue-count blocked">🚫 1 blocker</span></td>
|
||
<td style="color:var(--text-muted);font-size:12px">Mar 29</td>
|
||
<td><button class="btn btn-ghost btn-sm" onclick="showScreen('detail')">View Blockers →</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="cb row-cb" onchange="countChecked()"></td>
|
||
<td><div class="table-name">Purchase Order v3</div><div class="table-sub">ID: CBJCHBCA_mno345</div></td>
|
||
<td>18</td><td>2</td>
|
||
<td><span class="badge badge-green"><span class="badge-dot"></span>Ready</span></td>
|
||
<td><span class="badge badge-green">✓ Verified</span></td>
|
||
<td><span class="issue-count no-issues">✓ None</span></td>
|
||
<td style="color:var(--text-muted);font-size:12px">Apr 18</td>
|
||
<td><button class="btn btn-ghost btn-sm">View in DS →</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="cb row-cb" onchange="countChecked()"></td>
|
||
<td><div class="table-name">Employee Onboarding Form</div><div class="table-sub">ID: CBJCHBCA_pqr678</div></td>
|
||
<td>42</td><td>1</td>
|
||
<td><span class="badge badge-amber"><span class="badge-dot"></span>Caveats</span></td>
|
||
<td><span class="badge badge-gray">Not Started</span></td>
|
||
<td><span class="issue-count has-issues" onclick="showScreen('issues')">⚠ 3 warnings</span></td>
|
||
<td style="color:var(--text-muted);font-size:12px">Apr 5</td>
|
||
<td><button class="btn btn-ghost btn-sm" onclick="showScreen('detail')">Analyze →</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="cb row-cb" onchange="countChecked()"></td>
|
||
<td><div class="table-name">Vendor Contract — Short Form</div><div class="table-sub">ID: CBJCHBCA_stu901</div></td>
|
||
<td>11</td><td>2</td>
|
||
<td><span class="badge badge-green"><span class="badge-dot"></span>Ready</span></td>
|
||
<td><span class="badge badge-gray">Not Started</span></td>
|
||
<td><span class="issue-count no-issues">✓ None</span></td>
|
||
<td style="color:var(--text-muted);font-size:12px">Apr 12</td>
|
||
<td><button class="btn btn-ghost btn-sm" onclick="showScreen('detail')">Analyze →</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="cb row-cb" onchange="countChecked()"></td>
|
||
<td><div class="table-name">Client Proposal Sign-off</div><div class="table-sub">ID: CBJCHBCA_vwx234</div></td>
|
||
<td>6</td><td>1</td>
|
||
<td><span class="badge badge-green"><span class="badge-dot"></span>Ready</span></td>
|
||
<td><span class="badge badge-blue">Migrated</span></td>
|
||
<td><span class="issue-count no-issues">✓ None</span></td>
|
||
<td style="color:var(--text-muted);font-size:12px">Apr 19</td>
|
||
<td><button class="btn btn-ghost btn-sm">View in DS →</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted)">
|
||
<span>Showing 8 of 312 templates</span>
|
||
<div style="display:flex;gap:6px">
|
||
<button class="btn btn-secondary btn-sm">← Prev</button>
|
||
<button class="btn btn-secondary btn-sm" style="background:var(--blue);color:#fff;border-color:var(--blue)">1</button>
|
||
<button class="btn btn-secondary btn-sm">2</button>
|
||
<button class="btn btn-secondary btn-sm">3</button>
|
||
<span style="padding:5px 8px">…</span>
|
||
<button class="btn btn-secondary btn-sm">39</button>
|
||
<button class="btn btn-secondary btn-sm">Next →</button>
|
||
</div>
|
||
<span>25 per page</span>
|
||
</div>
|
||
</div>
|
||
</div><!-- /templates -->
|
||
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
SCREEN: TEMPLATE DETAIL
|
||
═══════════════════════════════════════ -->
|
||
<div class="screen" id="screen-detail">
|
||
<div class="page-header">
|
||
<div>
|
||
<div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;cursor:pointer" onclick="showScreen('templates')">← Back to Templates</div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div class="page-title">Sales Commission Agreement</div>
|
||
<span class="badge badge-amber"><span class="badge-dot"></span>Caveats — migrates with warnings</span>
|
||
</div>
|
||
<div class="page-subtitle">Adobe Sign ID: CBJCHBCA_ghi789 · 28 fields · 3 recipients · Modified Apr 10, 2026</div>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn btn-secondary">▷ Dry Run</button>
|
||
<button class="btn btn-primary" onclick="showScreen('results')">▶ Migrate Template</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="two-col">
|
||
<!-- Left: tabs + content -->
|
||
<div>
|
||
<div class="tabs">
|
||
<div class="tab active" onclick="showTab(this,'tab-overview')">Overview</div>
|
||
<div class="tab" onclick="showTab(this,'tab-fields')">Field Mapping <span style="font-size:11px;color:var(--amber)">(2 warnings)</span></div>
|
||
<div class="tab" onclick="showTab(this,'tab-issues')">Issues & Caveats <span style="font-size:11px;color:var(--amber)">(5)</span></div>
|
||
<div class="tab" onclick="showTab(this,'tab-verify')">Verification</div>
|
||
</div>
|
||
|
||
<!-- Tab: Overview -->
|
||
<div id="tab-overview">
|
||
<div class="three-col-stats">
|
||
<div class="mini-stat">
|
||
<div class="mini-stat-val">28</div>
|
||
<div class="mini-stat-label">Fields</div>
|
||
</div>
|
||
<div class="mini-stat green">
|
||
<div class="mini-stat-val">24</div>
|
||
<div class="mini-stat-label">Map cleanly</div>
|
||
</div>
|
||
<div class="mini-stat amber">
|
||
<div class="mini-stat-val">4</div>
|
||
<div class="mini-stat-label">Need attention</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header"><span class="card-title">Recipient Roles</span></div>
|
||
<div class="card-body">
|
||
<table>
|
||
<tr><th>Order</th><th>Role Name</th><th>Action</th><th>Fields Assigned</th></tr>
|
||
<tr><td>1</td><td>Sales Rep</td><td><span class="tag">SIGN</span></td><td>11 fields</td></tr>
|
||
<tr><td>2</td><td>Customer</td><td><span class="tag">SIGN</span></td><td>13 fields</td></tr>
|
||
<tr><td>3</td><td>Finance Approver</td><td><span class="tag">APPROVE</span></td><td>4 fields</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header"><span class="card-title">DocuSign Target</span></div>
|
||
<div class="card-body">
|
||
<div style="display:flex;align-items:center;gap:16px">
|
||
<div>
|
||
<div style="font-size:12px;color:var(--text-muted);margin-bottom:4px">Will be created in:</div>
|
||
<div style="font-weight:600">Migrated Templates / Sales</div>
|
||
</div>
|
||
<div style="margin-left:auto">
|
||
<span class="badge badge-blue">✓ Migrated Apr 10</span>
|
||
</div>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div style="font-size:12px;color:var(--text-muted)">DocuSign Template ID</div>
|
||
<div class="mono" style="margin-top:4px">a4b8c2d1-9f3e-4a2b-8c1d-7e6f5a4b3c2d</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab: Field Mapping -->
|
||
<div id="tab-fields" style="display:none">
|
||
<div class="callout info"><span class="callout-icon">ℹ️</span>28 fields analyzed. 24 map directly to DocuSign tabs. 2 map with caveats. 2 are skipped.</div>
|
||
<div class="card">
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr><th>Adobe Sign Field</th><th>Type</th><th></th><th>DocuSign Tab</th><th>Result</th></tr></thead>
|
||
<tbody class="mapping-row">
|
||
<tr><td>signature_sales_rep</td><td><span class="tag">SIGNATURE</span></td><td class="arrow">→</td><td>signHereTabs</td><td><span class="map-ok">✓ Direct</span></td></tr>
|
||
<tr><td>signature_customer</td><td><span class="tag">SIGNATURE</span></td><td class="arrow">→</td><td>signHereTabs</td><td><span class="map-ok">✓ Direct</span></td></tr>
|
||
<tr><td>date_signed</td><td><span class="tag">DATE</span></td><td class="arrow">→</td><td>dateSignedTabs</td><td><span class="map-ok">✓ Direct</span></td></tr>
|
||
<tr><td>customer_name</td><td><span class="tag">TEXT</span></td><td class="arrow">→</td><td>textTabs</td><td><span class="map-ok">✓ Direct</span></td></tr>
|
||
<tr><td>commission_rate</td><td><span class="tag">TEXT</span> <span class="tag">CALCULATED</span></td><td class="arrow">→</td><td>textTabs</td><td><span class="map-warn">⚠ No calculation</span></td></tr>
|
||
<tr><td>total_commission</td><td><span class="tag">TEXT</span> <span class="tag">CALCULATED</span></td><td class="arrow">→</td><td>textTabs</td><td><span class="map-warn">⚠ No calculation</span></td></tr>
|
||
<tr><td>conditional_bonus</td><td><span class="tag">TEXT</span> <span class="tag">COND:HIDE</span></td><td class="arrow">→</td><td>textTabs</td><td><span class="map-warn">⚠ HIDE skipped</span></td></tr>
|
||
<tr><td>js_validator_field</td><td><span class="tag">TEXT</span> <span class="tag">JS</span></td><td class="arrow">→</td><td>textTabs</td><td><span class="map-warn">⚠ No JS validation</span></td></tr>
|
||
<tr><td>inline_logo</td><td><span class="tag">INLINE_IMAGE</span></td><td class="arrow">→</td><td>—</td><td><span class="map-skip">✕ Skipped</span></td></tr>
|
||
<tr><td>participation_stamp</td><td><span class="tag">PARTICIPATION</span></td><td class="arrow">→</td><td>—</td><td><span class="map-skip">✕ Skipped</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab: Issues -->
|
||
<div id="tab-issues" style="display:none">
|
||
<div class="callout warn"><span class="callout-icon">⚠️</span>5 issues found. None are blockers — this template <strong>can be migrated</strong>, but some features will behave differently in DocuSign. Review each issue below before proceeding.</div>
|
||
<div class="card">
|
||
<div class="card-body" style="padding:4px 20px">
|
||
<div class="issue-row">
|
||
<span class="issue-severity warn">WARNING</span>
|
||
<div class="issue-body">
|
||
<div class="issue-title">Conditional HIDE actions (2 fields)</div>
|
||
<div class="issue-desc">Fields <span class="mono">conditional_bonus</span>, <span class="mono">optional_clause</span> use HIDE conditions. DocuSign only supports SHOW conditions — these fields will always be visible to signers.</div>
|
||
<div class="issue-fix">Manual fix: In DocuSign, re-implement as conditional SHOW on the parent field instead of HIDE on the child.</div>
|
||
</div>
|
||
</div>
|
||
<div class="issue-row">
|
||
<span class="issue-severity warn">WARNING</span>
|
||
<div class="issue-body">
|
||
<div class="issue-title">Calculated fields (2 fields)</div>
|
||
<div class="issue-desc">Fields <span class="mono">commission_rate</span> and <span class="mono">total_commission</span> use auto-calculation formulas. DocuSign does not support calculated fields — these will be migrated as plain text fields. Signers must enter values manually.</div>
|
||
<div class="issue-fix">Manual fix: Use DocuSign formulas feature (if available on your plan) or convert to a pre-filled text field.</div>
|
||
</div>
|
||
</div>
|
||
<div class="issue-row">
|
||
<span class="issue-severity warn">WARNING</span>
|
||
<div class="issue-body">
|
||
<div class="issue-title">JavaScript field validator (1 field)</div>
|
||
<div class="issue-desc">Field <span class="mono">js_validator_field</span> has a custom JavaScript validation rule. DocuSign does not support JavaScript validators. The field will be migrated without validation.</div>
|
||
<div class="issue-fix">Manual fix: Use DocuSign's built-in regex validation or number/date format constraints as a substitute.</div>
|
||
</div>
|
||
</div>
|
||
<div class="issue-row">
|
||
<span class="issue-severity info">INFO</span>
|
||
<div class="issue-body">
|
||
<div class="issue-title">INLINE_IMAGE field skipped</div>
|
||
<div class="issue-desc">Field <span class="mono">inline_logo</span> is a static image embedded in the form. DocuSign has no equivalent tab type — this field is skipped. The image is part of the PDF itself and will appear correctly.</div>
|
||
</div>
|
||
</div>
|
||
<div class="issue-row">
|
||
<span class="issue-severity info">INFO</span>
|
||
<div class="issue-body">
|
||
<div class="issue-title">PARTICIPATION_STAMP field skipped</div>
|
||
<div class="issue-desc">Field <span class="mono">participation_stamp</span> has no DocuSign equivalent and is skipped. The signer will not see a stamp placement option.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab: Verification -->
|
||
<div id="tab-verify" style="display:none">
|
||
<div class="callout success"><span class="callout-icon">✅</span>Verification completed. DocuSign template is functional. 1 manual follow-up needed.</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="card-title">Verification Results</span>
|
||
<span style="font-size:12px;color:var(--text-muted)">Run Apr 10, 2026 at 3:42 PM</span>
|
||
</div>
|
||
<div class="card-body" style="padding:4px 20px">
|
||
<div class="verify-step">
|
||
<div class="verify-icon pass">✓</div>
|
||
<div>
|
||
<div class="verify-title">Template exists in DocuSign</div>
|
||
<div class="verify-sub">Found template ID: <span class="mono">a4b8c2d1-9f3e-4a2b-8c1d-7e6f5a4b3c2d</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="verify-step">
|
||
<div class="verify-icon pass">✓</div>
|
||
<div>
|
||
<div class="verify-title">Field count matches</div>
|
||
<div class="verify-sub">26 tabs in DocuSign · 28 Adobe fields (2 skipped intentionally)</div>
|
||
</div>
|
||
</div>
|
||
<div class="verify-step">
|
||
<div class="verify-icon pass">✓</div>
|
||
<div>
|
||
<div class="verify-title">All recipients present</div>
|
||
<div class="verify-sub">3 recipient roles in correct routing order (Sales Rep → Customer → Finance Approver)</div>
|
||
</div>
|
||
</div>
|
||
<div class="verify-step">
|
||
<div class="verify-icon pass">✓</div>
|
||
<div>
|
||
<div class="verify-title">Test envelope sent successfully</div>
|
||
<div class="verify-sub">Envelope ID: <span class="mono">env_7f2a1b3c</span> · Delivered to test recipients · Signing flow completed</div>
|
||
</div>
|
||
</div>
|
||
<div class="verify-step">
|
||
<div class="verify-icon fail">✗</div>
|
||
<div>
|
||
<div class="verify-title">Manual review recommended</div>
|
||
<div class="verify-sub" style="color:var(--amber)">2 conditional HIDE rules were not replicated. Test the signing experience to confirm signer sees correct fields.</div>
|
||
</div>
|
||
<div style="margin-left:auto"><button class="btn btn-secondary btn-sm">Open in DocuSign →</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;margin-top:12px">
|
||
<button class="btn btn-secondary">↺ Re-run Verification</button>
|
||
<button class="btn btn-primary" style="margin-left:8px">Send Test Envelope Again</button>
|
||
</div>
|
||
</div>
|
||
</div><!-- /left col -->
|
||
|
||
<!-- Right: migration options panel -->
|
||
<div>
|
||
<div class="options-panel">
|
||
<div class="options-title">Migration Options</div>
|
||
<div class="option-row">
|
||
<div class="option-toggle" onclick="toggleOption(this)"></div>
|
||
<div>
|
||
<div class="option-label">Dry Run</div>
|
||
<div class="option-desc">Validate & compose without uploading to DocuSign</div>
|
||
</div>
|
||
</div>
|
||
<div class="option-row">
|
||
<div class="option-toggle on" onclick="toggleOption(this)"></div>
|
||
<div>
|
||
<div class="option-label">Include Documents</div>
|
||
<div class="option-desc">Embed the original PDF in the DocuSign template</div>
|
||
</div>
|
||
</div>
|
||
<div class="option-row">
|
||
<div class="option-toggle" onclick="toggleOption(this)"></div>
|
||
<div>
|
||
<div class="option-label">Overwrite if Exists</div>
|
||
<div class="option-desc">Replace an existing DocuSign template with the same name</div>
|
||
</div>
|
||
</div>
|
||
<div class="option-row">
|
||
<div>
|
||
<div class="option-label">Target Folder</div>
|
||
<div class="option-desc" style="margin-bottom:6px">Where to create the template in DocuSign</div>
|
||
<select class="option-select" style="width:100%">
|
||
<option>Migrated Templates</option>
|
||
<option>Migrated Templates / Sales</option>
|
||
<option>Migrated Templates / HR</option>
|
||
<option>Root</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" style="margin-bottom:0">
|
||
<div class="card-header"><span class="card-title">Pre-migration Checklist</span></div>
|
||
<div class="card-body" style="padding:10px 16px">
|
||
<div style="display:flex;gap:8px;align-items:center;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border)"><span style="color:var(--green)">✓</span> PDF document attached</div>
|
||
<div style="display:flex;gap:8px;align-items:center;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border)"><span style="color:var(--green)">✓</span> All fields have roles assigned</div>
|
||
<div style="display:flex;gap:8px;align-items:center;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border)"><span style="color:var(--green)">✓</span> Recipient routing is sequential</div>
|
||
<div style="display:flex;gap:8px;align-items:center;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border)"><span style="color:var(--amber)">⚠</span> 2 conditional HIDE rules will be lost</div>
|
||
<div style="display:flex;gap:8px;align-items:center;padding:7px 0;font-size:13px"><span style="color:var(--amber)">⚠</span> 2 calculated fields become plain text</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /right col -->
|
||
</div>
|
||
</div><!-- /detail -->
|
||
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
SCREEN: MIGRATION RESULTS
|
||
═══════════════════════════════════════ -->
|
||
<div class="screen" id="screen-results">
|
||
<div class="page-header">
|
||
<div>
|
||
<div class="page-title">Migration Results</div>
|
||
<div class="page-subtitle">Batch job completed · Apr 21, 2026 4:12 PM · 8 templates</div>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn btn-secondary btn-sm">⬇ Export Report</button>
|
||
<button class="btn btn-primary btn-sm" onclick="showScreen('verification')">▶ Run Verification</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-grid" style="grid-template-columns:repeat(4,1fr)">
|
||
<div class="stat-card green"><div class="stat-label">Succeeded</div><div class="stat-value">5</div><div class="stat-sub">ready to verify</div></div>
|
||
<div class="stat-card amber"><div class="stat-label">With Warnings</div><div class="stat-value">2</div><div class="stat-sub">review recommended</div></div>
|
||
<div class="stat-card red"><div class="stat-label">Blocked</div><div class="stat-value">1</div><div class="stat-sub">manual fix needed</div></div>
|
||
<div class="stat-card gray"><div class="stat-label">Skipped</div><div class="stat-value">0</div><div class="stat-sub">already migrated</div></div>
|
||
</div>
|
||
|
||
<div class="callout warn">
|
||
<span class="callout-icon">⚠️</span>
|
||
<div><strong>Action required:</strong> "Master Services Agreement" was blocked due to a missing PDF document. Fix in Adobe Sign and re-run migration. "Sales Commission Agreement" migrated with 5 warnings — review the Issues tab before sending envelopes.</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-body" style="padding:8px 16px">
|
||
|
||
<div class="result-row" style="border-left:3px solid var(--green)">
|
||
<div class="result-header" onclick="toggleResult(this)">
|
||
<span class="result-icon">✅</span>
|
||
<div class="result-name">David Tag Demo Form</div>
|
||
<span class="badge badge-green" style="margin-left:8px">Success</span>
|
||
<div class="result-meta" style="margin-left:auto">14 fields · 2 recipients</div>
|
||
<span style="margin-left:16px;color:var(--text-muted);font-size:12px">▼</span>
|
||
</div>
|
||
<div class="result-body">
|
||
<div style="display:flex;gap:24px;font-size:12px;color:var(--text-muted);margin-bottom:8px">
|
||
<span>DocuSign ID: <span class="mono">b5c9d3e2-0a4f-5b3c-9d2e-8f7a6b5c4d3e</span></span>
|
||
<span>Action: created</span>
|
||
<span>Duration: 2.1s</span>
|
||
</div>
|
||
<a class="ds-link" href="#">Open in DocuSign ↗</a>
|
||
<button class="btn btn-secondary btn-sm" style="margin-left:12px" onclick="showScreen('verification')">Verify Now</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="result-row open" style="border-left:3px solid #FFAB00">
|
||
<div class="result-header" onclick="toggleResult(this)">
|
||
<span class="result-icon">⚠️</span>
|
||
<div class="result-name">Sales Commission Agreement</div>
|
||
<span class="badge badge-amber" style="margin-left:8px">5 Warnings</span>
|
||
<div class="result-meta" style="margin-left:auto">28 fields · 3 recipients</div>
|
||
<span style="margin-left:16px;color:var(--text-muted);font-size:12px">▲</span>
|
||
</div>
|
||
<div class="result-body">
|
||
<div style="display:flex;gap:24px;font-size:12px;color:var(--text-muted);margin-bottom:10px">
|
||
<span>DocuSign ID: <span class="mono">a4b8c2d1-9f3e-4a2b-8c1d-7e6f5a4b3c2d</span></span>
|
||
<span>Action: updated</span>
|
||
</div>
|
||
<div style="font-size:12px;font-weight:700;margin-bottom:6px;color:var(--text-muted)">WARNINGS — review before using this template:</div>
|
||
<div class="result-warn-item"><span class="ri">⚠</span>2 conditional HIDE rules skipped — fields will always be visible to signers</div>
|
||
<div class="result-warn-item"><span class="ri">⚠</span>2 calculated fields converted to plain text — signers must enter values manually</div>
|
||
<div class="result-warn-item"><span class="ri">⚠</span>1 JavaScript validator removed — field accepts any input</div>
|
||
<div class="result-warn-item"><span class="ri">ℹ</span>INLINE_IMAGE field skipped (expected — no DocuSign equivalent)</div>
|
||
<div class="result-warn-item"><span class="ri">ℹ</span>PARTICIPATION_STAMP field skipped (expected)</div>
|
||
<div style="margin-top:12px;display:flex;gap:8px">
|
||
<a class="ds-link" href="#">Open in DocuSign ↗</a>
|
||
<button class="btn btn-secondary btn-sm" style="margin-left:4px" onclick="showScreen('detail')">View Field Detail</button>
|
||
<button class="btn btn-primary btn-sm" onclick="showScreen('verification')">Run Verification</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="result-row" style="border-left:3px solid var(--green)">
|
||
<div class="result-header" onclick="toggleResult(this)">
|
||
<span class="result-icon">✅</span>
|
||
<div class="result-name">Vendor Contract — Short Form</div>
|
||
<span class="badge badge-green" style="margin-left:8px">Success</span>
|
||
<div class="result-meta" style="margin-left:auto">11 fields · 2 recipients</div>
|
||
<span style="margin-left:16px;color:var(--text-muted);font-size:12px">▼</span>
|
||
</div>
|
||
<div class="result-body">
|
||
<a class="ds-link" href="#">Open in DocuSign ↗</a>
|
||
<button class="btn btn-secondary btn-sm" style="margin-left:12px" onclick="showScreen('verification')">Verify Now</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="result-row" style="border-left:3px solid var(--red)">
|
||
<div class="result-header" onclick="toggleResult(this)">
|
||
<span class="result-icon">🚫</span>
|
||
<div class="result-name">Master Services Agreement</div>
|
||
<span class="badge badge-red" style="margin-left:8px">Blocked</span>
|
||
<div class="result-meta" style="margin-left:auto">Not migrated</div>
|
||
<span style="margin-left:16px;color:var(--text-muted);font-size:12px">▼</span>
|
||
</div>
|
||
<div class="result-body">
|
||
<div style="color:var(--red);font-size:13px;font-weight:600;margin-bottom:6px">🚫 Blocker: No documents attached</div>
|
||
<div style="font-size:12px;color:var(--text-muted);margin-bottom:10px">This template has no PDF document linked in Adobe Sign. At least one document is required to create a DocuSign template. Fix in Adobe Sign, then re-run migration.</div>
|
||
<button class="btn btn-secondary btn-sm">↺ Retry After Fix</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="result-row" style="border-left:3px solid var(--green)">
|
||
<div class="result-header" onclick="toggleResult(this)">
|
||
<span class="result-icon">✅</span>
|
||
<div class="result-name">Employee Onboarding Form</div>
|
||
<span class="badge badge-amber" style="margin-left:8px">3 Warnings</span>
|
||
<div class="result-meta" style="margin-left:auto">42 fields · 1 recipient</div>
|
||
<span style="margin-left:16px;color:var(--text-muted);font-size:12px">▼</span>
|
||
</div>
|
||
<div class="result-body">
|
||
<div class="result-warn-item"><span class="ri">⚠</span>3 JavaScript validators removed</div>
|
||
<div style="margin-top:8px"><a class="ds-link" href="#">Open in DocuSign ↗</a></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div><!-- /results -->
|
||
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
SCREEN: ISSUES
|
||
═══════════════════════════════════════ -->
|
||
<div class="screen" id="screen-issues">
|
||
<div class="page-header">
|
||
<div>
|
||
<div class="page-title">Issues & Warnings</div>
|
||
<div class="page-subtitle">29 issues across 312 templates · 3 blockers · 26 warnings</div>
|
||
</div>
|
||
</div>
|
||
<div class="callout warn"><span class="callout-icon">⚠️</span>Blockers prevent migration and must be resolved in Adobe Sign first. Warnings allow migration to proceed but may affect signer experience — review each one.</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
|
||
<div class="card">
|
||
<div class="card-header"><span class="card-title" style="color:var(--red)">🚫 Blockers (3)</span></div>
|
||
<div class="card-body" style="padding:4px 20px">
|
||
<div class="issue-row"><span class="issue-severity warn" style="background:var(--red-bg);color:var(--red)">BLOCK</span>
|
||
<div class="issue-body"><div class="issue-title">Missing PDF document</div><div class="issue-desc">Master Services Agreement, Contractor Agreement v2, IP Assignment Form — no document attached</div><div class="issue-fix">Fix in Adobe Sign: attach a PDF to the template, then re-analyze.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header"><span class="card-title" style="color:var(--amber)">⚠ Feature Warnings (26)</span></div>
|
||
<div class="card-body" style="padding:4px 20px">
|
||
<div class="issue-row"><span class="issue-severity warn">WARNING</span>
|
||
<div class="issue-body"><div class="issue-title">Conditional HIDE actions</div><div class="issue-desc">14 templates · 31 fields — HIDE conditions are not supported. Fields will always be visible.</div></div>
|
||
</div>
|
||
<div class="issue-row"><span class="issue-severity warn">WARNING</span>
|
||
<div class="issue-body"><div class="issue-title">Calculated fields</div><div class="issue-desc">7 templates · 18 fields — auto-calculation formulas will be lost. Fields become plain text.</div></div>
|
||
</div>
|
||
<div class="issue-row"><span class="issue-severity warn">WARNING</span>
|
||
<div class="issue-body"><div class="issue-title">JavaScript validators</div><div class="issue-desc">5 templates · 9 fields — custom validation rules will be removed.</div></div>
|
||
</div>
|
||
<div class="issue-row"><span class="issue-severity info">INFO</span>
|
||
<div class="issue-body"><div class="issue-title">Skipped field types</div><div class="issue-desc">12 templates · INLINE_IMAGE and PARTICIPATION_STAMP fields have no DocuSign equivalent and are safely skipped.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
SCREEN: VERIFICATION
|
||
═══════════════════════════════════════ -->
|
||
<div class="screen" id="screen-verification">
|
||
<div class="page-header">
|
||
<div>
|
||
<div class="page-title">Post-Migration Verification</div>
|
||
<div class="page-subtitle">Automatically verify migrated templates by sending test envelopes</div>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn btn-primary">▶ Verify All Migrated</button>
|
||
</div>
|
||
</div>
|
||
<div class="callout info"><span class="callout-icon">ℹ️</span>Verification sends a test envelope using each DocuSign template to a sandbox address. It checks that the template is valid, all tabs render correctly, and signers can complete the signing flow.</div>
|
||
<div class="stat-grid" style="grid-template-columns:repeat(4,1fr)">
|
||
<div class="stat-card green"><div class="stat-label">Verified</div><div class="stat-value">97</div><div class="stat-sub">fully tested</div></div>
|
||
<div class="stat-card amber"><div class="stat-label">Partial Pass</div><div class="stat-value">12</div><div class="stat-sub">manual review needed</div></div>
|
||
<div class="stat-card red"><div class="stat-label">Failed</div><div class="stat-value">2</div><div class="stat-sub">signing flow broken</div></div>
|
||
<div class="stat-card gray"><div class="stat-label">Not Run</div><div class="stat-value">76</div><div class="stat-sub">pending verification</div></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header"><span class="card-title">Verification Queue</span></div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr><th>Template</th><th>Migration Status</th><th>Verification</th><th>Test Envelope</th><th>Actions</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div class="table-name" onclick="showScreen('detail')">Purchase Order v3</div></td>
|
||
<td><span class="badge badge-blue">Migrated</span></td>
|
||
<td><span class="badge badge-green">✓ Verified</span></td>
|
||
<td><span class="mono">env_7f2a1b3c</span></td>
|
||
<td><button class="btn btn-ghost btn-sm">↺ Re-verify</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="table-name">Sales Commission Agreement</div></td>
|
||
<td><span class="badge badge-blue">Migrated</span></td>
|
||
<td><span class="badge badge-amber">⚠ Partial</span></td>
|
||
<td><span class="mono">env_8a3b2c4d</span></td>
|
||
<td><button class="btn btn-ghost btn-sm" onclick="showScreen('detail')">Review Issues</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="table-name">David Tag Demo Form</div></td>
|
||
<td><span class="badge badge-blue">Migrated</span></td>
|
||
<td><span class="badge badge-gray">Pending</span></td>
|
||
<td>—</td>
|
||
<td><button class="btn btn-primary btn-sm">▶ Verify</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="table-name">Employee Onboarding Form</div></td>
|
||
<td><span class="badge badge-blue">Migrated</span></td>
|
||
<td><span class="badge badge-red">✗ Failed</span></td>
|
||
<td><span class="mono">env_9c4d3e5f</span></td>
|
||
<td><button class="btn btn-secondary btn-sm">View Error</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
SCREEN: HISTORY
|
||
═══════════════════════════════════════ -->
|
||
<div class="screen" id="screen-history">
|
||
<div class="page-header">
|
||
<div><div class="page-title">History & Audit Log</div>
|
||
<div class="page-subtitle">All migration runs for Acme Corporation</div></div>
|
||
<button class="btn btn-secondary btn-sm">⬇ Export Audit Log</button>
|
||
</div>
|
||
<div class="card">
|
||
<div class="table-wrap"><table>
|
||
<thead><tr><th>Timestamp</th><th>Run Type</th><th>Templates</th><th>Result</th><th>Operator</th><th>Actions</th></tr></thead>
|
||
<tbody>
|
||
<tr><td style="font-size:12px;color:var(--text-muted)">2026-04-21 16:12</td><td>Batch (8)</td><td>Sales Commission Agreement, David Tag Demo, +6</td><td><span class="badge badge-amber">5 migrated, 1 blocked, 2 warnings</span></td><td>Paul H.</td><td><button class="btn btn-ghost btn-sm" onclick="showScreen('results')">View →</button></td></tr>
|
||
<tr><td style="font-size:12px;color:var(--text-muted)">2026-04-21 14:05</td><td>Batch (47)</td><td>HR templates batch</td><td><span class="badge badge-green">45 migrated, 2 warnings</span></td><td>Paul H.</td><td><button class="btn btn-ghost btn-sm">View →</button></td></tr>
|
||
<tr><td style="font-size:12px;color:var(--text-muted)">2026-04-21 10:30</td><td>Single</td><td>Purchase Order v3</td><td><span class="badge badge-green">Success</span></td><td>Paul H.</td><td><button class="btn btn-ghost btn-sm">View →</button></td></tr>
|
||
<tr><td style="font-size:12px;color:var(--text-muted)">2026-04-20 09:15</td><td>Dry Run (100)</td><td>All templates</td><td><span class="badge badge-gray">Dry run — 8 blockers found</span></td><td>Paul H.</td><td><button class="btn btn-ghost btn-sm">View →</button></td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
SCREEN: SETTINGS
|
||
═══════════════════════════════════════ -->
|
||
<div class="screen" id="screen-settings">
|
||
<div class="page-header">
|
||
<div><div class="page-title">Settings & Connections</div></div>
|
||
</div>
|
||
|
||
<!-- Project context -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="card-title">Migration Project</span>
|
||
<span style="font-size:12px;color:var(--text-muted)">Each project is one customer engagement with its own credentials and history</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;font-size:13px;margin-bottom:14px">
|
||
<div><div style="color:var(--text-muted);margin-bottom:4px">Customer Name</div><input style="width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px" value="Acme Corporation"></div>
|
||
<div><div style="color:var(--text-muted);margin-bottom:4px">Project Label</div><input style="width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px" value="Q2 2026 Migration"></div>
|
||
<div><div style="color:var(--text-muted);margin-bottom:4px">Started</div><input style="width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px" value="Apr 21, 2026" readonly></div>
|
||
</div>
|
||
<div style="display:flex;gap:8px">
|
||
<button class="btn btn-primary btn-sm">Save Changes</button>
|
||
<button class="btn btn-secondary btn-sm" onclick="showProjectModal()">⇅ Switch Project</button>
|
||
<button class="btn btn-secondary btn-sm">+ New Project</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
|
||
<div class="card">
|
||
<div class="card-header"><span class="card-title">Adobe Sign Connection</span><span class="badge badge-green">● Connected</span></div>
|
||
<div class="card-body">
|
||
<div style="font-size:13px;margin-bottom:8px"><span style="color:var(--text-muted)">Account:</span> acme@corp.com (EU2 shard)</div>
|
||
<div style="font-size:13px;margin-bottom:12px"><span style="color:var(--text-muted)">Token expires:</span> 2026-04-21 18:30 UTC</div>
|
||
<button class="btn btn-secondary btn-sm" style="margin-right:8px">Refresh Token</button>
|
||
<button class="btn btn-danger btn-sm">Disconnect</button>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header"><span class="card-title">DocuSign Connection</span><span class="badge badge-green">● Connected</span></div>
|
||
<div class="card-body">
|
||
<div style="font-size:13px;margin-bottom:8px"><span style="color:var(--text-muted)">Account:</span> Acme Corp Sandbox (demo)</div>
|
||
<div style="font-size:13px;margin-bottom:12px"><span style="color:var(--text-muted)">Auth method:</span> JWT Grant</div>
|
||
<button class="btn btn-secondary btn-sm" style="margin-right:8px">Test Connection</button>
|
||
<button class="btn btn-danger btn-sm">Disconnect</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Verification settings -->
|
||
<div class="card">
|
||
<div class="card-header"><span class="card-title">Verification Settings</span><span style="font-size:12px;color:var(--text-muted)">Used when sending test envelopes to validate migrated templates</span></div>
|
||
<div class="card-body">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:13px;margin-bottom:14px">
|
||
<div>
|
||
<div style="color:var(--text-muted);margin-bottom:4px">Test Recipient Name</div>
|
||
<input style="width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px" value="Migration Test User" placeholder="e.g. QA Tester">
|
||
</div>
|
||
<div>
|
||
<div style="color:var(--text-muted);margin-bottom:4px">Test Recipient Email</div>
|
||
<input style="width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px" value="migration-test@yourcompany.com" placeholder="test@example.com">
|
||
</div>
|
||
<div>
|
||
<div style="color:var(--text-muted);margin-bottom:4px">Auto-void After</div>
|
||
<select style="width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px">
|
||
<option>1 hour</option>
|
||
<option selected>4 hours</option>
|
||
<option>24 hours</option>
|
||
<option>Never (void manually)</option>
|
||
</select>
|
||
<div style="font-size:11px;color:var(--text-muted);margin-top:4px">Test envelopes are voided automatically to keep the DocuSign account clean</div>
|
||
</div>
|
||
<div>
|
||
<div style="color:var(--text-muted);margin-bottom:4px">Verification Mode</div>
|
||
<select style="width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px">
|
||
<option selected>API only (check template is valid, no email sent)</option>
|
||
<option>Send test envelope (full signing flow)</option>
|
||
</select>
|
||
<div style="font-size:11px;color:var(--text-muted);margin-top:4px">API-only is faster; full envelope confirms the signing experience end-to-end</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm">Save Verification Settings</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /content -->
|
||
</div><!-- /main -->
|
||
|
||
<!-- ─────────────── PROJECT SWITCHER MODAL ─────────────── -->
|
||
<div id="project-modal" style="display:none;position:fixed;inset:0;background:rgba(12,35,64,0.55);z-index:1000;align-items:center;justify-content:center;">
|
||
<div style="background:#fff;border-radius:10px;width:480px;box-shadow:0 20px 60px rgba(12,35,64,0.25);overflow:hidden;">
|
||
<div style="padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;">
|
||
<div>
|
||
<div style="font-size:16px;font-weight:700;color:var(--text)">Migration Projects</div>
|
||
<div style="font-size:12px;color:var(--text-muted);margin-top:2px">Each project is one customer engagement. Switching loads that customer's connections and history.</div>
|
||
</div>
|
||
<button onclick="hideProjectModal()" style="background:none;border:none;font-size:20px;color:var(--text-muted);cursor:pointer;padding:4px;">✕</button>
|
||
</div>
|
||
<div style="padding:12px 16px;max-height:320px;overflow-y:auto;">
|
||
<!-- Active project -->
|
||
<div onclick="switchProject('Acme Corporation','AC','#F5A623')" style="display:flex;align-items:center;gap:12px;padding:12px;border-radius:6px;border:2px solid var(--blue);background:var(--blue-light);cursor:pointer;margin-bottom:8px;">
|
||
<div style="width:36px;height:36px;border-radius:6px;background:#F5A623;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0;">AC</div>
|
||
<div style="flex:1">
|
||
<div style="font-weight:700;font-size:14px;color:var(--text)">Acme Corporation</div>
|
||
<div style="font-size:12px;color:var(--text-muted)">Q2 2026 Migration · 312 templates · 60% complete</div>
|
||
</div>
|
||
<span style="font-size:11px;font-weight:700;color:var(--blue);background:var(--blue-light);padding:2px 8px;border-radius:10px;border:1px solid var(--blue);">Active</span>
|
||
</div>
|
||
<!-- Other projects -->
|
||
<div onclick="switchProject('Globex Industries','GI','#7C3AED')" style="display:flex;align-items:center;gap:12px;padding:12px;border-radius:6px;border:1px solid var(--border);cursor:pointer;margin-bottom:8px;" onmouseover="this.style.background='#F4F6F9'" onmouseout="this.style.background=''">
|
||
<div style="width:36px;height:36px;border-radius:6px;background:#7C3AED;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0;">GI</div>
|
||
<div style="flex:1">
|
||
<div style="font-weight:700;font-size:14px;color:var(--text)">Globex Industries</div>
|
||
<div style="font-size:12px;color:var(--text-muted)">Q1 2026 Migration · 87 templates · ✓ Completed</div>
|
||
</div>
|
||
<span style="font-size:11px;font-weight:700;color:var(--green);background:var(--green-bg);padding:2px 8px;border-radius:10px;">Done</span>
|
||
</div>
|
||
<div onclick="switchProject('Initech LLC','IN','#059669')" style="display:flex;align-items:center;gap:12px;padding:12px;border-radius:6px;border:1px solid var(--border);cursor:pointer;margin-bottom:8px;" onmouseover="this.style.background='#F4F6F9'" onmouseout="this.style.background=''">
|
||
<div style="width:36px;height:36px;border-radius:6px;background:#059669;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0;">IN</div>
|
||
<div style="flex:1">
|
||
<div style="font-weight:700;font-size:14px;color:var(--text)">Initech LLC</div>
|
||
<div style="font-size:12px;color:var(--text-muted)">Q2 2026 Migration · 204 templates · Not started</div>
|
||
</div>
|
||
<span style="font-size:11px;font-weight:700;color:var(--gray-text);background:#EDF0F4;padding:2px 8px;border-radius:10px;">Setup</span>
|
||
</div>
|
||
</div>
|
||
<div style="padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;">
|
||
<button onclick="hideProjectModal()" style="background:none;border:1px solid var(--border);padding:8px 16px;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text);">Cancel</button>
|
||
<button style="background:var(--blue);color:#fff;border:none;padding:8px 16px;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;">+ New Migration Project</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const screens = ['dashboard','templates','detail','results','issues','verification','history','settings'];
|
||
const navMap = { dashboard:'Dashboard', templates:'Templates', detail:'Templates', results:'Migration Results', issues:'Issues & Warnings', verification:'Verification', history:'History & Audit', settings:'Settings & Connections' };
|
||
const breadcrumbParents = { detail: { label: 'Templates', screen: 'templates' } };
|
||
|
||
function showScreen(name) {
|
||
screens.forEach(s => {
|
||
document.getElementById('screen-'+s).classList.toggle('active', s === name);
|
||
});
|
||
document.querySelectorAll('.nav-item').forEach(el => {
|
||
el.classList.toggle('active', el.textContent.trim().startsWith(navMap[name]?.split(' ')[0] || '___'));
|
||
});
|
||
const bcRoot = document.getElementById('bc-root');
|
||
const bcSep = document.getElementById('bc-sep');
|
||
const bcCurrent = document.getElementById('bc-current');
|
||
const parent = breadcrumbParents[name];
|
||
if (parent) {
|
||
bcRoot.textContent = parent.label;
|
||
bcRoot.style.cursor = 'pointer';
|
||
bcRoot.onclick = () => showScreen(parent.screen);
|
||
bcSep.style.display = '';
|
||
bcCurrent.textContent = navMap[name] || name;
|
||
} else {
|
||
bcRoot.textContent = navMap[name] || name;
|
||
bcRoot.style.cursor = 'default';
|
||
bcRoot.onclick = null;
|
||
bcSep.style.display = 'none';
|
||
bcCurrent.textContent = '';
|
||
}
|
||
// Highlight correct nav item
|
||
document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
|
||
const icons = { dashboard:'⊞', templates:'☰', results:'⬡', issues:'⚠', verification:'✓', history:'◷', settings:'⚙' };
|
||
const targetIcon = icons[name] || icons[breadcrumbParents[name]?.screen];
|
||
if (targetIcon) {
|
||
document.querySelectorAll('.nav-item').forEach(el => {
|
||
if (el.querySelector('.icon')?.textContent.trim() === targetIcon) {
|
||
el.classList.add('active');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
function showTab(el, tabId) {
|
||
document.querySelectorAll('.tabs .tab').forEach(t => t.classList.remove('active'));
|
||
el.classList.add('active');
|
||
const panel = el.closest('.screen') || el.closest('.two-col');
|
||
const allTabs = ['tab-overview','tab-fields','tab-issues','tab-verify'];
|
||
allTabs.forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el) el.style.display = (id === tabId) ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
function toggleResult(header) {
|
||
const row = header.closest('.result-row');
|
||
row.classList.toggle('open');
|
||
const arrow = header.querySelector('span:last-child');
|
||
arrow.textContent = row.classList.contains('open') ? '▲' : '▼';
|
||
}
|
||
|
||
function toggleOption(el) {
|
||
el.classList.toggle('on');
|
||
}
|
||
|
||
function showBulkBar() {
|
||
document.getElementById('bulk-bar').style.display = '';
|
||
}
|
||
function hideBulkBar() {
|
||
document.getElementById('bulk-bar').style.display = 'none';
|
||
document.querySelectorAll('.row-cb').forEach(cb => cb.checked = false);
|
||
}
|
||
|
||
function selectAll(cb) {
|
||
document.querySelectorAll('.row-cb').forEach(r => r.checked = cb.checked);
|
||
countChecked();
|
||
}
|
||
|
||
function countChecked() {
|
||
const n = document.querySelectorAll('.row-cb:checked').length;
|
||
if (n > 0) {
|
||
document.getElementById('bulk-bar').style.display = '';
|
||
document.getElementById('bulk-count').textContent = n + ' template' + (n === 1 ? '' : 's') + ' selected';
|
||
} else {
|
||
hideBulkBar();
|
||
}
|
||
}
|
||
|
||
function setFilter(el, filter) {
|
||
document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
|
||
el.classList.add('active');
|
||
}
|
||
|
||
function filterBySearch(val) {}
|
||
function filterTemplates(f) { showScreen('templates'); }
|
||
|
||
function showProjectModal() {
|
||
const m = document.getElementById('project-modal');
|
||
m.style.display = 'flex';
|
||
}
|
||
function hideProjectModal() {
|
||
document.getElementById('project-modal').style.display = 'none';
|
||
}
|
||
function switchProject(name, initials, color) {
|
||
// Update nav customer switcher
|
||
document.querySelector('.project-icon').textContent = initials;
|
||
document.querySelector('.project-icon').style.background = color;
|
||
document.querySelector('.project-name').textContent = name;
|
||
// Update dashboard subtitle
|
||
const sub = document.querySelector('#screen-dashboard .page-subtitle');
|
||
if (sub) sub.textContent = name + ' · loading template count…';
|
||
hideProjectModal();
|
||
showScreen('dashboard');
|
||
}
|
||
// Close modal on backdrop click
|
||
document.getElementById('project-modal').addEventListener('click', function(e) {
|
||
if (e.target === this) hideProjectModal();
|
||
});
|
||
|
||
showScreen('dashboard');
|
||
</script>
|
||
</body>
|
||
</html>
|