jupiter-dynamic-forms 1.12.0 → 1.12.2

package/dist/index.mjs

@@ -523,6 +523,23 @@ class FormValidator {
   }
 }
 class XBRLFormBuilder {
+  /**
+   * Format period range for display - shows only year when both dates are in same year
+   * @param startDate - Period start date in YYYY-MM-DD format
+   * @param endDate - Period end date in YYYY-MM-DD format
+   * @returns Formatted period string (e.g., "2025" or "2025-01-01 / 2026-12-31")
+   */
+  static formatPeriodDisplay(startDate, endDate) {
+    if (!startDate || !endDate) {
+      return `${startDate} / ${endDate}`;
+    }
+    const startYear = startDate.substring(0, 4);
+    const endYear = endDate.substring(0, 4);
+    if (startYear === endYear) {
+      return startYear;
+    }
+    return `${startDate} / ${endDate}`;
+  }
   /**
    * Create unique concept ID by combining original ID with preferred label suffix
    * This handles cases where the same concept appears multiple times with different labels
@@ -638,41 +655,9 @@ class XBRLFormBuilder {
     if (!concept.elementAbstract) {
       let columnIds = [];
       if ((roleInfo == null ? void 0 : roleInfo.availableColumnIds) && roleInfo.availableColumnIds.length > 0) {
-        columnIds = roleInfo.availableColumnIds.filter((colId) => {
-          const isInstantColumn = colId.includes("instant") || colId === "instant";
-          const isDurationColumn = colId.includes("duration") || colId === "duration";
-          if (concept.periodType === "instant") {
-            return isInstantColumn;
-          } else if (concept.periodType === "duration") {
-            return isDurationColumn;
-          } else {
-            return !isInstantColumn && !isDurationColumn;
-          }
-        });
-        if (columnIds.length === 0 && roleInfo.availableColumnIds.length > 0) {
-          const hasPeriodColumns = roleInfo.availableColumnIds.some(
-            (colId) => colId.includes("instant") || colId.includes("duration")
-          );
-          if (!hasPeriodColumns) {
-            columnIds = roleInfo.availableColumnIds;
-          }
-        }
+        columnIds = roleInfo.availableColumnIds;
       } else {
-        if (!(roleInfo == null ? void 0 : roleInfo.periodTypes) || roleInfo.periodTypes.size === 0) {
-          columnIds = ["default"];
-        } else if (roleInfo.periodTypes.size === 1 && roleInfo.periodTypes.has("instant")) {
-          columnIds = ["instant"];
-        } else if (roleInfo.periodTypes.size === 1 && roleInfo.periodTypes.has("duration")) {
-          columnIds = ["duration"];
-        } else {
-          if (concept.periodType === "instant") {
-            columnIds = ["instant"];
-          } else if (concept.periodType === "duration") {
-            columnIds = ["duration"];
-          } else {
-            columnIds = ["duration", "instant"];
-          }
-        }
+        columnIds = ["duration"];
       }
       columnIds.forEach((columnId) => {
         const field = this.createFieldFromConcept(concept, periodStartDate, periodEndDate, columnId);
@@ -722,13 +707,7 @@ class XBRLFormBuilder {
     if (forcedColumnId) {
       columnId = forcedColumnId;
     } else {
-      if (concept.periodType === "instant") {
-        columnId = "instant";
-      } else if (concept.periodType === "duration") {
-        columnId = "duration";
-      } else {
-        columnId = "default";
-      }
+      columnId = "duration";
     }
     const field = {
       id: `${concept.id}_${columnId}_field`,
@@ -740,11 +719,16 @@ class XBRLFormBuilder {
       required: false,
       // Will be determined by validation rules
       disabled: concept.elementAbstract,
-      defaultValue: null
+      defaultValue: null,
+      // Add period information - each field has its own period (defaults from column)
+      periodType: concept.periodType === "instant" || concept.periodType === "duration" ? concept.periodType : void 0,
+      // Validate and set the period type
+      periodStartDate: periodStartDate || "2025-01-01",
+      periodEndDate: periodEndDate || "2025-12-31",
+      periodInstantDate: concept.periodType === "instant" ? periodEndDate || periodStartDate || "2025-01-01" : void 0
     };
-    if (concept.periodType === "duration" || concept.periodType === "instant") {
-      field.periodStartDate = periodStartDate || "2025-01-01";
-      field.periodEndDate = periodEndDate || "2025-12-31";
+    if (concept.id === "nl-cd_DescriptionLocationNL__a64trl") {
+      console.log(`🏗️ [Field Creation] Concept: ${concept.id}, periodType from concept: ${concept.periodType}, Field periodType: ${field.periodType}, ColumnId: ${columnId}`);
     }
     return field;
   }
@@ -888,46 +872,24 @@ class XBRLFormBuilder {
       if (periodTypes.size === 0) {
         columns.push({
           id: "default",
-          title: "Value",
-          description: "Default value column",
-          type: "base",
-          order: 0,
-          removable: false
-        });
-      } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
-        columns.push({
-          id: "instant",
-          title: periodEndDate,
+          title: this.formatPeriodDisplay(periodStartDate, periodEndDate),
           description: "",
           type: "base",
           order: 0,
-          removable: false
-        });
-      } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
-        columns.push({
-          id: "duration",
-          title: `${periodStartDate} / ${periodEndDate}`,
-          description: "",
-          type: "base",
-          order: 0,
-          removable: false
+          removable: false,
+          periodStartDate,
+          periodEndDate
         });
       } else {
         columns.push({
           id: "duration",
-          title: `${periodStartDate} / ${periodEndDate}`,
+          title: this.formatPeriodDisplay(periodStartDate, periodEndDate),
           description: "",
           type: "base",
           order: 0,
-          removable: false
-        });
-        columns.push({
-          id: "instant",
-          title: periodEndDate,
-          description: "",
-          type: "base",
-          order: 1,
-          removable: false
+          removable: false,
+          periodStartDate,
+          periodEndDate
         });
       }
     }
@@ -967,30 +929,12 @@ class XBRLFormBuilder {
       let prevId = "";
       if (column2.dimensionData) {
         prevTitle = column2.title;
-        if (column2.description && column2.description.includes("/")) {
-          prevDescription = `${prevStartDate} / ${prevEndDate}`;
-        } else {
-          prevDescription = prevEndDate;
-        }
+        prevDescription = this.formatPeriodDisplay(prevStartDate, prevEndDate);
         prevId = `${column2.id}_prev`;
       } else {
-        if (column2.id === "instant" || column2.id.includes("instant")) {
-          prevTitle = prevEndDate;
-          prevDescription = "";
-          prevId = `instant_prev_${index}`;
-        } else if (column2.id === "duration" || column2.id.includes("duration")) {
-          prevTitle = `${prevStartDate} / ${prevEndDate}`;
-          prevDescription = "";
-          prevId = `duration_prev_${index}`;
-        } else if (column2.title.includes("/")) {
-          prevTitle = `${prevStartDate} / ${prevEndDate}`;
-          prevDescription = "";
-          prevId = `${column2.id}_prev`;
-        } else {
-          prevTitle = prevEndDate;
-          prevDescription = "";
-          prevId = `${column2.id}_prev`;
-        }
+        prevTitle = this.formatPeriodDisplay(prevStartDate, prevEndDate);
+        prevDescription = "";
+        prevId = `duration_prev_${index}`;
       }
       previousYearColumns.push({
         ...column2,
@@ -999,7 +943,8 @@ class XBRLFormBuilder {
         description: prevDescription,
         order: column2.order + 100,
         // Place after current year columns
-        removable: true,
+        removable: false,
+        // User explicitly chose this via filter dialog
         periodStartDate: prevStartDate,
         // Set previous year start date
         periodEndDate: prevEndDate,
@@ -1073,7 +1018,9 @@ class XBRLFormBuilder {
             }]
           },
           order: 0,
-          removable: false
+          removable: false,
+          periodStartDate,
+          periodEndDate
         });
       } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
         columns2.push({
@@ -1101,13 +1048,15 @@ class XBRLFormBuilder {
             }]
           },
           order: 0,
-          removable: false
+          removable: false,
+          periodStartDate: periodEndDate,
+          periodEndDate
         });
       } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
         columns2.push({
           id: "typed-duration",
           title: `${axisLabel2} [Typed Input Available]`,
-          description: `${periodStartDate} / ${periodEndDate}`,
+          description: this.formatPeriodDisplay(periodStartDate, periodEndDate),
           type: "dimension",
           dimensionData: {
             dimensionId: "typed-duration",
@@ -1129,13 +1078,15 @@ class XBRLFormBuilder {
             }]
           },
           order: 0,
-          removable: false
+          removable: false,
+          periodStartDate,
+          periodEndDate
         });
       } else {
         columns2.push({
           id: "typed-duration",
           title: `${axisLabel2} [Typed Input Available]`,
-          description: `${periodStartDate} / ${periodEndDate}`,
+          description: this.formatPeriodDisplay(periodStartDate, periodEndDate),
           type: "dimension",
           dimensionData: {
             dimensionId: "typed-duration",
@@ -1157,34 +1108,9 @@ class XBRLFormBuilder {
             }]
           },
           order: 0,
-          removable: false
-        });
-        columns2.push({
-          id: "typed-instant",
-          title: `${axisLabel2} [Typed Input Available]`,
-          description: periodEndDate,
-          type: "dimension",
-          dimensionData: {
-            dimensionId: "typed-instant",
-            axisId: dimensionInfo2.axisId,
-            memberId: "[typed]",
-            memberValue: "Typed Input",
-            memberLabel: "Typed Input",
-            axis: dimensionInfo2.axisLabel,
-            axisLabel: dimensionInfo2.axisLabel,
-            memberKey: dimensionInfo2.dimensionKey,
-            dimensionIdKey: dimensionInfo2.dimensionIdKey,
-            hasTypedMembers: true,
-            typedMemberId: dimensionInfo2.typedMemberId,
-            typedMembers: [{
-              axisId: dimensionInfo2.axisId,
-              axisLabel: dimensionInfo2.axisLabel,
-              typedMemberId: dimensionInfo2.typedMemberId,
-              memberLabel: dimensionInfo2.axisLabel
-            }]
-          },
-          order: 1,
-          removable: false
+          removable: false,
+          periodStartDate,
+          periodEndDate
         });
       }
       return columns2;
@@ -1225,7 +1151,9 @@ class XBRLFormBuilder {
           dimensionIdKey: dimensionInfo.dimensionIdKey
         },
         order: 0,
-        removable: false
+        removable: false,
+        periodStartDate,
+        periodEndDate
       });
     } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
       columns.push({
@@ -1245,7 +1173,9 @@ class XBRLFormBuilder {
           dimensionIdKey: dimensionInfo.dimensionIdKey
         },
         order: 0,
-        removable: false
+        removable: false,
+        periodStartDate: periodEndDate,
+        periodEndDate
       });
     } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
       columns.push({
@@ -1265,13 +1195,15 @@ class XBRLFormBuilder {
           dimensionIdKey: dimensionInfo.dimensionIdKey
         },
         order: 0,
-        removable: false
+        removable: false,
+        periodStartDate,
+        periodEndDate
       });
     } else {
       columns.push({
         id: "duration",
         title: `${dimensionInfo.memberLabel}`,
-        description: `${periodStartDate} / ${periodEndDate}`,
+        description: this.formatPeriodDisplay(periodStartDate, periodEndDate),
         type: "dimension",
         dimensionData: {
           dimensionId: "duration",
@@ -1285,26 +1217,9 @@ class XBRLFormBuilder {
           dimensionIdKey: dimensionInfo.dimensionIdKey
         },
         order: 0,
-        removable: false
-      });
-      columns.push({
-        id: "instant",
-        title: `${dimensionInfo.memberLabel}`,
-        description: periodEndDate,
-        type: "dimension",
-        dimensionData: {
-          dimensionId: "instant",
-          axisId: dimensionInfo.axisId,
-          memberId: dimensionInfo.memberId,
-          memberValue: dimensionInfo.memberLabel,
-          memberLabel: dimensionInfo.memberLabel,
-          axis: dimensionInfo.axisLabel,
-          axisLabel: dimensionInfo.axisLabel,
-          memberKey: dimensionInfo.dimensionKey,
-          dimensionIdKey: dimensionInfo.dimensionIdKey
-        },
-        order: 1,
-        removable: false
+        removable: false,
+        periodStartDate,
+        periodEndDate
       });
     }
     return columns;
@@ -1387,58 +1302,20 @@ class XBRLFormBuilder {
           ...typedMembers.map((c2) => `${c2.axisId}|[typed]`)
         ].join("::")
       };
-      if (periodTypes.size === 0 || periodTypes.size === 1 && periodTypes.has("duration")) {
-        columns.push({
-          id: `duration_${index}`,
-          title: `${columnTitle}`,
-          description: `${periodStartDate} / ${periodEndDate}`,
-          type: "dimension",
-          dimensionData: {
-            ...dimensionData,
-            dimensionId: `duration_${index}`
-          },
-          order: index * 2,
-          removable: false
-        });
-      } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
-        columns.push({
-          id: `instant_${index}`,
-          title: `${columnTitle}`,
-          description: periodEndDate,
-          type: "dimension",
-          dimensionData: {
-            ...dimensionData,
-            dimensionId: `instant_${index}`
-          },
-          order: index * 2,
-          removable: false
-        });
-      } else {
-        columns.push({
-          id: `duration_${index}`,
-          title: `${columnTitle}`,
-          description: `${periodStartDate} / ${periodEndDate}`,
-          type: "dimension",
-          dimensionData: {
-            ...dimensionData,
-            dimensionId: `duration_${index}`
-          },
-          order: index * 2,
-          removable: false
-        });
-        columns.push({
-          id: `instant_${index}`,
-          title: `${columnTitle}`,
-          description: periodEndDate,
-          type: "dimension",
-          dimensionData: {
-            ...dimensionData,
-            dimensionId: `instant_${index}`
-          },
-          order: index * 2 + 1,
-          removable: false
-        });
-      }
+      columns.push({
+        id: `duration_${index}`,
+        title: `${columnTitle}`,
+        description: this.formatPeriodDisplay(periodStartDate, periodEndDate),
+        type: "dimension",
+        dimensionData: {
+          ...dimensionData,
+          dimensionId: `duration_${index}`
+        },
+        order: index,
+        removable: false,
+        periodStartDate,
+        periodEndDate
+      });
     });
     return columns;
   }
@@ -1568,14 +1445,16 @@ const form$1 = {
   yes: "Yes",
   no: "No",
   noRoleSelected: "No Role Selected",
-  pleaseSelectRole: "Please select a role from the list on the left."
+  pleaseSelectRole: "Please select a role from the list on the left.",
+  expandPanel: "Expand side panel",
+  collapsePanel: "Collapse side panel"
 };
 const filter$1 = {
   selectRoles: "Select Roles",
   filterRoles: "Filter Roles",
   title: "Filter Roles",
   description: "Select the roles you want to display in the form. You can search and choose specific roles to focus on or manage all available roles.",
-  searchPlaceholder: "Search roles by name, ID, or URI...",
+  searchPlaceholder: "Search..",
   clearSearch: "Clear search",
   showingResults: "Showing",
   of: "of",
@@ -1601,6 +1480,7 @@ const filter$1 = {
 };
 const column$1 = {
   addColumn: "Add Column",
+  columnOptions: "Column Options",
   columnType: "Column Type",
   instantSingleDate: "Instant (single date)",
   durationDates: "Duration (start and end dates)",
@@ -1646,7 +1526,9 @@ const form = {
   yes: "Ja",
   no: "Nee",
   noRoleSelected: "Geen rol geselecteerd",
-  pleaseSelectRole: "Selecteer een rol uit de lijst aan de linkerkant."
+  pleaseSelectRole: "Selecteer een rol uit de lijst aan de linkerkant.",
+  expandPanel: "Zijpaneel uitvouwen",
+  collapsePanel: "Zijpaneel inklappen"
 };
 const filter = {
   selectRoles: "Rollen selecteren",
@@ -1679,6 +1561,7 @@ const filter = {
 };
 const column = {
   addColumn: "Kolom toevoegen",
+  columnOptions: "Kolomopties",
   columnType: "Kolomtype",
   instantSingleDate: "Moment (enkele datum)",
   durationDates: "Duur (begin- en einddatum)",
@@ -1948,7 +1831,7 @@ class DraftStorageService {
   /**
    * Create metadata snapshot from current form state
    */
-  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences) {
+  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences, periodData) {
     return {
       periodStartDate,
       periodEndDate,
@@ -1957,6 +1840,7 @@ class DraftStorageService {
       customColumns: this.extractCustomColumns(allSections),
       typedMemberData,
       periodPreferences,
+      periodData,
       schemaVersion: this.STORAGE_VERSION
     };
   }
@@ -2242,11 +2126,17 @@ let JupiterFormField = class extends LitElement {
     this.hideLabel = false;
     this._errors = [];
     this._touched = false;
+    this._showPeriodPopup = false;
   }
   willUpdate(changedProperties) {
     if (changedProperties.has("value") || changedProperties.has("field")) {
       this._validateField();
     }
+    if (changedProperties.has("field") && this.field) {
+      if (this.conceptId.includes("DescriptionLocationNL") || this.columnId.startsWith("col-")) {
+        console.log(`📅 [FormField willUpdate] Concept ${this.conceptId}, Column ${this.columnId}: field.periodType=${this.field.periodType}, field.periodStartDate=${this.field.periodStartDate}, field.periodEndDate=${this.field.periodEndDate}, field.periodInstantDate=${this.field.periodInstantDate}`);
+      }
+    }
   }
   _validateField() {
     var _a;
@@ -2303,6 +2193,49 @@ let JupiterFormField = class extends LitElement {
       bubbles: true
     }));
   }
