joanna-website/app/views/dashboard/index.html.erb

<h1 style="font-family: Arial, sans-serif;">Excel Replacement Dashboard</h1>

<!-- Dropdown Filters -->
<%= form_with url: dashboard_path, method: :get, id: "filter-form" do |f| %>
  <div style="margin-bottom: 20px; font-family: Arial, sans-serif;">
    <%= f.label :joint, "Select Joint:", style: "font-weight: bold;" %>
    <%= f.select :joint, options_for_select(@available_joints, params[:joint]), include_blank: "Select a joint", id: "joint" %>
  </div>
<% end %>

<hr>

<h2 style="font-family: Arial, sans-serif;">Dashboard Results</h2>

<!-- Container where the formatted "Excel-style" grids will be injected -->
<div id="results-container" style="display: flex; flex-wrap: wrap; gap: 30px;">
  <!-- JS will inject the tables here -->
</div>

<style>
  /* Main Table Layout */
  .joint-grid {
    border-collapse: collapse;
    border: 2px solid #000;
    font-family: Arial, sans-serif;
    font-size: 12px;
    table-layout: fixed;
    width: 600px;
  }
  .joint-grid td, .joint-grid th {
    border: 1px solid #000;
    padding: 4px 8px;
    text-align: center;
    vertical-align: middle;
  }

  /* Color Palette from Image */
  .bg-dark-blue { background-color: #002060; color: white; font-weight: bold; }
  .bg-light-blue { background-color: #D9E1F2; font-weight: bold; }
  .bg-pale-yellow { background-color: #FFFFCC; }
  .bg-pale-green { background-color: #E2EFDA; }
  .bg-pale-orange { background-color: #FCE4D6; }
  
  .text-red { color: #C00000; text-align: left !important; }
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const jointSelect = document.getElementById("joint");
  const resultsContainer = document.getElementById("results-container");

  function fetchFilteredData() {
    const joint = jointSelect.value;
    const params = new URLSearchParams();
    if (joint) params.append("joint", joint);

    fetch(`/dashboard?${params.toString()}`, {
      headers: { "Accept": "application/json" }
    })
    .then(response => response.json())
    .then(data => {
      renderJointGrid(data);
    })
    .catch(error => console.error("Error fetching dashboard data:", error));
  }

  /**
   * This function transforms a flat JSON record into the 
   * specific grid layout seen in the image.
   */
  function renderJointGrid(records) {
    resultsContainer.innerHTML = "";

    if (records.length === 0) {
      resultsContainer.innerHTML = "<p>No records found. Please select a joint.</p>";
      return;
    }

    records.forEach(record => {
      // Create a wrapper for the two tables (Info and Ligaments)
      const wrapper = document.createElement("div");
      wrapper.style.display = "flex";
      wrapper.style.gap = "20px";

      // --- TABLE 1: Joint Information ---
      const infoTable = document.createElement("table");
      infoTable.className = "joint-grid";
      
      // Use a template literal to define the exact structure of the image
      // Note: We map JSON keys (record["Joint"]) to specific cells
      infoTable.innerHTML = `
        <thead>
          <tr><th colspan="4" class="bg-dark-blue">Joint Information</th></tr>
        </thead>
        <tbody>
          <tr>
            <td class="bg-light-blue">Anatomical Name</td>
            <td class="bg-pale-yellow">${record["Joint"] || ""}</td>
            <td class="bg-light-blue">Common Name</td>
            <td class="bg-pale-yellow">${record["Common Name"] || ""}</td>
          </tr>
          <tr>
            <td class="bg-light-blue">Diarthrodial Joint Type</td>
            <td class="bg-pale-yellow">${record["Diarthrodial joint"] || ""}</td>
            <td class="bg-light-blue">Planes of Freedom</td>
            <td class="bg-pale-yellow">${record["# of Plains"] || ""}</td>
          </tr>
          <tr>
            <td class="bg-pale-green">${record["Alternate Name"] || ""}</td>
            <td class="bg-pale-green">Ball & Socket</td>
            <td class="bg-pale-green">${record["# of Plains"] || ""}</td>
            <td class="bg-pale-green">${record["# of Plains"] || ""}</td>
          </tr>
          <tr>
            <td class="bg-light-blue">Arthrokinematic Rule</td>
            <td class="bg-pale-orange">Osteokinematic</td>
            <td class="bg-light-blue">Open Chain Roll/Glide</td>
            <td class="bg-pale-orange">Anterior/Posterior</td>
          </tr>
          <tr>
            <td class="bg-light-blue">Open Pack</td>
            <td colspan="2" class="bg-pale-green">${record["Open Pack"] || "N/A"}</td>
            <td class="bg-light-blue">Close Pack</td>
          </tr>
          <tr>
            <td colspan="4" class="bg-pale-green">${record["Close Pack"] || "N/A"}</td>
          </tr>
        </tbody>
      `;

      // --- TABLE 2: Ligaments ---
      const ligTable = document.createElement("table");
      ligTable.className = "joint-grid";
      ligTable.style.width = "250px";

      // Handle ligaments (assuming they might be a comma-separated string or array)
      let ligsHtml = "";
      if (record["Ligaments"]) {
        const ligArray = Array.isArray(record["Ligaments"]) ? record["Ligaments"] : record["Ligaments"].split(",");
        ligsHtml = ligArray.map(l => `<div class="text-red">${l.trim()}</div>`).join("");
      } else {
        ligsHtml = "No ligaments listed";
      }

      ligTable.innerHTML = `
        <tr>
          <td class="bg-dark-blue" style="width: 100px;">Ligaments</td>
          <td class="bg-pale-orange" style="text-align: left;">
            <strong>Vertebral Articulating Processes</strong><br>
            ${ligsHtml}
          </td>
        </tr>
      `;

      wrapper.appendChild(infoTable);
      wrapper.appendChild(ligTable);
      resultsContainer.appendChild(wrapper);
    });
  }

  jointSelect.addEventListener("change", fetchFilteredData);
  fetchFilteredData();
});  
</script>