jupiter-dynamic-forms 1.14.0 → 1.14.2

package/dist/index.mjs

@@ -1908,6 +1908,7 @@ class DraftStorageService {
       periodEndDate,
       language,
       selectedRoleIds,
+      // Store enhanced structure (with roleURI and order) or legacy string array
       customColumns: this.extractCustomColumns(allSections),
       typedMemberData,
       periodPreferences,
@@ -4983,10 +4984,17 @@ let JupiterFilterRolesDialog = class extends LitElement {
     this.availableRoles = [];
     this.selectedRoleIds = [];
     this.periodPreferences = {};
+    this.mode = "user";
     this._tempSelectedRoles = /* @__PURE__ */ new Set();
     this._searchQuery = "";
     this._filteredRoles = [];
     this._tempPeriodPreferences = {};
+    this._selectedAvailableRole = null;
+    this._selectedChosenRole = null;
+    this._chosenSearchQuery = "";
+    this._draggedRoleId = null;
+    this._dragOverRoleId = null;
+    this._chosenRoleOrder = [];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -5053,6 +5061,19 @@ let JupiterFilterRolesDialog = class extends LitElement {
       searchInput.focus();
     }
   }
+  _handleChosenSearchInput(event) {
+    const input = event.target;
+    this._chosenSearchQuery = input.value;
+  }
+  _clearChosenSearch() {
+    var _a;
+    this._chosenSearchQuery = "";
+    const searchInput = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chosen-search-input");
+    if (searchInput) {
+      searchInput.value = "";
+      searchInput.focus();
+    }
+  }
   _highlightSearchTerm(text) {
     if (!this._searchQuery.trim()) {
       return text;
@@ -5069,6 +5090,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
   }
   _initializeTempSelection() {
     this._tempSelectedRoles = new Set(this.selectedRoleIds);
+    this._chosenRoleOrder = [...this.selectedRoleIds];
   }
   _initializePeriodPreferences() {
     const preferences = {};
@@ -5170,10 +5192,20 @@ let JupiterFilterRolesDialog = class extends LitElement {
     }));
   }
   _handleApply() {
-    const selectedRoles = Array.from(this._tempSelectedRoles);
+    const orderedRolesWithMetadata = this._chosenRoleOrder.map((roleId, index) => {
+      var _a;
+      const role = this.availableRoles.find((r2) => r2.id === roleId);
+      return {
+        roleId,
+        roleURI: ((_a = role == null ? void 0 : role.metadata) == null ? void 0 : _a.roleURI) || "",
+        order: index
+      };
+    });
+    console.log("✅ Apply Filter - Enhanced structure being emitted:", orderedRolesWithMetadata);
+    console.log("📋 Order array:", this._chosenRoleOrder);
     this.dispatchEvent(new CustomEvent("roles-filter-apply", {
       detail: {
-        selectedRoleIds: selectedRoles,
+        selectedRoleIds: orderedRolesWithMetadata,
         periodPreferences: this._tempPeriodPreferences
       },
       bubbles: true
@@ -5184,6 +5216,128 @@ let JupiterFilterRolesDialog = class extends LitElement {
       this._handleCancel();
     }
   }
+  // Picklist methods for admin mode
+  _handleAvailableRoleClick(roleId) {
+    this._selectedAvailableRole = roleId;
+    this._selectedChosenRole = null;
+    this.requestUpdate();
+  }
+  _handleChosenRoleClick(roleId) {
+    this._selectedChosenRole = roleId;
+    this._selectedAvailableRole = null;
+    this.requestUpdate();
+  }
+  _moveToChosen() {
+    if (!this._selectedAvailableRole)
+      return;
+    const newSelection = new Set(this._tempSelectedRoles);
+    newSelection.add(this._selectedAvailableRole);
+    this._tempSelectedRoles = newSelection;
+    if (!this._chosenRoleOrder.includes(this._selectedAvailableRole)) {
+      this._chosenRoleOrder = [...this._chosenRoleOrder, this._selectedAvailableRole];
+    }
+    this._selectedAvailableRole = null;
+    this.requestUpdate();
+  }
+  _moveToAvailable() {
+    if (!this._selectedChosenRole)
+      return;
+    const newSelection = new Set(this._tempSelectedRoles);
+    newSelection.delete(this._selectedChosenRole);
+    this._tempSelectedRoles = newSelection;
+    this._chosenRoleOrder = this._chosenRoleOrder.filter((id) => id !== this._selectedChosenRole);
+    this._selectedChosenRole = null;
+    this.requestUpdate();
+  }
+  _moveAllToChosen() {
+    const newSelection = new Set(this._tempSelectedRoles);
+    this._filteredRoles.forEach((role) => {
+      newSelection.add(role.id);
+      if (!this._chosenRoleOrder.includes(role.id)) {
+        this._chosenRoleOrder.push(role.id);
+      }
+    });
+    this._tempSelectedRoles = newSelection;
+    this._selectedAvailableRole = null;
+    this.requestUpdate();
+  }
+  _moveAllToAvailable() {
+    this._tempSelectedRoles = /* @__PURE__ */ new Set();
+    this._chosenRoleOrder = [];
+    this._selectedChosenRole = null;
+    this.requestUpdate();
+  }
+  _getAvailableRoles() {
+    return this._filteredRoles.filter((role) => !this._tempSelectedRoles.has(role.id));
+  }
+  _getChosenRoles() {
+    const chosenRoles = this.availableRoles.filter((role) => this._tempSelectedRoles.has(role.id));
+    const orderedRoles = this._chosenRoleOrder.map((roleId) => chosenRoles.find((role) => role.id === roleId)).filter((role) => role !== void 0);
+    const unorderedRoles = chosenRoles.filter((role) => !this._chosenRoleOrder.includes(role.id));
+    const allOrderedRoles = [...orderedRoles, ...unorderedRoles];
+    if (!this._chosenSearchQuery.trim()) {
+      return allOrderedRoles;
+    }
+    const query = this._chosenSearchQuery.toLowerCase().trim();
+    return allOrderedRoles.filter((role) => {
+      var _a;
+      const titleMatch = role.title.toLowerCase().includes(query);
+      const idMatch = role.id.toLowerCase().includes(query);
+      const descriptionMatch = ((_a = role.description) == null ? void 0 : _a.toLowerCase().includes(query)) || false;
+      const uriMatch = this._searchInRoleURI(role, query);
+      return titleMatch || idMatch || descriptionMatch || uriMatch;
+    });
+  }
+  // Drag and drop handlers
+  _handleDragStart(event, roleId) {
+    this._draggedRoleId = roleId;
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", roleId);
+    }
+    this.requestUpdate();
+  }
+  _handleDragOver(event, roleId) {
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "move";
+    }
+    if (this._draggedRoleId && this._draggedRoleId !== roleId) {
+      this._dragOverRoleId = roleId;
+      this.requestUpdate();
+    }
+  }
+  _handleDragLeave(event) {
+    this._dragOverRoleId = null;
+    this.requestUpdate();
+  }
+  _handleDrop(event, targetRoleId) {
+    event.preventDefault();
+    if (!this._draggedRoleId || this._draggedRoleId === targetRoleId) {
+      this._draggedRoleId = null;
+      this._dragOverRoleId = null;
+      this.requestUpdate();
+      return;
+    }
+    const newOrder = [...this._chosenRoleOrder];
+    const draggedIndex = newOrder.indexOf(this._draggedRoleId);
+    const targetIndex = newOrder.indexOf(targetRoleId);
+    if (draggedIndex !== -1 && targetIndex !== -1) {
+      newOrder.splice(draggedIndex, 1);
+      const newTargetIndex = draggedIndex < targetIndex ? targetIndex - 1 : targetIndex;
+      newOrder.splice(newTargetIndex, 0, this._draggedRoleId);
+      this._chosenRoleOrder = newOrder;
+      console.log("🔄 Reordered roles:", this._chosenRoleOrder);
+    }
+    this._draggedRoleId = null;
+    this._dragOverRoleId = null;
+    this.requestUpdate();
+  }
+  _handleDragEnd(event) {
+    this._draggedRoleId = null;
+    this._dragOverRoleId = null;
+    this.requestUpdate();
+  }
   render() {
     const selectedCount = this._tempSelectedRoles.size;
     const totalCount = this.availableRoles.length;
@@ -5202,6 +5356,152 @@ let JupiterFilterRolesDialog = class extends LitElement {
 
         <!-- Dialog Content -->
         <div class="dialog-content">
+          ${this.mode === "admin" ? html`
+            <!-- Admin Mode: Picklist Layout -->
+            <div class="picklist-container">
+              <!-- Available Roles Panel -->
+              <div class="picklist-panel">
+                <div class="picklist-header">
+                  Available Roles (${this._getAvailableRoles().length})
+                </div>
+                <div class="picklist-search">
+                  <div class="search-container">
+                    <input
+                      type="text"
+                      class="search-input"
+                      placeholder="${I18n.t("filter.searchPlaceholder")}"
+                      .value="${this._searchQuery}"
+                      @input="${this._handleSearchInput}"
+                    />
+                    ${this._searchQuery ? html`
+                      <button class="clear-search" @click="${this._clearSearch}" title="${I18n.t("filter.clearSearch")}">
+                        ×
+                      </button>
+                    ` : html`
+                      <svg class="search-icon" viewBox="0 0 24 24">
+                        <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+                      </svg>
+                    `}
+                  </div>
+                </div>
+                <div class="picklist-list">
+                  ${this._getAvailableRoles().map((role) => {
+      var _a;
+      return html`
+                    <div 
+                      class="picklist-item ${this._selectedAvailableRole === role.id ? "selected" : ""}"
+                      @click="${() => this._handleAvailableRoleClick(role.id)}"
+                      @dblclick="${() => {
+        this._handleAvailableRoleClick(role.id);
+        this._moveToChosen();
+      }}"
+                    >
+                      <div class="picklist-item-label">${role.title}</div>
+                      ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
+                        <div class="picklist-item-value">${role.metadata.roleURI}</div>
+                      ` : ""}
+                    </div>
+                  `;
+    })}
+                </div>
+                <div class="picklist-count">
+                  ${this._getAvailableRoles().length} role(s)
+                </div>
+              </div>
+
+              <!-- Control Buttons -->
+              <div class="picklist-controls">
+                <button 
+                  class="picklist-button"
+                  @click="${this._moveToChosen}"
+                  ?disabled="${!this._selectedAvailableRole}"
+                  title="Add selected role"
+                >
+                  ›
+                </button>
+                <button 
+                  class="picklist-button"
+                  @click="${this._moveAllToChosen}"
+                  ?disabled="${this._getAvailableRoles().length === 0}"
+                  title="Add all roles"
+                >
+                  »
+                </button>
+                <button 
+                  class="picklist-button"
+                  @click="${this._moveToAvailable}"
+                  ?disabled="${!this._selectedChosenRole}"
+                  title="Remove selected role"
+                >
+                  ‹
+                </button>
+                <button 
+                  class="picklist-button"
+                  @click="${this._moveAllToAvailable}"
+                  ?disabled="${this._tempSelectedRoles.size === 0}"
+                  title="Remove all roles"
+                >
+                  «
+                </button>
+              </div>
+
+              <!-- Chosen Roles Panel -->
+              <div class="picklist-panel">
+                <div class="picklist-header">
+                  Chosen Roles (${this._tempSelectedRoles.size})
+                </div>
+                <div class="picklist-search">
+                  <div class="search-container">
+                    <input
+                      type="text"
+                      class="search-input chosen-search-input"
+                      placeholder="${I18n.t("filter.searchPlaceholder")}"
+                      .value="${this._chosenSearchQuery}"
+                      @input="${this._handleChosenSearchInput}"
+                    />
+                    ${this._chosenSearchQuery ? html`
+                      <button class="clear-search" @click="${this._clearChosenSearch}" title="${I18n.t("filter.clearSearch")}">
+                        ×
+                      </button>
+                    ` : html`
+                      <svg class="search-icon" viewBox="0 0 24 24">
+                        <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+                      </svg>
+                    `}
+                  </div>
+                </div>
+                <div class="picklist-list">
+                  ${this._getChosenRoles().map((role) => {
+      var _a;
+      return html`
+                    <div 
+                      class="picklist-item ${this._selectedChosenRole === role.id ? "selected" : ""} ${this._draggedRoleId === role.id ? "dragging" : ""} ${this._dragOverRoleId === role.id ? "drag-over" : ""}"
+                      draggable="true"
+                      @click="${() => this._handleChosenRoleClick(role.id)}"
+                      @dblclick="${() => {
+        this._handleChosenRoleClick(role.id);
+        this._moveToAvailable();
+      }}"
+                      @dragstart="${(e2) => this._handleDragStart(e2, role.id)}"
+                      @dragover="${(e2) => this._handleDragOver(e2, role.id)}"
+                      @dragleave="${(e2) => this._handleDragLeave(e2)}"
+                      @drop="${(e2) => this._handleDrop(e2, role.id)}"
+                      @dragend="${(e2) => this._handleDragEnd(e2)}"
+                    >
+                      <div class="picklist-item-label">${role.title}</div>
+                      ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
+                        <div class="picklist-item-value">${role.metadata.roleURI}</div>
+                      ` : ""}
+                    </div>
+                  `;
+    })}
+                </div>
+                <div class="picklist-count">
+                  ${this._tempSelectedRoles.size} role(s) selected
+                </div>
+              </div>
+            </div>
+          ` : html`
           <p class="description">
             ${I18n.t("filter.description")}
           </p>
@@ -5313,8 +5613,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
     })}
             `}
           </div>
-
-        
+          `}
         </div>
 
         <!-- Dialog Actions -->
@@ -5659,6 +5958,126 @@ JupiterFilterRolesDialog.styles = css`
       opacity: 0.6;
       cursor: not-allowed;
     }