+  _handlePeriodIconClick() {
+    this._showPeriodPopup = true;
+  }
+  _closePeriodPopup() {
+    this._showPeriodPopup = false;
+  }
+  _handlePopupOverlayClick(e2) {
+    if (e2.target === e2.currentTarget) {
+      this._closePeriodPopup();
+    }
+  }
+  _handlePeriodChange(event, type) {
+    const target = event.target;
+    const value = target.value;
+    console.log(`📅 [FormField] Period change detected: type=${type}, value=${value}, conceptId=${this.conceptId}, columnId=${this.columnId}`);
+    if (type === "instant") {
+      this.periodInstantDate = value;
+    } else if (type === "start") {
+      this.periodStartDate = value;
+    } else if (type === "end") {
+      this.periodEndDate = value;
+    }
+    console.log(`📅 [FormField] Updated local period values: startDate=${this.periodStartDate}, endDate=${this.periodEndDate}, instantDate=${this.periodInstantDate}`);
+    this.dispatchEvent(new CustomEvent("period-change", {
+      detail: {
+        fieldId: this.field.id,
+        conceptId: this.conceptId,
+        columnId: this.columnId,
+        periodType: this.field.periodType,
+        periodStartDate: this.periodStartDate,
+        periodEndDate: this.periodEndDate,
+        periodInstantDate: this.periodInstantDate
+      },
+      bubbles: true,
+      composed: true
+      // CRITICAL: Allows event to cross shadow DOM boundaries
+    }));
+    console.log(`🚀 [FormField] Dispatched period-change event with detail:`, {
+      conceptId: this.conceptId,
+      columnId: this.columnId,
+      periodType: this.field.periodType
+    });
+  }
   _renderInput() {
     var _a;
     const hasErrors = this._errors.some((e2) => e2.severity === "error");
@@ -2415,8 +2348,97 @@ let JupiterFormField = class extends LitElement {
         return "text";
     }
   }
