cpone_dashboard/cpone-dashboard/templates/result/index.html

{{define "title"}}Result Reports — CpOne{{end}}
{{define "header-title"}}Consolidated Result Reports{{end}}

{{define "content"}}
{{$proj := .CurrentProject}}

{{/* Section 1: Current project */}}
<section class="card p-5">
  <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
    <div>
      <p class="text-xs font-semibold uppercase tracking-widest text-brand-500">Ongoing Project</p>
      <h2 class="mt-1 text-lg font-semibold text-slate-900">
        {{if $proj.Label}}{{$proj.Label}}{{else}}MCU #{{$proj.McuID}}{{end}}
      </h2>
      <p class="mt-0.5 text-sm text-slate-500">
        {{$proj.Number}} &bull; {{$proj.CorporateName}} &bull;
        <span class="num">{{$proj.StartDate | fmtDate}}</span> &ndash; <span class="num">{{$proj.EndDate | fmtDate}}</span>
      </p>
    </div>
    <a href="{{b "/projects"}}" class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:border-brand-400 hover:text-brand-600">
      Ganti project
    </a>
  </div>
</section>

{{/* Section 2: Summary cards */}}
<section class="grid gap-4 sm:grid-cols-2">
  <article class="card p-5">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Total Patients</p>
    <p class="num mt-2 text-3xl font-semibold text-slate-900">{{.Summary.Total}}</p>
    <p class="mt-1 text-xs text-slate-400">Peserta dalam project ini</p>
  </article>
  <article class="card p-5">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Has PDF</p>
    <p class="num mt-2 text-3xl font-semibold text-brand-500">{{.Summary.HasPDF}}</p>
    <p class="mt-1 text-xs text-slate-400">Laporan hasil sudah tersedia</p>
  </article>
</section>

{{/* Section 3: Filter form */}}
<section class="card p-4">
  <form method="get" action="{{b "/result"}}" class="grid gap-3 md:grid-cols-3">
    <div class="md:col-span-2">
      <label for="search" class="mb-2 block text-sm font-medium text-slate-600">Search Patient</label>
      <input id="search" name="search" value="{{.Search}}" type="text" placeholder="Nama atau Employee ID"
        class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200"/>
    </div>
    <div>
      <label for="filter" class="mb-2 block text-sm font-medium text-slate-600">Status PDF</label>
      <select id="filter" name="filter"
        class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
        <option value=""       {{if eq .Filter ""}}selected{{end}}>All</option>
        <option value="has_pdf" {{if eq .Filter "has_pdf"}}selected{{end}}>Has PDF</option>
        <option value="no_pdf"  {{if eq .Filter "no_pdf"}}selected{{end}}>No PDF</option>
      </select>
    </div>
    <div class="md:col-span-3 flex justify-end">
      <button type="submit" class="rounded-xl bg-brand-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-600">
        Filter
      </button>
    </div>
  </form>
</section>

