jupiter-dynamic-forms 1.17.6 → 1.17.8

package/dist/index.mjs

@@ -569,6 +569,14 @@ class XBRLFormBuilder {
     }
     return Math.abs(hash).toString(36).substr(0, 6);
   }
+  static _extractDocumentationLabels(labels) {
+    const result = {};
+    const docRole = "http://www.xbrl.org/2003/role/documentation";
+    labels.filter((l2) => l2.role === docRole).forEach((l2) => {
+      result[l2.lang] = l2.label;
+    });
+    return result;
+  }
   /**
    * Build form schema from XBRL input data
    * Creates accordion sections for each presentation role
@@ -627,9 +635,10 @@ class XBRLFormBuilder {
     const availableColumnIds = columns.map((col) => col.id);
     const roleInfo = { periodTypes, availableColumnIds, availableColumns: columns };
     const conceptTrees = [];
+    const conceptIdOccurrences = /* @__PURE__ */ new Map();
     if ((_a = role.presentationLinkbase) == null ? void 0 : _a.concepts) {
       role.presentationLinkbase.concepts.forEach((concept) => {
-        const conceptTree = this.buildConceptTree(concept, 0, periodStartDate, periodEndDate, roleInfo, role.id, language);
+        const conceptTree = this.buildConceptTree(concept, 0, periodStartDate, periodEndDate, roleInfo, role.id, language, conceptIdOccurrences);
         if (conceptTree) {
           conceptTrees.push(conceptTree);
         }
@@ -663,8 +672,10 @@ class XBRLFormBuilder {
   /**
    * Build concept tree from XBRL presentation concept
    */
-  static buildConceptTree(concept, level, periodStartDate, periodEndDate, roleInfo, sectionId, language = "en") {
+  static buildConceptTree(concept, level, periodStartDate, periodEndDate, roleInfo, sectionId, language = "en", conceptIdOccurrences, ancestorPeriodHint) {
+    var _a, _b;
     const label = this.getPreferredLabel(concept.labels, language);
+    const childPeriodHint = ((_a = concept.preferredLabel) == null ? void 0 : _a.includes("periodStartLabel")) ? "start" : ((_b = concept.preferredLabel) == null ? void 0 : _b.includes("periodEndLabel")) ? "end" : ancestorPeriodHint;
     const fields = [];
     if (!concept.elementAbstract) {
       let columnIds = [];
@@ -674,11 +685,11 @@ class XBRLFormBuilder {
         columnIds = ["duration"];
       }
       columnIds.forEach((columnId) => {
-        var _a;
-        const column2 = (_a = roleInfo == null ? void 0 : roleInfo.availableColumns) == null ? void 0 : _a.find((c2) => c2.id === columnId);
+        var _a2;
+        const column2 = (_a2 = roleInfo == null ? void 0 : roleInfo.availableColumns) == null ? void 0 : _a2.find((c2) => c2.id === columnId);
         const colStartDate = (column2 == null ? void 0 : column2.periodStartDate) || periodStartDate;
         const colEndDate = (column2 == null ? void 0 : column2.periodEndDate) || periodEndDate;
-        const field2 = this.createFieldFromConcept(concept, colStartDate, colEndDate, columnId);
+        const field2 = this.createFieldFromConcept(concept, colStartDate, colEndDate, columnId, ancestorPeriodHint);
         if (field2)
           fields.push(field2);
       });
@@ -686,7 +697,7 @@ class XBRLFormBuilder {
     const children = [];
     if (concept.children && concept.children.length > 0) {
       concept.children.forEach((child) => {
-        const childTree = this.buildConceptTree(child, level + 1, periodStartDate, periodEndDate, roleInfo, sectionId, language);
+        const childTree = this.buildConceptTree(child, level + 1, periodStartDate, periodEndDate, roleInfo, sectionId, language, conceptIdOccurrences, childPeriodHint);
         if (childTree) {
           children.push(childTree);
         }
@@ -696,9 +707,24 @@ class XBRLFormBuilder {
     if (!hasContent) {
       return null;
     }
+    let conceptId = this.createUniqueConceptId(concept, sectionId);
+    if (conceptIdOccurrences) {
+      const count = conceptIdOccurrences.get(conceptId) ?? 0;
+      conceptIdOccurrences.set(conceptId, count + 1);
+      if (count > 0) {
+        conceptId = `${conceptId}__occ${count + 1}`;
+      }
+    }
+    const conceptMetadata = {
+      conceptName: concept.conceptName,
+      type: concept.type,
+      substitutionGroup: concept.substitutionGroup,
+      periodType: concept.periodType,
+      balance: concept.balance,
+      documentationLabels: this._extractDocumentationLabels(concept.labels)
+    };
     return {
-      id: this.createUniqueConceptId(concept, sectionId),
-      // Use unique ID for form management
+      id: conceptId,
       originalConceptId: concept.id,
       // Store original for submission data
       name: concept.conceptName,
@@ -709,6 +735,7 @@ class XBRLFormBuilder {
       level,
       children,
       fields,
+      conceptMetadata,
       facts: concept.facts || [],
       // Pass facts array from presentation concept for pre-population
       collapsed: level > 0,
@@ -724,7 +751,7 @@ class XBRLFormBuilder {
   /**
    * Create form field from XBRL concept
    */
-  static createFieldFromConcept(concept, periodStartDate, periodEndDate, forcedColumnId) {
+  static createFieldFromConcept(concept, periodStartDate, periodEndDate, forcedColumnId, ancestorPeriodHint) {
     var _a;
     const fieldType = this.mapXBRLTypeToFieldType(concept.type);
     const label = this.getPreferredLabel(concept.labels);
@@ -750,7 +777,7 @@ class XBRLFormBuilder {
       // Validate and set the period type
       periodStartDate: periodStartDate || "2025-01-01",
       periodEndDate: periodEndDate || "2025-12-31",
-      periodInstantDate: concept.periodType === "instant" ? ((_a = concept.preferredLabel) == null ? void 0 : _a.includes("periodStartLabel")) ? this.subtractOneDay(periodStartDate || "2025-01-01") : periodEndDate || periodStartDate || "2025-01-01" : void 0
+      periodInstantDate: concept.periodType === "instant" ? ((_a = concept.preferredLabel) == null ? void 0 : _a.includes("periodStartLabel")) || ancestorPeriodHint === "start" ? this.subtractOneDay(periodStartDate || "2025-01-01") : periodEndDate || periodStartDate || "2025-01-01" : void 0
     };
     if (concept.id === "nl-cd_DescriptionLocationNL__a64trl") {
       console.log(`🏗️ [Field Creation] Concept: ${concept.id}, periodType from concept: ${concept.periodType}, Field periodType: ${field2.periodType}, ColumnId: ${columnId}`);
@@ -1595,6 +1622,18 @@ class XBRLFormBuilder {
     }];
   }
 }
+const conceptInfo$1 = {
+  title: "Concept Information",
+  conceptName: "Concept name",
+  type: "Type",
+  substitutionGroup: "Substitution group",
+  periodType: "Period type",
+  balance: "Balance",
+  documentation: "Documentation",
+  instant: "Instant",
+  duration: "Duration",
+  close: "Close"
+};
 const form$1 = {
   loading: "Loading form...",
   submit: "Validate",
@@ -1739,6 +1778,7 @@ const error$1 = {
   }
 };
 const enTranslations = {
+  conceptInfo: conceptInfo$1,
   form: form$1,
   filter: filter$1,
   column: column$1,
@@ -1749,6 +1789,18 @@ const enTranslations = {
   xbrlValidation: xbrlValidation$1,
   error: error$1
 };
+const conceptInfo = {
+  title: "Conceptinformatie",
+  conceptName: "Conceptnaam",
+  type: "Type",
+  substitutionGroup: "Substitutiegroep",
+  periodType: "Periodetype",
+  balance: "Saldo",
+  documentation: "Documentatie",
+  instant: "Moment",
+  duration: "Periode",
+  close: "Sluiten"
+};
 const form = {
   loading: "Formulier laden...",
   submit: "Valideren",
@@ -1893,6 +1945,7 @@ const error = {
   }
 };
 const nlTranslations = {
+  conceptInfo,
   form,
   filter,
   column,
@@ -2139,7 +2192,7 @@ class DraftStorageService {
   /**
    * Create metadata snapshot from current form state
    */
-  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences, periodData, unitData, reportingLanguage = "en", repeatCounts, decimalsData) {
+  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences, periodData, unitData, reportingLanguage = "en", repeatCounts, decimalsData, roleCompletedStates) {
     return {
       periodStartDate,
       periodEndDate,
@@ -2154,6 +2207,7 @@ class DraftStorageService {
       unitData,
       decimalsData,
       repeatCounts,
+      roleCompletedStates,
       schemaVersion: this.STORAGE_VERSION
     };
   }
@@ -4293,6 +4347,7 @@ let JupiterConceptTree = class extends LitElement {
     this.typedMemberData = {};
     this.showAddButton = false;
     this.showRemoveButton = false;
+    this.language = "en";
     this._expanded = true;
   }
   connectedCallback() {
@@ -4362,6 +4417,108 @@ let JupiterConceptTree = class extends LitElement {
     }));
     console.log(`🌲 [ConceptTree] Forwarded period-change event to form-section`);
   }
+  _getDocLabel() {
+    const meta = this.concept.conceptMetadata;
+    if (!meta)
+      return "";
+    const lang = this.language || this.locale.split("-")[0];
+    return meta.documentationLabels[lang] || meta.documentationLabels["en"] || meta.documentationLabels["nl"] || "";
+  }
+  _escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  _ensureDialogStyles() {
+    if (document.getElementById("jdf-concept-info-dialog-styles"))
+      return;
+    const style = document.createElement("style");
+    style.id = "jdf-concept-info-dialog-styles";
+    style.textContent = `
+      dialog.jdf-concept-info-dialog {
+        border: none; border-radius: 8px; padding: 0;
+        max-width: 480px; width: 90vw;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden;
+      }
+      dialog.jdf-concept-info-dialog::backdrop { background: rgba(0,0,0,0.35); }
+      .jdf-dialog-header {
+        background: #f0f2f5; padding: 14px 20px;
+        display: flex; align-items: center; justify-content: space-between;
+        border-bottom: 1px solid #ddd;
+      }
+      .jdf-dialog-title { font-size: 15px; font-weight: 600; color: #333; margin: 0; font-family: inherit; }
+      .jdf-dialog-close-btn {
+        width: 28px; height: 28px; border: none; background: transparent;
+        font-size: 20px; line-height: 1; cursor: pointer; color: #666;
+        border-radius: 4px; display: flex; align-items: center; justify-content: center;
+        padding: 0; font-family: inherit;
+      }
+      .jdf-dialog-close-btn:hover { background: #ddd; color: #333; }
+      .jdf-dialog-body { padding: 20px; }
+      .jdf-info-table { width: 100%; border-collapse: collapse; font-size: 14px; font-family: inherit; }
+      .jdf-info-table tr:not(:last-child) td { border-bottom: 1px solid #f0f0f0; }
+      .jdf-info-table td { padding: 9px 4px; vertical-align: top; }
+      .jdf-info-label { font-weight: 600; color: #666; width: 40%; white-space: nowrap; padding-right: 16px; }
+      .jdf-info-value { color: #333; word-break: break-all; }
+      .jdf-info-value.doc-text { font-style: italic; color: #555; line-height: 1.5; word-break: normal; }
+      .jdf-period-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
+      .jdf-period-pill.instant { background: rgba(25,118,210,0.1); color: #1565c0; border: 1px solid rgba(25,118,210,0.3); }
+      .jdf-period-pill.duration { background: rgba(56,142,60,0.1); color: #2e7d32; border: 1px solid rgba(56,142,60,0.3); }
+      .jdf-balance-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
+      .jdf-balance-pill.debit { background: rgba(211,47,47,0.1); color: #c62828; border: 1px solid rgba(211,47,47,0.3); }
+      .jdf-balance-pill.credit { background: rgba(56,142,60,0.1); color: #2e7d32; border: 1px solid rgba(56,142,60,0.3); }
+    `;
+    document.head.appendChild(style);
+  }
+  _openInfoDialog(e2) {
+    var _a;
+    e2.stopPropagation();
+    this._ensureDialogStyles();
+    const meta = this.concept.conceptMetadata;
+    const docLabel = this._getDocLabel();
+    const periodType = (meta == null ? void 0 : meta.periodType) || this.concept.periodType;
+    const balance = (meta == null ? void 0 : meta.balance) || this.concept.balance;
+    const periodLabel = periodType === "instant" ? I18n.t("conceptInfo.instant") : I18n.t("conceptInfo.duration");
+    const rows = [
+      { label: I18n.t("conceptInfo.conceptName"), valueHtml: this._escapeHtml((meta == null ? void 0 : meta.conceptName) || this.concept.name) },
+      { label: I18n.t("conceptInfo.type"), valueHtml: this._escapeHtml((meta == null ? void 0 : meta.type) || this.concept.type || "—") }
+    ];
+    if (meta == null ? void 0 : meta.substitutionGroup) {
+      rows.push({ label: I18n.t("conceptInfo.substitutionGroup"), valueHtml: this._escapeHtml(meta.substitutionGroup) });
+    }
+    rows.push({ label: I18n.t("conceptInfo.periodType"), valueHtml: `<span class="jdf-period-pill ${periodType}">${this._escapeHtml(periodLabel)}</span>` });
+    if (balance) {
+      rows.push({ label: I18n.t("conceptInfo.balance"), valueHtml: `<span class="jdf-balance-pill ${balance}">${this._escapeHtml(balance)}</span>` });
+    }
+    if (docLabel) {
+      rows.push({ label: I18n.t("conceptInfo.documentation"), valueHtml: this._escapeHtml(docLabel), isDoc: true });
+    }
+    const rowsHtml = rows.map((r2) => `
+      <tr>
+        <td class="jdf-info-label">${this._escapeHtml(r2.label)}</td>
+        <td class="jdf-info-value${r2.isDoc ? " doc-text" : ""}">${r2.valueHtml}</td>
+      </tr>
+    `).join("");
+    const dialog = document.createElement("dialog");
+    dialog.className = "jdf-concept-info-dialog";
+    dialog.innerHTML = `
+      <div class="jdf-dialog-header">
+        <h3 class="jdf-dialog-title">${this._escapeHtml(I18n.t("conceptInfo.title"))}</h3>
+        <button class="jdf-dialog-close-btn" type="button" aria-label="${this._escapeHtml(I18n.t("conceptInfo.close"))}">×</button>
+      </div>
+      <div class="jdf-dialog-body">
+        <table class="jdf-info-table">${rowsHtml}</table>
+      </div>
+    `;
+    document.body.appendChild(dialog);
+    (_a = dialog.querySelector(".jdf-dialog-close-btn")) == null ? void 0 : _a.addEventListener("click", () => dialog.close());
+    dialog.addEventListener("click", (ev) => {
+      const rect = dialog.getBoundingClientRect();
+      if (ev.clientX < rect.left || ev.clientX > rect.right || ev.clientY < rect.top || ev.clientY > rect.bottom) {
+        dialog.close();
+      }
+    });
+    dialog.addEventListener("close", () => document.body.removeChild(dialog));
+    dialog.showModal();
+  }
   render() {
     const hasChildren = this.concept.children && this.concept.children.length > 0;
     const level = this.concept.level || 0;
@@ -4383,6 +4540,8 @@ let JupiterConceptTree = class extends LitElement {
           ${this.concept.balance ? html`
             <div class="concept-balance ${this.concept.balance}">${this.concept.balance}</div>
           ` : ""}
+          <button class="concept-info-btn" type="button" title="${I18n.t("conceptInfo.title")}"
+            @click="${this._openInfoDialog}">ℹ</button>
           ${this.showAddButton ? html`
             <button class="repeat-btn" type="button" title="Add row"
               @click="${this._handleAddRepeat}">+</button>
@@ -4434,6 +4593,7 @@ let JupiterConceptTree = class extends LitElement {
           </td>
         `;
     })}
+
     `;
   }
 };
@@ -4607,6 +4767,36 @@ JupiterConceptTree.styles = css`
       box-shadow: inset 0 0 0 2px var(--jupiter-error-color, #d32f2f);
     }
 
+    .concept-info-btn {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--jupiter-text-secondary, #888);
+      font-size: 12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.15s, background 0.15s, color 0.15s;
+      padding: 0;
+      margin-left: 4px;
+      line-height: 1;
+    }
+
+    .concept-content:hover .concept-info-btn {
+      opacity: 1;
+    }
+
+    .concept-info-btn:hover {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: #fff;
+      border-color: var(--jupiter-primary-color, #1976d2);
+    }
+
   `;
 __decorateClass$5([
   n2({ type: Object })
@@ -4671,6 +4861,9 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: Object })
 ], JupiterConceptTree.prototype, "calculationErrorKeys", 2);
+__decorateClass$5([
+  n2({ type: String })
+], JupiterConceptTree.prototype, "language", 2);
 __decorateClass$5([
   r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
@@ -5340,6 +5533,7 @@ let JupiterFormSection = class extends LitElement {
     this.showFactsOnly = false;
     this.periodStartDate = "";
     this.periodEndDate = "";
+    this.language = "en";
     this._expanded = true;
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
@@ -5767,6 +5961,7 @@ let JupiterFormSection = class extends LitElement {
         .defaultUnits="${this.defaultUnits}"
         .disabled="${this.disabled}"
         .locale="${this.locale}"
+        .language="${this.language}"
         .expandedConcepts="${this._expandedConcepts}"
         .mode="${this.mode}"
         .masterData="${this.masterData}"
@@ -6284,6 +6479,9 @@ __decorateClass$3([
 __decorateClass$3([
   n2({ type: String })
 ], JupiterFormSection.prototype, "periodEndDate", 2);
+__decorateClass$3([
+  n2({ type: String })
+], JupiterFormSection.prototype, "language", 2);
 __decorateClass$3([
   r()
 ], JupiterFormSection.prototype, "_expanded", 2);
@@ -8203,6 +8401,7 @@ let JupiterDynamicForm = class extends LitElement {
     this._sidePanelCollapsed = false;
     this._adminRoleConfigs = {};
     this._roleBorderStatuses = /* @__PURE__ */ new Map();
+    this._roleCompletedStates = /* @__PURE__ */ new Map();
     this._showRoleContextMenu = false;
     this._contextMenuX = 0;
     this._contextMenuY = 0;
@@ -9921,6 +10120,7 @@ let JupiterDynamicForm = class extends LitElement {
     draftData.forEach((entry, index) => {
       console.log(`  [${index}] conceptId: ${entry.conceptId}, columnId: ${entry.columnId}, value: ${entry.value}, unit: ${entry.unit || "none"}`);
     });
+    const roleCompletedStates = this._roleCompletedStates.size > 0 ? Object.fromEntries(this._roleCompletedStates) : void 0;
     const metadata = this._draftStorageService.createMetadataSnapshot(
       this.periodStartDate,
       this.periodEndDate,
@@ -9934,7 +10134,8 @@ let JupiterDynamicForm = class extends LitElement {
       this._unitData,
       this.reportingLanguage,
       this._repeatCounts,
-      this._decimalsData
+      this._decimalsData,
+      roleCompletedStates
     );
     const draftPayloadSnapshot = JSON.stringify({
       draftData,
@@ -10064,6 +10265,10 @@ let JupiterDynamicForm = class extends LitElement {
       this._decimalsData = metadata.decimalsData;
       console.log("🔄 Restored per-fact decimals data:", Object.keys(this._decimalsData).length, "concepts");
     }
+    if (metadata.roleCompletedStates) {
+      this._roleCompletedStates = new Map(Object.entries(metadata.roleCompletedStates));
+      console.log("🔄 Restored role completed states:", Object.keys(metadata.roleCompletedStates).length, "roles");
+    }
     if (metadata.periodPreferences) {
       if (this._skipPeriodPreferencesRestore) {
         console.log("⏭️ Skipping period preferences restoration - using new filter selections");
@@ -11065,6 +11270,15 @@ let JupiterDynamicForm = class extends LitElement {
     console.log(`ℹ️  User can re-add this role using the Filter Roles dialog`);
     this._closeRoleContextMenu();
   }
+  _handleRoleCompletedChange(roleId, checked) {
+    if (checked) {
+      this._roleCompletedStates.set(roleId, true);
+    } else {
+      this._roleCompletedStates.delete(roleId);
+    }
+    this._roleCompletedStates = new Map(this._roleCompletedStates);
+    this._handleSaveDraft("auto");
+  }
   _handleSidePanelRoleClick(roleId) {
     if (this._activeSidePanelRoleId && this._activeSidePanelRoleId !== roleId) {
       this._analyzeAndLogRole(this._activeSidePanelRoleId);
@@ -11102,6 +11316,10 @@ let JupiterDynamicForm = class extends LitElement {
       result = "INVALID";
       console.warn(`
 🔴 RESULT: INVALID (contains validation errors)`);
+    } else if (filledCount === 0) {
+      result = "UNTOUCHED";
+      console.warn(`
+⬜ RESULT: UNTOUCHED (no data entered)`);
     } else if (emptyCount > 0) {
       result = "INCOMPLETE";
       console.warn(`
@@ -11115,7 +11333,10 @@ let JupiterDynamicForm = class extends LitElement {
 `);
     if (result === "INVALID")
       ;
-    else if (result === "INCOMPLETE") {
+    else if (result === "UNTOUCHED") {
+      this._roleBorderStatuses.set(roleId, "untouched");
+      this._roleBorderStatuses = new Map(this._roleBorderStatuses);
+    } else if (result === "INCOMPLETE") {
       this._roleBorderStatuses.set(roleId, "incomplete");
       this._roleBorderStatuses = new Map(this._roleBorderStatuses);
     } else {
@@ -11687,6 +11908,7 @@ let JupiterDynamicForm = class extends LitElement {
             .disabled="${this.disabled || this.readonly}"
             .collapsible="${config.collapsibleSections !== false}"
             .locale="${config.locale || "en-US"}"
+            .language="${this.language}"
             .isFirstSection="${index === 0}"
             .availableDimensions="${this._getAvailableDimensionsForSection(section2.id)}"
             .mode="${this.mode}"
@@ -11777,7 +11999,8 @@ let JupiterDynamicForm = class extends LitElement {
             ${filteredSections.map((section2) => {
       const hasErrors = this._roleHasErrors(section2.id);
       const borderStatus = this._roleBorderStatuses.get(section2.id);
-      const statusClass = hasErrors ? "has-errors" : borderStatus === "incomplete" ? "has-empty-fields" : borderStatus === "complete" ? "has-complete-data" : "";
+      const isManuallyCompleted = this._roleCompletedStates.get(section2.id) === true;
+      const statusClass = isManuallyCompleted ? "has-complete-data" : hasErrors ? "has-errors" : borderStatus === "untouched" ? "has-no-data" : borderStatus === "incomplete" ? "has-empty-fields" : borderStatus === "complete" ? "has-complete-data" : "";
       return html`
                 <div 
                   class="side-panel-role-item ${section2.id === this._activeSidePanelRoleId ? "active" : ""} ${statusClass}"
@@ -11830,6 +12053,7 @@ let JupiterDynamicForm = class extends LitElement {
                 .collapsible="${false}"
                 .hideHeader="${true}"
                 .locale="${config.locale || "en-US"}"
+                .language="${this.language}"
                 .isFirstSection="${true}"
                 .availableDimensions="${this._getAvailableDimensionsForSection(activeSection.id)}"
                 .mode="${this.mode}"
@@ -11847,6 +12071,15 @@ let JupiterDynamicForm = class extends LitElement {
                 @column-remove="${this._handleColumnRemove}"
                 @column-add-request="${this._handleColumnAddRequest}"
               ></jupiter-form-section>
+              <div class="role-completion-row">
+                <input
+                  type="checkbox"
+                  id="role-complete-${activeSection.id}"
+                  .checked="${this._roleCompletedStates.get(activeSection.id) === true}"
+                  @change="${(e2) => this._handleRoleCompletedChange(activeSection.id, e2.target.checked)}"
+                >
+                <label for="role-complete-${activeSection.id}">Mark as completed</label>
+              </div>
             ` : html`
               <div class="no-roles-message">
                 <h3>${I18n.t("form.noRoleSelected")}</h3>
@@ -12472,6 +12705,14 @@ JupiterDynamicForm.styles = css`
       border-left: 2px solid var(--jupiter-error-color, #d32f2f);
     }
 
+    .side-panel-role-item.has-no-data {
+      border-left: 2px solid var(--jupiter-untouched-color, #757575);
+    }
+
+    .side-panel-role-item.has-no-data.active {
+      border-left: 2px solid var(--jupiter-untouched-color, #757575);
+    }
+
     .side-panel-role-item.has-empty-fields {
       border-left: 2px solid var(--jupiter-warning-color, #ff9800);
     }
@@ -12488,6 +12729,31 @@ JupiterDynamicForm.styles = css`
       border-left: 2px solid var(--jupiter-success-color, #4caf50);
     }
 
+    .role-completion-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 16px;
+      border-top: 1px solid var(--jupiter-border-color, #e0e0e0);
+      margin-top: 4px;
+      background: var(--jupiter-background, #fff);
+    }
+
+    .role-completion-row input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      accent-color: var(--jupiter-success-color, #4caf50);
+      flex-shrink: 0;
+    }
+
+    .role-completion-row label {
+      font-size: 14px;
+      color: var(--jupiter-text-secondary, #555);
+      cursor: pointer;
+      user-select: none;
+    }
+
     .side-panel-content {
       flex: 1;
       overflow-y: auto;
@@ -12983,6 +13249,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_roleBorderStatuses", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_roleCompletedStates", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_showRoleContextMenu", 2);