+  _renderPeriodControls() {
+    if (this.conceptId === "nl-cd_DescriptionLocationNL__a64trl") {
+      console.log(`🔍 [FormField Render] Concept: ${this.conceptId}, ColumnId: ${this.columnId}, Field periodType: ${this.field.periodType}, Field periodStartDate: ${this.field.periodStartDate}, Field periodEndDate: ${this.field.periodEndDate}`);
+    }
+    if (!this.field.periodType) {
+      return html``;
+    }
+    if (this.field.periodType === "instant") {
+      return html`
+        <div class="period-controls">
+          <label>Date:</label>
+          <input
+            type="date"
+            .value="${this.periodInstantDate || this.field.periodInstantDate || ""}"
+            @change="${(e2) => this._handlePeriodChange(e2, "instant")}"
+            ?disabled="${this.disabled}"
+          />
+        </div>
+      `;
+    } else if (this.field.periodType === "duration") {
+      return html`
+        <div class="period-controls">
+          <label>From:</label>
+          <input
+            type="date"
+            .value="${this.periodStartDate || this.field.periodStartDate || ""}"
+            @change="${(e2) => this._handlePeriodChange(e2, "start")}"
+            ?disabled="${this.disabled}"
+          />
+          <label>To:</label>
+          <input
+            type="date"
+            .value="${this.periodEndDate || this.field.periodEndDate || ""}"
+            @change="${(e2) => this._handlePeriodChange(e2, "end")}"
+            ?disabled="${this.disabled}"
+          />
+        </div>
+      `;
+    }
+    return html``;
+  }
+  _renderPeriodPopup() {
+    return html`
+      <div class="period-popup-overlay" @click="${this._handlePopupOverlayClick}">
+        <div class="period-popup" @click="${(e2) => e2.stopPropagation()}">
+          <div class="period-popup-header">
+            <div class="period-popup-title">Edit Period</div>
+            <button class="period-popup-close" @click="${this._closePeriodPopup}">
+              ×
+            </button>
+          </div>
+          
+          <div class="period-popup-content">
+            ${this.field.periodType === "instant" ? html`
+              <div class="period-controls">
+                <label>Date:</label>
+                <input
+                  type="date"
+                  .value="${this.periodInstantDate || this.field.periodInstantDate || ""}"
+                  @change="${(e2) => this._handlePeriodChange(e2, "instant")}"
+                  ?disabled="${this.disabled}"
+                />
+              </div>
+            ` : html`
+              <div class="period-controls">
+                <label>From:</label>
+                <input
+                  type="date"
+                  .value="${this.periodStartDate || this.field.periodStartDate || ""}"
+                  @change="${(e2) => this._handlePeriodChange(e2, "start")}"
+                  ?disabled="${this.disabled}"
+                />
+              </div>
+              <div class="period-controls">
+                <label>To:</label>
+                <input
+                  type="date"
+                  .value="${this.periodEndDate || this.field.periodEndDate || ""}"
+                  @change="${(e2) => this._handlePeriodChange(e2, "end")}"
+                  ?disabled="${this.disabled}"
+                />
+              </div>
+            `}
+          </div>
+        </div>
+      </div>
+    `;
+  }
   render() {
     const showLabel = !this.hideLabel && this.field.type !== "boolean";
+    const hasPeriodControl = this.field.periodType && (this.field.periodType === "instant" || this.field.periodType === "duration");
     return html`
       <div class="field-container">
         ${showLabel ? html`
@@ -2425,7 +2447,20 @@ let JupiterFormField = class extends LitElement {
           </label>
         ` : ""}
         
-        ${this._renderInput()}
+        <div class="field-wrapper">
+          ${this._renderInput()}
+          
+          ${hasPeriodControl ? html`
+            <button 
+              class="period-icon-btn" 
+              type="button"
+              @click="${this._handlePeriodIconClick}"
+              title="Edit period"
+            >
+              📅
+            </button>
+          ` : ""}
+        </div>
         
         ${this._errors.length > 0 && this._touched ? html`
           <div class="field-errors">
@@ -2437,6 +2472,8 @@ let JupiterFormField = class extends LitElement {
           </div>
         ` : ""}
       </div>
+      
+      ${this._showPeriodPopup ? this._renderPeriodPopup() : ""}
     `;
   }
 };
@@ -2467,6 +2504,119 @@ JupiterFormField.styles = css`
       color: var(--jupiter-error-color, #d32f2f);
     }
 
+    .field-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .period-icon-btn {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 16px;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      transition: background-color 0.2s;
+      opacity: 0.7;
+    }
+
+    .period-icon-btn:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+      opacity: 1;
+    }
+
+    .period-popup-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10000;
+    }
+
+    .period-popup {
+      background: white;
+      border-radius: 8px;
+      padding: 24px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+      max-width: 400px;
+      width: 90%;
+    }
+
+    .period-popup-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    .period-popup-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .period-popup-close {
+      background: transparent;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      padding: 0;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      transition: background-color 0.2s;
+    }
+
+    .period-popup-close:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .period-popup-content {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .period-popup-content .period-controls {
+      display: grid;
+      grid-template-columns: 60px 1fr;
+      gap: 12px;
+      align-items: center;
+      margin-top: 0;
+    }
+
+    .period-popup-content .period-controls label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--jupiter-text-primary, #333);
+      text-align: right;
+    }
+
+    .period-popup-content .period-controls input[type="date"] {
+      padding: 8px 10px;
+      font-size: 14px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+    }
+
+    .period-popup-content .period-controls input[type="date"]:focus {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #1976d2);
+      box-shadow: 0 0 0 2px var(--jupiter-primary-color-light, rgba(25, 118, 210, 0.2));
+    }
+
     .field-input {
       width: 100%;
       padding: 6px 8px; /* Reduced padding for table cells */
@@ -2545,6 +2695,34 @@ JupiterFormField.styles = css`
       margin: 0;
       width: auto;
     }
+
+    .period-controls {
+      margin-top: 4px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      font-size: 12px;
+    }
+
+    .period-controls label {
+      color: var(--jupiter-text-secondary, #666);
+      font-weight: 500;
+      font-size: 11px;
+      margin: 0;
+    }
+
+    .period-controls input[type="date"] {
+      padding: 4px 6px;
+      font-size: 11px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 3px;
+      width: 120px;
+    }
+
+    .period-controls input[type="date"]:focus {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #1976d2);
+    }
   `;
 __decorateClass$5([
   n2({ type: Object })
@@ -2570,12 +2748,24 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: Boolean })
 ], JupiterFormField.prototype, "hideLabel", 2);
+__decorateClass$5([
+  n2({ type: String })
+], JupiterFormField.prototype, "periodStartDate", 2);
+__decorateClass$5([
+  n2({ type: String })
+], JupiterFormField.prototype, "periodEndDate", 2);
+__decorateClass$5([
+  n2({ type: String })
+], JupiterFormField.prototype, "periodInstantDate", 2);
 __decorateClass$5([
   r()
 ], JupiterFormField.prototype, "_errors", 2);
 __decorateClass$5([
   r()
 ], JupiterFormField.prototype, "_touched", 2);
+__decorateClass$5([
+  r()
+], JupiterFormField.prototype, "_showPeriodPopup", 2);
 JupiterFormField = __decorateClass$5([
   t$1("jupiter-form-field")
 ], JupiterFormField);
@@ -2635,6 +2825,17 @@ let JupiterConceptTree = class extends LitElement {
       bubbles: true
     }));
   }
+  _handlePeriodChange(event) {
+    console.log(`🌲 [ConceptTree] Received period-change event:`, event.detail);
+    event.stopPropagation();
+    this.dispatchEvent(new CustomEvent("period-change", {
+      detail: event.detail,
+      bubbles: true,
+      composed: true
+      // CRITICAL: Allows event to cross shadow DOM boundaries
+    }));
+    console.log(`🌲 [ConceptTree] Forwarded period-change event to form-section`);
+  }
   render() {
     const hasChildren = this.concept.children && this.concept.children.length > 0;
     const level = this.concept.level || 0;
@@ -2669,10 +2870,14 @@ let JupiterConceptTree = class extends LitElement {
                 .conceptType="${this.concept.type}"
                 .columnId="${column2.id}"
                 .value="${this._getFieldValue(field)}"
+                .periodStartDate="${field.periodStartDate || column2.periodStartDate}"
+                .periodEndDate="${field.periodEndDate || column2.periodEndDate}"
+                .periodInstantDate="${field.periodInstantDate || (field.periodType === "instant" ? field.periodEndDate || field.periodStartDate : void 0)}"
                 .disabled="${this.disabled}"
                 .locale="${this.locale}"
                 .hideLabel="${true}"
                 @field-change="${this._handleFieldChange}"
+                @period-change="${this._handlePeriodChange}"
               ></jupiter-form-field>
             ` : ""}
           </td>
