{"id":19695,"date":"2025-09-05T13:57:01","date_gmt":"2025-09-05T10:57:01","guid":{"rendered":"https:\/\/www.unhabitatyouth.org\/?page_id=19695"},"modified":"2025-09-05T15:48:13","modified_gmt":"2025-09-05T12:48:13","slug":"handover-form","status":"publish","type":"page","link":"https:\/\/www.unhabitatyouth.org\/es\/handover-form\/","title":{"rendered":"Handover Form"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\n

<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\n\n \n UN-Habitat Handover Note<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n <style>\n :root { --un-blue:#003366; --line:#d0d7de; --bg:#fafbfc; }\n html { scroll-behavior: smooth; }\n body { font-family: Arial, sans-serif; margin: 24px; max-width: 1100px; }\n h1, h2, h3, h4 { color: var(--un-blue); }\n h2 { margin: 8px 0; }\n h3 { margin: 16px 0 8px; }\n label { font-weight: 600; display: block; margin-top: 12px; }\n textarea, input, select { width: 100%; padding: 8px; margin-top: 6px; box-sizing: border-box; }\n textarea { min-height: 88px; resize: vertical; }\n .small { font-size: 12px; color:#555; }\n .section { margin: 28px 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }\n .toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top: 8px; }\n .notice { margin-top: 10px; font-size: 14px; }\n .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }\n .project-block { border: 1px solid var(--line); padding: 14px; margin-top: 16px; border-radius: 10px; background: var(--bg); }\n .project-actions { display:flex; gap:8px; margin-top:12px; justify-content: flex-end; }\n .btn { background: var(--un-blue); color: #fff; padding: 8px 12px; border: none; border-radius: 6px; cursor: pointer; }\n .btn:hover { filter: brightness(1.1); }\n .btn.ghost { background: transparent; color: var(--un-blue); border: 1px solid var(--un-blue); }\n .btn.small { padding: 6px 10px; font-size: 13px; }\n .btn.linklike { background: transparent; border: none; color: var(--un-blue); text-decoration: underline; padding: 0; }\n table { width: 100%; border-collapse: collapse; }\n th, td { border: 1px solid var(--line); padding: 8px; vertical-align: top; }\n th { background: #f3f4f6; text-align: left; }\n td input, td textarea { width: 100%; margin: 0; }\n .nowrap { white-space: nowrap; }\n .sublist { border: 1px dashed var(--line); padding: 10px; border-radius: 6px; background:#fff; margin-top:8px; }\n .subitem { border: 1px solid var(--line); border-radius: 6px; padding:10px; margin-top:8px; background:#f8fafc; }\n .subitem-actions { display:flex; gap:8px; margin-top:8px; }\n .index-list { list-style: none; padding-left: 0; }\n .index-list li { margin: 6px 0; }\n .chips { color:#444; font-size: 12px; }\n .chips a { color: #444; text-decoration: none; border-bottom: 1px dotted #aaa; margin-right: 8px; }\n .chips a:hover { color: var(--un-blue); }\n @media (max-width: 760px) { .row, .row-3 { grid-template-columns: 1fr; } }\n \n \n <\/style>\n \n \n<\/head>\n\n<body>\n <h2 id=\"top\">UN-Habitat Handover Note<\/h2>\n <p class=\"small\">Internal use. Avoid sensitive personal data. Store completed notes per records policy.<\/p>\n\n <form id=\"handover-form\" action=\"\">\n <!-- Header fields -->\n <div class=\"row\">\n <div>\n <label>Name<\/label>\n <input type=\"text\" name=\"name\" class= \"name\" id=\"name\" required>\n <\/div>\n <div>\n <label>Position<\/label>\n <input type=\"text\" name=\"position\" class= \"position\" id=\"position\" required>\n <\/div>\n <\/div>\n\n <div class=\"row\">\n <div>\n <label>Duty Station<\/label>\n <input type=\"text\" name=\"duty_station\" class= \"duty_station\" id=\"duty_station\" required>\n <\/div>\n <div>\n <label>Date of Handover<\/label>\n <input type=\"date\" name=\"handover_date\" class= \"handover_date\" id=\"handover_date\" required>\n <\/div>\n <\/div>\n\n <!-- Project Index -->\n <div id=\"project-index\" class=\"section\">\n <h3>Project Index<\/h3>\n <ul id=\"project-index-list\" class=\"index-list\"><\/ul>\n <\/div>\n\n <!-- Projects bundle section -->\n <div class=\"section\">\n <h3>Key Projects and Initiatives<\/h3>\n <div id=\"projects-container\"><\/div>\n <\/div>\n\n <!-- Bottom toolbar -->\n <div class=\"toolbar\" id=\"bottom-toolbar\">\n <button type=\"button\" class=\"btn\" id=\"add-project-btn\">+ Add another project<\/button>\n <button type=\"button\" class=\"btn\" id=\"update-index-btn\">Update Index<\/button>\n <button type=\"button\" class=\"btn\" id=\"download-json\">Download JSON<\/button>\n <button type=\"button\" class=\"btn\" id=\"download-html\">Download HTML<\/button>\n <button type=\"button\" class=\"btn ghost\" id=\"print-btn\">Print \/ Save to PDF<\/button>\n <button type=\"button\" class=\"btn\" id=\"save-to-projects\">Save to WordPress<\/button>\n <button type=\"reset\" class=\"btn ghost\">Clear<\/button>\n <span id=\"notice\" class=\"notice\"><\/span>\n <\/div>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"es\"\/><\/form>\n\n <!-- Project template (full bundle per project) -->\n <template id=\"project-template\">\n <div class=\"project-block\">\n <h3 class=\"project-title\">Project<\/h3>\n\n <div class=\"row\">\n <div>\n <label>Project Title<\/label>\n <input type=\"text\" name=\"project_title[]\" class=\"project-title-input\" required>\n <\/div>\n <div>\n <label>Link (if available)<\/label>\n <input type=\"url\" name=\"project_link[]\" placeholder=\"https:\/\/\">\n <\/div>\n <\/div>\n\n <!-- Key Partners (repeatable structured) -->\n <h4 id=\"sub-key-partners\">Key Partners \/ Donors<\/h4>\n <div class=\"sublist key-partners\"><\/div>\n <button type=\"button\" class=\"btn small ghost add-key-partner\">+ Add key partners \/ donors<\/button>\n\n <!-- Lead Partners (repeatable structured) -->\n <h4 id=\"sub-lead-partners\">Implementing Partners<\/h4>\n <div class=\"sublist lead-partners\"><\/div>\n <button type=\"button\" class=\"btn small ghost add-lead-partner\">+ Add implementing partners<\/button>\n\n <!-- Current Status (repeatable with dates) -->\n <h4 id=\"sub-current-status\">Current Status (with dates)<\/h4>\n <div class=\"sublist status-periods\"><\/div>\n <button type=\"button\" class=\"btn small ghost add-status\">+ Add status period<\/button>\n\n <!-- Contracts (per project) -->\n <h4 id=\"sub-contracts\">Contracts<\/h4>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn small add-contract\">+ Add contract<\/button>\n <button type=\"button\" class=\"btn small ghost import-contracts\">Import CSV<\/button>\n <input type=\"file\" class=\"contracts-csv-file\" accept=\".csv\" style=\"display:none\">\n <button type=\"button\" class=\"btn small ghost export-contracts\">Export CSV<\/button>\n <span class=\"small\">CSV: Organization, Type of Contract, Status, Start Date, End Date<\/span>\n <\/div>\n <div style=\"overflow:auto; margin-top:8px;\">\n <table class=\"contracts-table\">\n <thead>\n <tr>\n <th>Organization<\/th>\n <th>Type of Contract<\/th>\n <th>Status<\/th>\n <th>Start Date<\/th>\n <th>End Date<\/th>\n <th class=\"nowrap\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n\n <!-- Contacts (per project) -->\n <h4 id=\"sub-contacts\">Key Stakeholders and Contacts<\/h4>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn small add-contact\">+ Add contact<\/button>\n <button type=\"button\" class=\"btn small ghost import-contacts\">Import CSV<\/button>\n <input type=\"file\" class=\"contacts-csv-file\" accept=\".csv\" style=\"display:none\">\n <button type=\"button\" class=\"btn small ghost export-contacts\">Export CSV<\/button>\n <span class=\"small\">CSV: First Name, Last Name, Role, Organization, Email, Phone, Notes<\/span>\n <\/div>\n <div style=\"overflow:auto; margin-top:8px;\">\n <table class=\"contacts-table\">\n <thead>\n <tr>\n <th>First Name<\/th>\n <th>Last Name<\/th>\n <th>Role<\/th>\n <th>Organization<\/th>\n <th>Email<\/th>\n <th>Phone<\/th>\n <th>Notes<\/th>\n <th class=\"nowrap\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n\n <!-- Strategic (per project) -->\n <h4 id=\"sub-strategic\">Strategic Issues and Recommendations<\/h4>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn small add-strategic\">+ Add item<\/button>\n <button type=\"button\" class=\"btn small ghost import-strategic\">Import CSV<\/button>\n <input type=\"file\" class=\"strategic-csv-file\" accept=\".csv\" style=\"display:none\">\n <button type=\"button\" class=\"btn small ghost export-strategic\">Export CSV<\/button>\n <span class=\"small\">CSV: Risks, Opportunities, Decision Points in next 60-90 Days<\/span>\n <\/div>\n <div style=\"overflow:auto; margin-top:8px;\">\n <table class=\"strategic-table\">\n <thead>\n <tr>\n <th>Risks<\/th>\n <th>Opportunities<\/th>\n <th>Decision Points in next 60-90 Days<\/th>\n <th class=\"nowrap\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n\n <!-- Files (per project) -->\n <h4 id=\"sub-files\">Files and Knowledge Management<\/h4>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn small add-file\">+ Add file<\/button>\n <button type=\"button\" class=\"btn small ghost import-files\">Import CSV<\/button>\n <input type=\"file\" class=\"files-csv-file\" accept=\".csv\" style=\"display:none\">\n <button type=\"button\" class=\"btn small ghost export-files\">Export CSV<\/button>\n <span class=\"small\">CSV: Document Name, Link<\/span>\n <\/div>\n <div style=\"overflow:auto; margin-top:8px;\">\n <table class=\"files-table\">\n <thead>\n <tr>\n <th>Document Name<\/th>\n <th>Link<\/th>\n <th class=\"nowrap\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n\n <!-- Video Files (per project) -->\n <h4 id=\"sub-video-files\">Video File Management<\/h4>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn small add-video-file\">+ Add file<\/button>\n <button type=\"button\" class=\"btn small ghost import-video-files\">Import CSV<\/button>\n <input type=\"file\" class=\"files-csv-video-file\" accept=\".csv\" style=\"display:none\">\n <button type=\"button\" class=\"btn small ghost export-video-files\">Export CSV<\/button>\n <span class=\"small\">CSV: Document Name, Link<\/span>\n <\/div>\n <div style=\"overflow:auto; margin-top:8px;\">\n <table class=\"video-files-table\">\n <thead>\n <tr>\n <th>Document Name<\/th>\n <th>Link<\/th>\n <th class=\"nowrap\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n\n <!-- Media Files (per project) -->\n <h4 id=\"sub-media-files\">Media File Managment<\/h4>\n <div class=\"toolbar\">\n <button type=\"button\" class=\"btn small add-media-file\">+ Add file<\/button>\n <button type=\"button\" class=\"btn small ghost import-media-files\">Import CSV<\/button>\n <input type=\"file\" class=\"files-csv-media-file\" accept=\".csv\" style=\"display:none\">\n <button type=\"button\" class=\"btn small ghost export-media-files\">Export CSV<\/button>\n <span class=\"small\">CSV: Document Name, Link<\/span>\n <\/div>\n <div style=\"overflow:auto; margin-top:8px;\">\n <table class=\"media-files-table\">\n <thead>\n <tr>\n <th>Document Name<\/th>\n <th>Link<\/th>\n <th class=\"nowrap\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n\n <!-- Other Notes (per project) -->\n <h4 id=\"sub-other-notes\">Other Notes<\/h4>\n <textarea class=\"project-other-notes\" placeholder=\"Additional notes specific to this project\"><\/textarea>\n\n <div class=\"project-actions\">\n <button type=\"button\" class=\"btn ghost remove-project\">Remove project<\/button>\n <button type=\"button\" class=\"btn ghost move-up\">Move up<\/button>\n <button type=\"button\" class=\"btn ghost move-down\">Move down<\/button>\n <\/div>\n <\/div>\n <\/template>\n\n <!-- Sub-templates -->\n <template id=\"status-item-template\">\n <div class=\"subitem status-item\">\n <label>Current Status<\/label>\n <textarea name=\"project_status_text[]\"><\/textarea>\n <div class=\"row\">\n <div>\n <label>Start Date<\/label>\n <input type=\"date\" name=\"project_status_start[]\">\n <\/div>\n <div>\n <label>End Date<\/label>\n <input type=\"date\" name=\"project_status_end[]\">\n <\/div>\n <\/div>\n <div class=\"subitem-actions\">\n <button type=\"button\" class=\"btn small ghost remove-status\">Remove<\/button>\n <\/div>\n <\/div>\n <\/template>\n\n <template id=\"partner-item-template\">\n <div class=\"subitem partner-item\">\n <div class=\"row-3\">\n <div>\n <label>Organization<\/label>\n <input type=\"text\" name=\"partner_org[]\">\n <\/div>\n <div>\n <label>First Name<\/label>\n <input type=\"text\" name=\"partner_fname[]\">\n <\/div>\n <div>\n <label>Last Name<\/label>\n <input type=\"text\" name=\"partner_lname[]\">\n <\/div>\n <\/div>\n <div class=\"row-3\">\n <div>\n <label>Role<\/label>\n <input type=\"text\" name=\"partner_role[]\">\n <\/div>\n <div>\n <label>Email<\/label>\n <input type=\"email\" name=\"partner_email[]\">\n <\/div>\n <div>\n <label>Phone<\/label>\n <input type=\"text\" name=\"partner_phone[]\">\n <\/div>\n <\/div>\n <label>Notes<\/label>\n <textarea name=\"partner_notes[]\"><\/textarea>\n <div class=\"subitem-actions\">\n <button type=\"button\" class=\"btn small ghost remove-partner\">Remove<\/button>\n <\/div>\n <\/div>\n <\/template>\n\n <script>\n \/\/ --- Fix: normalize any en\/em dashes in class\/id attributes to regular hyphens ---\n (function normalizeDashes(){\n const dashRegex = \/[\\u2010-\\u2015\\u2212]\/g; \/\/ hyphen range + minus sign\n const toHyphen = s => s.replace(dashRegex, '-');\n document.querySelectorAll('[class]').forEach(el => el.setAttribute('class', toHyphen(el.getAttribute('class'))));\n document.querySelectorAll('[id]').forEach(el => el.setAttribute('id', toHyphen(el.getAttribute('id'))));\n })();\n \n \/\/ CSV helpers\n function escCsv(v) { if (v == null) return \"\"; v = String(v); return \/[\",\\n]\/.test(v) ? '\"' + v.replace(\/\"\/g, '\"\"') + '\"' : v; }\n function parseCsv(text) {\n const rows = []; let row = []; let field = \"\"; let i = 0; let inQuotes = false;\n while (i < text.length) { const c = text[i]; if (inQuotes) { if (c === '\"') { if (text[i+1] === '\"') { field += '\"'; i += 2; continue; } inQuotes = false; i++; continue; } else { field += c; i++; continue; } } else { if (c === '\"') { inQuotes = true; i++; continue; } if (c === ',') { row.push(field); field = \"\"; i++; continue; } if (c === '\\n') { row.push(field); rows.push(row); row = []; field = \"\"; i++; continue; } if (c === '\\r') { i++; continue; } field += c; i++; continue; } }\n row.push(field); rows.push(row); return rows;\n }\n \n const notice = document.getElementById('notice');\n const projectsContainer = document.getElementById('projects-container');\n const projectTpl = document.getElementById('project-template');\n const statusTpl = document.getElementById('status-item-template');\n const partnerTpl = document.getElementById('partner-item-template');\n const addProjectBtn = document.getElementById('add-project-btn');\n const indexList = document.getElementById('project-index-list');\n \n addProjectBtn?.addEventListener('click', addProjectBlock);\n const updateBtn = document.getElementById('update-index-btn');\n updateBtn?.addEventListener('click', forceRefreshIndex);\n \n function addProjectBlock() {\n const node = projectTpl.content.cloneNode(true);\n projectsContainer.appendChild(node);\n const block = projectsContainer.querySelector('.project-block:last-of-type');\n const projectCount = projectsContainer.querySelectorAll('.project-block').length;\n const anchorId = `project-${projectCount}`; block.setAttribute('id', anchorId);\n addStatusItem(block); addPartnerItem(block, '.key-partners'); addPartnerItem(block, '.lead-partners'); initPerProjectTables(block);\n const titleInput = block.querySelector('.project-title-input'); titleInput?.addEventListener('input', updateIndex);\n updateProjectTitleDisplay(block); updateProjectControls(); updateIndex();\n }\n \n function updateProjectTitleDisplay(block) {\n try { const blocks = Array.from(document.querySelectorAll('#projects-container .project-block'));\n const idx = Math.max(0, blocks.indexOf(block)) + 1;\n const input = block.querySelector('.project-title-input');\n const title = input ? (input.value.trim() || 'Untitled') : 'Untitled';\n const el = block.querySelector('.project-title'); if (el) el.textContent = `Project ${idx}: ${title}`; }\n catch (e) { console.error(e); }\n }\n \n function forceRefreshIndex() { document.querySelectorAll('#projects-container .project-block').forEach(b => updateProjectTitleDisplay(b)); updateIndex(); }\n \n function updateIndex() {\n indexList.innerHTML = '';\n projectsContainer.querySelectorAll('.project-block').forEach((block, idx) => {\n updateProjectTitleDisplay(block);\n const anchorId = block.id || `project-${idx+1}`; block.id = anchorId;\n const title = block.querySelector('.project-title').textContent;\n const li = document.createElement('li');\n const a = document.createElement('a'); a.href = `#${anchorId}`; a.textContent = title; li.appendChild(a);\n const chips = document.createElement('div'); chips.className = 'chips';\n chips.innerHTML = [`<a href=\"#${anchorId}\">Overview<\/a>`,`<a href=\"#${anchorId}-contracts\">Contracts<\/a>`,`<a href=\"#${anchorId}-contacts\">Contacts<\/a>`,`<a href=\"#${anchorId}-strategic\">Strategic<\/a>`,`<a href=\"#${anchorId}-files\">Files<\/a>`,`<a href=\"#${anchorId}-video-files\">Videos<\/a>`,`<a href=\"#${anchorId}-media-files\">Medias<\/a>`,`<a href=\"#${anchorId}-other-notes\">Other Notes<\/a>`].join(' \u2022 ');\n li.appendChild(chips); indexList.appendChild(li);\n block.querySelector('#sub-contracts')?.setAttribute('id', `${anchorId}-contracts`);\n block.querySelector('#sub-contacts')?.setAttribute('id', `${anchorId}-contacts`);\n block.querySelector('#sub-strategic')?.setAttribute('id', `${anchorId}-strategic`);\n block.querySelector('#sub-files')?.setAttribute('id', `${anchorId}-files`);\n block.querySelector('#sub-video-files')?.setAttribute('id', `${anchorId}-video-files`);\n block.querySelector('#sub-media-files')?.setAttribute('id', `${anchorId}-media-files`);\n block.querySelector('#sub-other-notes')?.setAttribute('id', `${anchorId}-other-notes`);\n });\n }\n \n function updateProjectControls() { projectsContainer.querySelectorAll('.project-block').forEach((block, idx, arr) => {\n const up = block.querySelector('.move-up'); const down = block.querySelector('.move-down');\n if (up) up.disabled = (idx === 0);\n if (down) down.disabled = (idx === arr.length - 1);\n }); }\n \n function moveBlock(block, dir) {\n if (!block) return;\n if (dir === -1 && block.previousElementSibling) { projectsContainer.insertBefore(block, block.previousElementSibling); }\n else if (dir === 1 && block.nextElementSibling) { projectsContainer.insertBefore(block.nextElementSibling, block); }\n updateProjectControls(); updateIndex();\n }\n \n function addStatusItem(projectBlock) { const container = projectBlock.querySelector('.status-periods'); const node = statusTpl.content.cloneNode(true); container.appendChild(node); }\n function addPartnerItem(projectBlock, whichSelector) { const container = projectBlock.querySelector(whichSelector); const node = partnerTpl.content.cloneNode(true); container.appendChild(node); }\n \n projectsContainer.addEventListener('click', (e) => {\n const block = e.target.closest('.project-block'); if (!block) return;\n if (e.target.classList.contains('remove-project')) { block.remove(); if (!projectsContainer.querySelector('.project-block')) addProjectBlock(); updateProjectControls(); updateIndex(); }\n if (e.target.classList.contains('move-up')) moveBlock(block, -1);\n if (e.target.classList.contains('move-down')) moveBlock(block, 1);\n if (e.target.classList.contains('add-status')) addStatusItem(block);\n if (e.target.classList.contains('add-key-partner')) addPartnerItem(block, '.key-partners');\n if (e.target.classList.contains('add-lead-partner')) addPartnerItem(block, '.lead-partners');\n if (e.target.classList.contains('remove-status')) e.target.closest('.status-item')?.remove();\n if (e.target.classList.contains('remove-partner')) e.target.closest('.partner-item')?.remove();\n });\n \n projectsContainer.addEventListener('input', (e) => { if (e.target.classList.contains('project-title-input')) updateIndex(); });\n \n const CONTACT_HEADERS = [\"First Name\",\"Last Name\",\"Role\",\"Organization\",\"Email\",\"Phone\",\"Notes\"];\n const CONTRACT_HEADERS = [\"Organization\",\"Type of Contract\",\"Status\",\"Start Date\",\"End Date\"];\n const STRATEGIC_HEADERS = [\"Risks\",\"Opportunities\",\"Decision Points in next 60-90 Days\"];\n const FILE_HEADERS = [\"Document Name\",\"Link\"];\n \n function initPerProjectTables(block) {\n const addContractBtn = block.querySelector('.add-contract');\n const importContractsBtn = block.querySelector('.import-contracts');\n const contractsCsv = block.querySelector('.contracts-csv-file');\n const exportContractsBtn = block.querySelector('.export-contracts');\n \n addContractBtn?.addEventListener('click', () => addContractRow(block, {}));\n importContractsBtn?.addEventListener('click', () => contractsCsv?.click());\n contractsCsv?.addEventListener('change', async (e) => {\n const file = e.target.files?.[0]; if (!file) return;\n const text = await file.text(); importContractsCsv(block, text); e.target.value = \"\";\n });\n exportContractsBtn?.addEventListener('click', () => exportContractsCsv(block));\n \n const addContactBtn = block.querySelector('.add-contact');\n const importContactsBtn = block.querySelector('.import-contacts');\n const contactsCsv = block.querySelector('.contacts-csv-file');\n const exportContactsBtn = block.querySelector('.export-contacts');\n \n addContactBtn?.addEventListener('click', () => addContactRow(block, {}));\n importContactsBtn?.addEventListener('click', () => contactsCsv?.click());\n contactsCsv?.addEventListener('change', async (e) => {\n const file = e.target.files?.[0]; if (!file) return;\n const text = await file.text(); importContactsCsv(block, text); e.target.value = \"\";\n });\n exportContactsBtn?.addEventListener('click', () => exportContactsCsv(block));\n \n const addStrategicBtn = block.querySelector('.add-strategic');\n const importStrategicBtn = block.querySelector('.import-strategic');\n const strategicCsv = block.querySelector('.strategic-csv-file');\n const exportStrategicBtn = block.querySelector('.export-strategic');\n \n addStrategicBtn?.addEventListener('click', () => addStrategicRow(block, {}));\n importStrategicBtn?.addEventListener('click', () => strategicCsv?.click());\n strategicCsv?.addEventListener('change', async (e) => {\n const file = e.target.files?.[0]; if (!file) return;\n const text = await file.text(); importStrategicCsv(block, text); e.target.value = \"\";\n });\n exportStrategicBtn?.addEventListener('click', () => exportStrategicCsv(block));\n \n const addFileBtn = block.querySelector('.add-file');\n const importFilesBtn = block.querySelector('.import-files');\n const filesCsv = block.querySelector('.files-csv-file');\n const exportFilesBtn = block.querySelector('.export-files');\n \n addFileBtn?.addEventListener('click', () => addFileRow(block, {}));\n importFilesBtn?.addEventListener('click', () => filesCsv?.click());\n filesCsv?.addEventListener('change', async (e) => {\n const file = e.target.files?.[0]; if (!file) return;\n const text = await file.text(); importFilesCsv(block, text); e.target.value = \"\";\n });\n exportFilesBtn?.addEventListener('click', () => exportFilesCsv(block));\n\n\n const addvideoFileBtn = block.querySelector('.add-video-file');\n const importVideoFilesBtn = block.querySelector('.import-video-files');\n const VideofilesCsv = block.querySelector('.files-csv-video-file');\n const exportVideoFilesBtn = block.querySelector('.export-video-files');\n \n addvideoFileBtn?.addEventListener('click', () => addVideoFileRow(block, {}));\n importVideoFilesBtn?.addEventListener('click', () => VideofilesCsv?.click());\n VideofilesCsv?.addEventListener('change', async (e) => {\n const file = e.target.files?.[0]; if (!file) return;\n const text = await file.text(); importVideoFilesCsv(block, text); e.target.value = \"\";\n });\n exportVideoFilesBtn?.addEventListener('click', () => exportVideoFilesCsv(block));\n\n\n const addmediaFileBtn = block.querySelector('.add-media-file');\n const importMediaFilesBtn = block.querySelector('.import-media-files');\n const mediafilesCsv = block.querySelector('.files-csv-media-file');\n const exportMediaFilesBtn = block.querySelector('.export-media-files');\n \n addmediaFileBtn?.addEventListener('click', () => addMediaFileRow(block, {}));\n importMediaFilesBtn?.addEventListener('click', () => mediafilesCsv?.click());\n mediafilesCsv?.addEventListener('change', async (e) => {\n const file = e.target.files?.[0]; if (!file) return;\n const text = await file.text(); importMediaFilesCsv(block, text); e.target.value = \"\";\n });\n exportMediaFilesBtn?.addEventListener('click', () => exportMediaFilesCsv(block));\n \n \/\/ Start with 1 blank row for each table\n addContractRow(block, {});\n addContactRow(block, {});\n addStrategicRow(block, {});\n addFileRow(block, {});\n addVideoFileRow(block, {});\n addMediaFileRow(block, {}); \n }\n \n \/\/ ----- Contracts rows\n function addContractRow(block, data) {\n const tbody = block.querySelector('.contracts-table tbody');\n if (!tbody) return;\n const tr = document.createElement('tr');\n const cols = [\n {type:'text', val:data[\"Organization\"]||\"\"},\n {type:'text', val:data[\"Type of Contract\"]||\"\"},\n {type:'text', val:data[\"Status\"]||\"\"},\n {type:'date', val:data[\"Start Date\"]||\"\"},\n {type:'date', val:data[\"End Date\"]||\"\"}\n ];\n cols.forEach(c => { const td=document.createElement('td'); const inp=document.createElement('input'); inp.type=c.type; inp.value=c.val; td.appendChild(inp); tr.appendChild(td); });\n const tdAct=document.createElement('td'); tdAct.className=\"nowrap\";\n const rm=document.createElement('button'); rm.type=\"button\"; rm.className=\"btn small ghost\"; rm.textContent=\"Remove\"; rm.onclick=()=>tr.remove(); tdAct.appendChild(rm);\n tr.appendChild(tdAct);\n tbody.appendChild(tr);\n }\n function exportContractsCsv(block) {\n const tbody = block.querySelector('.contracts-table tbody'); if (!tbody) return;\n const rows = []; tbody.querySelectorAll('tr').forEach(tr=>{\n const cells=tr.querySelectorAll('td'); const row={};\n CONTRACT_HEADERS.forEach((h,i)=>{ const el=cells[i].querySelector('input'); row[h]=el?el.value.trim():\"\"; });\n if(Object.values(row).every(v=>v===\"\"))return; rows.push(row);\n });\n const header = CONTRACT_HEADERS.join(\",\");\n const body = rows.map(r => CONTRACT_HEADERS.map(h => escCsv(r[h])).join(\",\")).join(\"\\n\");\n const blob = new Blob([header+\"\\n\"+body], {type:\"text\/csv;charset=utf-8\"});\n const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download=\"contracts.csv\"; a.click(); URL.revokeObjectURL(url);\n }\n function importContractsCsv(block, text) {\n const matrix = parseCsv(text); if (!matrix.length) return;\n let startIdx=0; const headerRow=matrix[0].map(s=>s.trim()); const isHeader=CONTRACT_HEADERS.every((h,i)=> (headerRow[i]||\"\").toLowerCase()===h.toLowerCase()); if (isHeader) startIdx=1;\n for (let r=startIdx; r<matrix.length; r++){ const cols=matrix[r]; if (cols.every(v => (v||\"\").trim()===\"\")) continue;\n addContractRow(block, {\"Organization\":cols[0]||\"\",\"Type of Contract\":cols[1]||\"\",\"Status\":cols[2]||\"\",\"Start Date\":cols[3]||\"\",\"End Date\":cols[4]||\"\"}); }\n }\n \n \/\/ ----- Contacts rows\n function addContactRow(block, data) {\n const tbody = block.querySelector('.contacts-table tbody'); if (!tbody) return;\n const tr = document.createElement('tr');\n const specs = [\n {key:\"First Name\", type:\"text\"},\n {key:\"Last Name\", type:\"text\"},\n {key:\"Role\", type:\"text\"},\n {key:\"Organization\", type:\"text\"},\n {key:\"Email\", type:\"email\"},\n {key:\"Phone\", type:\"text\"},\n {key:\"Notes\", type:\"textarea\"}\n ];\n specs.forEach(s => {\n const td=document.createElement('td');\n if (s.type===\"textarea\"){ const ta=document.createElement('textarea'); ta.value=data[s.key]||\"\"; td.appendChild(ta); }\n else { const inp=document.createElement('input'); inp.type=s.type; inp.value=data[s.key]||\"\"; td.appendChild(inp); }\n tr.appendChild(td);\n });\n const tdAct=document.createElement('td'); tdAct.className=\"nowrap\";\n const rm=document.createElement('button'); rm.type=\"button\"; rm.className=\"btn small ghost\"; rm.textContent=\"Remove\"; rm.onclick=()=>tr.remove(); tdAct.appendChild(rm);\n tr.appendChild(tdAct);\n tbody.appendChild(tr);\n }\n function exportContactsCsv(block) {\n const tbody = block.querySelector('.contacts-table tbody'); if (!tbody) return;\n const rows=[]; tbody.querySelectorAll('tr').forEach(tr=>{\n const cells=tr.querySelectorAll('td'); const row={};\n CONTACT_HEADERS.forEach((h,i)=>{ const el=cells[i].querySelector('input, textarea'); row[h]=el?el.value.trim():\"\"; });\n if(Object.values(row).every(v=>v===\"\"))return; rows.push(row);\n });\n const header = CONTACT_HEADERS.join(\",\");\n const body = rows.map(r => CONTACT_HEADERS.map(h => escCsv(r[h])).join(\",\")).join(\"\\n\");\n const blob = new Blob([header+\"\\n\"+body], {type:\"text\/csv;charset=utf-8\"});\n const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download=\"contacts.csv\"; a.click(); URL.revokeObjectURL(url);\n }\n function importContactsCsv(block, text) {\n const matrix=parseCsv(text); if (!matrix.length) return;\n let startIdx=0; const headerRow=matrix[0].map(s=>s.trim()); const isHeader=CONTACT_HEADERS.every((h,i)=>(headerRow[i]||\"\").toLowerCase()===h.toLowerCase()); if (isHeader) startIdx=1;\n for (let r=startIdx; r<matrix.length; r++){ const cols=matrix[r]; if (cols.every(v=>(v||\"\").trim()===\"\")) continue;\n const data={}; CONTACT_HEADERS.forEach((h,i)=> data[h]=(cols[i]||\"\").trim()); addContactRow(block,data); }\n }\n \n \/\/ ----- Strategic rows\n function addStrategicRow(block, data) {\n const tbody = block.querySelector('.strategic-table tbody'); if (!tbody) return;\n const tr = document.createElement('tr');\n [\"Risks\",\"Opportunities\",\"Decision Points in next 60-90 Days\"].forEach((k)=>{\n const td=document.createElement('td'); const inp=document.createElement('input'); inp.type='text'; inp.value=data[k]||\"\"; td.appendChild(inp); tr.appendChild(td);\n });\n const tdAct=document.createElement('td'); tdAct.className=\"nowrap\";\n const rm=document.createElement('button'); rm.type=\"button\"; rm.className=\"btn small ghost\"; rm.textContent=\"Remove\"; rm.onclick=()=>tr.remove(); tdAct.appendChild(rm);\n tr.appendChild(tdAct);\n tbody.appendChild(tr);\n }\n function exportStrategicCsv(block) {\n const tbody = block.querySelector('.strategic-table tbody'); if (!tbody) return;\n const rows=[]; tbody.querySelectorAll('tr').forEach(tr=>{\n const cells=tr.querySelectorAll('td'); const row={};\n STRATEGIC_HEADERS.forEach((h,i)=>{ const el=cells[i].querySelector('input'); row[h]=el?el.value.trim():\"\"; });\n if(Object.values(row).every(v=>v===\"\"))return; rows.push(row);\n });\n const header=STRATEGIC_HEADERS.join(\",\");\n const body=rows.map(r=>STRATEGIC_HEADERS.map(h=>escCsv(r[h])).join(\",\")).join(\"\\n\");\n const blob=new Blob([header+\"\\n\"+body],{type:\"text\/csv;charset=utf-8\"});\n const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download=\"strategic.csv\"; a.click(); URL.revokeObjectURL(url);\n }\n function importStrategicCsv(block, text) {\n const matrix=parseCsv(text); if (!matrix.length) return;\n let startIdx=0; const headerRow=matrix[0].map(s=>s.trim()); const isHeader=STRATEGIC_HEADERS.every((h,i)=>(headerRow[i]||\"\").toLowerCase()===h.toLowerCase()); if (isHeader) startIdx=1;\n for (let r=startIdx; r<matrix.length; r++){ const cols=matrix[r]; if (cols.every(v=>(v||\"\").trim()===\"\")) continue;\n const data={}; STRATEGIC_HEADERS.forEach((h,i)=> data[h]=(cols[i]||\"\").trim()); addStrategicRow(block,data); }\n }\n \n \/\/ ----- Files rows\n function addFileRow(block, data) {\n const tbody = block.querySelector('.files-table tbody'); if (!tbody) return;\n const tr = document.createElement('tr');\n const td1=document.createElement('td'); const inp1=document.createElement('input'); inp1.type='text'; inp1.value=data[\"Document Name\"]||\"\"; td1.appendChild(inp1); tr.appendChild(td1);\n const td2=document.createElement('td'); const inp2=document.createElement('input'); inp2.type='url'; inp2.value=data[\"Link\"]||\"\"; td2.appendChild(inp2); tr.appendChild(td2);\n const tdAct=document.createElement('td'); tdAct.className=\"nowrap\";\n const rm=document.createElement('button'); rm.type=\"button\"; rm.className=\"btn small ghost\"; rm.textContent=\"Remove\"; rm.onclick=()=>tr.remove(); tdAct.appendChild(rm);\n tr.appendChild(tdAct);\n tbody.appendChild(tr);\n }\n function exportFilesCsv(block) {\n const tbody = block.querySelector('.files-table tbody'); if (!tbody) return;\n const rows=[]; tbody.querySelectorAll('tr').forEach(tr=>{\n const cells=tr.querySelectorAll('td'); const row={};\n FILE_HEADERS.forEach((h,i)=>{ const el=cells[i].querySelector('input'); row[h]=el?el.value.trim():\"\"; });\n if(Object.values(row).every(v=>v===\"\"))return; rows.push(row);\n });\n const header=FILE_HEADERS.join(\",\");\n const body=rows.map(r=>FILE_HEADERS.map(h=>escCsv(r[h])).join(\",\")).join(\"\\n\");\n const blob=new Blob([header+\"\\n\"+body],{type:\"text\/csv;charset=utf-8\"});\n const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download=\"files.csv\"; a.click(); URL.revokeObjectURL(url);\n }\n function importFilesCsv(block, text) {\n const matrix=parseCsv(text); if (!matrix.length) return;\n let startIdx=0; const headerRow=matrix[0].map(s=>s.trim()); const isHeader=FILE_HEADERS.every((h,i)=>(headerRow[i]||\"\").toLowerCase()===h.toLowerCase()); if (isHeader) startIdx=1;\n for (let r=startIdx; r<matrix.length; r++){ const cols=matrix[r]; if (cols.every(v=>(v||\"\").trim()===\"\")) continue;\n addFileRow(block, {\"Document Name\":cols[0]||\"\",\"Link\":cols[1]||\"\"}); }\n }\n\n \/\/ ----- Video Files rows\n function addVideoFileRow(block, data) {\n const tbody = block.querySelector('.video-files-table tbody'); if (!tbody) return;\n const tr = document.createElement('tr');\n const td1=document.createElement('td'); const inp1=document.createElement('input'); inp1.type='text'; inp1.value=data[\"Document Name\"]||\"\"; td1.appendChild(inp1); tr.appendChild(td1);\n const td2=document.createElement('td'); const inp2=document.createElement('input'); inp2.type='url'; inp2.value=data[\"Link\"]||\"\"; td2.appendChild(inp2); tr.appendChild(td2);\n const tdAct=document.createElement('td'); tdAct.className=\"nowrap\";\n const rm=document.createElement('button'); rm.type=\"button\"; rm.className=\"btn small ghost\"; rm.textContent=\"Remove\"; rm.onclick=()=>tr.remove(); tdAct.appendChild(rm);\n tr.appendChild(tdAct);\n tbody.appendChild(tr);\n }\n function exportVideoFilesCsv(block) {\n const tbody = block.querySelector('.video-files-table tbody'); if (!tbody) return;\n const rows=[]; tbody.querySelectorAll('tr').forEach(tr=>{\n const cells=tr.querySelectorAll('td'); const row={};\n FILE_HEADERS.forEach((h,i)=>{ const el=cells[i].querySelector('input'); row[h]=el?el.value.trim():\"\"; });\n if(Object.values(row).every(v=>v===\"\"))return; rows.push(row);\n });\n const header=FILE_HEADERS.join(\",\");\n const body=rows.map(r=>FILE_HEADERS.map(h=>escCsv(r[h])).join(\",\")).join(\"\\n\");\n const blob=new Blob([header+\"\\n\"+body],{type:\"text\/csv;charset=utf-8\"});\n const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download=\"video-files.csv\"; a.click(); URL.revokeObjectURL(url);\n }\n function importVideoFilesCsv(block, text) {\n const matrix=parseCsv(text); if (!matrix.length) return;\n let startIdx=0; const headerRow=matrix[0].map(s=>s.trim()); const isHeader=FILE_HEADERS.every((h,i)=>(headerRow[i]||\"\").toLowerCase()===h.toLowerCase()); if (isHeader) startIdx=1;\n for (let r=startIdx; r<matrix.length; r++){ const cols=matrix[r]; if (cols.every(v=>(v||\"\").trim()===\"\")) continue;\n addVideoFileRow(block, {\"Document Name\":cols[0]||\"\",\"Link\":cols[1]||\"\"}); }\n }\n\n \/\/ ----- Media Files rows\n function addMediaFileRow(block, data) {\n const tbody = block.querySelector('.media-files-table tbody'); if (!tbody) return;\n const tr = document.createElement('tr');\n const td1=document.createElement('td'); const inp1=document.createElement('input'); inp1.type='text'; inp1.value=data[\"Document Name\"]||\"\"; td1.appendChild(inp1); tr.appendChild(td1);\n const td2=document.createElement('td'); const inp2=document.createElement('input'); inp2.type='url'; inp2.value=data[\"Link\"]||\"\"; td2.appendChild(inp2); tr.appendChild(td2);\n const tdAct=document.createElement('td'); tdAct.className=\"nowrap\";\n const rm=document.createElement('button'); rm.type=\"button\"; rm.className=\"btn small ghost\"; rm.textContent=\"Remove\"; rm.onclick=()=>tr.remove(); tdAct.appendChild(rm);\n tr.appendChild(tdAct);\n tbody.appendChild(tr);\n }\n function exportMediaFilesCsv(block) {\n const tbody = block.querySelector('.media-files-table tbody'); if (!tbody) return;\n const rows=[]; tbody.querySelectorAll('tr').forEach(tr=>{\n const cells=tr.querySelectorAll('td'); const row={};\n FILE_HEADERS.forEach((h,i)=>{ const el=cells[i].querySelector('input'); row[h]=el?el.value.trim():\"\"; });\n if(Object.values(row).every(v=>v===\"\"))return; rows.push(row);\n });\n const header=FILE_HEADERS.join(\",\");\n const body=rows.map(r=>FILE_HEADERS.map(h=>escCsv(r[h])).join(\",\")).join(\"\\n\");\n const blob=new Blob([header+\"\\n\"+body],{type:\"text\/csv;charset=utf-8\"});\n const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download=\"media-files.csv\"; a.click(); URL.revokeObjectURL(url);\n }\n function importMediaFilesCsv(block, text) {\n const matrix=parseCsv(text); if (!matrix.length) return;\n let startIdx=0; const headerRow=matrix[0].map(s=>s.trim()); const isHeader=FILE_HEADERS.every((h,i)=>(headerRow[i]||\"\").toLowerCase()===h.toLowerCase()); if (isHeader) startIdx=1;\n for (let r=startIdx; r<matrix.length; r++){ const cols=matrix[r]; if (cols.every(v=>(v||\"\").trim()===\"\")) continue;\n addMediaFileRow(block, {\"Document Name\":cols[0]||\"\",\"Link\":cols[1]||\"\"}); }\n }\n \n \/\/ Ensure at least one project on load\n addProjectBlock();\n \n \/\/ Downloaders & print\n function collectPayload() {\n const f = document.getElementById('handover-form');\n const payload = { name: f.name.value || \"\", position: f.position.value || \"\", duty_station: f.duty_station.value || \"\", handover_date: f.handover_date.value || \"\", projects: [] };\n projectsContainer.querySelectorAll('.project-block').forEach(block => {\n const title = block.querySelector('input[name=\"project_title[]\"]').value || \"\";\n const link = block.querySelector('input[name=\"project_link[]\"]').value || \"\";\n const statuses = [];\n block.querySelectorAll('.status-item').forEach(si => {\n statuses.push({\n current_status: (si.querySelector('textarea[name=\"project_status_text[]\"]').value || \"\"),\n start_date: (si.querySelector('input[name=\"project_status_start[]\"]').value || \"\"),\n end_date: (si.querySelector('input[name=\"project_status_end[]\"]').value || \"\")\n });\n });\n const key_partners = [];\n block.querySelectorAll('.key-partners .partner-item').forEach(item => {\n key_partners.push({\n organization: item.querySelector('input[name=\"partner_org[]\"]').value || \"\",\n first_name: item.querySelector('input[name=\"partner_fname[]\"]').value || \"\",\n last_name: item.querySelector('input[name=\"partner_lname[]\"]').value || \"\",\n role: item.querySelector('input[name=\"partner_role[]\"]').value || \"\",\n email: item.querySelector('input[name=\"partner_email[]\"]').value || \"\",\n phone: item.querySelector('input[name=\"partner_phone[]\"]').value || \"\",\n notes: item.querySelector('textarea[name=\"partner_notes[]\"]').value || \"\"\n });\n });\n const lead_partners = [];\n block.querySelectorAll('.lead-partners .partner-item').forEach(item => {\n lead_partners.push({\n organization: item.querySelector('input[name=\"partner_org[]\"]').value || \"\",\n first_name: item.querySelector('input[name=\"partner_fname[]\"]').value || \"\",\n last_name: item.querySelector('input[name=\"partner_lname[]\"]').value || \"\",\n role: item.querySelector('input[name=\"partner_role[]\"]').value || \"\",\n email: item.querySelector('input[name=\"partner_email[]\"]').value || \"\",\n phone: item.querySelector('input[name=\"partner_phone[]\"]').value || \"\",\n notes: item.querySelector('textarea[name=\"partner_notes[]\"]').value || \"\"\n });\n });\n function tableToArray(tableSelector, headers, isTextareaCols = []) {\n const rows=[];\n block.querySelectorAll(tableSelector + ' tbody tr').forEach(tr=>{\n const cells=tr.querySelectorAll('td');\n const row={};\n headers.forEach((h,i)=>{\n const q = isTextareaCols.includes(i) ? 'textarea' : 'input';\n const el=cells[i]?.querySelector(q);\n row[h]=el?el.value.trim():\"\";\n });\n if (Object.values(row).every(v=>v===\"\")) return;\n rows.push(row);\n });\n return rows;\n }\n const contracts = tableToArray('.contracts-table', CONTRACT_HEADERS);\n const contacts = tableToArray('.contacts-table', CONTACT_HEADERS, [6]);\n const strategic = tableToArray('.strategic-table', STRATEGIC_HEADERS);\n const files = tableToArray('.files-table', FILE_HEADERS);\n const video_files = tableToArray('.video-files-table', FILE_HEADERS);\n const media_files = tableToArray('.media-files-table', FILE_HEADERS);\n const project_other_notes_el = block.querySelector('textarea.project-other-notes');\n const other_notes = project_other_notes_el ? project_other_notes_el.value || \"\" : \"\";\n if (!title && !link && !statuses.length && !key_partners.length && !lead_partners.length &&\n !contracts.length && !contacts.length && !strategic.length && !files.length && !video_files.length && !media_files.length && !other_notes) return;\n payload.projects.push({ title, link, statuses, key_partners, lead_partners, contracts, contacts, strategic, files, video_files, media_files , other_notes });\n });\n return payload;\n }\n \n document.getElementById('download-json')?.addEventListener('click', () => {\n const payload = collectPayload();\n const blob = new Blob([JSON.stringify(payload, null, 2)], {type: \"application\/json\"});\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = \"handover.json\";\n a.click();\n URL.revokeObjectURL(url);\n });\n \n document.getElementById('download-html')?.addEventListener('click', () => {\n const payload = collectPayload();\n const report = `<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Handover Report<\/title><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/><style> body{font-family:Arial,sans-serif;margin:24px;max-width:1100px} h1,h2,h3,h4{color:#003366} table{width:100%;border-collapse:collapse;margin:12px 0} th,td{border:1px solid #d0d7de;padding:6px;vertical-align:top} th{background:#f3f4f6;text-align:left} .block{border:1px solid #d0d7de;padding:12px;border-radius:8px;margin:12px 0;background:#fafbfc} .small{color:#555;font-size:12px}<\/style><\/head><body><h2>UN-Habitat Handover Report<\/h2><div class=\"block\"><strong>Name:<\/strong> ${payload.name || \"\"}<br\/><strong>Position:<\/strong> ${payload.position || \"\"}<br\/><strong>Duty Station:<\/strong> ${payload.duty_station || \"\"}<br\/><strong>Date of Handover:<\/strong> ${payload.handover_date || \"\"}<\/div>${payload.projects.map((p,idx)=>`<div class=\"block\"><h3>Project ${idx+1}: ${p.title || \"(Untitled)\"}<\/h3>${p.link ? `<p><strong>Link:<\/strong> <a href=\"${p.link}\">${p.link}<\/a><\/p>` : \"\"}${p.key_partners && p.key_partners.length ? `<h4>Key Partners<\/h4><table><thead><tr><th>Org<\/th><th>First<\/th><th>Last<\/th><th>Role<\/th><th>Email<\/th><th>Phone<\/th><th>Notes<\/th><\/tr><\/thead><tbody>${p.key_partners.map(k=>`<tr><td>${k.organization||\"\"}<\/td><td>${k.first_name||\"\"}<\/td><td>${k.last_name||\"\"}<\/td><td>${k.role||\"\"}<\/td><td>${k.email||\"\"}<\/td><td>${k.phone||\"\"}<\/td><td>${(k.notes||\"\").replace(\/\\n\/g,\"<br>\")}<\/td><\/tr>`).join(\"\")}<\/tbody><\/table>` : \"\"}${p.lead_partners && p.lead_partners.length ? `<h4>Lead Partners<\/h4><table><thead><tr><th>Org<\/th><th>First<\/th><th>Last<\/th><th>Role<\/th><th>Email<\/th><th>Phone<\/th><th>Notes<\/th><\/tr><\/thead><tbody>${p.lead_partners.map(k=>`<tr><td>${k.organization||\"\"}<\/td><td>${k.first_name||\"\"}<\/td><td>${k.last_name||\"\"}<\/td><td>${k.role||\"\"}<\/td><td>${k.email||\"\"}<\/td><td>${k.phone||\"\"}<\/td><td>${(k.notes||\"\").replace(\/\\n\/g,\"<br>\")}<\/td><\/tr>`).join(\"\")}<\/tbody><\/table>` : \"\"}${p.statuses && p.statuses.length ? `<h4>Current Status (with dates)<\/h4><table><thead><tr><th>Status<\/th><th>Start Date<\/th><th>End Date<\/th><\/tr><\/thead><tbody>${p.statuses.map(s=>`<tr><td>${(s.current_status||\"\").replace(\/\\n\/g,\"<br>\")}<\/td><td>${s.start_date||\"\"}<\/td><td>${s.end_date||\"\"}<\/td><\/tr>`).join(\"\")}<\/tbody><\/table>` : \"\"}${p.contracts && p.contracts.length ? `<h4>Contracts<\/h4><table><thead><tr><th>Organization<\/th><th>Type of Contract<\/th><th>Status<\/th><th>Start Date<\/th><th>End Date<\/th><\/tr><\/thead><tbody>${p.contracts.map(r=>`<tr><td>${r[\"Organization\"]||\"\"}<\/td><td>${r[\"Type of Contract\"]||\"\"}<\/td><td>${r[\"Status\"]||\"\"}<\/td><td>${r[\"Start Date\"]||\"\"}<\/td><td>${r[\"End Date\"]||\"\"}<\/td><\/tr>`).join(\"\")}<\/tbody><\/table>` : \"\"}${p.contacts && p.contacts.length ? `<h4>Key Stakeholders and Contacts<\/h4><table><thead><tr><th>First Name<\/th><th>Last Name<\/th><th>Role<\/th><th>Organization<\/th><th>Email<\/th><th>Phone<\/th><th>Notes<\/th><\/tr><\/thead><tbody>${p.contacts.map(r=>`<tr><td>${r[\"First Name\"]||\"\"}<\/td><td>${r[\"Last Name\"]||\"\"}<\/td><td>${r[\"Role\"]||\"\"}<\/td><td>${r[\"Organization\"]||\"\"}<\/td><td>${r[\"Email\"]||\"\"}<\/td><td>${r[\"Phone\"]||\"\"}<\/td><td>${(r[\"Notes\"]||\"\").replace(\/\\n\/g,\"<br>\")}<\/td><\/tr>`).join(\"\")}<\/tbody><\/table>` : \"\"}${p.strategic && p.strategic.length ? `<h4>Strategic Issues and Recommendations<\/h4><table><thead><tr><th>Risks<\/th><th>Opportunities<\/th><th>Decision Points in next 60-90 Days<\/th><\/tr><\/thead><tbody>${p.strategic.map(r=>`<tr><td>${r[\"Risks\"]||\"\"}<\/td><td>${r[\"Opportunities\"]||\"\"}<\/td><td>${r[\"Decision Points in next 60-90 Days\"]||\"\"}<\/td><\/tr>`).join(\"\")}<\/tbody><\/table>` : \"\"}${p.files && p.files.length ? `<h4>Files and Knowledge Management<\/h4><table><thead><tr><th>Document Name<\/th><th>Link<\/th><\/tr><\/thead><tbody>${p.files.map(r=>`<tr><td>${r[\"Document Name\"]||\"\"}<\/td><td>${r[\"Link\"]?`<a href=\"${r[\"Link\"]}\">${r[\"Link\"]}<\/a>`:\"\"}<\/td><\/tr>`).join(\"\")}<\/tbody><\/table>` : \"\"}${p.video_files && p.video_files.length ? `<h4>Video File Management<\/h4><table><thead><tr><th>Document Name<\/th><th>Link<\/th><\/tr><\/thead><tbody>${p.video_files.map(r=>`<tr><td>${r[\"Document Name\"]||\"\"}<\/td><td>${r[\"Link\"]?`<a href=\"${r[\"Link\"]}\">${r[\"Link\"]}<\/a>`:\"\"}<\/td><\/tr>`).join(\"\")}<\/tbody><\/table>` : \"\"}${p.media_files && p.media_files.length ? `<h4>Media File Managment<\/h4><table><thead><tr><th>Document Name<\/th><th>Link<\/th><\/tr><\/thead><tbody>${p.media_files.map(r=>`<tr><td>${r[\"Document Name\"]||\"\"}<\/td><td>${r[\"Link\"]?`<a href=\"${r[\"Link\"]}\">${r[\"Link\"]}<\/a>`:\"\"}<\/td><\/tr>`).join(\"\")}<\/tbody><\/table>` : \"\"}${p.other_notes ? `<p><strong>Other Notes:<\/strong><br>${p.other_notes.replace(\/\\n\/g,\"<br>\")}<\/p>` : \"\"}<\/div>`).join('')}<p class=\"small\">Generated report \u2014 static, read-only HTML.<\/p><\/body><\/html>`;\n const blob = new Blob([report], {type: \"text\/html;charset=utf-8\"});\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = \"handover_report.html\";\n a.click();\n URL.revokeObjectURL(url);\n });\n \n document.getElementById('print-btn')?.addEventListener('click', () => window.print());\n <\/script>\n<\/body>\n\n<\/html><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-19695","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Handover Form - UN-Habitat Youth<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.unhabitatyouth.org\/es\/handover-form\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Handover Form - UN-Habitat Youth\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unhabitatyouth.org\/es\/handover-form\/\" \/>\n<meta property=\"og:site_name\" content=\"UN-Habitat Youth\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/unhabitatyouth\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-05T12:48:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unhabitatyouth.org\/wp-content\/uploads\/2020\/07\/49882467972_87ed82cdcf_o-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@unhabitatyouth\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/en\\\/handover-form\\\/\",\"url\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/en\\\/handover-form\\\/\",\"name\":\"Handover Form - UN-Habitat Youth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/#website\"},\"datePublished\":\"2025-09-05T10:57:01+00:00\",\"dateModified\":\"2025-09-05T12:48:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/en\\\/handover-form\\\/#breadcrumb\"},\"inLanguage\":\"es-CO\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.unhabitatyouth.org\\\/en\\\/handover-form\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/en\\\/handover-form\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Handover Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/#website\",\"url\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/\",\"name\":\"UN-Habitat Youth\",\"description\":\"For a better urban future, with and for youth.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-CO\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/#organization\",\"name\":\"UN-Habitat Youth\",\"url\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CO\",\"@id\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/UN-HABITAT-YOUTH-LOGO_.png\",\"contentUrl\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/UN-HABITAT-YOUTH-LOGO_.png\",\"width\":574,\"height\":147,\"caption\":\"UN-Habitat Youth\"},\"image\":{\"@id\":\"https:\\\/\\\/www.unhabitatyouth.org\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/unhabitatyouth\",\"https:\\\/\\\/x.com\\\/unhabitatyouth\",\"https:\\\/\\\/www.instagram.com\\\/unhabitatyouth\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Handover Form - UN-Habitat Youth","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.unhabitatyouth.org\/es\/handover-form\/","og_locale":"es_ES","og_type":"article","og_title":"Handover Form - UN-Habitat Youth","og_url":"https:\/\/www.unhabitatyouth.org\/es\/handover-form\/","og_site_name":"UN-Habitat Youth","article_publisher":"https:\/\/www.facebook.com\/unhabitatyouth","article_modified_time":"2025-09-05T12:48:13+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/www.unhabitatyouth.org\/wp-content\/uploads\/2020\/07\/49882467972_87ed82cdcf_o-scaled.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@unhabitatyouth","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.unhabitatyouth.org\/en\/handover-form\/","url":"https:\/\/www.unhabitatyouth.org\/en\/handover-form\/","name":"Handover Form - UN-Habitat Youth","isPartOf":{"@id":"https:\/\/www.unhabitatyouth.org\/#website"},"datePublished":"2025-09-05T10:57:01+00:00","dateModified":"2025-09-05T12:48:13+00:00","breadcrumb":{"@id":"https:\/\/www.unhabitatyouth.org\/en\/handover-form\/#breadcrumb"},"inLanguage":"es-CO","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unhabitatyouth.org\/en\/handover-form\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.unhabitatyouth.org\/en\/handover-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unhabitatyouth.org\/en\/"},{"@type":"ListItem","position":2,"name":"Handover Form"}]},{"@type":"WebSite","@id":"https:\/\/www.unhabitatyouth.org\/#website","url":"https:\/\/www.unhabitatyouth.org\/","name":"UN-Habitat Youth","description":"For a better urban future, with and for youth.","publisher":{"@id":"https:\/\/www.unhabitatyouth.org\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unhabitatyouth.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-CO"},{"@type":"Organization","@id":"https:\/\/www.unhabitatyouth.org\/#organization","name":"UN-Habitat Youth","url":"https:\/\/www.unhabitatyouth.org\/","logo":{"@type":"ImageObject","inLanguage":"es-CO","@id":"https:\/\/www.unhabitatyouth.org\/#\/schema\/logo\/image\/","url":"https:\/\/www.unhabitatyouth.org\/wp-content\/uploads\/2020\/08\/UN-HABITAT-YOUTH-LOGO_.png","contentUrl":"https:\/\/www.unhabitatyouth.org\/wp-content\/uploads\/2020\/08\/UN-HABITAT-YOUTH-LOGO_.png","width":574,"height":147,"caption":"UN-Habitat Youth"},"image":{"@id":"https:\/\/www.unhabitatyouth.org\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/unhabitatyouth","https:\/\/x.com\/unhabitatyouth","https:\/\/www.instagram.com\/unhabitatyouth"]}]}},"_links":{"self":[{"href":"https:\/\/www.unhabitatyouth.org\/es\/wp-json\/wp\/v2\/pages\/19695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unhabitatyouth.org\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.unhabitatyouth.org\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.unhabitatyouth.org\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unhabitatyouth.org\/es\/wp-json\/wp\/v2\/comments?post=19695"}],"version-history":[{"count":11,"href":"https:\/\/www.unhabitatyouth.org\/es\/wp-json\/wp\/v2\/pages\/19695\/revisions"}],"predecessor-version":[{"id":19708,"href":"https:\/\/www.unhabitatyouth.org\/es\/wp-json\/wp\/v2\/pages\/19695\/revisions\/19708"}],"wp:attachment":[{"href":"https:\/\/www.unhabitatyouth.org\/es\/wp-json\/wp\/v2\/media?parent=19695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}