Pack FPP selection by column height

server.js

@@ -631,6 +631,7 @@ function renderOrderDetail(order) {
 
 function renderOrderForm(step, stepKey = "demografi", fppTests = [], mouId = "") {
   const fppGroups = groupFppTestsForSelection(fppTests);
+  const packedGroups = packFppGroupsIntoColumns(fppGroups, 5);
   const steps = [
     ["demografi", "Demografi", "Patient identity and contact details."],
     ["diagnosa", "Diagnosa", "Clinical indication and diagnosis."],
@@ -689,8 +690,12 @@ function renderOrderForm(step, stepKey = "demografi", fppTests = [], mouId = "")
             <p id="order-selected-count">0 selected</p>
           </div>
           ${
-            fppGroups.length
+            packedGroups.length
-              ? `<div class="fpp-select-board">${fppGroups
+              ? `<div class="fpp-select-board">${packedGroups
+                  .map(
+                    (column) => `
+                      <div class="fpp-select-stack">
+                        ${column
                           .map(
                             (group) => `
                               <article class="fpp-select-column">
@@ -735,6 +740,10 @@ function renderOrderForm(step, stepKey = "demografi", fppTests = [], mouId = "")
                               </article>
                             `,
                           )
+                          .join("")}
+                      </div>
+                    `,
+                  )
                   .join("")}</div>`
               : `<div class="note-box">FPP catalog not available yet.</div>`
           }
@@ -954,9 +963,30 @@ function groupFppTestsForSelection(tests = []) {
   }));
 }
 
+function packFppGroupsIntoColumns(groups = [], maxColumns = 5) {
+  const columnCount = Math.min(Math.max(groups.length, 1), maxColumns);
+  const columns = Array.from({ length: columnCount }, () => ({ items: [], score: 0 }));
+  const estimateScore = (group) =>
+    1 +
+    group.sections.length +
+    group.sections.reduce((sum, section) => sum + section.tests.length * 0.12, 0);
+
+  for (const group of groups) {
+    let target = columns[0];
+    for (const column of columns) {
+      if (column.score < target.score) target = column;
+    }
+    target.items.push(group);
+    target.score += estimateScore(group);
+  }
+
+  return columns.map((column) => column.items);
+}
+
 function renderFpp(groups, activeGroup = "All") {
   const availableGroups = groups.map((item) => item.heading);
   const visibleGroups = activeGroup === "All" ? groups : groups.filter((item) => item.heading === activeGroup);
+  const packedGroups = packFppGroupsIntoColumns(visibleGroups, 5);
   return `
     <div class="stack swap-zone fpp-shell">
       <section class="panel fpp-toolbar">
@@ -971,7 +1001,11 @@ function renderFpp(groups, activeGroup = "All") {
                 <div class="fpp-sheet-meta">Hitam putih, padat, dan mengikuti pembagian grup seperti form manual.</div>
               </div>
               <div class="fpp-board">
-                ${visibleGroups
+                ${packedGroups
+                  .map(
+                    (column) => `
+                      <div class="fpp-select-stack">
+                        ${column
                           .map(
                             (group) => `
                               <article class="fpp-column">
@@ -1007,6 +1041,10 @@ function renderFpp(groups, activeGroup = "All") {
                           )
                           .join("")}
                       </div>
+                    `,
+                  )
+                  .join("")}
+              </div>
             </section>
           `
           : `<section class="panel">${emptyState("No FPP items", "The API returned no catalog rows for this filter.")}</section>`

styles.css

@@ -745,6 +745,13 @@ tr:last-child td {
   align-items: start;
 }
 
+.fpp-select-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
 .fpp-select-column {
   overflow: hidden;
   border-radius: 8px;