@@ -3429,6 +3634,8 @@ let JupiterFormSection = class extends LitElement {
     this._expanded = true;
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
+    this._openMenuColumnId = null;
+    this._insertAfterColumnId = null;
     this._expandedConcepts = /* @__PURE__ */ new Set();
     this._allTreeExpanded = false;
   }
@@ -3437,6 +3644,11 @@ let JupiterFormSection = class extends LitElement {
     this._expanded = this.section.expanded !== false;
     this._determinePeriodType();
     this._checkAndExpandFirstSection();
+    document.addEventListener("click", () => this._closeColumnMenu());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", () => this._closeColumnMenu());
   }
   updated(changedProperties) {
     super.updated(changedProperties);
@@ -3498,6 +3710,7 @@ let JupiterFormSection = class extends LitElement {
     }));
   }
   _handleRemoveColumn(columnId) {
+    this._openMenuColumnId = null;
     this.dispatchEvent(new CustomEvent("column-remove", {
       detail: {
         columnId,
@@ -3506,6 +3719,19 @@ let JupiterFormSection = class extends LitElement {
       bubbles: true
     }));
   }
+  _toggleColumnMenu(columnId, event) {
+    event.stopPropagation();
+    this._openMenuColumnId = this._openMenuColumnId === columnId ? null : columnId;
+  }
+  _closeColumnMenu() {
+    this._openMenuColumnId = null;
+  }
+  _handleAddColumnFromMenu(columnId, event) {
+    event.stopPropagation();
+    this._openMenuColumnId = null;
+    this._insertAfterColumnId = columnId;
+    this._handleAddColumn();
+  }
   _handleAddColumn() {
     const buttonPeriodType = this._determineButtonPeriodType();
     this._sectionPeriodType = buttonPeriodType;
@@ -3549,18 +3775,33 @@ let JupiterFormSection = class extends LitElement {
     this.dispatchEvent(new CustomEvent("column-add-request", {
       detail: {
         sectionId: this.section.id,
-        columnRequest: event.detail
+        columnRequest: event.detail,
+        insertAfterColumnId: this._insertAfterColumnId
+        // Include position info
       },
       bubbles: true
     }));
+    this._insertAfterColumnId = null;
   }
   _handleFieldChange(event) {
     event.stopPropagation();
     this.dispatchEvent(new CustomEvent("field-change", {
       detail: event.detail,
-      bubbles: true
+      bubbles: true,
+      composed: true
     }));
   }
+  _handlePeriodChange(event) {
+    console.log(`📋 [FormSection] Received period-change event:`, event.detail);
+    event.stopPropagation();
+    this.dispatchEvent(new CustomEvent("period-change", {
+      detail: event.detail,
+      bubbles: true,
+      composed: true
+      // CRITICAL: Allows event to cross shadow DOM boundaries
+    }));
+    console.log(`📋 [FormSection] Forwarded period-change event to dynamic-form`);
+  }
   _flattenConcepts(concepts, expanded = /* @__PURE__ */ new Set()) {
     const result = [];
     for (const concept of concepts) {
@@ -3701,29 +3942,40 @@ let JupiterFormSection = class extends LitElement {
                           `)}
                         </div>
                       ` : ""}
-                      
-                      ${column2.removable ? html`
+                    </div>
+                    
+                    <!-- Column menu icon (3 vertical dots) -->
+                    <div 
+                      class="column-menu-icon"
+                      @click="${(e2) => this._toggleColumnMenu(column2.id, e2)}"
+                      title="${I18n.t("column.columnOptions")}"
+                    >⋮</div>
+                    
+                    <!-- Context menu -->
+                    ${this._openMenuColumnId === column2.id ? html`
+                      <div class="column-context-menu">
                         <button 
-                          class="remove-column-btn"
-                          @click="${(e2) => {
+                          class="column-context-menu-item"
+                          @click="${(e2) => this._handleAddColumnFromMenu(column2.id, e2)}"
+                        >
+                          ${I18n.t("column.addColumn")}
+                        </button>
+                        ${column2.removable ? html`
+                          <button 
+                            class="column-context-menu-item remove"
+                            @click="${(e2) => {
         e2.stopPropagation();
         this._handleRemoveColumn(column2.id);
       }}"
-                          title="${I18n.t("column.removeColumn")}"
-                        >×</button>
-                      ` : ""}
-                    </div>
+                          >
+                            ${I18n.t("column.removeColumn")}
+                          </button>
+                        ` : ""}
+                      </div>
+                    ` : ""}
                   </th>
                 `;
     })}
-                <th class="header-cell add-column-only">
-                  <button class="add-column-btn" @click="${(e2) => {
-      e2.stopPropagation();
-      this._handleAddColumn();
-    }}" title="${I18n.t("column.addColumn")}">
-                    + ${I18n.t("column.addColumn")}
-                  </button>
-                </th>
               </tr>
             </thead>
             <tbody class="table-body">
@@ -3737,6 +3989,7 @@ let JupiterFormSection = class extends LitElement {
                     .locale="${this.locale}"
                     .expandedConcepts="${this._expandedConcepts}"
                     @field-change="${this._handleFieldChange}"
+                    @period-change="${this._handlePeriodChange}"
                     @concept-expand="${this._handleConceptExpand}"
                   ></jupiter-concept-tree>
                 </tr>
@@ -3870,6 +4123,8 @@ JupiterFormSection.styles = css`
       width: 180px;
       font-size: 14px;
       vertical-align: middle;
+      position: relative;
+      overflow: visible;
     }
 
     .header-cell.concept-column {
@@ -3885,47 +4140,69 @@ JupiterFormSection.styles = css`
       position: relative;
     }
 
-    /* Special styling for the Add Column button-only column */
-    .header-cell.add-column-only {
-      width: 15%;
-      min-width: 100px;
-      max-width: 150px;
+    .column-menu-icon {
+      position: absolute;
+      top: 8px;
+      right: 0px;
+      width: 24px;
+      height: 24px;
+      background: transparent;
+      color: var(--jupiter-text-secondary, #666);
+      border: none;
+      font-size: 20px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      transition: all 0.2s ease;
+      line-height: 1;
+      font-weight: bold;
+      padding: 0;
+      border-radius: 4px;
+    }
+
+    .column-menu-icon:hover {
+      background: var(--jupiter-background-light, #f0f0f0);
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .column-context-menu {
+      position: absolute;
+      top: 32px;
+      right: 4px;
+      background: white;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      z-index: 1000;
+      min-width: 150px;
+      padding: 4px 0;
     }
 
-    .remove-column-btn {
-      position: absolute;
-      top: 4px;
-      right: 4px;
-      width: 20px;
-      height: 20px;
-      border: none;
-      background: var(--jupiter-error-color, #d32f2f);
-      color: white;
-      border-radius: 50%;
-      font-size: 12px;
+    .column-context-menu-item {
+      padding: 8px 16px;
       cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      font-size: 14px;
+      color: var(--jupiter-text-primary, #333);
+      transition: background 0.2s ease;
+      border: none;
+      background: transparent;
+      width: 100%;
+      text-align: left;
+      display: block;
     }
 
-    .remove-column-btn:hover {
-      background: var(--jupiter-error-color-dark, #b71c1c);
+    .column-context-menu-item:hover {
+      background: var(--jupiter-background-light, #f5f5f5);
     }
 
-    .add-column-btn {
-      background: var(--jupiter-primary-color, #667eea);
-      color: white;
-      border: none;
-      padding: 8px 16px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 12px;
-      margin: 8px;
+    .column-context-menu-item.remove {
+      color: var(--jupiter-error-color, #d32f2f);
     }
 
-    .add-column-btn:hover {
-      background: var(--jupiter-primary-color-dark, #5a6fd8);
+    .column-context-menu-item.remove:hover {
+      background: var(--jupiter-error-light, #ffebee);
     }
 
     /* Column header content styling */
@@ -4031,6 +4308,12 @@ __decorateClass$2([
 __decorateClass$2([
   r()
 ], JupiterFormSection.prototype, "_sectionPeriodType", 2);
+__decorateClass$2([
+  r()
+], JupiterFormSection.prototype, "_openMenuColumnId", 2);
+__decorateClass$2([
+  r()
+], JupiterFormSection.prototype, "_insertAfterColumnId", 2);
 __decorateClass$2([
   r()
 ], JupiterFormSection.prototype, "_expandedConcepts", 2);
@@ -4352,7 +4635,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
               ${this._filteredRoles.map((role) => {
       var _a;
       const isSelected = this._tempSelectedRoles.has(role.id);
-      const showPeriodControls = role.showPeriodControl === true;
+      role.showPeriodControl === true;
       const preferences = this._tempPeriodPreferences[role.id] || { showDuration: true, showInstant: true };
       return html`
                   <div class="role-item">
@@ -4368,32 +4651,6 @@ let JupiterFilterRolesDialog = class extends LitElement {
                         <p class="role-description">${I18n.t("filter.uri")}: ${role.metadata.roleURI}</p>
                       ` : ""}
                       
-                      ${showPeriodControls ? html`
-                        <div class="period-controls">
-                          <p class="period-controls-label">${I18n.t("filter.showPeriodColumn")}</p>
-                          <div class="period-checkboxes">
-                            <label class="period-checkbox-item">
-                              <input
-                                type="checkbox"
-                                class="period-checkbox"
-                                .checked="${preferences.showDuration}"
-                                @change="${(e2) => this._handlePeriodCheckboxChange(e2, role.id, "duration")}"
-                              />
-                              <span class="period-checkbox-label">${I18n.t("filter.duration")}</span>
-                            </label>
-                            <label class="period-checkbox-item">
-                              <input
-                                type="checkbox"
-                                class="period-checkbox"
-                                .checked="${preferences.showInstant}"
-                                @change="${(e2) => this._handlePeriodCheckboxChange(e2, role.id, "instant")}"
-                              />
-                              <span class="period-checkbox-label">${I18n.t("filter.instant")}</span>
-                            </label>
-                          </div>
-                        </div>
-                      ` : ""}
-                      
                       <div class="period-controls">
                         <p class="period-controls-label">${I18n.t("filter.additionalOptions")}</p>
                         <div class="period-checkboxes">
@@ -4815,6 +5072,8 @@ let JupiterDynamicForm = class extends LitElement {
     this._formData = {};
     this._draftLoaded = false;
     this._preservedFormData = {};
+    this._periodData = {};
+    this._preservedPeriodData = {};
     this._typedMemberData = {};
     this._preservedTypedMemberData = {};
     this._columns = [];
@@ -4828,11 +5087,19 @@ let JupiterDynamicForm = class extends LitElement {
     this._showFilterDialog = false;
     this._periodPreferences = {};
     this._activeSidePanelRoleId = null;
+    this._sidePanelSearchQuery = "";
+    this._sidePanelCollapsed = false;
     this._adminRoleConfigs = {};
     this._skipDraftLoading = false;
   }
   connectedCallback() {
     super.connectedCallback();
+    this.addEventListener("period-change", (e2) => {
+      console.log(`🌍 [GLOBAL DynamicForm] Caught period-change event on element:`, e2);
+      const customEvent = e2;
+      console.log(`🌍 [GLOBAL DynamicForm] Event detail:`, customEvent.detail);
+      this._handlePeriodChange(customEvent);
+    });
     this._initializeForm();
   }
   updated(changedProperties) {
@@ -5132,24 +5399,28 @@ let JupiterDynamicForm = class extends LitElement {
     if (preferencesChanged) {
       this._periodPreferences = periodPreferences;
       console.log("📊 Period preferences updated:", this._periodPreferences);
+      console.log("💾 Capturing current form data before reinitialization...");
+      const currentFormData = this._generateSubmissionData();
+      const currentMetadata = this._draftStorageService.createMetadataSnapshot(
+        this.periodStartDate,
+        this.periodEndDate,
+        this.language,
+        this._selectedRoleIds,
+        this._allSections,
+        this._typedMemberData,
+        this._periodPreferences
+      );
+      this._draftStorageService.saveDraft(currentFormData, currentMetadata);
+      console.log("✅ Current form data saved to draft storage");
       this._skipDraftLoading = true;
       this._initializeForm();
       this._skipDraftLoading = false;
-      if (this._draftStorageService.hasDraft()) {
-        console.log("💾 Updating draft with new period preferences...");
-        const draftData = this._generateSubmissionData();
-        const metadata = this._draftStorageService.createMetadataSnapshot(
-          this.periodStartDate,
-          this.periodEndDate,
-          this.language,
-          this._selectedRoleIds,
-          this._allSections,
-          this._typedMemberData,
-          this._periodPreferences
-        );
-        this._draftStorageService.saveDraft(draftData, metadata);
-        console.log("✅ Draft updated with new period preferences");
-      }
+      console.log("📥 Restoring form data from draft after reinitialization...");
+      this._loadDraftIfExists().then(() => {
+        console.log("✅ Form data restored successfully after reinitialization");
+      }).catch((error) => {
+        console.error("❌ Error restoring form data after reinitialization:", error);
+      });
     } else {
       this._applyRoleFilter();
     }
@@ -5210,6 +5481,29 @@ let JupiterDynamicForm = class extends LitElement {
       bubbles: true
     }));
   }
+  _handlePeriodChange(event) {
+    console.log(`🎯 [DynamicForm] _handlePeriodChange called with event:`, event);
+    console.log(`🎯 [DynamicForm] Event detail:`, event.detail);
+    const { conceptId, columnId, periodType, periodStartDate, periodEndDate, periodInstantDate } = event.detail;
+    console.log(`📅 Period change received: conceptId=${conceptId}, columnId=${columnId}, periodType=${periodType}, startDate=${periodStartDate}, endDate=${periodEndDate}, instantDate=${periodInstantDate}`);
+    const updatedPeriodData = { ...this._periodData };
+    if (!updatedPeriodData[conceptId]) {
+      updatedPeriodData[conceptId] = {};
+    }
+    updatedPeriodData[conceptId] = {
+      ...updatedPeriodData[conceptId],
+      [columnId]: {
+        startDate: periodStartDate,
+        endDate: periodEndDate,
+        instantDate: periodInstantDate
+      }
+    };
+    this._periodData = updatedPeriodData;
+    console.log(`💾 Period data stored for [${conceptId}][${columnId}]:`, this._periodData[conceptId][columnId]);
+    console.log(`📦 Full period data state:`, JSON.stringify(this._periodData, null, 2));
+    this._dirty = true;
+    this.requestUpdate();
+  }
   /**
    * Generate a unique concept key that includes section context
    */
@@ -5278,8 +5572,8 @@ let JupiterDynamicForm = class extends LitElement {
     }));
   }
   _handleColumnAddRequest(event) {
-    const { sectionId, columnRequest } = event.detail;
-    this._addColumnFromRequest(columnRequest, sectionId);
+    const { sectionId, columnRequest, insertAfterColumnId } = event.detail;
+    this._addColumnFromRequest(columnRequest, sectionId, insertAfterColumnId);
   }
   _getAvailableDimensionsForSection(sectionId) {
     var _a, _b, _c;
@@ -5326,7 +5620,24 @@ let JupiterDynamicForm = class extends LitElement {
     });
     return availableDimensions;
   }
-  _addColumnFromRequest(request, sectionId) {
+  /**
+   * Format period range for display - shows only year when both dates are in same year
+   * @param startDate - Period start date in YYYY-MM-DD format
+   * @param endDate - Period end date in YYYY-MM-DD format
+   * @returns Formatted period string (e.g., "2025" or "2025-01-01 / 2026-12-31")
+   */
+  _formatPeriodDisplay(startDate, endDate) {
+    if (!startDate || !endDate) {
+      return `${startDate || ""} / ${endDate || ""}`;
+    }
+    const startYear = startDate.substring(0, 4);
+    const endYear = endDate.substring(0, 4);
+    if (startYear === endYear) {
+      return startYear;
+    }
+    return `${startDate} / ${endDate}`;
+  }
+  _addColumnFromRequest(request, sectionId, insertAfterColumnId) {
     var _a, _b, _c, _d, _e;
     const timestamp = Date.now();
     const newColumnId = `col-${timestamp}`;
@@ -5336,7 +5647,7 @@ let JupiterDynamicForm = class extends LitElement {
       title = request.instantDate || "";
       description = "";
     } else if (request.periodType === "duration" || request.periodType === "mixed") {
-      title = `${request.startDate} / ${request.endDate}`;
+      title = this._formatPeriodDisplay(request.startDate, request.endDate);
       description = "";
     }
     let dimensionData = {
@@ -5356,7 +5667,7 @@ let JupiterDynamicForm = class extends LitElement {
           dimensionKeys.push(`${dimSelection.axisId}|${dimSelection.memberId}`);
         }
       }
-      const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
+      const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${this._formatPeriodDisplay(request.startDate, request.endDate)})`;
       if (dimensionParts.length > 0) {
         title = `${dimensionParts.join(" | ")} ${periodPart}`;
         dimensionData = {
@@ -5380,7 +5691,7 @@ let JupiterDynamicForm = class extends LitElement {
               const axisLabel = ((_d = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _d.label) || dimension.conceptName;
               const firstMember = dimension.members[0];
               const memberLabel = ((_e = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _e.label) || firstMember.conceptName;
-              const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
+              const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${this._formatPeriodDisplay(request.startDate, request.endDate)})`;
               title = `${memberLabel} ${periodPart}`;
               dimensionData = {
                 dimensionId: newColumnId,
@@ -5406,7 +5717,10 @@ let JupiterDynamicForm = class extends LitElement {
       type: dimensionData.memberKey ? "dimension" : "dimension",
       order: this._columns.length,
       removable: true,
-      dimensionData
+      dimensionData,
+      // CRITICAL: Add period dates so they can be saved to draft and restored
+      periodStartDate: request.periodType === "instant" ? request.instantDate : request.startDate,
+      periodEndDate: request.periodType === "instant" ? request.instantDate : request.endDate
     };
     if (request.selectedDimensions && request.selectedDimensions.length > 0) {
       const typedMembers = {};
@@ -5438,7 +5752,20 @@ let JupiterDynamicForm = class extends LitElement {
         if (!targetSection.columns) {
           targetSection.columns = [...this._columns];
         }
-        targetSection.columns = [...targetSection.columns, newColumn];
+        if (insertAfterColumnId) {
+          const insertIndex = targetSection.columns.findIndex((col) => col.id === insertAfterColumnId);
+          if (insertIndex !== -1) {
+            targetSection.columns = [
+              ...targetSection.columns.slice(0, insertIndex + 1),
+              newColumn,
+              ...targetSection.columns.slice(insertIndex + 1)
+            ];
+          } else {
+            targetSection.columns = [...targetSection.columns, newColumn];
+          }
+        } else {
+          targetSection.columns = [...targetSection.columns, newColumn];
+        }
       }
     }
     this._replicateFieldsForNewColumn(newColumnId, request, sectionId);
@@ -5519,9 +5846,12 @@ let JupiterDynamicForm = class extends LitElement {
             disabled: existingField.disabled,
             validation: existingField.validation,
             defaultValue: existingField.defaultValue,
+            periodType: concept.periodType,
+            // Add periodType from concept
             // Set period dates from the add column request
             periodStartDate: request.periodType === "instant" ? request.instantDate : request.startDate,
-            periodEndDate: request.periodType === "instant" ? request.instantDate : request.endDate
+            periodEndDate: request.periodType === "instant" ? request.instantDate : request.endDate,
+            periodInstantDate: concept.periodType === "instant" ? request.instantDate || request.startDate : void 0
           };
         } else {
           field = {
@@ -5535,9 +5865,12 @@ let JupiterDynamicForm = class extends LitElement {
             disabled: false,
             validation: [],
             defaultValue: "",
+            periodType: concept.periodType,
+            // Add periodType from concept
             // Set period dates from the add column request
             periodStartDate: request.periodType === "instant" ? request.instantDate : request.startDate,
-            periodEndDate: request.periodType === "instant" ? request.instantDate : request.endDate
+            periodEndDate: request.periodType === "instant" ? request.instantDate : request.endDate,
+            periodInstantDate: concept.periodType === "instant" ? request.instantDate || request.startDate : void 0
           };
         }
         if (!concept.fields) {
@@ -5608,7 +5941,8 @@ let JupiterDynamicForm = class extends LitElement {
       this._selectedRoleIds,
       this._allSections,
       this._typedMemberData,
-      this._periodPreferences
+      this._periodPreferences,
+      this._periodData
     );
     const saved = this._draftStorageService.saveDraft(draftData, metadata);
     this.dynaformsFacts = draftData;
@@ -5708,6 +6042,10 @@ let JupiterDynamicForm = class extends LitElement {
       this._preservedTypedMemberData = {};
       console.log("🔄 Restored typed member data");
     }
+    if (metadata.periodData) {
+      this._periodData = metadata.periodData;
+      console.log("🔄 Restored custom field-level period data:", Object.keys(this._periodData).length, "concepts");
+    }
     if (metadata.periodPreferences) {
       this._periodPreferences = metadata.periodPreferences;
       console.log("🔄 Restored period preferences (including previous year settings):", this._periodPreferences);
@@ -5725,6 +6063,8 @@ let JupiterDynamicForm = class extends LitElement {
           this._allSections = this._filterRolesByFinancialStatementsType(this._allSections);
         }
         console.log("✅ Schema rebuilt with restored period preferences");
+        console.log("🔄 Applying custom period data to schema fields...");
+        this._applyCustomPeriodDataToFields();
         if (metadata.customColumns && metadata.customColumns.length > 0) {
           this._mergeAdditionalCustomColumns(metadata.customColumns);
           console.log(`🔄 Merged ${metadata.customColumns.length} additional custom columns`);
@@ -5737,6 +6077,7 @@ let JupiterDynamicForm = class extends LitElement {
       }
     }
     const restoredFormData = {};
+    const restoredPeriodData = {};
     formData.forEach((entry) => {
       let { conceptId, value, columnId, period } = entry;
       if (!columnId && period) {
@@ -5753,9 +6094,33 @@ let JupiterDynamicForm = class extends LitElement {
       }
       restoredFormData[conceptIdToUse][columnId] = value;
       console.log(`📦 Restored: ${conceptIdToUse}[${columnId}] = ${value}`);
+      if (period) {
+        if (!restoredPeriodData[conceptIdToUse]) {
+          restoredPeriodData[conceptIdToUse] = {};
+        }
+        if (period.type === "instant") {
+          restoredPeriodData[conceptIdToUse][columnId] = {
+            instantDate: period.date
+          };
+          console.log(`📅 [Restore Period] Extracted instant date for ${conceptIdToUse}/${columnId}: ${period.date}`);
+        } else if (period.type === "duration") {
+          restoredPeriodData[conceptIdToUse][columnId] = {
+            startDate: period.startDate,
+            endDate: period.endDate
+          };
+          console.log(`📅 [Restore Period] Extracted duration dates for ${conceptIdToUse}/${columnId}: ${period.startDate} - ${period.endDate}`);
+        }
+      }
     });
     this._formData = { ...this._formData, ...restoredFormData };
     console.log(`🔄 Restored ${Object.keys(restoredFormData).length} concepts with data`);
+    this._periodData = {
+      ...this._periodData,
+      ...metadata.periodData || {},
+      ...restoredPeriodData
+    };
+    console.log(`📅 [Period Restore] Merged period data: ${Object.keys(this._periodData).length} concepts with custom periods`);
+    console.log(`📅 [Period Restore] Full _periodData after merge:`, JSON.stringify(this._periodData, null, 2));
     if (this._selectedRoleIds.length > 0) {
       this._applyRoleFilter();
     }
@@ -5884,16 +6249,20 @@ let JupiterDynamicForm = class extends LitElement {
     this._allSections.forEach((section2) => {
       const savedColumns = columnsBySection.get(section2.id);
       if (savedColumns) {
-        section2.columns = savedColumns.map((col) => ({
-          id: col.columnId,
-          title: col.label,
-          type: col.dimensionData ? "dimension" : "base",
-          periodStartDate: col.startDate || col.date,
-          periodEndDate: col.endDate || col.date,
-          dimensionData: col.dimensionData,
-          order: 0,
-          removable: col.columnId !== "duration" && col.columnId !== "instant"
-        }));
+        section2.columns = savedColumns.map((col) => {
+          const column2 = {
+            id: col.columnId,
+            title: col.label,
+            type: col.dimensionData ? "dimension" : "base",
+            periodStartDate: col.startDate || col.date,
+            periodEndDate: col.endDate || col.date,
+            dimensionData: col.dimensionData,
+            order: 0,
+            removable: col.columnId !== "duration" && col.columnId !== "instant"
+          };
+          console.log(`📅 [Draft Restore] Restoring column ${col.columnId}: startDate=${column2.periodStartDate}, endDate=${column2.periodEndDate}`);
+          return column2;
+        });
         this._regenerateFieldsForSection(section2);
         console.log(`  └─ Restored ${savedColumns.length} columns for section ${section2.id}`);
       }
@@ -5928,6 +6297,7 @@ let JupiterDynamicForm = class extends LitElement {
           section2.columns = [];
         }
         customColumnsForSection.forEach((col) => {
+          console.log(`📅 [Merge Custom Column] Column ${col.columnId}: col.startDate=${col.startDate}, col.endDate=${col.endDate}, col.date=${col.date}, col.periodType=${col.periodType}`);
           const existingColumn = section2.columns.find((c2) => c2.id === col.columnId);
           if (!existingColumn) {
             const newColumn = {
@@ -5940,6 +6310,7 @@ let JupiterDynamicForm = class extends LitElement {
               order: section2.columns.length,
               removable: true
             };
+            console.log(`📅 [New Column Created] Column ${newColumn.id}: periodStartDate=${newColumn.periodStartDate}, periodEndDate=${newColumn.periodEndDate}`);
             section2.columns.push(newColumn);
             console.log(`  └─ Added custom column ${col.columnId} to section ${section2.id}`);
           }
@@ -5954,6 +6325,51 @@ let JupiterDynamicForm = class extends LitElement {
       };
     }
   }
+  /**
+   * Apply custom period data from _periodData to all existing fields
+   * This is called after schema rebuild to preserve user-modified period dates
+   */
+  _applyCustomPeriodDataToFields() {
+    if (!this._periodData || Object.keys(this._periodData).length === 0) {
+      console.log("ℹ️ No custom period data to apply");
+      return;
+    }
+    let appliedCount = 0;
+    const applyToConceptTree = (concepts) => {
+      concepts.forEach((concept) => {
+        if (this._periodData[concept.id]) {
+          const conceptPeriodData = this._periodData[concept.id];
+          if (concept.fields) {
+            concept.fields.forEach((field) => {
+              const customPeriod = conceptPeriodData[field.columnId];
+              if (customPeriod) {
+                if (customPeriod.startDate) {
+                  field.periodStartDate = customPeriod.startDate;
+                }
+                if (customPeriod.endDate) {
+                  field.periodEndDate = customPeriod.endDate;
+                }
+                if (customPeriod.instantDate) {
+                  field.periodInstantDate = customPeriod.instantDate;
+                }
+                appliedCount++;
+                console.log(`✅ [Apply Period] Updated field ${concept.id}/${field.columnId}: start=${field.periodStartDate}, end=${field.periodEndDate}, instant=${field.periodInstantDate}`);
+              }
+            });
+          }
+        }
+        if (concept.children && concept.children.length > 0) {
+          applyToConceptTree(concept.children);
+        }
+      });
+    };
+    this._allSections.forEach((section2) => {
+      if (section2.concepts && section2.concepts.length > 0) {
+        applyToConceptTree(section2.concepts);
+      }
+    });
+    console.log(`📅 [Apply Period] Applied custom period data to ${appliedCount} fields`);
+  }
   _regenerateFieldsForSection(section2) {
     if (!section2.columns)
       return;
@@ -5971,24 +6387,47 @@ let JupiterDynamicForm = class extends LitElement {
         );
         if (shouldShowConcept) {
           section2.columns.forEach((column2) => {
+            var _a;
             const conceptPeriodType = concept.periodType;
             const columnPeriodType = this._inferColumnPeriodType(column2);
             if (concept.abstract)
               return;
-            if (conceptPeriodType && columnPeriodType) {
+            const shouldSkipPeriodCheck = !columnPeriodType || column2.id === "duration" || column2.id === "default";
+            if (!shouldSkipPeriodCheck && conceptPeriodType && columnPeriodType) {
               if (conceptPeriodType !== columnPeriodType) {
+                console.log(`⏭️ [Field Regeneration] Skipping field for ${concept.id} in column ${column2.id}: conceptPeriodType=${conceptPeriodType}, columnPeriodType=${columnPeriodType}`);
                 return;
               }
             }
-            concept.fields.push({
+            const newField = {
               id: `${concept.id}_${column2.id}`,
               conceptId: concept.id,
               columnId: column2.id,
               type: this._mapConceptTypeToFieldType(concept.type),
               label: concept.label,
+              periodType: conceptPeriodType,
+              // Add periodType from concept
               periodStartDate: column2.periodStartDate,
-              periodEndDate: column2.periodEndDate
-            });
+              periodEndDate: column2.periodEndDate,
+              periodInstantDate: conceptPeriodType === "instant" ? column2.periodEndDate || column2.periodStartDate : void 0
+            };
+            if ((_a = this._periodData[concept.id]) == null ? void 0 : _a[column2.id]) {
+              const customPeriod = this._periodData[concept.id][column2.id];
+              if (customPeriod.startDate)
+                newField.periodStartDate = customPeriod.startDate;
+              if (customPeriod.endDate)
+                newField.periodEndDate = customPeriod.endDate;
+              if (customPeriod.instantDate)
+                newField.periodInstantDate = customPeriod.instantDate;
+              console.log(`✅ [Field Regeneration] Applied custom period data to ${concept.id}/${column2.id}:`, customPeriod);
+              console.log(`✅ [Field Regeneration] Field properties after apply: periodStartDate=${newField.periodStartDate}, periodEndDate=${newField.periodEndDate}, periodInstantDate=${newField.periodInstantDate}`);
+            } else {
+              console.log(`ℹ️ [Field Regeneration] No custom period data for ${concept.id}/${column2.id}. Checking _periodData:`, this._periodData[concept.id]);
+            }
+            if (concept.id.includes("DescriptionLocationNL") || column2.id.startsWith("col-")) {
+              console.log(`📅 [Field Regeneration] Concept ${concept.id}, Column ${column2.id}: field.periodStartDate=${newField.periodStartDate}, field.periodEndDate=${newField.periodEndDate}, column.periodStartDate=${column2.periodStartDate}`);
+            }
+            concept.fields.push(newField);
           });
         }
         if (concept.children) {
@@ -6094,26 +6533,30 @@ let JupiterDynamicForm = class extends LitElement {
     return null;
   }
   _addConceptDataToSubmission(concept, columnId, value, submissionData, section2) {
-    var _a;
+    var _a, _b;
     const field = concept.fields.find((f2) => f2.columnId === columnId);
     if (!field)
       return;
     const isInstant = concept.periodType === "instant";
+    const fieldPeriodData = (_a = this._periodData[concept.id]) == null ? void 0 : _a[columnId];
     const column2 = this._findColumnByIdInAllSections(columnId);
-    console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${columnId}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}`);
+    console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${columnId}, Field Period: ${fieldPeriodData ? JSON.stringify(fieldPeriodData) : "none"}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}`);
+    const periodStartDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.startDate) || (column2 == null ? void 0 : column2.periodStartDate) || field.periodStartDate || this.periodStartDate;
+    const periodEndDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field.periodEndDate || this.periodEndDate;
+    const periodInstantDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.instantDate) || field.periodInstantDate || periodEndDate || periodStartDate;
     const entry = {
       conceptId: concept.originalConceptId || concept.id,
       columnId,
       value,
       period: {
         type: concept.periodType || "duration",
-        ...isInstant ? { date: (column2 == null ? void 0 : column2.periodEndDate) || field.periodStartDate || this.periodStartDate } : {
-          startDate: (column2 == null ? void 0 : column2.periodStartDate) || field.periodStartDate || this.periodStartDate,
-          endDate: (column2 == null ? void 0 : column2.periodEndDate) || field.periodEndDate || this.periodEndDate
+        ...isInstant ? { date: periodInstantDate } : {
+          startDate: periodStartDate,
+          endDate: periodEndDate
         }
       }
     };
-    if ((_a = column2 == null ? void 0 : column2.dimensionData) == null ? void 0 : _a.memberLabel) {
+    if ((_b = column2 == null ? void 0 : column2.dimensionData) == null ? void 0 : _b.memberLabel) {
       entry.dimension = column2.dimensionData.memberLabel;
     }
     submissionData.push(entry);
@@ -6250,11 +6693,12 @@ let JupiterDynamicForm = class extends LitElement {
       }
       if (concept.fields && concept.fields.length > 0) {
         concept.fields.forEach((field) => {
-          var _a, _b;
+          var _a, _b, _c;
           const conceptData = this._formData[concept.id];
           const fieldValue = conceptData == null ? void 0 : conceptData[field.columnId];
           if (fieldValue !== void 0 && fieldValue !== null && fieldValue !== "") {
             const column2 = this._findColumnByIdInSection(field.columnId, section2);
+            const fieldPeriodData = (_a = this._periodData[concept.id]) == null ? void 0 : _a[field.columnId];
             const submissionEntry = {
               conceptId: concept.id,
               columnId: field.columnId,
@@ -6265,13 +6709,16 @@ let JupiterDynamicForm = class extends LitElement {
               }
             };
             if (concept.periodType === "instant") {
-              submissionEntry.period.date = (column2 == null ? void 0 : column2.periodEndDate) || field.periodStartDate || this.periodStartDate;
+              const instantDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.instantDate) || (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field.periodInstantDate || field.periodEndDate || field.periodStartDate || this.periodStartDate;
+              submissionEntry.period.date = instantDate;
             } else {
-              submissionEntry.period.startDate = (column2 == null ? void 0 : column2.periodStartDate) || field.periodStartDate || this.periodStartDate;
-              submissionEntry.period.endDate = (column2 == null ? void 0 : column2.periodEndDate) || field.periodEndDate || this.periodEndDate;
+              const startDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.startDate) || (column2 == null ? void 0 : column2.periodStartDate) || field.periodStartDate || this.periodStartDate;
+              const endDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field.periodEndDate || this.periodEndDate;
+              submissionEntry.period.startDate = startDate;
+              submissionEntry.period.endDate = endDate;
             }
-            console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${field.columnId}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}, Used Period: ${submissionEntry.period.type === "instant" ? submissionEntry.period.date : `${submissionEntry.period.startDate} - ${submissionEntry.period.endDate}`}`);
-            if ((column2 == null ? void 0 : column2.type) === "dimension" && ((_a = column2.dimensionData) == null ? void 0 : _a.dimensionIdKey)) {
+            console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${field.columnId}, Field Period: ${fieldPeriodData ? JSON.stringify(fieldPeriodData) : "none"}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}, Used Period: ${submissionEntry.period.type === "instant" ? submissionEntry.period.date : `${submissionEntry.period.startDate} - ${submissionEntry.period.endDate}`}`);
+            if ((column2 == null ? void 0 : column2.type) === "dimension" && ((_b = column2.dimensionData) == null ? void 0 : _b.dimensionIdKey)) {
               submissionEntry.dimension = column2.dimensionData.dimensionIdKey;
               console.log(`🔍 [DynamicForm] Using dimension key from field's column (${field.columnId}):`, column2.dimensionData.dimensionIdKey);
             } else {
@@ -6307,7 +6754,7 @@ let JupiterDynamicForm = class extends LitElement {
                 console.log(`🔍 [DynamicForm] Column details:`, {
                   id: column2.id,
                   type: column2.type,
-                  hasTypedMembers: (_b = column2.dimensionData) == null ? void 0 : _b.hasTypedMembers,
+                  hasTypedMembers: (_c = column2.dimensionData) == null ? void 0 : _c.hasTypedMembers,
                   dimensionData: column2.dimensionData
                 });
               }
@@ -6352,6 +6799,36 @@ let JupiterDynamicForm = class extends LitElement {
   _handleSidePanelRoleClick(roleId) {
     this._activeSidePanelRoleId = roleId;
   }
+  _handleSidePanelSearchInput(event) {
+    const input = event.target;
+    this._sidePanelSearchQuery = input.value;
+  }
+  _clearSidePanelSearch() {
+    var _a;
+    this._sidePanelSearchQuery = "";
+    const searchInput = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".side-panel-search-input");
+    if (searchInput) {
+      searchInput.value = "";
+      searchInput.focus();
+    }
+  }
+  _toggleSidePanelCollapse() {
+    this._sidePanelCollapsed = !this._sidePanelCollapsed;
+  }
+  _filterSidePanelSections(sections) {
+    if (!this._sidePanelSearchQuery.trim()) {
+      return sections;
+    }
+    const query = this._sidePanelSearchQuery.toLowerCase().trim();
+    return sections.filter((section2) => {
+      var _a, _b, _c;
+      const titleMatch = section2.title.toLowerCase().includes(query);
+      const idMatch = section2.id.toLowerCase().includes(query);
+      const descriptionMatch = ((_a = section2.description) == null ? void 0 : _a.toLowerCase().includes(query)) || false;
+      const uriMatch = ((_c = (_b = section2.metadata) == null ? void 0 : _b.roleURI) == null ? void 0 : _c.toLowerCase().includes(query)) || false;
+      return titleMatch || idMatch || descriptionMatch || uriMatch;
+    });
+  }
   _renderAdminModeContent(section2) {
     var _a, _b, _c;
     if (!section2) {
@@ -6496,6 +6973,7 @@ let JupiterDynamicForm = class extends LitElement {
             .isFirstSection="${index === 0}"
             .availableDimensions="${this._getAvailableDimensionsForSection(section2.id)}"
             @field-change="${this._handleFieldChange}"
+            @period-change="${this._handlePeriodChange}"
             @typed-member-change="${this._handleTypedMemberChange}"
             @section-expand="${this._handleSectionExpand}"
             @concept-expand="${this._handleConceptExpand}"
@@ -6508,22 +6986,71 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _renderSidePanelLayout(schema, config, showValidationSummary, errorCount) {
     const visibleSections = schema.sections;
-    if (!this._activeSidePanelRoleId || !visibleSections.find((s2) => s2.id === this._activeSidePanelRoleId)) {
-      this._activeSidePanelRoleId = visibleSections.length > 0 ? visibleSections[0].id : null;
+    const filteredSections = this._filterSidePanelSections(visibleSections);
+    if (!this._activeSidePanelRoleId || !filteredSections.find((s2) => s2.id === this._activeSidePanelRoleId)) {
+      this._activeSidePanelRoleId = filteredSections.length > 0 ? filteredSections[0].id : null;
     }
     const activeSection = visibleSections.find((s2) => s2.id === this._activeSidePanelRoleId);
     return html`
       <div class="side-panel-layout">
         <!-- Left: Roles List (filtered) -->
-        <div class="side-panel-roles-list">
-          ${visibleSections.map((section2) => html`
-            <div 
-              class="side-panel-role-item ${section2.id === this._activeSidePanelRoleId ? "active" : ""}"
-              @click="${() => this._handleSidePanelRoleClick(section2.id)}"
-            >
-              ${section2.title}
+        <div class="side-panel-roles-list ${this._sidePanelCollapsed ? "collapsed" : ""}">
+          <!-- Toggle Button -->
+          <button 
+            class="side-panel-toggle-btn ${this._sidePanelCollapsed ? "collapsed" : ""}"
+            @click="${this._toggleSidePanelCollapse}"
+            title="${this._sidePanelCollapsed ? I18n.t("form.expandPanel") : I18n.t("form.collapsePanel")}"
+          >
+            <svg viewBox="0 0 24 24">
+              <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+            </svg>
+          </button>
+          
+          ${!this._sidePanelCollapsed ? html`
+          <!-- Search Input -->
+          <div class="side-panel-search-container">
+            <input
+              type="text"
+              class="side-panel-search-input"
+              placeholder="${I18n.t("filter.searchPlaceholder")}"
+              .value="${this._sidePanelSearchQuery}"
+              @input="${this._handleSidePanelSearchInput}"
+            />
+            ${this._sidePanelSearchQuery ? html`
+              <button class="side-panel-clear-search" @click="${this._clearSidePanelSearch}" title="${I18n.t("filter.clearSearch")}">
+                ×
+              </button>
+            ` : html`
+              <svg class="side-panel-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>
+          
+          <!-- Search Results Info -->
+          ${this._sidePanelSearchQuery.trim() && filteredSections.length !== visibleSections.length ? html`
+            <div class="side-panel-search-results-info">
+              ${filteredSections.length} ${I18n.t("filter.of")} ${visibleSections.length} ${I18n.t("filter.roles")}
             </div>
-          `)}
+          ` : ""}
+          
+          <!-- Roles List -->
+          ${filteredSections.length === 0 ? html`
+            <div class="side-panel-no-results">
+              ${I18n.t("filter.noRolesFound")} "${this._sidePanelSearchQuery}"<br>
+              ${I18n.t("filter.tryDifferentSearch")}
+            </div>
+          ` : html`
+            ${filteredSections.map((section2) => html`
+              <div 
+                class="side-panel-role-item ${section2.id === this._activeSidePanelRoleId ? "active" : ""}"
+                @click="${() => this._handleSidePanelRoleClick(section2.id)}"
+              >
+                ${section2.title}
+              </div>
+            `)}
+          `}
+          ` : ""}
         </div>
 
         <!-- Right: Active Section Content -->
@@ -6879,6 +7406,132 @@ JupiterDynamicForm.styles = css`
       border-right: 1px solid var(--jupiter-border-color, #ddd);
       overflow-y: auto;
       background: var(--jupiter-background-light, #f8f9fa);
+      display: flex;
+      flex-direction: column;
+      transition: width 0.3s ease, min-width 0.3s ease;
+      position: relative;
+    }
+
+    .side-panel-roles-list.collapsed {
+      width: 48px;
+      min-width: 48px;
+      overflow: visible;
+      border-right: 1px solid var(--jupiter-border-color, #ddd);
+    }
+
+    .side-panel-toggle-btn {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      width: 32px;
+      height: 32px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      background: var(--jupiter-background, #fff);
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 100;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .side-panel-toggle-btn:hover {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      border-color: var(--jupiter-primary-color, #1976d2);
+    }
+
+    .side-panel-toggle-btn svg {
+      width: 20px;
+      height: 20px;
+      fill: currentColor;
+      transition: transform 0.3s ease;
+    }
+
+    .side-panel-toggle-btn.collapsed svg {
+      transform: rotate(180deg);
+    }
+
+    .side-panel-search-container {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      background: var(--jupiter-background, #fff);
+      padding: 16px;
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+    }
+
+    .side-panel-search-input {
+      width: 100%;
+      padding: 10px 40px 10px 12px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      font-size: 14px;
+      font-family: inherit;
+      background: var(--jupiter-background, #fff);
+      color: var(--jupiter-text-primary, #333);
+      transition: border-color 0.2s ease;
+      box-sizing: border-box;
+    }
+
+    .side-panel-search-input:focus {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #1976d2);
+      box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
+    }
+
+    .side-panel-search-input::placeholder {
+      color: var(--jupiter-text-secondary, #666);
+    }
+
+    .side-panel-search-icon {
+      position: absolute;
+      right: 28px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 16px;
+      height: 16px;
+      fill: var(--jupiter-text-secondary, #666);
+      pointer-events: none;
+    }
+
+    .side-panel-clear-search {
+      position: absolute;
+      right: 28px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 2px;
+      border-radius: 2px;
+      color: var(--jupiter-text-secondary, #666);
+      font-size: 20px;
+      line-height: 1;
+      transition: color 0.2s ease;
+    }
+
+    .side-panel-clear-search:hover {
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .side-panel-search-results-info {
+      font-size: 12px;
+      color: var(--jupiter-text-secondary, #666);
+      padding: 8px 16px;
+      text-align: center;
+      border-bottom: 1px solid var(--jupiter-border-color, #e0e0e0);
+      background: var(--jupiter-background-light, #f8f9fa);
+    }
+
+    .side-panel-no-results {
+      padding: 40px 20px;
+      text-align: center;
+      color: var(--jupiter-text-secondary, #666);
+      font-size: 14px;
+      line-height: 1.6;
     }
 
     .side-panel-role-item {
@@ -7033,6 +7686,12 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_preservedFormData", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_periodData", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_preservedPeriodData", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_typedMemberData", 2);
@@ -7075,6 +7734,12 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_activeSidePanelRoleId", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_sidePanelSearchQuery", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_sidePanelCollapsed", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_adminRoleConfigs", 2);