From 0030cfb11ae4fa2359b473fb11209535ab12823f Mon Sep 17 00:00:00 2001
From: "sas.fajri" <sas.fajri@gmail.com>
Date: Mon, 13 Apr 2026 17:11:42 +0700
Subject: [PATCH] Pack FPP selection by column height

---
 server.js  | 186 ++++++++++++++++++++++++++++++++---------------------
 styles.css |   7 ++
 2 files changed, 119 insertions(+), 74 deletions(-)

diff --git a/server.js b/server.js
index 5f57269..3416b9e 100644
--- a/server.js
+++ b/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,50 +690,58 @@ function renderOrderForm(step, stepKey = "demografi", fppTests = [], mouId = "")
             <p id="order-selected-count">0 selected</p>
           </div>
           ${
-            fppGroups.length
-              ? `<div class="fpp-select-board">${fppGroups
+            packedGroups.length
+              ? `<div class="fpp-select-board">${packedGroups
                   .map(
-                    (group) => `
-                      <article class="fpp-select-column">
-                        <div class="fpp-select-head">
-                          <div class="fpp-select-title">${escapeHtml(group.heading)}</div>
-                          <div class="fpp-select-count">${group.sections.reduce((sum, section) => sum + section.tests.length, 0)} tests</div>
-                        </div>
-                        <div class="fpp-select-body">
-                          ${group.sections
-                            .map(
-                              (section) => `
-                                <section class="fpp-select-section">
-                                  ${section.title ? `<div class="fpp-select-section-head">${escapeHtml(section.title)}</div>` : ""}
-                                  <ul class="fpp-select-list">
-                                    ${section.tests
-                                      .map(
-                                        (test) => `
-                                          <li class="fpp-select-row ${test.doctortest ? "" : "is-disabled"}">
-                                            <label class="fpp-select-label">
-                                              <input
-                                                class="fpp-select-toggle"
-                                                type="checkbox"
-                                                ${test.doctortest ? "" : "disabled"}
-                                                data-test-id="${escapeHtml(test.testId)}"
-                                                data-test-name="${escapeHtml(test.name)}"
-                                                data-test-price="${escapeHtml(test.price)}"
-                                                data-test-heading="${escapeHtml(group.heading)}"
-                                                data-test-subcategory="${escapeHtml(section.title || "")}"
-                                              />
-                                              <span class="fpp-select-name">${escapeHtml(test.name)}</span>
-                                            </label>
-                                          </li>
-                                        `,
-                                      )
-                                      .join("")}
-                                  </ul>
-                                </section>
-                              `,
-                            )
-                            .join("")}
-                        </div>
-                      </article>
+                    (column) => `
+                      <div class="fpp-select-stack">
+                        ${column
+                          .map(
+                            (group) => `
+                              <article class="fpp-select-column">
+                                <div class="fpp-select-head">
+                                  <div class="fpp-select-title">${escapeHtml(group.heading)}</div>
+                                  <div class="fpp-select-count">${group.sections.reduce((sum, section) => sum + section.tests.length, 0)} tests</div>
+                                </div>
+                                <div class="fpp-select-body">
+                                  ${group.sections
+                                    .map(
+                                      (section) => `
+                                        <section class="fpp-select-section">
+                                          ${section.title ? `<div class="fpp-select-section-head">${escapeHtml(section.title)}</div>` : ""}
+                                          <ul class="fpp-select-list">
+                                            ${section.tests
+                                              .map(
+                                                (test) => `
+                                                  <li class="fpp-select-row ${test.doctortest ? "" : "is-disabled"}">
+                                                    <label class="fpp-select-label">
+                                                      <input
+                                                        class="fpp-select-toggle"
+                                                        type="checkbox"
+                                                        ${test.doctortest ? "" : "disabled"}
+                                                        data-test-id="${escapeHtml(test.testId)}"
+                                                        data-test-name="${escapeHtml(test.name)}"
+                                                        data-test-price="${escapeHtml(test.price)}"
+                                                        data-test-heading="${escapeHtml(group.heading)}"
+                                                        data-test-subcategory="${escapeHtml(section.title || "")}"
+                                                      />
+                                                      <span class="fpp-select-name">${escapeHtml(test.name)}</span>
+                                                    </label>
+                                                  </li>
+                                                `,
+                                              )
+                                              .join("")}
+                                          </ul>
+                                        </section>
+                                      `,
+                                    )
+                                    .join("")}
+                                </div>
+                              </article>
+                            `,
+                          )
+                          .join("")}
+                      </div>
                     `,
                   )
                   .join("")}</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,38 +1001,46 @@ 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(
-                    (group) => `
-                      <article class="fpp-column">
-                        <div class="fpp-column-head">
-                          <div class="fpp-column-title">${escapeHtml(group.heading)}</div>
-                          <div class="fpp-column-count">${group.sections.reduce((sum, section) => sum + section.tests.length, 0)} tests</div>
-                        </div>
-                        <div class="fpp-column-body">
-                          ${group.sections
-                            .map(
-                              (section) => `
-                                <section class="fpp-section">
-                                  ${section.title ? `<div class="fpp-section-head">${escapeHtml(section.title)}</div>` : ""}
-                                  <ul class="fpp-test-list">
-                                    ${section.tests
-                                      .map(
-                                        (test) => `
-                                          <li class="fpp-test ${test.doctortest ? "" : "is-disabled"}" title="${test.doctortest ? "" : "Tidak dapat dicentang"}">
-                                            <span class="fpp-dot" aria-hidden="true"></span>
-                                            <span class="fpp-test-name">${escapeHtml(test.name)}</span>
-                                          </li>
-                                        `,
-                                      )
-                                      .join("")}
-                                  </ul>
-                                </section>
-                              `,
-                            )
-                            .join("")}
-                        </div>
-                      </article>
+                    (column) => `
+                      <div class="fpp-select-stack">
+                        ${column
+                          .map(
+                            (group) => `
+                              <article class="fpp-column">
+                                <div class="fpp-column-head">
+                                  <div class="fpp-column-title">${escapeHtml(group.heading)}</div>
+                                  <div class="fpp-column-count">${group.sections.reduce((sum, section) => sum + section.tests.length, 0)} tests</div>
+                                </div>
+                                <div class="fpp-column-body">
+                                  ${group.sections
+                                    .map(
+                                      (section) => `
+                                        <section class="fpp-section">
+                                          ${section.title ? `<div class="fpp-section-head">${escapeHtml(section.title)}</div>` : ""}
+                                          <ul class="fpp-test-list">
+                                            ${section.tests
+                                              .map(
+                                                (test) => `
+                                                  <li class="fpp-test ${test.doctortest ? "" : "is-disabled"}" title="${test.doctortest ? "" : "Tidak dapat dicentang"}">
+                                                    <span class="fpp-dot" aria-hidden="true"></span>
+                                                    <span class="fpp-test-name">${escapeHtml(test.name)}</span>
+                                                  </li>
+                                                `,
+                                              )
+                                              .join("")}
+                                          </ul>
+                                        </section>
+                                      `,
+                                    )
+                                    .join("")}
+                                </div>
+                              </article>
+                            `,
+                          )
+                          .join("")}
+                      </div>
                     `,
                   )
                   .join("")}
diff --git a/styles.css b/styles.css
index 934c40a..ec18250 100644
--- a/styles.css
+++ b/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;