chore: initialize monorepo with project scaffolding, configs, and CI setup

apps/explorer-web/src/pages/receipts.ts

@@ -0,0 +1,76 @@
+import { fetchReceipts, type ReceiptSummary } from "../lib/mockData";
+
+export const receiptsTitle = "Receipts";
+
+export function renderReceiptsPage(): string {
+  return `
+    <section class="receipts">
+      <header class="section-header">
+        <h2>Receipt History</h2>
+        <p class="lead">Mock receipts from the coordinator history are displayed below; live lookup will arrive with API wiring.</p>
+      </header>
+      <div class="receipts__controls">
+        <label class="receipts__label" for="job-id-input">Job ID</label>
+        <div class="receipts__input-group">
+          <input id="job-id-input" name="jobId" type="search" placeholder="Enter job ID" disabled />
+          <button type="button" disabled>Lookup</button>
+        </div>
+        <p class="placeholder">Receipt lookup will be enabled after wiring to <code>/v1/jobs/{job_id}/receipts</code>.</p>
+      </div>
+      <section class="receipts__list">
+        <h3>Recent Receipts</h3>
+        <table class="table receipts__table">
+          <thead>
+            <tr>
+              <th scope="col">Job ID</th>
+              <th scope="col">Receipt ID</th>
+              <th scope="col">Miner</th>
+              <th scope="col">Coordinator</th>
+              <th scope="col">Issued</th>
+              <th scope="col">Status</th>
+            </tr>
+          </thead>
+          <tbody id="receipts-table-body">
+            <tr>
+              <td class="placeholder" colspan="6">Loading receipts…</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+    </section>
+  `;
+}
+
+export async function initReceiptsPage(): Promise<void> {
+  const tbody = document.querySelector<HTMLTableSectionElement>(
+    "#receipts-table-body",
+  );
+  if (!tbody) {
+    return;
+  }
+
+  const receipts = await fetchReceipts();
+  if (receipts.length === 0) {
+    tbody.innerHTML = `
+      <tr>
+        <td class="placeholder" colspan="6">No mock receipts available.</td>
+      </tr>
+    `;
+    return;
+  }
+
+  tbody.innerHTML = receipts.map(renderReceiptRow).join("");
+}
+
+function renderReceiptRow(receipt: ReceiptSummary): string {
+  return `
+    <tr>
+      <td><code>${receipt.jobId}</code></td>
+      <td><code>${receipt.receiptId}</code></td>
+      <td>${receipt.miner}</td>
+      <td>${receipt.coordinator}</td>
+      <td>${new Date(receipt.issuedAt).toLocaleString()}</td>
+      <td>${receipt.status}</td>
+    </tr>
+  `;
+}