{{/* Section 4: Patient list */}}
<section class="card overflow-hidden">
  <div class="flex items-center justify-between border-b border-slate-100 px-5 py-3">
    <div>
      <h2 class="text-base font-semibold text-slate-700">Patient Result List</h2>
      <p class="text-xs text-slate-400">Data dari published_mcu_dashboard_sync</p>
    </div>
    <span class="text-xs font-medium text-slate-400">{{len .FilteredRows}} ditampilkan</span>
  </div>

  {{if .FilteredRows}}
  <div class="hidden overflow-x-auto md:block">
    <table class="min-w-full text-sm">
      <thead class="bg-slate-50 text-left text-slate-500">
        <tr>
          <th class="px-4 py-3 font-medium">Employee ID</th>
          <th class="px-4 py-3 font-medium">Patient</th>
          <th class="px-4 py-3 font-medium">Department</th>
          <th class="px-4 py-3 font-medium">Report Date</th>
          <th class="px-4 py-3 font-medium">Action</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100">
        {{range .FilteredRows}}
        <tr class="hover:bg-slate-50">
          <td class="num px-4 py-3 text-slate-500">{{.NIP}}</td>
          <td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
          <td class="px-4 py-3 text-slate-500">{{.Posisi}}</td>
          <td class="num px-4 py-3 text-slate-500">
            {{if .ReportDate}}{{.ReportDate | fmtDate}}{{else}}<span class="text-slate-300">—</span>{{end}}
          </td>
          <td class="px-4 py-3">
            {{if .FileUrl}}
            <button onclick="openPDFModal('{{$.PDFBaseURL}}{{.FileUrl}}', '{{.Name}}')"
               class="inline-flex items-center gap-1.5 rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-600">
              View PDF
            </button>
            {{else}}
            <span class="text-xs text-slate-300">—</span>
            {{end}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>

  <div class="grid gap-3 p-4 md:hidden">
    {{range .FilteredRows}}
    <article class="rounded-xl border border-slate-200 p-3">
      <div class="flex items-start justify-between gap-3">
        <div>
          <p class="font-semibold text-slate-700">{{.Name}}</p>
          <p class="mt-0.5 text-xs text-slate-400">{{.NIP}} &bull; {{.Posisi}}</p>
          {{if .ReportDate}}<p class="mt-0.5 num text-xs text-slate-400">{{.ReportDate | fmtDate}}</p>{{end}}
        </div>
        {{if .FileUrl}}
        <button onclick="openPDFModal('{{$.PDFBaseURL}}{{.FileUrl}}', '{{.Name}}')"
           class="shrink-0 rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-600">
          View PDF
        </button>
        {{else}}
        <span class="text-xs text-slate-300">No PDF</span>
        {{end}}
      </div>
    </article>
    {{end}}
  </div>
  {{else}}
  <div class="px-5 py-10 text-center text-sm text-slate-400">
    Belum ada data untuk project ini.
  </div>
  {{end}}
</section>

{{/* PDF Modal */}}
<div id="pdf-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
     onclick="if(event.target===this)closePDFModal()">
  <div class="flex h-full w-full max-w-5xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl">
    <div class="flex shrink-0 items-center justify-between border-b border-slate-200 px-5 py-3">
      <p id="pdf-modal-title" class="truncate text-sm font-semibold text-slate-700"></p>
      <div class="ml-4 flex shrink-0 items-center gap-3">
        <a id="pdf-modal-link" href="#" target="_blank"
           class="text-xs font-medium text-brand-500 hover:underline">
          Buka di tab baru ↗
        </a>
        <button onclick="closePDFModal()"
                class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6L6 18M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </div>
    <iframe id="pdf-modal-frame" src="" class="min-h-0 flex-1 w-full" frameborder="0"></iframe>
  </div>
</div>

<script>
function normalizePdfUrl(rawUrl) {
  try {
    const u = new URL(rawUrl, window.location.origin);
    if (window.location.protocol === 'https:' && u.protocol === 'http:') {
      u.protocol = 'https:';
    }
    return u.toString();
  } catch (_) {
    return rawUrl;
  }
}

function openPDFModal(url, name) {
  const safeUrl = normalizePdfUrl(url);
  document.getElementById('pdf-modal-frame').src = safeUrl;
  document.getElementById('pdf-modal-title').textContent = name;
  document.getElementById('pdf-modal-link').href = safeUrl;
  const modal = document.getElementById('pdf-modal');
  modal.classList.remove('hidden');
  modal.classList.add('flex');
  document.body.style.overflow = 'hidden';
}
function closePDFModal() {
  const modal = document.getElementById('pdf-modal');
  modal.classList.add('hidden');
  modal.classList.remove('flex');
  document.getElementById('pdf-modal-frame').src = '';
  document.body.style.overflow = '';
}
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closePDFModal();
});
</script>
{{end}}