jupiter-dynamic-forms 1.9.6 → 1.9.8

package/dist/index.mjs

@@ -559,8 +559,9 @@ class XBRLFormBuilder {
    * @param periodStartDate - Start date for the reporting period
    * @param periodEndDate - End date for the reporting period
    * @param language - ISO language code for labels (e.g., 'en', 'nl', 'de')
+   * @param periodPreferences - User preferences for which period columns to show per role
    */
-  static buildFormSchema(xbrlInput, periodStartDate, periodEndDate, language = "en") {
+  static buildFormSchema(xbrlInput, periodStartDate, periodEndDate, language = "en", periodPreferences) {
     var _a;
     if (!xbrlInput.presentation || xbrlInput.presentation.length === 0) {
       throw new Error("XBRL presentation data is required");
@@ -572,7 +573,7 @@ class XBRLFormBuilder {
       return a2.role.localeCompare(b2.role);
     });
     sortedRoles.forEach((role) => {
-      const section = this.buildSectionFromRole(role, periodStartDate, periodEndDate, hypercubeData, language);
+      const section = this.buildSectionFromRole(role, periodStartDate, periodEndDate, hypercubeData, language, periodPreferences);
       this.assignFieldColumnIds(section);
       sections.push(section);
     });
@@ -587,7 +588,7 @@ class XBRLFormBuilder {
   /**
    * Build a form section from a presentation role
    */
-  static buildSectionFromRole(role, periodStartDate, periodEndDate, hypercubeData, language = "en") {
+  static buildSectionFromRole(role, periodStartDate, periodEndDate, hypercubeData, language = "en", periodPreferences) {
     var _a;
     const title = this.extractRoleTitle(role.role);
     const nonAbstractConcepts = this.getAllNonAbstractConcepts(role);
@@ -595,7 +596,8 @@ class XBRLFormBuilder {
       nonAbstractConcepts.filter((concept) => concept.periodType).map((concept) => concept.periodType)
     );
     const hypercubeRole = hypercubeData == null ? void 0 : hypercubeData.roles.find((hr) => hr.roleId === role.id);
-    const columns = this.generateDefaultColumnsForRole(role, periodStartDate || "2025-01-01", periodEndDate || "2025-12-31", hypercubeRole, nonAbstractConcepts, periodTypes);
+    const rolePreferences = periodPreferences == null ? void 0 : periodPreferences[role.id];
+    const columns = this.generateDefaultColumnsForRole(role, periodStartDate || "2025-01-01", periodEndDate || "2025-12-31", hypercubeRole, nonAbstractConcepts, periodTypes, rolePreferences);
     const availableColumnIds = columns.map((col) => col.id);
     const roleInfo = { periodTypes, availableColumnIds };
     const conceptTrees = [];
@@ -617,7 +619,14 @@ class XBRLFormBuilder {
       metadata: {
         roleURI: role.roleURI,
         originalRole: role.role
-      }
+      },
+      showPeriodControl: periodTypes.size > 1,
+      showPreviousYear: role.showPreviousYear === true,
+      // Read from presentation.json
+      instant: role.instant === true,
+      // Read from presentation.json
+      duration: role.duration === true
+      // Read from presentation.json
     };
   }
   /**
@@ -630,16 +639,23 @@ class XBRLFormBuilder {
       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 colId.includes("instant") || colId === "instant";
+            return isInstantColumn;
           } else if (concept.periodType === "duration") {
-            return colId.includes("duration") || colId === "duration";
+            return isDurationColumn;
           } else {
-            return true;
+            return !isInstantColumn && !isDurationColumn;
           }
         });
-        if (columnIds.length === 0) {
-          columnIds = roleInfo.availableColumnIds;
+        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;
+          }
         }
       } else {
         if (!(roleInfo == null ? void 0 : roleInfo.periodTypes) || roleInfo.periodTypes.size === 0) {
@@ -685,6 +701,8 @@ class XBRLFormBuilder {
       name: concept.conceptName,
       label,
       description: `${concept.conceptName} (${concept.type})`,
+      type: concept.type,
+      // XBRL concept type for input field rendering
       level,
       children,
       fields,
@@ -834,7 +852,7 @@ class XBRLFormBuilder {
   /**
    * Generate default columns based on period types of non-abstract concepts in a role
    */
-  static generateDefaultColumnsForRole(role, periodStartDate, periodEndDate, hypercubeRole, nonAbstractConcepts, rolePeriodTypes) {
+  static generateDefaultColumnsForRole(role, periodStartDate, periodEndDate, hypercubeRole, nonAbstractConcepts, rolePeriodTypes, periodPreferences) {
     var _a, _b;
     const concepts = nonAbstractConcepts || this.getAllNonAbstractConcepts(role);
     const periodTypes = rolePeriodTypes || new Set(
@@ -858,6 +876,9 @@ class XBRLFormBuilder {
       } else if (item.dimensions.length > 1) {
         dimensionColumns = this.generateMultiDimensionColumns(item.dimensions, periodStartDate, periodEndDate, periodTypes);
       }
+      if (periodPreferences) {
+        dimensionColumns = this.filterColumnsByPeriodPreferences(dimensionColumns, periodPreferences);
+      }
     } else if (((_b = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _b.length) && hypercubeRole.items.length > 1)
       ;
     const columns = [];
@@ -876,8 +897,8 @@ class XBRLFormBuilder {
       } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
         columns.push({
           id: "instant",
-          title: `Current`,
-          description: `Values as of ${periodStartDate}`,
+          title: periodEndDate,
+          description: "",
           type: "base",
           order: 0,
           removable: false
@@ -885,8 +906,8 @@ class XBRLFormBuilder {
       } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
         columns.push({
           id: "duration",
-          title: `Current Period`,
-          description: `Period: ${periodStartDate} to ${periodEndDate}`,
+          title: `${periodStartDate} / ${periodEndDate}`,
+          description: "",
           type: "base",
           order: 0,
           removable: false
@@ -894,23 +915,122 @@ class XBRLFormBuilder {
       } else {
         columns.push({
           id: "duration",
-          title: `Current Period`,
-          description: `Period: ${periodStartDate} to ${periodEndDate}`,
+          title: `${periodStartDate} / ${periodEndDate}`,
+          description: "",
           type: "base",
           order: 0,
           removable: false
         });
         columns.push({
           id: "instant",
-          title: `Current`,
-          description: `Values as of ${periodStartDate}`,
+          title: periodEndDate,
+          description: "",
           type: "base",
           order: 1,
           removable: false
         });
       }
     }
-    return columns;
+    let filteredColumns = columns;
+    if (periodPreferences) {
+      filteredColumns = this.filterColumnsByPeriodPreferences(columns, periodPreferences);
+    }
+    if (periodPreferences == null ? void 0 : periodPreferences.showPreviousYear) {
+      const previousYearColumns = this.generatePreviousYearColumns(filteredColumns, periodStartDate, periodEndDate);
+      filteredColumns = [...filteredColumns, ...previousYearColumns];
+    }
+    return filteredColumns;
+  }
+  /**
+   * Calculate previous year date by subtracting one year
+   */
+  static getPreviousYearDate(dateString) {
+    try {
+      const date = new Date(dateString);
+      date.setFullYear(date.getFullYear() - 1);
+      return date.toISOString().split("T")[0];
+    } catch (error) {
+      console.error(`Error calculating previous year for date ${dateString}:`, error);
+      return dateString;
+    }
+  }
+  /**
+   * Generate previous year columns based on current year columns
+   */
+  static generatePreviousYearColumns(currentYearColumns, periodStartDate, periodEndDate) {
+    const previousYearColumns = [];
+    const prevStartDate = this.getPreviousYearDate(periodStartDate);
+    const prevEndDate = this.getPreviousYearDate(periodEndDate);
+    currentYearColumns.forEach((column, index) => {
+      let prevTitle = column.title;
+      let prevDescription = "";
+      let prevId = "";
+      if (column.dimensionData) {
+        prevTitle = column.title;
+        if (column.description && column.description.includes("/")) {
+          prevDescription = `${prevStartDate} / ${prevEndDate}`;
+        } else {
+          prevDescription = prevEndDate;
+        }
+        prevId = `${column.id}_prev`;
+      } else {
+        if (column.id === "instant" || column.id.includes("instant")) {
+          prevTitle = prevEndDate;
+          prevDescription = "";
+          prevId = `instant_prev_${index}`;
+        } else if (column.id === "duration" || column.id.includes("duration")) {
+          prevTitle = `${prevStartDate} / ${prevEndDate}`;
+          prevDescription = "";
+          prevId = `duration_prev_${index}`;
+        } else if (column.title.includes("/")) {
+          prevTitle = `${prevStartDate} / ${prevEndDate}`;
+          prevDescription = "";
+          prevId = `${column.id}_prev`;
+        } else {
+          prevTitle = prevEndDate;
+          prevDescription = "";
+          prevId = `${column.id}_prev`;
+        }
+      }
+      previousYearColumns.push({
+        ...column,
+        id: prevId,
+        title: prevTitle,
+        description: prevDescription,
+        order: column.order + 100,
+        // Place after current year columns
+        removable: true,
+        periodStartDate: prevStartDate,
+        // Set previous year start date
+        periodEndDate: prevEndDate,
+        // Set previous year end date
+        dimensionData: column.dimensionData ? {
+          ...column.dimensionData,
+          dimensionId: `${column.dimensionData.dimensionId}_prev`
+        } : void 0
+      });
+    });
+    return previousYearColumns;
+  }
+  /**
+   * Filter columns based on user's period preferences
+   */
+  static filterColumnsByPeriodPreferences(columns, preferences) {
+    return columns.filter((column) => {
+      var _a, _b, _c, _d;
+      const isDuration = column.id.includes("duration") || ((_b = (_a = column.dimensionData) == null ? void 0 : _a.dimensionId) == null ? void 0 : _b.includes("duration"));
+      const isInstant = column.id.includes("instant") || ((_d = (_c = column.dimensionData) == null ? void 0 : _c.dimensionId) == null ? void 0 : _d.includes("instant"));
+      if (!isDuration && !isInstant) {
+        return true;
+      }
+      if (isDuration && !preferences.showDuration) {
+        return false;
+      }
+      if (isInstant && !preferences.showInstant) {
+        return false;
+      }
+      return true;
+    });
   }
   /**
    * Generate columns for single dimension scenarios
@@ -959,7 +1079,7 @@ class XBRLFormBuilder {
         columns2.push({
           id: "typed-instant",
           title: `${axisLabel2} [Typed Input Available]`,
-          description: `Typed values as of ${periodStartDate}`,
+          description: periodEndDate,
           type: "dimension",
           dimensionData: {
             dimensionId: "typed-instant",
@@ -987,7 +1107,7 @@ class XBRLFormBuilder {
         columns2.push({
           id: "typed-duration",
           title: `${axisLabel2} [Typed Input Available]`,
-          description: `Typed values for period ${periodStartDate} to ${periodEndDate}`,
+          description: `${periodStartDate} / ${periodEndDate}`,
           type: "dimension",
           dimensionData: {
             dimensionId: "typed-duration",
@@ -1015,7 +1135,7 @@ class XBRLFormBuilder {
         columns2.push({
           id: "typed-duration",
           title: `${axisLabel2} [Typed Input Available]`,
-          description: `Typed values for period ${periodStartDate} to ${periodEndDate}`,
+          description: `${periodStartDate} / ${periodEndDate}`,
           type: "dimension",
           dimensionData: {
             dimensionId: "typed-duration",
@@ -1042,7 +1162,7 @@ class XBRLFormBuilder {
         columns2.push({
           id: "typed-instant",
           title: `${axisLabel2} [Typed Input Available]`,
-          description: `Typed values as of ${periodStartDate}`,
+          description: periodEndDate,
           type: "dimension",
           dimensionData: {
             dimensionId: "typed-instant",
@@ -1111,7 +1231,7 @@ class XBRLFormBuilder {
       columns.push({
         id: "instant",
         title: `${dimensionInfo.memberLabel}`,
-        description: `Values as of ${periodStartDate}`,
+        description: periodEndDate,
         type: "dimension",
         dimensionData: {
           dimensionId: "instant",
@@ -1131,7 +1251,7 @@ class XBRLFormBuilder {
       columns.push({
         id: "duration",
         title: `${dimensionInfo.memberLabel}`,
-        description: `Period: ${periodStartDate} to ${periodEndDate}`,
+        description: `${periodStartDate} / ${periodEndDate}`,
         type: "dimension",
         dimensionData: {
           dimensionId: "duration",
@@ -1151,7 +1271,7 @@ class XBRLFormBuilder {
       columns.push({
         id: "duration",
         title: `${dimensionInfo.memberLabel}`,
-        description: `Period: ${periodStartDate} to ${periodEndDate}`,
+        description: `${periodStartDate} / ${periodEndDate}`,
         type: "dimension",
         dimensionData: {
           dimensionId: "duration",
@@ -1170,7 +1290,7 @@ class XBRLFormBuilder {
       columns.push({
         id: "instant",
         title: `${dimensionInfo.memberLabel}`,
-        description: `Values as of ${periodStartDate}`,
+        description: periodEndDate,
         type: "dimension",
         dimensionData: {
           dimensionId: "instant",
@@ -1271,7 +1391,7 @@ class XBRLFormBuilder {
         columns.push({
           id: `duration_${index}`,
           title: `${columnTitle}`,
-          description: `Period: ${periodStartDate} to ${periodEndDate}`,
+          description: `${periodStartDate} / ${periodEndDate}`,
           type: "dimension",
           dimensionData: {
             ...dimensionData,
@@ -1284,7 +1404,7 @@ class XBRLFormBuilder {
         columns.push({
           id: `instant_${index}`,
           title: `${columnTitle}`,
-          description: `Values as of ${periodStartDate}`,
+          description: periodEndDate,
           type: "dimension",
           dimensionData: {
             ...dimensionData,
@@ -1297,7 +1417,7 @@ class XBRLFormBuilder {
         columns.push({
           id: `duration_${index}`,
           title: `${columnTitle}`,
-          description: `Period: ${periodStartDate} to ${periodEndDate}`,
+          description: `${periodStartDate} / ${periodEndDate}`,
           type: "dimension",
           dimensionData: {
             ...dimensionData,
@@ -1309,7 +1429,7 @@ class XBRLFormBuilder {
         columns.push({
           id: `instant_${index}`,
           title: `${columnTitle}`,
-          description: `Values as of ${periodStartDate}`,
+          description: periodEndDate,
           type: "dimension",
           dimensionData: {
             ...dimensionData,
@@ -1438,6 +1558,249 @@ class XBRLFormBuilder {
     }];
   }
 }
+const TYPE_INPUT_MAP = {
+  // ==========================================
+  // Dutch XBRL Types (nl-types namespace)
+  // ==========================================
+  // Text area for long-form explanations
+  "nl-types:formattedExplanationItemType": {
+    fieldType: "textarea",
+    placeholder: "Enter detailed explanation..."
+  },
+  // Monetary values without decimals (whole numbers only)
+  "nl-types:monetaryNoDecimals20ItemType": {
+    fieldType: "number",
+    htmlInputType: "number",
+    allowDecimals: false,
+    step: 1,
+    placeholder: "Enter amount (no decimals)"
+  },
+  // ==========================================
+  // Standard XBRL Types (xbrli namespace)
+  // ==========================================
+  // Monetary with decimals
+  "xbrli:monetaryItemType": {
+    fieldType: "currency",
+    htmlInputType: "number",
+    allowDecimals: true,
+    step: 0.01,
+    placeholder: "0.00"
+  },
+  // String/text types
+  "xbrli:stringItemType": {
+    fieldType: "text",
+    htmlInputType: "text",
+    placeholder: "Enter text"
+  },
+  // Date types
+  "xbrli:dateItemType": {
+    fieldType: "date",
+    htmlInputType: "date"
+  },
+  "xbrli:dateTimeItemType": {
+    fieldType: "datetime",
+    htmlInputType: "datetime-local"
+  },
+  // Numeric types - integers
+  "xbrli:integerItemType": {
+    fieldType: "integer",
+    htmlInputType: "number",
+    allowDecimals: false,
+    step: 1,
+    placeholder: "Enter whole number"
+  },
+  "xbrli:nonNegativeIntegerItemType": {
+    fieldType: "integer",
+    htmlInputType: "number",
+    allowDecimals: false,
+    min: 0,
+    step: 1,
+    placeholder: "Enter positive number"
+  },
+  "xbrli:positiveIntegerItemType": {
+    fieldType: "integer",
+    htmlInputType: "number",
+    allowDecimals: false,
+    min: 1,
+    step: 1,
+    placeholder: "Enter positive number"
+  },
+  // Numeric types - decimals
+  "xbrli:decimalItemType": {
+    fieldType: "decimal",
+    htmlInputType: "number",
+    allowDecimals: true,
+    step: "any",
+    placeholder: "Enter decimal value"
+  },
+  // Shares (typically whole numbers or with limited decimals)
+  "xbrli:sharesItemType": {
+    fieldType: "number",
+    htmlInputType: "number",
+    allowDecimals: true,
+    min: 0,
+    step: 0.01,
+    placeholder: "Enter number of shares"
+  },
+  "xbrli:shares": {
+    fieldType: "number",
+    htmlInputType: "number",
+    allowDecimals: true,
+    min: 0,
+    step: 0.01,
+    placeholder: "Enter number of shares"
+  },
+  // Year (gYear)
+  "xbrli:gYearItemType": {
+    fieldType: "number",
+    htmlInputType: "number",
+    allowDecimals: false,
+    min: 1900,
+    max: 2100,
+    step: 1,
+    placeholder: "YYYY"
+  },
+  // Boolean types
+  "xbrli:booleanItemType": {
+    fieldType: "boolean"
+  },
+  // ==========================================
+  // Percentage types
+  // ==========================================
+  "xbrli:pureItemType": {
+    fieldType: "percentage",
+    htmlInputType: "number",
+    allowDecimals: true,
+    step: 0.01,
+    placeholder: "Enter percentage"
+  },
+  "xbrli:percentItemType": {
+    fieldType: "percentage",
+    htmlInputType: "number",
+    allowDecimals: true,
+    step: 0.01,
+    placeholder: "Enter percentage"
+  },
+  // ==========================================
+  // Contact/Communication types
+  // ==========================================
+  "xbrli:emailItemType": {
+    fieldType: "email",
+    htmlInputType: "email",
+    placeholder: "email@example.com"
+  },
+  "xbrli:urlItemType": {
+    fieldType: "url",
+    htmlInputType: "url",
+    placeholder: "https://example.com"
+  },
+  "xbrli:telephoneItemType": {
+    fieldType: "tel",
+    htmlInputType: "tel",
+    placeholder: "+1 (555) 000-0000"
+  }
+};
+function getInputTypeForConceptType(conceptType) {
+  if (!conceptType) {
+    return {
+      fieldType: "text",
+      htmlInputType: "text",
+      placeholder: "Enter value"
+    };
+  }
+  if (TYPE_INPUT_MAP[conceptType]) {
+    return TYPE_INPUT_MAP[conceptType];
+  }
+  const lowerType = conceptType.toLowerCase();
+  if (lowerType.includes("monetary")) {
+    if (lowerType.includes("nodecimals") || lowerType.includes("no-decimals")) {
+      return {
+        fieldType: "number",
+        htmlInputType: "number",
+        allowDecimals: false,
+        step: 1,
+        placeholder: "Enter amount (no decimals)"
+      };
+    }
+    return {
+      fieldType: "currency",
+      htmlInputType: "number",
+      allowDecimals: true,
+      step: 0.01,
+      placeholder: "0.00"
+    };
+  }
+  if (lowerType.includes("explanation") || lowerType.includes("description") || lowerType.includes("notes") || lowerType.includes("formatted")) {
+    return {
+      fieldType: "textarea",
+      placeholder: "Enter detailed information..."
+    };
+  }
+  if (lowerType.includes("date")) {
+    if (lowerType.includes("time")) {
+      return {
+        fieldType: "datetime",
+        htmlInputType: "datetime-local"
+      };
+    }
+    return {
+      fieldType: "date",
+      htmlInputType: "date"
+    };
+  }
+  if (lowerType.includes("boolean") || lowerType.includes("bool")) {
+    return {
+      fieldType: "boolean"
+    };
+  }
+  if (lowerType.includes("integer") || lowerType.includes("int")) {
+    const isNonNegative = lowerType.includes("nonnegative") || lowerType.includes("non-negative");
+    const isPositive = lowerType.includes("positive");
+    return {
+      fieldType: "integer",
+      htmlInputType: "number",
+      allowDecimals: false,
+      min: isPositive ? 1 : isNonNegative ? 0 : void 0,
+      step: 1,
+      placeholder: "Enter whole number"
+    };
+  }
+  if (lowerType.includes("decimal") || lowerType.includes("numeric") || lowerType.includes("number")) {
+    return {
+      fieldType: "decimal",
+      htmlInputType: "number",
+      allowDecimals: true,
+      step: "any",
+      placeholder: "Enter decimal value"
+    };
+  }
+  if (lowerType.includes("percent") || lowerType.includes("pure")) {
+    return {
+      fieldType: "percentage",
+      htmlInputType: "number",
+      allowDecimals: true,
+      step: 0.01,
+      placeholder: "Enter percentage"
+    };
+  }
+  return {
+    fieldType: "text",
+    htmlInputType: "text",
+    placeholder: "Enter value"
+  };
+}
+function isTextareaType(fieldType) {
+  return fieldType === "textarea";
+}
+function isCheckboxType(fieldType) {
+  return fieldType === "boolean";
+}
+function isNumericType(fieldType) {
+  return ["number", "decimal", "integer", "currency", "percentage"].includes(fieldType);
+}
+function isSelectType(fieldType) {
+  return fieldType === "select";
+}
 var __defProp$5 = Object.defineProperty;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
 var __decorateClass$5 = (decorators, target, key, kind) => {
@@ -1526,78 +1889,89 @@ let JupiterFormField = class extends LitElement {
     const cssClass = `field-input ${hasErrors ? "error" : hasWarnings ? "warning" : ""}`;
     const fieldId = `${this.conceptId}__${this.columnId}`;
     const fieldName = `data[${this.conceptId}][${this.columnId}]`;
-    switch (this.field.type) {
-      case "textarea":
-        return html`
-          <textarea
-            id="${fieldId}"
-            name="${fieldName}"
-            class="${cssClass}"
-            .value="${this.value || ""}"
-            ?disabled="${this.disabled || this.field.disabled}"
-            placeholder="${this.field.placeholder || ""}"
-            @input="${this._handleInput}"
-            @focus="${this._handleFocus}"
-            @blur="${this._handleBlur}"
-          ></textarea>
-        `;
-      case "select":
-        return html`
-          <select
-            id="${fieldId}"
-            name="${fieldName}"
-            class="${cssClass}"
-            .value="${this.value || ""}"
-            ?disabled="${this.disabled || this.field.disabled}"
-            @change="${this._handleInput}"
-            @focus="${this._handleFocus}"
-            @blur="${this._handleBlur}"
-          >
-            <option value="">Select...</option>
-            ${(_a = this.field.options) == null ? void 0 : _a.map((option) => html`
-              <option 
-                value="${option.value}"
-                ?disabled="${option.disabled}"
-                ?selected="${this.value === option.value}"
-              >
-                ${option.label}
-              </option>
-            `)}
-          </select>
-        `;
-      case "boolean":
-        return html`
-          <div class="checkbox-container">
-            <input
-              id="${fieldId}"
-              name="${fieldName}"
-              type="checkbox"
-              class="field-input"
-              .checked="${Boolean(this.value)}"
-              ?disabled="${this.disabled || this.field.disabled}"
-              @change="${this._handleInput}"
-              @focus="${this._handleFocus}"
-              @blur="${this._handleBlur}"
-            />
-            <span>${this.field.label}</span>
-          </div>
-        `;
-      default:
-        return html`
+    const typeConfig = getInputTypeForConceptType(this.conceptType);
+    if (this.conceptType)
+      ;
+    const effectiveFieldType = typeConfig.fieldType || this.field.type || "text";
+    if (effectiveFieldType === "textarea" || isTextareaType(effectiveFieldType)) {
+      return html`
+        <textarea
+          id="${fieldId}"
+          name="${fieldName}"
+          class="${cssClass}"
+          .value="${this.value || ""}"
+          ?disabled="${this.disabled || this.field.disabled}"
+          placeholder="${typeConfig.placeholder || this.field.placeholder || ""}"
+          @input="${this._handleInput}"
+          @focus="${this._handleFocus}"
+          @blur="${this._handleBlur}"
+        ></textarea>
+      `;
+    }
+    if (effectiveFieldType === "select" || this.field.type === "select") {
+      return html`
+        <select
+          id="${fieldId}"
+          name="${fieldName}"
+          class="${cssClass}"
+          .value="${this.value || ""}"
+          ?disabled="${this.disabled || this.field.disabled}"
+          @change="${this._handleInput}"
+          @focus="${this._handleFocus}"
+          @blur="${this._handleBlur}"
+        >
+          <option value="">Select...</option>
+          ${(_a = this.field.options) == null ? void 0 : _a.map((option) => html`
+            <option 
+              value="${option.value}"
+              ?disabled="${option.disabled}"
+              ?selected="${this.value === option.value}"
+            >
+              ${option.label}
+            </option>
+          `)}
+        </select>
+      `;
+    }
+    if (effectiveFieldType === "boolean" || isCheckboxType(effectiveFieldType)) {
+      return html`
+        <div class="checkbox-container">
           <input
             id="${fieldId}"
             name="${fieldName}"
-            type="${this._getInputType()}"
-            class="${cssClass}"
-            .value="${this.value || ""}"
+            type="checkbox"
+            class="field-input"
+            .checked="${Boolean(this.value)}"
             ?disabled="${this.disabled || this.field.disabled}"
-            placeholder="${this.field.placeholder || ""}"
-            @input="${this._handleInput}"
+            @change="${this._handleInput}"
             @focus="${this._handleFocus}"
             @blur="${this._handleBlur}"
           />
-        `;
+          <span>${this.field.label}</span>
+        </div>
+      `;
     }
+    const inputType = typeConfig.htmlInputType || this._getInputType();
+    const step = typeConfig.step !== void 0 ? typeConfig.step : isNumericType(effectiveFieldType) ? "any" : void 0;
+    const min = typeConfig.min;
+    const max = typeConfig.max;
+    return html`
+      <input
+        id="${fieldId}"
+        name="${fieldName}"
+        type="${inputType}"
+        class="${cssClass}"
+        .value="${this.value || ""}"
+        ?disabled="${this.disabled || this.field.disabled}"
+        placeholder="${typeConfig.placeholder || this.field.placeholder || ""}"
+        step="${step !== void 0 ? step : ""}"
+        min="${min !== void 0 ? min : ""}"
+        max="${max !== void 0 ? max : ""}"
+        @input="${this._handleInput}"
+        @focus="${this._handleFocus}"
+        @blur="${this._handleBlur}"
+      />
+    `;
   }
   _getInputType() {
     switch (this.field.type) {
@@ -1757,6 +2131,9 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], JupiterFormField.prototype, "conceptId", 2);
+__decorateClass$5([
+  n2({ type: String })
+], JupiterFormField.prototype, "conceptType", 2);
 __decorateClass$5([
   n2({ type: String })
 ], JupiterFormField.prototype, "columnId", 2);
@@ -1868,6 +2245,7 @@ let JupiterConceptTree = class extends LitElement {
               <jupiter-form-field
                 .field="${field}"
                 .conceptId="${this.concept.id}"
+                .conceptType="${this.concept.type}"
                 .columnId="${column.id}"
                 .value="${this._getFieldValue(field)}"
                 .disabled="${this.disabled}"
@@ -2626,6 +3004,7 @@ let JupiterFormSection = class extends LitElement {
     this.locale = "en-US";
     this.isFirstSection = false;
     this.availableDimensions = [];
+    this.hideHeader = false;
     this._expanded = true;
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
@@ -2661,23 +3040,14 @@ let JupiterFormSection = class extends LitElement {
       return;
     }
     const periodTypes = new Set(nonAbstractConcepts.map((c2) => c2.periodType).filter(Boolean));
-    console.log(`🏷️ Section ${this.section.id}: Found period types:`, Array.from(periodTypes));
-    console.log(
-      `📝 Section ${this.section.id}: Non-abstract concepts and their period types:`,
-      nonAbstractConcepts.map((c2) => ({ name: c2.name, periodType: c2.periodType, abstract: c2.abstract }))
-    );
     if (periodTypes.size === 0) {
       this._sectionPeriodType = "duration";
-      console.log(`📊 Section ${this.section.id}: No period types defined, defaulting to duration`);
     } else if (periodTypes.size === 1) {
       const singleType = Array.from(periodTypes)[0];
       this._sectionPeriodType = singleType === "instant" ? "instant" : "duration";
-      console.log(`📊 Section ${this.section.id}: Single period type '${singleType}', setting to '${this._sectionPeriodType}'`);
     } else {
       this._sectionPeriodType = "mixed";
-      console.log(`📊 Section ${this.section.id}: Mixed period types, setting to 'mixed'`);
     }
-    console.log(`✅ Section ${this.section.id}: Final period type: ${this._sectionPeriodType}`);
   }
   _getAllNonAbstractConcepts(concepts) {
     const result = [];
@@ -2695,6 +3065,9 @@ let JupiterFormSection = class extends LitElement {
     if (!this.collapsible)
       return;
     this._expanded = !this._expanded;
+    if (this._expanded) {
+      this._expandAllTrees();
+    }
     this.dispatchEvent(new CustomEvent("section-expand", {
       detail: {
         sectionId: this.section.id,
@@ -2799,29 +3172,6 @@ let JupiterFormSection = class extends LitElement {
     this._allTreeExpanded = false;
     this.requestUpdate();
   }
-  _toggleAllTrees(event) {
-    event.stopPropagation();
-    if (!this._expanded) {
-      this._expanded = true;
-    }
-    if (this._allTreeExpanded) {
-      this._collapseAllTrees();
-    } else {
-      this._expandAllTrees();
-    }
-  }
-  _handleTreeCheckboxChange(event) {
-    event.stopPropagation();
-    const checkbox = event.target;
-    if (!this._expanded) {
-      this._expanded = true;
-    }
-    if (checkbox.checked) {
-      this._expandAllTrees();
-    } else {
-      this._collapseAllTrees();
-    }
-  }
   _handleConceptExpand(event) {
     event.stopPropagation();
     const { conceptId, expanded } = event.detail;
@@ -2881,36 +3231,29 @@ let JupiterFormSection = class extends LitElement {
       `;
     }
     return html`
-      <div class="section-header ${!this.collapsible ? "not-collapsible" : ""}" 
-           @click="${this._toggleExpanded}">
-        <div>
-          <h3 class="section-title">${this.section.title}</h3>
-          ${this.section.description ? html`
-            <p class="section-description">${this.section.description}</p>
-          ` : ""}
-        </div>
-        <div class="section-header-controls">
-          <div class="tree-control">
-            <input
-              type="checkbox"
-              class="tree-control-checkbox"
-              .checked="${this._allTreeExpanded}"
-              @change="${this._handleTreeCheckboxChange}"
-            />
-            <span class="tree-control-label" @click="${this._toggleAllTrees}">${this._allTreeExpanded ? "Collapse Tree" : "Expand Tree"}</span>
+      ${!this.hideHeader ? html`
+        <div class="section-header ${!this.collapsible ? "not-collapsible" : ""}" 
+             @click="${this._toggleExpanded}">
+          <div>
+            <h3 class="section-title">${this.section.title}</h3>
+            ${this.section.description ? html`
+              <p class="section-description">${this.section.description}</p>
+            ` : ""}
           </div>
-          <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
-            ${this.collapsible ? "▶" : ""}
+          <div class="section-header-controls">
+            <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
+              ${this.collapsible ? "▶" : ""}
+            </div>
           </div>
         </div>
-      </div>
+      ` : ""}
 
       <div class="section-content ${!this._expanded ? "collapsed" : ""}">
         <div class="table-container">
           <table class="form-table">
             <thead class="table-header">
               <tr class="header-row">
-                <th class="header-cell concept-column">Concept</th>
+                <th class="header-cell concept-column"></th>
                 ${this.columns.map((column) => {
       var _a, _b, _c;
       return html`
@@ -2952,7 +3295,7 @@ let JupiterFormSection = class extends LitElement {
                   </th>
                 `;
     })}
-                <th class="header-cell">
+                <th class="header-cell add-column-only">
                   <button class="add-column-btn" @click="${(e2) => {
       e2.stopPropagation();
       this._handleAddColumn();
@@ -3063,37 +3406,6 @@ JupiterFormSection.styles = css`
       gap: 12px;
     }
 
-    .tree-control {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 12px;
-      color: var(--jupiter-text-secondary, #666);
-      background: var(--jupiter-button-background, #fff);
-      border: 1px solid var(--jupiter-border-color, #ddd);
-      border-radius: 4px;
-      padding: 4px 8px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-
-    .tree-control:hover {
-      background: var(--jupiter-button-hover-background, #f5f5f5);
-      border-color: var(--jupiter-primary-color, #007bff);
-    }
-
-    .tree-control-checkbox {
-      width: 14px;
-      height: 14px;
-      cursor: pointer;
-    }
-
-    .tree-control-label {
-      cursor: pointer;
-      font-weight: 500;
-      white-space: nowrap;
-    }
-
     .section-content {
       display: block;
       transition: max-height 0.3s ease;
@@ -3152,6 +3464,13 @@ 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;
+    }
+
     .remove-column-btn {
       position: absolute;
       top: 4px;
@@ -3279,6 +3598,9 @@ __decorateClass$2([
 __decorateClass$2([
   n2({ type: Array })
 ], JupiterFormSection.prototype, "availableDimensions", 2);
+__decorateClass$2([
+  n2({ type: Boolean })
+], JupiterFormSection.prototype, "hideHeader", 2);
 __decorateClass$2([
   r()
 ], JupiterFormSection.prototype, "_expanded", 2);
@@ -3314,13 +3636,16 @@ let JupiterFilterRolesDialog = class extends LitElement {
     this.open = false;
     this.availableRoles = [];
     this.selectedRoleIds = [];
+    this.periodPreferences = {};
     this._tempSelectedRoles = /* @__PURE__ */ new Set();
     this._searchQuery = "";
     this._filteredRoles = [];
+    this._tempPeriodPreferences = {};
   }
   connectedCallback() {
     super.connectedCallback();
     this._initializeTempSelection();
+    this._initializePeriodPreferences();
   }
   updated(changedProperties) {
     if (changedProperties.has("selectedRoleIds") || changedProperties.has("open")) {
@@ -3329,6 +3654,9 @@ let JupiterFilterRolesDialog = class extends LitElement {
     if (changedProperties.has("availableRoles") || changedProperties.has("_searchQuery")) {
       this._updateFilteredRoles();
     }
+    if (changedProperties.has("availableRoles") || changedProperties.has("periodPreferences") || changedProperties.has("open")) {
+      this._initializePeriodPreferences();
+    }
   }
   _updateFilteredRoles() {
     if (!this._searchQuery.trim()) {
@@ -3396,6 +3724,64 @@ let JupiterFilterRolesDialog = class extends LitElement {
   _initializeTempSelection() {
     this._tempSelectedRoles = new Set(this.selectedRoleIds);
   }
+  _initializePeriodPreferences() {
+    const preferences = {};
+    this.availableRoles.forEach((role) => {
+      const existingPrefs = this.periodPreferences[role.id];
+      if (existingPrefs) {
+        preferences[role.id] = { ...existingPrefs };
+      } else {
+        const hasMixedPeriods = role.showPeriodControl === true;
+        let showDuration;
+        let showInstant;
+        if (role.duration !== void 0 || role.instant !== void 0) {
+          showDuration = role.duration === true;
+          showInstant = role.instant === true;
+        } else {
+          showDuration = hasMixedPeriods || this._hasConceptsWithPeriodType(role, "duration");
+          showInstant = hasMixedPeriods || this._hasConceptsWithPeriodType(role, "instant");
+        }
+        preferences[role.id] = {
+          showDuration,
+          showInstant,
+          showPreviousYear: role.showPreviousYear === true
+          // Read from role data in presentation.json
+        };
+      }
+    });
+    this._tempPeriodPreferences = preferences;
+  }
+  _hasConceptsWithPeriodType(role, periodType) {
+    const checkConcepts = (concepts) => {
+      return concepts.some((concept) => {
+        if (!concept.abstract && concept.periodType === periodType) {
+          return true;
+        }
+        if (concept.children) {
+          return checkConcepts(concept.children);
+        }
+        return false;
+      });
+    };
+    return checkConcepts(role.concepts);
+  }
+  _handlePeriodCheckboxChange(event, roleId, periodType) {
+    event.stopPropagation();
+    const checkbox = event.target;
+    const newPreferences = { ...this._tempPeriodPreferences };
+    if (!newPreferences[roleId]) {
+      newPreferences[roleId] = { showDuration: true, showInstant: true, showPreviousYear: false };
+    }
+    if (periodType === "duration") {
+      newPreferences[roleId].showDuration = checkbox.checked;
+    } else if (periodType === "instant") {
+      newPreferences[roleId].showInstant = checkbox.checked;
+    } else if (periodType === "previousYear") {
+      newPreferences[roleId].showPreviousYear = checkbox.checked;
+    }
+    this._tempPeriodPreferences = newPreferences;
+    this.requestUpdate();
+  }
   _handleCheckboxChange(event, roleId) {
     const checkbox = event.target;
     const newSelection = new Set(this._tempSelectedRoles);
@@ -3440,7 +3826,10 @@ let JupiterFilterRolesDialog = class extends LitElement {
   _handleApply() {
     const selectedRoles = Array.from(this._tempSelectedRoles);
     this.dispatchEvent(new CustomEvent("roles-filter-apply", {
-      detail: { selectedRoleIds: selectedRoles },
+      detail: {
+        selectedRoleIds: selectedRoles,
+        periodPreferences: this._tempPeriodPreferences
+      },
       bubbles: true
     }));
   }
@@ -3543,6 +3932,8 @@ let JupiterFilterRolesDialog = class extends LitElement {
               ${this._filteredRoles.map((role) => {
       var _a;
       const isSelected = this._tempSelectedRoles.has(role.id);
+      const showPeriodControls = role.showPeriodControl === true;
+      const preferences = this._tempPeriodPreferences[role.id] || { showDuration: true, showInstant: true };
       return html`
                   <div class="role-item">
                     <input
@@ -3556,6 +3947,47 @@ let JupiterFilterRolesDialog = class extends LitElement {
                       ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
                         <p class="role-description">URI: ${role.metadata.roleURI}</p>
                       ` : ""}
+                      
+                      ${showPeriodControls ? html`
+                        <div class="period-controls">
+                          <p class="period-controls-label">Show Period Column:</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">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">Instant</span>
+                            </label>
+                          </div>
+                        </div>
+                      ` : ""}
+                      
+                      <div class="period-controls">
+                        <p class="period-controls-label">Additional Options:</p>
+                        <div class="period-checkboxes">
+                          <label class="period-checkbox-item">
+                            <input
+                              type="checkbox"
+                              class="period-checkbox"
+                              .checked="${preferences.showPreviousYear}"
+                              @change="${(e2) => this._handlePeriodCheckboxChange(e2, role.id, "previousYear")}"
+                            />
+                            <span class="period-checkbox-label">Show previous year</span>
+                          </label>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 `;
@@ -3563,12 +3995,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
             `}
           </div>
 
-          <div class="selected-count">
-            ${selectedCount} of ${totalCount} roles selected
-            ${hasSearchQuery && filteredCount !== totalCount ? html`
-              <br><small>(${this._getSelectedFilteredCount()} of ${filteredCount} filtered roles selected)</small>
-            ` : ""}
-          </div>
+        
         </div>
 
         <!-- Dialog Actions -->
@@ -3826,6 +4253,44 @@ JupiterFilterRolesDialog.styles = css`
       margin-bottom: 4px;
     }
 
+    .period-controls {
+      margin-top: 8px;
+      padding: 8px;
+      background: var(--jupiter-background-light, #f8f9fa);
+      border-radius: 4px;
+      border: 1px solid var(--jupiter-border-color, #e0e0e0);
+    }
+
+    .period-controls-label {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--jupiter-text-primary, #333);
+      margin: 0 0 6px 0;
+    }
+
+    .period-checkboxes {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+    }
+
+    .period-checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .period-checkbox {
+      cursor: pointer;
+    }
+
+    .period-checkbox-label {
+      font-size: 13px;
+      color: var(--jupiter-text-primary, #333);
+      cursor: pointer;
+      user-select: none;
+    }
+
     .selected-count {
       font-size: 13px;
       color: var(--jupiter-text-secondary, #666);
@@ -3885,6 +4350,9 @@ __decorateClass$1([
 __decorateClass$1([
   n2({ type: Array })
 ], JupiterFilterRolesDialog.prototype, "selectedRoleIds", 2);
+__decorateClass$1([
+  n2({ type: Object })
+], JupiterFilterRolesDialog.prototype, "periodPreferences", 2);
 __decorateClass$1([
   r()
 ], JupiterFilterRolesDialog.prototype, "_tempSelectedRoles", 2);
@@ -3894,6 +4362,9 @@ __decorateClass$1([
 __decorateClass$1([
   r()
 ], JupiterFilterRolesDialog.prototype, "_filteredRoles", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_tempPeriodPreferences", 2);
 JupiterFilterRolesDialog = __decorateClass$1([
   t$1("jupiter-filter-roles-dialog")
 ], JupiterFilterRolesDialog);
@@ -3918,6 +4389,9 @@ let JupiterDynamicForm = class extends LitElement {
     this.periodStartDate = "2025-01-01";
     this.periodEndDate = "2025-12-31";
     this.language = "en";
+    this.display = "accordion";
+    this.mode = "inputForm";
+    this.financialStatementsTypeAxis = [];
     this._formData = {};
     this._preservedFormData = {};
     this._typedMemberData = {};
@@ -3931,13 +4405,19 @@ let JupiterDynamicForm = class extends LitElement {
     this._allSections = [];
     this._selectedRoleIds = [];
     this._showFilterDialog = false;
+    this._periodPreferences = {};
+    this._activeSidePanelRoleId = null;
+    this._adminRoleConfigs = {};
   }
   connectedCallback() {
     super.connectedCallback();
     this._initializeForm();
   }
   updated(changedProperties) {
-    if (changedProperties.has("xbrlInput") || changedProperties.has("schema")) {
+    if (changedProperties.has("financialStatementsTypeAxis")) {
+      console.log("🔄 financialStatementsTypeAxis changed:", this.financialStatementsTypeAxis);
+    }
+    if (changedProperties.has("xbrlInput") || changedProperties.has("schema") || changedProperties.has("language") || changedProperties.has("periodStartDate") || changedProperties.has("periodEndDate") || changedProperties.has("financialStatementsTypeAxis")) {
       this._initializeForm();
     }
   }
@@ -3948,21 +4428,26 @@ let JupiterDynamicForm = class extends LitElement {
         console.log("🔄 Initializing form from XBRL input:", this.xbrlInput);
         console.log("📅 Using period dates:", this.periodStartDate, "to", this.periodEndDate);
         console.log("🌐 Using language:", this.language);
+        this._initializePeriodPreferencesFromData();
+        console.log("⚙️ Using period preferences:", this._periodPreferences);
         this._currentSchema = XBRLFormBuilder.buildFormSchema(
           this.xbrlInput,
           this.periodStartDate,
           this.periodEndDate,
-          this.language
+          this.language,
+          this._periodPreferences
         );
         console.log("✅ Generated schema with sections:", this._currentSchema.sections.length);
         this._allSections = [...this._currentSchema.sections];
+        if (this.financialStatementsTypeAxis && this.financialStatementsTypeAxis.length > 0) {
+          console.log("🔍 Applying financialStatementsTypeAxis filter:", this.financialStatementsTypeAxis);
+          console.log("📊 Sections before filter:", this._allSections.length);
+          this._allSections = this._filterRolesByFinancialStatementsType(this._allSections);
+          console.log("📊 Sections after filter:", this._allSections.length);
+        }
         if (this._selectedRoleIds.length === 0) {
-          this._selectedRoleIds = [];
-          this._showFilterDialog = true;
-          this._currentSchema = {
-            ...this._currentSchema,
-            sections: []
-          };
+          this._selectedRoleIds = this._allSections.map((section) => section.id);
+          console.log("✅ Auto-selected all roles:", this._selectedRoleIds.length);
         }
         this._applyRoleFilter();
         this._columns = [
@@ -4020,6 +4505,28 @@ let JupiterDynamicForm = class extends LitElement {
       }
     ];
   }
+  /**
+   * Initialize period preferences from presentation data
+   * Reads showPreviousYear, instant, and duration attributes from each role to set initial preferences
+   */
+  _initializePeriodPreferencesFromData() {
+    var _a, _b, _c;
+    if (!((_c = (_b = (_a = this.xbrlInput) == null ? void 0 : _a.presentation) == null ? void 0 : _b[0]) == null ? void 0 : _c.roles)) {
+      return;
+    }
+    const preferences = {};
+    this.xbrlInput.presentation[0].roles.forEach((role) => {
+      const showPreviousYear = role.showPreviousYear === true;
+      const instant = role.instant !== void 0 ? role.instant === true : true;
+      const duration = role.duration !== void 0 ? role.duration === true : true;
+      preferences[role.id] = {
+        showDuration: duration,
+        showInstant: instant,
+        showPreviousYear
+      };
+    });
+    this._periodPreferences = preferences;
+  }
   _applyRoleFilter() {
     if (!this._currentSchema || !this._allSections.length)
       return;
@@ -4030,17 +4537,88 @@ let JupiterDynamicForm = class extends LitElement {
         ...this._currentSchema,
         sections: []
       };
+      this.requestUpdate();
       return;
     }
     this._preserveDataForHiddenSections();
     const filteredSections = this._allSections.filter(
       (section) => this._selectedRoleIds.includes(section.id)
     );
+    console.log(`📊 Filtered sections: ${filteredSections.length} (IDs: ${filteredSections.map((s2) => s2.id).join(", ")})`);
     this._restoreDataForVisibleSections(filteredSections);
     this._currentSchema = {
       ...this._currentSchema,
       sections: filteredSections
     };
+    console.log(`✅ Schema updated. Current sections count: ${this._currentSchema.sections.length}`);
+    this.requestUpdate();
+  }
+  /**
+   * Filter roles based on financialStatementsTypeAxis property
+   * Rules:
+   * 1. Show roles that have no entry in hypercubes.json
+   * 2. Show roles that don't have financialStatementsTypeAxis dimension
+   * 3. For roles with financialStatementsTypeAxis, show only if at least one member matches the provided values
+   */
+  _filterRolesByFinancialStatementsType(sections) {
+    var _a;
+    if (!this.financialStatementsTypeAxis || this.financialStatementsTypeAxis.length === 0) {
+      return sections;
+    }
+    if (!((_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) || this.xbrlInput.hypercubes.length === 0) {
+      return sections;
+    }
+    const hypercubeData = this.xbrlInput.hypercubes[0];
+    const financialStatementsAxisId = "bw2-titel9_FinancialStatementsTypeAxis";
+    console.log("🔍 Filter values:", this.financialStatementsTypeAxis);
+    return sections.filter((section) => {
+      var _a2;
+      const hypercubeRole = (_a2 = hypercubeData.roles) == null ? void 0 : _a2.find((r2) => r2.roleId === section.id);
+      if (!hypercubeRole || !hypercubeRole.items || hypercubeRole.items.length === 0) {
+        console.log(`✅ ${section.title}: No hypercube entry - INCLUDED`);
+        return true;
+      }
+      let hasFinancialStatementsAxis = false;
+      let hasMatchingMember = false;
+      for (const item of hypercubeRole.items) {
+        if (!item.dimensions || item.dimensions.length === 0) {
+          continue;
+        }
+        const financialStatementsTypeDimension = item.dimensions.find(
+          (dim) => {
+            var _a3;
+            return dim.id === financialStatementsAxisId || ((_a3 = dim.conceptName) == null ? void 0 : _a3.includes("FinancialStatementsTypeAxis"));
+          }
+        );
+        if (financialStatementsTypeDimension) {
+          hasFinancialStatementsAxis = true;
+          if (financialStatementsTypeDimension.members && financialStatementsTypeDimension.members.length > 0) {
+            const itemHasMatch = financialStatementsTypeDimension.members.some((member) => {
+              if (member.conceptName) {
+                const conceptNameParts = member.conceptName.split(":");
+                const memberValue = conceptNameParts.length > 1 ? conceptNameParts[1] : member.conceptName;
+                const matches = this.financialStatementsTypeAxis.some((filterValue) => {
+                  const filterParts = filterValue.split(":");
+                  const filterMemberValue = filterParts.length > 1 ? filterParts[1] : filterValue;
+                  const isMatch = memberValue === filterMemberValue;
+                  return isMatch;
+                });
+                return matches;
+              }
+              return this.financialStatementsTypeAxis.includes(member.id);
+            });
+            if (itemHasMatch) {
+              hasMatchingMember = true;
+              break;
+            }
+          }
+        }
+      }
+      if (!hasFinancialStatementsAxis) {
+        return true;
+      }
+      return hasMatchingMember;
+    });
   }
   _preserveDataForHiddenSections() {
     var _a;
@@ -4054,7 +4632,6 @@ let JupiterDynamicForm = class extends LitElement {
         this._preserveSectionData(section);
       }
     });
-    console.log(`📦 Preserved data for ${sectionsThatWillBeHidden.length} hidden sections:`, sectionsThatWillBeHidden);
   }
   _restoreDataForVisibleSections(visibleSections) {
     visibleSections.forEach((section) => {
@@ -4070,12 +4647,10 @@ let JupiterDynamicForm = class extends LitElement {
   _preserveConceptData(concept) {
     if (this._formData[concept.id]) {
       this._preservedFormData[concept.id] = { ...this._formData[concept.id] };
-      console.log(`💾 Preserved form data for concept: ${concept.id}`);
     }
     concept.fields.forEach((field) => {
       if (this._typedMemberData[field.columnId]) {
         this._preservedTypedMemberData[field.columnId] = { ...this._typedMemberData[field.columnId] };
-        console.log(`💾 Preserved typed data for column: ${field.columnId}`);
       }
     });
     if (concept.children) {
@@ -4092,12 +4667,10 @@ let JupiterDynamicForm = class extends LitElement {
   _restoreConceptData(concept) {
     if (this._preservedFormData[concept.id]) {
       this._formData[concept.id] = { ...this._preservedFormData[concept.id] };
-      console.log(`🔄 Restored form data for concept: ${concept.id}`);
     }
     concept.fields.forEach((field) => {
       if (this._preservedTypedMemberData[field.columnId]) {
         this._typedMemberData[field.columnId] = { ...this._preservedTypedMemberData[field.columnId] };
-        console.log(`🔄 Restored typed data for column: ${field.columnId}`);
       }
     });
     if (concept.children) {
@@ -4117,16 +4690,24 @@ let JupiterDynamicForm = class extends LitElement {
     console.log(`🚫 Filter dialog cancelled. Current selection: ${this._selectedRoleIds.length}/${this._allSections.length}`);
   }
   _handleRoleFilterApply(event) {
-    const { selectedRoleIds } = event.detail;
+    const { selectedRoleIds, periodPreferences } = event.detail;
     this._selectedRoleIds = selectedRoleIds;
-    this._applyRoleFilter();
+    const preferencesChanged = JSON.stringify(this._periodPreferences) !== JSON.stringify(periodPreferences);
+    if (preferencesChanged) {
+      this._periodPreferences = periodPreferences;
+      console.log("📊 Period preferences updated:", this._periodPreferences);
+      this._initializeForm();
+    } else {
+      this._applyRoleFilter();
+    }
     this._showFilterDialog = false;
     console.log(`🎯 Applied role filter: ${selectedRoleIds.length}/${this._allSections.length} roles selected`);
     this.dispatchEvent(new CustomEvent("roles-filter-changed", {
       detail: {
         selectedRoleIds,
         totalRoles: this._allSections.length,
-        visibleRoles: selectedRoleIds.length
+        visibleRoles: selectedRoleIds.length,
+        periodPreferences
       },
       bubbles: true
     }));
@@ -4247,9 +4828,7 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _getAvailableDimensionsForSection(sectionId) {
     var _a, _b, _c;
-    console.log(`🔍 Getting dimensions for section: ${sectionId}`);
     if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0])) {
-      console.log("❌ No hypercubes data available");
       return [];
     }
     const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === sectionId);
@@ -4257,7 +4836,6 @@ let JupiterDynamicForm = class extends LitElement {
       console.log(`❌ No hypercube items found for role: ${sectionId}`);
       return [];
     }
-    console.log(`✅ Found hypercube role with ${hypercubeRole.items.length} items`);
     const availableDimensions = [];
     hypercubeRole.items.forEach((item) => {
       if (item.dimensions && item.dimensions.length > 0) {
@@ -4291,7 +4869,6 @@ let JupiterDynamicForm = class extends LitElement {
         });
       }
     });
-    console.log(`📈 Found ${availableDimensions.length} dimensions for section ${sectionId}:`, availableDimensions.map((d2) => d2.axisLabel));
     return availableDimensions;
   }
   _addColumnFromRequest(request, sectionId) {
@@ -4301,11 +4878,11 @@ let JupiterDynamicForm = class extends LitElement {
     let title = "";
     let description = "";
     if (request.periodType === "instant") {
-      title = "Current";
-      description = `Values as of ${request.instantDate}`;
+      title = request.instantDate || "";
+      description = "";
     } else if (request.periodType === "duration" || request.periodType === "mixed") {
-      title = "Current Period";
-      description = `Period: ${request.startDate} to ${request.endDate}`;
+      title = `${request.startDate} / ${request.endDate}`;
+      description = "";
     }
     let dimensionData = {
       dimensionId: "period",
@@ -4383,7 +4960,6 @@ let JupiterDynamicForm = class extends LitElement {
         if (dimSelection.isTyped) {
           typedMembers[dimSelection.axisId] = dimSelection.typedValue || "";
           hasTypedDimensions = true;
-          console.log(`💾 Initializing typed member data: ${dimSelection.axisLabel} = "${dimSelection.typedValue || "(empty - will be entered in column header)"}"`);
         }
       }
       if (hasTypedDimensions) {
@@ -4398,9 +4974,7 @@ let JupiterDynamicForm = class extends LitElement {
             memberLabel: dim.axisLabel
             // Use axisLabel as memberLabel
           }));
-          console.log(`� Added typed members to column dimension data:`, newColumn.dimensionData.typedMembers);
         }
-        console.log(`� Initialized typed member data for column ${newColumnId}:`, typedMembers);
       }
     }
     if (this._currentSchema) {
@@ -4546,6 +5120,10 @@ let JupiterDynamicForm = class extends LitElement {
   _handleSubmit() {
     console.log("📝 Form submission started...");
     this._submitted = true;
+    if (this.mode === "admin") {
+      this._handleAdminModeSubmit();
+      return;
+    }
     this._validateForm();
     const submissionData = this._generateSubmissionData();
     console.log("📊 Form Submission Data:", JSON.stringify(submissionData, null, 2));
@@ -4640,18 +5218,20 @@ let JupiterDynamicForm = class extends LitElement {
     if (!field)
       return;
     const isInstant = concept.periodType === "instant";
+    const column = this._findColumnByIdInAllSections(columnId);
+    alert("hi");
+    console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${columnId}, Column Period: ${(column == null ? void 0 : column.periodStartDate) || "none"} - ${(column == null ? void 0 : column.periodEndDate) || "none"}`);
     const entry = {
       conceptId: concept.originalConceptId || concept.id,
       value,
       period: {
         type: concept.periodType || "duration",
-        ...isInstant ? { date: field.periodStartDate || this.periodStartDate } : {
-          startDate: field.periodStartDate || this.periodStartDate,
-          endDate: field.periodEndDate || this.periodEndDate
+        ...isInstant ? { date: (column == null ? void 0 : column.periodEndDate) || field.periodStartDate || this.periodStartDate } : {
+          startDate: (column == null ? void 0 : column.periodStartDate) || field.periodStartDate || this.periodStartDate,
+          endDate: (column == null ? void 0 : column.periodEndDate) || field.periodEndDate || this.periodEndDate
         }
       }
     };
-    const column = this._findColumnByIdInAllSections(columnId);
     if ((_a = column == null ? void 0 : column.dimensionData) == null ? void 0 : _a.memberLabel) {
       entry.dimension = column.dimensionData.memberLabel;
     }
@@ -4671,7 +5251,8 @@ let JupiterDynamicForm = class extends LitElement {
   _removeDuplicateSubmissions(submissionData) {
     const uniqueEntries = /* @__PURE__ */ new Map();
     submissionData.forEach((entry) => {
-      const key = `${entry.conceptId}_${entry.value}_${entry.dimension || "no-dimension"}`;
+      const periodKey = entry.period.type === "instant" ? entry.period.date : `${entry.period.startDate}_${entry.period.endDate}`;
+      const key = `${entry.conceptId}_${entry.value}_${entry.dimension || "no-dimension"}_${periodKey}`;
       if (!uniqueEntries.has(key)) {
         uniqueEntries.set(key, entry);
       }
@@ -4783,10 +5364,7 @@ let JupiterDynamicForm = class extends LitElement {
         }
       }
       if (concept.fields && concept.fields.length > 1) {
-        console.log(`🔍 [DEBUG] Processing concept ${concept.originalConceptId}, fields count: ${concept.fields.length}`);
         concept.fields.forEach((field, index) => {
-          var _a;
-          console.log(`  Field ${index}: columnId=${field.columnId}, value=${(_a = this._formData[concept.id]) == null ? void 0 : _a[field.columnId]}`);
         });
       }
       if (concept.fields && concept.fields.length > 0) {
@@ -4795,11 +5373,7 @@ let JupiterDynamicForm = class extends LitElement {
           const conceptData = this._formData[concept.id];
           const fieldValue = conceptData == null ? void 0 : conceptData[field.columnId];
           if (fieldValue !== void 0 && fieldValue !== null && fieldValue !== "") {
-            if (sectionTitle === targetRole) {
-              console.warn(`[DUPLICATE DEBUG] Creating submission entry for concept ${concept.originalConceptId || concept.id}, field columnId=${field.columnId}, value=${fieldValue}`);
-            }
             const column = this._findColumnByIdInSection(field.columnId, section);
-            console.log(`🔍 [DynamicForm] Processing field for concept ${concept.originalConceptId || concept.id}, field columnId: ${field.columnId}, found column in section ${section == null ? void 0 : section.id}: ${!!column}, column title: ${column == null ? void 0 : column.title}`);
             const submissionEntry = {
               conceptId: concept.id,
               value: fieldValue,
@@ -4808,11 +5382,12 @@ let JupiterDynamicForm = class extends LitElement {
               }
             };
             if (concept.periodType === "instant") {
-              submissionEntry.period.date = field.periodStartDate || this.periodStartDate;
+              submissionEntry.period.date = (column == null ? void 0 : column.periodEndDate) || field.periodStartDate || this.periodStartDate;
             } else {
-              submissionEntry.period.startDate = field.periodStartDate || this.periodStartDate;
-              submissionEntry.period.endDate = field.periodEndDate || this.periodEndDate;
+              submissionEntry.period.startDate = (column == null ? void 0 : column.periodStartDate) || field.periodStartDate || this.periodStartDate;
+              submissionEntry.period.endDate = (column == null ? void 0 : column.periodEndDate) || field.periodEndDate || this.periodEndDate;
             }
+            console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${field.columnId}, Column Period: ${(column == null ? void 0 : column.periodStartDate) || "none"} - ${(column == null ? void 0 : column.periodEndDate) || "none"}, Used Period: ${submissionEntry.period.type === "instant" ? submissionEntry.period.date : `${submissionEntry.period.startDate} - ${submissionEntry.period.endDate}`}`);
             if ((column == null ? void 0 : column.type) === "dimension" && ((_a = column.dimensionData) == null ? void 0 : _a.dimensionIdKey)) {
               submissionEntry.dimension = column.dimensionData.dimensionIdKey;
               console.log(`🔍 [DynamicForm] Using dimension key from field's column (${field.columnId}):`, column.dimensionData.dimensionIdKey);
@@ -4891,6 +5466,233 @@ let JupiterDynamicForm = class extends LitElement {
       submitted: this._submitted
     };
   }
+  _handleSidePanelRoleClick(roleId) {
+    this._activeSidePanelRoleId = roleId;
+  }
+  _renderAdminModeContent(section) {
+    var _a, _b, _c;
+    if (!section) {
+      return html`
+        <div class="admin-mode-container">
+          <p>No role selected</p>
+        </div>
+      `;
+    }
+    const showPreviousYearChecked = ((_a = this._adminRoleConfigs[section.id]) == null ? void 0 : _a.showPreviousYear) ?? section.showPreviousYear ?? false;
+    const instantChecked = ((_b = this._adminRoleConfigs[section.id]) == null ? void 0 : _b.instant) ?? section.instant ?? false;
+    const durationChecked = ((_c = this._adminRoleConfigs[section.id]) == null ? void 0 : _c.duration) ?? section.duration ?? false;
+    const hasMixedPeriodTypes = section.showPeriodControl === true;
+    return html`
+      <div class="admin-mode-container">
+        <h2 class="admin-mode-title">Role Configuration: ${section.title}</h2>
+        <div class="admin-roles-list">
+          <div class="admin-role-item">
+            <div class="admin-role-checkbox">
+              <input
+                type="checkbox"
+                id="admin-prev-year-${section.id}"
+                .checked="${showPreviousYearChecked}"
+                @change="${(e2) => this._handleAdminCheckboxChange(section.id, "showPreviousYear", e2.target.checked)}"
+              />
+              <label for="admin-prev-year-${section.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-${section.id}"
+                  .checked="${instantChecked}"
+                  @change="${(e2) => this._handleAdminCheckboxChange(section.id, "instant", e2.target.checked)}"
+                />
+                <label for="admin-instant-${section.id}">Show Instant Column</label>
+              </div>
+            </div>
+            
+            <div class="admin-role-item">
+              <div class="admin-role-checkbox">
+                <input
+                  type="checkbox"
+                  id="admin-duration-${section.id}"
+                  .checked="${durationChecked}"
+                  @change="${(e2) => this._handleAdminCheckboxChange(section.id, "duration", e2.target.checked)}"
+                />
+                <label for="admin-duration-${section.id}">Show Duration Column</label>
+              </div>
+            </div>
+          ` : ""}
+        </div>
+      </div>
+    `;
+  }
+  _handleAdminCheckboxChange(roleId, field, checked) {
+    const currentConfig = this._adminRoleConfigs[roleId] || { showPreviousYear: false };
+    this._adminRoleConfigs = {
+      ...this._adminRoleConfigs,
+      [roleId]: {
+        ...currentConfig,
+        [field]: checked
+      }
+    };
+  }
+  _handleAdminModeSubmit() {
+    var _a, _b, _c, _d;
+    if (!((_c = (_b = (_a = this.xbrlInput) == null ? void 0 : _a.presentation) == null ? void 0 : _b[0]) == null ? void 0 : _c.roles)) {
+      console.error("No presentation data available");
+      return;
+    }
+    const updatedPresentationData = JSON.parse(JSON.stringify(this.xbrlInput.presentation[0]));
+    const selectedRoleIds = new Set(
+      ((_d = this._currentSchema) == null ? void 0 : _d.sections.map((s2) => s2.id)) || []
+    );
+    updatedPresentationData.roles = updatedPresentationData.roles.map((role) => {
+      const isSelected = selectedRoleIds.has(role.id);
+      const config = this._adminRoleConfigs[role.id];
+      const updatedRole = {
+        ...role,
+        display: isSelected ? "yes" : "no"
+      };
+      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;
+    });
+    this.dispatchEvent(new CustomEvent("admin-config-updated", {
+      detail: {
+        presentationData: updatedPresentationData,
+        roleConfigs: this._adminRoleConfigs
+      },
+      bubbles: true,
+      composed: true
+    }));
+    console.log("✅ Admin configuration saved successfully");
+  }
+  _renderAccordionLayout(schema, config, showValidationSummary, errorCount) {
+    return html`
+      <div class="form-sections">
+        <!-- Validation Summary -->
+        ${showValidationSummary ? html`
+          <div class="validation-summary">
+            <h4 class="validation-summary-title">Please fix the following errors:</h4>
+            <ul class="validation-summary-list">
+              ${this._errors.filter((e2) => e2.severity === "error").map((error) => html`
+                  <li class="validation-summary-item">${error.message}</li>
+                `)}
+            </ul>
+          </div>
+        ` : ""}
+
+        <!-- Form Sections or No Selection Message (hidden in admin mode) -->
+        ${this.mode === "admin" ? schema.sections.map((section, index) => html`
+          <div class="admin-mode-placeholder">
+            ${this._renderAdminModeContent(section)}
+          </div>
+        `) : schema.sections.length === 0 ? html`
+          <div class="no-roles-message">
+            <h3>No Roles Selected</h3>
+            <p>Please use the "Filter Roles" button below to select which sections you want to work with.</p>
+            <p>Available roles: ${this._allSections.length}</p>
+          </div>
+        ` : schema.sections.map((section, index) => html`
+          <jupiter-form-section
+            .section="${section}"
+            .columns="${section.columns || this._columns}"
+            .formData="${this._formData}"
+            .typedMemberData="${this._typedMemberData}"
+            .disabled="${this.disabled || this.readonly}"
+            .collapsible="${config.collapsibleSections !== false}"
+            .locale="${config.locale || "en-US"}"
+            .isFirstSection="${index === 0}"
+            .availableDimensions="${this._getAvailableDimensionsForSection(section.id)}"
+            @field-change="${this._handleFieldChange}"
+            @typed-member-change="${this._handleTypedMemberChange}"
+            @section-expand="${this._handleSectionExpand}"
+            @concept-expand="${this._handleConceptExpand}"
+            @column-remove="${this._handleColumnRemove}"
+            @column-add-request="${this._handleColumnAddRequest}"
+          ></jupiter-form-section>
+        `)}
+      </div>
+    `;
+  }
+  _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 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((section) => html`
+            <div 
+              class="side-panel-role-item ${section.id === this._activeSidePanelRoleId ? "active" : ""}"
+              @click="${() => this._handleSidePanelRoleClick(section.id)}"
+            >
+              ${section.title}
+            </div>
+          `)}
+        </div>
+
+        <!-- Right: Active Section Content -->
+        <div class="side-panel-content">
+          <div class="form-sections">
+            <!-- Validation Summary -->
+            ${showValidationSummary ? html`
+              <div class="validation-summary">
+                <h4 class="validation-summary-title">Please fix the following errors:</h4>
+                <ul class="validation-summary-list">
+                  ${this._errors.filter((e2) => e2.severity === "error").map((error) => html`
+                      <li class="validation-summary-item">${error.message}</li>
+                    `)}
+                </ul>
+              </div>
+            ` : ""}
+
+            <!-- Active Section (hidden in admin mode) -->
+            ${this.mode === "admin" ? html`
+              <div class="admin-mode-placeholder">
+                ${this._renderAdminModeContent(activeSection)}
+              </div>
+            ` : activeSection ? html`
+              <jupiter-form-section
+                .section="${activeSection}"
+                .columns="${activeSection.columns || this._columns}"
+                .formData="${this._formData}"
+                .typedMemberData="${this._typedMemberData}"
+                .disabled="${this.disabled || this.readonly}"
+                .collapsible="${false}"
+                .hideHeader="${true}"
+                .locale="${config.locale || "en-US"}"
+                .isFirstSection="${true}"
+                .availableDimensions="${this._getAvailableDimensionsForSection(activeSection.id)}"
+                @field-change="${this._handleFieldChange}"
+                @typed-member-change="${this._handleTypedMemberChange}"
+                @section-expand="${this._handleSectionExpand}"
+                @concept-expand="${this._handleConceptExpand}"
+                @column-remove="${this._handleColumnRemove}"
+                @column-add-request="${this._handleColumnAddRequest}"
+              ></jupiter-form-section>
+            ` : html`
+              <div class="no-roles-message">
+                <h3>No Role Selected</h3>
+                <p>Please select a role from the list on the left.</p>
+              </div>
+            `}
+          </div>
+        </div>
+      </div>
+    `;
+  }
   // Public API methods
   getData() {
     return { ...this._formData };
@@ -4921,55 +5723,18 @@ let JupiterDynamicForm = class extends LitElement {
     }
     return html`
       <div class="form-container">
-        <!-- Form Header -->
-        <div class="form-header">
-          <h1 class="form-title">${schema.title}</h1>
-          ${schema.description ? html`
-            <p class="form-description">${schema.description}</p>
-          ` : ""}
-        </div>
+        <!-- Form Header - Hidden in side panel mode -->
+        ${this.display !== "sidePanel" ? html`
+          <div class="form-header">
+            <h1 class="form-title">${schema.title}</h1>
+            ${schema.description ? html`
+              <p class="form-description">${schema.description}</p>
+            ` : ""}
+          </div>
+        ` : ""}
 
         <!-- Form Content -->
-        <div class="form-sections">
-          <!-- Validation Summary -->
-          ${showValidationSummary ? html`
-            <div class="validation-summary">
-              <h4 class="validation-summary-title">Please fix the following errors:</h4>
-              <ul class="validation-summary-list">
-                ${this._errors.filter((e2) => e2.severity === "error").map((error) => html`
-                    <li class="validation-summary-item">${error.message}</li>
-                  `)}
-              </ul>
-            </div>
-          ` : ""}
-
-          <!-- Form Sections or No Selection Message -->
-          ${schema.sections.length === 0 ? html`
-            <div class="no-roles-message">
-              <h3>No Roles Selected</h3>
-              <p>Please use the "Filter Roles" button below to select which sections you want to work with.</p>
-              <p>Available roles: ${this._allSections.length}</p>
-            </div>
-          ` : schema.sections.map((section, index) => html`
-            <jupiter-form-section
-              .section="${section}"
-              .columns="${section.columns || this._columns}"
-              .formData="${this._formData}"
-              .typedMemberData="${this._typedMemberData}"
-              .disabled="${this.disabled || this.readonly}"
-              .collapsible="${config.collapsibleSections !== false}"
-              .locale="${config.locale || "en-US"}"
-              .isFirstSection="${index === 0}"
-              .availableDimensions="${this._getAvailableDimensionsForSection(section.id)}"
-              @field-change="${this._handleFieldChange}"
-              @typed-member-change="${this._handleTypedMemberChange}"
-              @section-expand="${this._handleSectionExpand}"
-              @concept-expand="${this._handleConceptExpand}"
-              @column-remove="${this._handleColumnRemove}"
-              @column-add-request="${this._handleColumnAddRequest}"
-            ></jupiter-form-section>
-          `)}
-        </div>
+        ${this.display === "sidePanel" ? this._renderSidePanelLayout(schema, config, showValidationSummary, errorCount) : this._renderAccordionLayout(schema, config, showValidationSummary, errorCount)}
 
         <!-- Form Actions - Fixed Footer -->
         <div class="form-actions">
@@ -5017,6 +5782,7 @@ let JupiterDynamicForm = class extends LitElement {
             ?open="${this._showFilterDialog}"
             .availableRoles="${this._allSections}"
             .selectedRoleIds="${this._selectedRoleIds}"
+            .periodPreferences="${this._periodPreferences}"
             @dialog-cancel="${this._handleFilterDialogCancel}"
             @roles-filter-apply="${this._handleRoleFilterApply}"
             @click="${this._handleFilterDialogCancel}"
@@ -5216,6 +5982,119 @@ JupiterDynamicForm.styles = css`
       margin: 8px 0;
       line-height: 1.5;
     }
+
+    /* Side Panel Layout Styles */
+    .side-panel-layout {
+      display: flex;
+      height: calc(100vh - 80px); /* Account for footer only */
+      gap: 0;
+    }
+
+    .side-panel-roles-list {
+      width: 280px;
+      min-width: 280px;
+      border-right: 1px solid var(--jupiter-border-color, #ddd);
+      overflow-y: auto;
+      background: var(--jupiter-background-light, #f8f9fa);
+    }
+
+    .side-panel-role-item {
+      padding: 12px 16px;
+      cursor: pointer;
+      border-bottom: 1px solid var(--jupiter-border-color, #e0e0e0);
+      transition: background-color 0.2s ease;
+      font-size: 14px;
+      color: var(--jupiter-text-primary, #333);
+      line-height: 1.4;
+    }
+
+    .side-panel-role-item:hover {
+      background: var(--jupiter-hover-background, #e8e8e8);
+    }
+
+    .side-panel-role-item.active {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      font-weight: 500;
+    }
+
+    .side-panel-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0;
+    }
+
+    .side-panel-content .form-sections {
+      padding: 0 24px 24px 24px;
+      padding-top: 0;
+    }
+
+    /* Admin Mode Styles */
+    .admin-mode-placeholder {
+      padding: 0;
+      background: white;
+      min-height: 300px;
+    }
+
+    .admin-mode-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    .admin-mode-title {
+      font-size: 20px;
+      font-weight: 600;
+      margin: 0 0 24px 0;
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .admin-roles-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .admin-role-item {
+      display: flex;
+      align-items: center;
+      padding: 16px;
+      background: var(--jupiter-background-light, #f8f9fa);
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 6px;
+      transition: background-color 0.2s ease;
+    }
+
+    .admin-role-item:hover {
+      background: var(--jupiter-hover-background, #e8e8e8);
+    }
+
+    .admin-role-title {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .admin-role-checkbox {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: 16px;
+    }
+
+    .admin-role-checkbox input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+
+    .admin-role-checkbox label {
+      font-size: 13px;
+      color: var(--jupiter-text-secondary, #666);
+      cursor: pointer;
+      user-select: none;
+    }
   `;
 __decorateClass([
   n2({ type: Object })
@@ -5244,6 +6123,15 @@ __decorateClass([
 __decorateClass([
   n2({ type: String })
 ], JupiterDynamicForm.prototype, "language", 2);
+__decorateClass([
+  n2({ type: String })
+], JupiterDynamicForm.prototype, "display", 2);
+__decorateClass([
+  n2({ type: String })
+], JupiterDynamicForm.prototype, "mode", 2);
+__decorateClass([
+  n2({ type: Array })
+], JupiterDynamicForm.prototype, "financialStatementsTypeAxis", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_formData", 2);
@@ -5286,6 +6174,15 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_showFilterDialog", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_periodPreferences", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_activeSidePanelRoleId", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_adminRoleConfigs", 2);
 JupiterDynamicForm = __decorateClass([
   t$1("jupiter-dynamic-form")
 ], JupiterDynamicForm);
@@ -5298,6 +6195,12 @@ export {
   JupiterFilterRolesDialog,
   JupiterFormField,
   JupiterFormSection,
+  TYPE_INPUT_MAP,
+  getInputTypeForConceptType,
+  isCheckboxType,
+  isNumericType,
+  isSelectType,
+  isTextareaType,
   version
 };
 //# sourceMappingURL=index.mjs.map