+
+    /* Picklist Styles for Admin Mode */
+    .picklist-container {
+      display: flex;
+      gap: 16px;
+      height: 500px;
+    }
+
+    .picklist-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .picklist-header {
+      padding: 12px;
+      background: var(--jupiter-background-light, #f8f9fa);
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+      font-weight: 600;
+      color: var(--jupiter-text-primary, #333);
+      font-size: 14px;
+    }
+
+    .picklist-search {
+      padding: 12px;
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+    }
+
+    .picklist-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px;
+    }
+
+    .picklist-item {
+      padding: 10px 12px;
+      margin-bottom: 4px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      background: var(--jupiter-background, #fff);
+    }
+
+    .picklist-item:hover {
+      background: var(--jupiter-hover-background, #f5f5f5);
+      border-color: var(--jupiter-primary-color, #1976d2);
+    }
+
+    .picklist-item.selected {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      border-color: var(--jupiter-primary-color, #1976d2);
+    }
+
+    .picklist-item.dragging {
+      opacity: 0.5;
+      cursor: move;
+    }
+
+    .picklist-item.drag-over {
+      border-top: 3px solid var(--jupiter-primary-color, #1976d2);
+      margin-top: 3px;
+    }
+
+    .picklist-item[draggable="true"] {
+      cursor: move;
+    }
+
+    .picklist-item-label {
+      font-weight: 500;
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+
+    .picklist-item-value {
+      font-size: 11px;
+      opacity: 0.8;
+      word-break: break-all;
+    }
+
+    .picklist-controls {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 8px;
+      padding: 0 8px;
+    }
+
+    .picklist-button {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: background-color 0.2s ease;
+    }
+
+    .picklist-button:hover:not(:disabled) {
+      background: var(--jupiter-primary-color-dark, #1565c0);
+    }
+
+    .picklist-button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .picklist-count {
+      padding: 8px 12px;
+      font-size: 12px;
+      color: var(--jupiter-text-secondary, #666);
+      background: var(--jupiter-background-light, #f8f9fa);
+      border-top: 1px solid var(--jupiter-border-color, #ddd);
+      text-align: center;
+    }
   `;
 __decorateClass$1([
   n2({ type: Boolean, reflect: true })
@@ -5672,6 +6091,9 @@ __decorateClass$1([
 __decorateClass$1([
   n2({ type: Object })
 ], JupiterFilterRolesDialog.prototype, "periodPreferences", 2);
+__decorateClass$1([
+  n2({ type: String })
+], JupiterFilterRolesDialog.prototype, "mode", 2);
 __decorateClass$1([
   r()
 ], JupiterFilterRolesDialog.prototype, "_tempSelectedRoles", 2);
@@ -5684,6 +6106,24 @@ __decorateClass$1([
 __decorateClass$1([
   r()
 ], JupiterFilterRolesDialog.prototype, "_tempPeriodPreferences", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_selectedAvailableRole", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_selectedChosenRole", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_chosenSearchQuery", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_draggedRoleId", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_dragOverRoleId", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_chosenRoleOrder", 2);
 JupiterFilterRolesDialog = __decorateClass$1([
   t$1("jupiter-filter-roles-dialog")
 ], JupiterFilterRolesDialog);
@@ -5924,11 +6364,26 @@ let JupiterDynamicForm = class extends LitElement {
     });
     this._periodPreferences = preferences;
   }
+  /**
+   * Helper method to extract roleIds from _selectedRoleIds
+   * Handles both legacy string[] and enhanced object[] structure
+   */
+  _getRoleIdsArray() {
+    if (!Array.isArray(this._selectedRoleIds) || this._selectedRoleIds.length === 0) {
+      return [];
+    }
+    if (typeof this._selectedRoleIds[0] === "string") {
+      return this._selectedRoleIds;
+    } else {
+      return this._selectedRoleIds.map((item) => item.roleId);
+    }
+  }
   _applyRoleFilter() {
     if (!this._currentSchema || !this._allSections.length)
       return;
-    console.log(`🔍 Applying role filter: ${this._selectedRoleIds.length} selected out of ${this._allSections.length} total`);
-    if (this._selectedRoleIds.length === 0) {
+    const roleIds = this._getRoleIdsArray();
+    console.log(`🔍 Applying role filter: ${roleIds.length} selected out of ${this._allSections.length} total`);
+    if (roleIds.length === 0) {
       console.log(`📝 No roles selected - showing empty form`);
       this._currentSchema = {
         ...this._currentSchema,
@@ -5939,17 +6394,38 @@ let JupiterDynamicForm = class extends LitElement {
     }
     this._preserveDataForHiddenSections();
     const filteredSections = this._allSections.filter(
-      (section2) => this._selectedRoleIds.includes(section2.id)
+      (section2) => roleIds.includes(section2.id)
     );
-    console.log(`📊 Filtered sections: ${filteredSections.length} (IDs: ${filteredSections.map((s2) => s2.id).join(", ")})`);
-    this._restoreDataForVisibleSections(filteredSections);
+    const orderedSections = this._sortSectionsByCustomOrder(filteredSections);
+    console.log(`📊 Filtered sections: ${orderedSections.length}`);
+    console.log(`📋 Custom order applied:`, orderedSections.map((s2) => s2.title));
+    this._restoreDataForVisibleSections(orderedSections);
     this._currentSchema = {
       ...this._currentSchema,
-      sections: filteredSections
+      sections: orderedSections
     };
-    console.log(`✅ Schema updated. Current sections count: ${this._currentSchema.sections.length}`);
+    console.log(`✅ Schema updated with custom order. Current sections count: ${this._currentSchema.sections.length}`);
     this.requestUpdate();
   }
+  /**
+   * Sort sections according to custom order from _selectedRoleIds
+   * Handles both enhanced structure and legacy string array
+   */
+  _sortSectionsByCustomOrder(sections) {
+    if (Array.isArray(this._selectedRoleIds) && this._selectedRoleIds.length > 0 && typeof this._selectedRoleIds[0] === "object") {
+      const enhancedRoles = this._selectedRoleIds;
+      const orderMap = /* @__PURE__ */ new Map();
+      enhancedRoles.forEach((role) => {
+        orderMap.set(role.roleId, role.order);
+      });
+      return [...sections].sort((a2, b2) => {
+        const orderA = orderMap.get(a2.id) ?? 999;
+        const orderB = orderMap.get(b2.id) ?? 999;
+        return orderA - orderB;
+      });
+    }
+    return sections;
+  }
   /**
    * Filter roles based on financialStatementsTypeAxis property
    * Rules:
@@ -6020,8 +6496,9 @@ let JupiterDynamicForm = class extends LitElement {
   _preserveDataForHiddenSections() {
     var _a;
     const currentlyVisibleSectionIds = ((_a = this._currentSchema) == null ? void 0 : _a.sections.map((s2) => s2.id)) || [];
+    const selectedRoleIds = this._getRoleIdsArray();
     const sectionsThatWillBeHidden = currentlyVisibleSectionIds.filter(
-      (sectionId) => !this._selectedRoleIds.includes(sectionId)
+      (sectionId) => !selectedRoleIds.includes(sectionId)
     );
     sectionsThatWillBeHidden.forEach((sectionId) => {
       const section2 = this._allSections.find((s2) => s2.id === sectionId);
@@ -6084,7 +6561,8 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _handleFilterDialogCancel() {
     this._showFilterDialog = false;
-    console.log(`🚫 Filter dialog cancelled. Current selection: ${this._selectedRoleIds.length}/${this._allSections.length}`);
+    const roleCount = this._getRoleIdsArray().length;
+    console.log(`🚫 Filter dialog cancelled. Current selection: ${roleCount}/${this._allSections.length}`);
   }
   _handleRoleFilterApply(event) {
     const { selectedRoleIds, periodPreferences } = event.detail;
@@ -6100,6 +6578,7 @@ let JupiterDynamicForm = class extends LitElement {
         this.periodEndDate,
         this.language,
         this._selectedRoleIds,
+        // Enhanced structure with roleURI and order
         this._allSections,
         this._typedMemberData,
         this._periodPreferences,
@@ -6121,12 +6600,15 @@ let JupiterDynamicForm = class extends LitElement {
       this._applyRoleFilter();
     }
     this._showFilterDialog = false;
-    console.log(`🎯 Applied role filter: ${selectedRoleIds.length}/${this._allSections.length} roles selected`);
+    const roleCount = Array.isArray(this._selectedRoleIds) && this._selectedRoleIds.length > 0 ? typeof this._selectedRoleIds[0] === "string" ? this._selectedRoleIds.length : this._selectedRoleIds.length : 0;
+    console.log(`🎯 Applied role filter: ${roleCount}/${this._allSections.length} roles selected`);
+    console.log("📋 Enhanced selectedRoleIds structure:", this._selectedRoleIds);
     this.dispatchEvent(new CustomEvent("roles-filter-changed", {
       detail: {
         selectedRoleIds,
+        // Enhanced structure with roleURI and order
         totalRoles: this._allSections.length,
-        visibleRoles: selectedRoleIds.length,
+        visibleRoles: roleCount,
         periodPreferences
       },
       bubbles: true
@@ -6796,6 +7278,7 @@ let JupiterDynamicForm = class extends LitElement {
     console.log("📝 Form submission started...");
     this._submitted = true;
     if (this.mode === "admin") {
+      this._handleSaveDraft();
       this._handleAdminModeSubmit();
       return;
     }
@@ -6830,6 +7313,7 @@ let JupiterDynamicForm = class extends LitElement {
     console.log(`✅ [Save Draft] No validation errors, proceeding with save...`);
     console.log("💾 Raw form data before submission generation:", this._formData);
     console.log("🏷️ Unit data before submission generation:", this._unitData);
+    console.log("📋 Enhanced selectedRoleIds with roleURI and order:", this._selectedRoleIds);
     const draftData = this._generateSubmissionData();
     console.log("📤 Generated submission data:", draftData);
     console.log("📊 Submission data breakdown:");
@@ -6841,6 +7325,7 @@ let JupiterDynamicForm = class extends LitElement {
       this.periodEndDate,
       this.language,
       this._selectedRoleIds,
+      // Enhanced structure: Array<{ roleId, roleURI, order }> or string[]
       this._allSections,
       this._typedMemberData,
       this._periodPreferences,
@@ -6848,6 +7333,7 @@ let JupiterDynamicForm = class extends LitElement {
       this._unitData
     );
     const saved = this._draftStorageService.saveDraft(draftData, metadata);
+    console.log("💾 [Save Draft] Metadata saved with enhanced selectedRoleIds:", metadata.selectedRoleIds);
     this.dynaformsFacts = draftData;
     this.dynaformsMetadata = metadata;
     this.dispatchEvent(new CustomEvent("form-save-draft", {
@@ -6865,12 +7351,14 @@ let JupiterDynamicForm = class extends LitElement {
       bubbles: true,
       composed: true
     }));
+    const roleCount = this._getRoleIdsArray().length;
     console.log("💾 Draft saved - localStorage + event emitted", {
       entries: draftData.length,
       saved,
-      roles: this._selectedRoleIds.length,
+      roles: roleCount,
       customColumns: metadata.customColumns.length,
-      eventEmitted: true
+      eventEmitted: true,
+      enhancedRoleStructure: Array.isArray(this._selectedRoleIds) && this._selectedRoleIds.length > 0 && typeof this._selectedRoleIds[0] === "object"
     });
   }
   // ===========================================
@@ -7797,7 +8285,7 @@ let JupiterDynamicForm = class extends LitElement {
     });
   }
   _renderAdminModeContent(section2) {
-    var _a, _b, _c;
+    var _a;
     if (!section2) {
       return html`
         <div class="admin-mode-container">
@@ -7805,10 +8293,7 @@ let JupiterDynamicForm = class extends LitElement {
         </div>
       `;
     }
-    const showPreviousYearChecked = ((_a = this._adminRoleConfigs[section2.id]) == null ? void 0 : _a.showPreviousYear) ?? section2.showPreviousYear ?? false;
-    const instantChecked = ((_b = this._adminRoleConfigs[section2.id]) == null ? void 0 : _b.instant) ?? section2.instant ?? false;
-    const durationChecked = ((_c = this._adminRoleConfigs[section2.id]) == null ? void 0 : _c.duration) ?? section2.duration ?? false;
-    const hasMixedPeriodTypes = section2.showPeriodControl === true;
+    const showPreviousYearChecked = ((_a = this._periodPreferences[section2.id]) == null ? void 0 : _a.showPreviousYear) ?? section2.showPreviousYear ?? false;
     return html`
       <div class="admin-mode-container">
         <h2 class="admin-mode-title">Role Configuration: ${section2.title}</h2>
@@ -7824,32 +8309,6 @@ let JupiterDynamicForm = class extends LitElement {
               <label for="admin-prev-year-${section2.id}">Show Previous Year Column</label>
             </div>
           </div>
-          
-          ${hasMixedPeriodTypes ? html`
-            <div class="admin-role-item">
-              <div class="admin-role-checkbox">
-                <input
-                  type="checkbox"
-                  id="admin-instant-${section2.id}"
-                  .checked="${instantChecked}"
-                  @change="${(e2) => this._handleAdminCheckboxChange(section2.id, "instant", e2.target.checked)}"
-                />
-                <label for="admin-instant-${section2.id}">Show Instant Column</label>
-              </div>
-            </div>
-            
-            <div class="admin-role-item">
-              <div class="admin-role-checkbox">
-                <input
-                  type="checkbox"
-                  id="admin-duration-${section2.id}"
-                  .checked="${durationChecked}"
-                  @change="${(e2) => this._handleAdminCheckboxChange(section2.id, "duration", e2.target.checked)}"
-                />
-                <label for="admin-duration-${section2.id}">Show Duration Column</label>
-              </div>
-            </div>
-          ` : ""}
         </div>
       </div>
     `;
@@ -7863,6 +8322,20 @@ let JupiterDynamicForm = class extends LitElement {
         [field2]: checked
       }
     };
+    const currentPeriodPref = this._periodPreferences[roleId] || {
+      showDuration: true,
+      showInstant: true,
+      showPreviousYear: false
+    };
+    this._periodPreferences = {
+      ...this._periodPreferences,
+      [roleId]: {
+        ...currentPeriodPref,
+        [field2]: checked
+      }
+    };
+    console.log(`✅ [Admin Mode] Updated ${field2} = ${checked} for role ${roleId}`);
+    console.log(`📋 [Admin Mode] _periodPreferences now includes:`, this._periodPreferences[roleId]);
   }
   _handleAdminModeSubmit() {
     var _a, _b, _c, _d;
@@ -7883,24 +8356,33 @@ let JupiterDynamicForm = class extends LitElement {
       };
       if (config !== void 0 && isSelected) {
         updatedRole.showPreviousYear = config.showPreviousYear;
-        if (config.instant !== void 0) {
-          updatedRole.instant = config.instant;
-        }
-        if (config.duration !== void 0) {
-          updatedRole.duration = config.duration;
-        }
       }
       return updatedRole;
     });
+    const savedMetadata = this.dynaformsMetadata || this._loadMetadataFromLocalStorage();
+    console.log("📋 Updated Presentation Data:", updatedPresentationData);
+    console.log("📋 Metadata from localStorage:", savedMetadata);
     this.dispatchEvent(new CustomEvent("admin-config-updated", {
       detail: {
         presentationData: updatedPresentationData,
-        roleConfigs: this._adminRoleConfigs
+        roleConfigs: this._adminRoleConfigs,
+        metadata: savedMetadata
       },
       bubbles: true,
       composed: true
     }));
-    console.log("✅ Admin configuration saved successfully");
+    console.log("✅ Admin configuration saved successfully with metadata");
+  }
+  _loadMetadataFromLocalStorage() {
+    try {
+      const metadataStr = localStorage.getItem("jupiter-form-draft-metadata");
+      if (metadataStr) {
+        return JSON.parse(metadataStr);
+      }
+    } catch (error2) {
+      console.error("Failed to load metadata from localStorage:", error2);
+    }
+    return null;
   }
   _renderAccordionLayout(schema, config, showValidationSummary, errorCount) {
     return html`
@@ -8144,13 +8626,15 @@ let JupiterDynamicForm = class extends LitElement {
             </button>
           ` : ""}
           
-          <button 
-            class="btn-secondary"
-            @click="${this._handleSaveDraft}"
-            ?disabled="${this.disabled || this.readonly}"
-          >
-            ${I18n.t("form.saveDraft")}
-          </button>
+          ${this.mode !== "admin" ? html`
+            <button 
+              class="btn-secondary"
+              @click="${this._handleSaveDraft}"
+              ?disabled="${this.disabled || this.readonly}"
+            >
+              ${I18n.t("form.saveDraft")}
+            </button>
+          ` : ""}
           
           <button 
             class="btn-primary"
@@ -8160,11 +8644,7 @@ let JupiterDynamicForm = class extends LitElement {
             ${I18n.t("form.submit")}
           </button>
 
-          <div class="form-meta">
-            <span>${I18n.t("form.errors")}: ${errorCount}</span>
-            <span>${I18n.t("form.modified")}: ${this._dirty ? I18n.t("form.yes") : I18n.t("form.no")}</span>
-            <span>${I18n.t("form.valid")}: ${this._valid ? I18n.t("form.yes") : I18n.t("form.no")}</span>
-          </div>
+         
         </div>
 
         <!-- Filter Roles Dialog -->
@@ -8172,8 +8652,9 @@ let JupiterDynamicForm = class extends LitElement {
           <jupiter-filter-roles-dialog
             ?open="${this._showFilterDialog}"
             .availableRoles="${this._allSections}"
-            .selectedRoleIds="${this._selectedRoleIds}"
+            .selectedRoleIds="${this._getRoleIdsArray()}"
             .periodPreferences="${this._periodPreferences}"
+            .mode="${this.mode}"
             @dialog-cancel="${this._handleFilterDialogCancel}"
             @roles-filter-apply="${this._handleRoleFilterApply}"
             @click="${this._handleFilterDialogCancel}"