bpsets/views/partial/page_header.ejs

<%
  const metadatas =
    bpStatus
      .map(({ metadatas }) => metadatas)
      .flat()
      .filter((v) => v.status === 'FINISHED')

  const passCount = metadatas.filter((v) => v.nonCompliantResources.length < 1).length
  const failCount = metadatas.filter((v) => v.nonCompliantResources.length > 0).length
  const errorCount = metadatas.filter((v) => v.status === 'ERROR').length
%>

<div class="flex justify-between items-center mb-6">
  <div>
    <h1 class="text-2xl font-bold">BPSets (<%= bpLength %>)</h1>
    <p class="text-gray-500">Created by Minhyeok Park</p>
  </div>

  <div class="flex space-x-6 text-center">
    <div>
      <p class="text-sm text-gray-600">Pass</p>
      <p class="text-xl font-semibold text-green-500"><%= passCount %></p>
    </div>
    <div>
      <p class="text-sm text-gray-600">Fail</p>
      <p class="text-xl font-semibold text-red-500"><%= failCount %></p>
    </div>
    <div>
      <p class="text-sm text-gray-600">Error</p>
      <p class="text-xl font-semibold text-yellow-500"><%= errorCount %></p>
    </div>
  </div>

  <div class="space-x-2">
    <a href="/check_all?hidePass=<%= hidePass %>" class="bg-blue-500 text-white px-4 py-2 rounded-md shadow hover:bg-blue-600 inline-block">
      Check All
    </a>
    <button
      id="toggleHidePass"
      class="bg-blue-500 text-white px-4 py-2 rounded-md shadow hover:bg-blue-600">
      Hide Pass
    </button>
  </div>
</div>