Document review: extracted values beside the page

import * as pdfjs from "pdfjs-dist"
import type { PDFDocumentProxy } from "pdfjs-dist"
import type { DocumentPage, RegionBox } from "@/components/candor/document-viewer"

// The worker must be exactly the same version as pdfjs-dist. How you point at it depends on your bundler.
pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.mjs", import.meta.url).toString()

/** Opens a PDF and reads each page's size in PDF points, which DocumentViewer's width and height take. */
export async function openPdf(url: string): Promise<{ doc: PDFDocumentProxy; pages: DocumentPage[] }> {
  const doc = await pdfjs.getDocument(url).promise
  const pages: DocumentPage[] = []
  for (let n = 1; n <= doc.numPages; n++) {
    const { width, height } = (await doc.getPage(n)).getViewport({ scale: 1 })
    pages.push({ id: String(n), width, height, state: "loading" })
  }
  return { doc, pages }
}

/** Draws one page on a canvas at twice its size, for high-density screens, and returns it as an image URL. */
export async function drawPage(doc: PDFDocumentProxy, n: number): Promise<string> {
  const page = await doc.getPage(n)
  const viewport = page.getViewport({ scale: 2 })
  const canvas = document.createElement("canvas")
  canvas.width = Math.floor(viewport.width)
  canvas.height = Math.floor(viewport.height)
  await page.render({ canvasContext: canvas.getContext("2d")!, viewport }).promise
  const blob = await new Promise<Blob | null>((done) => canvas.toBlob(done))
  if (!blob) throw new Error("The page couldn't be drawn.")
  return URL.createObjectURL(blob)
}

/**
 * A rectangle in PDF space ([x1, y1, x2, y2], from the bottom-left corner, as extraction tools report it) as a
 * DocumentViewer box (from the top-left corner, in PDF points). The viewport at scale 1 also accounts for the page's
 * rotation.
 */
export async function boxOf(doc: PDFDocumentProxy, n: number, rect: [number, number, number, number]): Promise<RegionBox> {
  const [x1, y1, x2, y2] = (await doc.getPage(n)).getViewport({ scale: 1 }).convertToViewportRectangle(rect)
  return { x: Math.min(x1, x2), y: Math.min(y1, y2), width: Math.abs(x2 - x1), height: Math.abs(y2 - y1) }
}

"use client"

import * as React from "react"
import type { PDFDocumentProxy } from "pdfjs-dist"
import type { DocumentPage } from "@/components/candor/document-viewer"
import { ExtractionReview, type ExtractedField, type FieldReview } from "@/components/candor/extraction-review"
import { changeHash } from "@/lib/candor/change-hash"
import { drawPage, openPdf } from "@/lib/pdf-pages"

export function InvoiceReview({ documentId, url, title, fields }: { documentId: string; url: string; title: string; fields: ExtractedField[] }) {
  const [pdf, setPdf] = React.useState<PDFDocumentProxy | null>(null)
  const [pages, setPages] = React.useState<DocumentPage[]>([])
  const [failed, setFailed] = React.useState<string | null>(null)

  // Draws a page when it is shown, once; a failure is kept on the page with its reason.
  const draw = (doc: PDFDocumentProxy, id: string) => {
    setPages((all) => all.map((p) => (p.id === id ? { ...p, state: "loading", error: undefined } : p)))
    drawPage(doc, Number(id)).then(
      (src) => setPages((all) => all.map((p) => (p.id === id ? { ...p, src, state: undefined } : p))),
      (e: unknown) => setPages((all) => all.map((p) => (p.id === id ? { ...p, state: "error", error: e instanceof Error ? e.message : undefined } : p)))
    )
  }

  React.useEffect(() => {
    let live = true
    openPdf(url).then(
      ({ doc, pages }) => {
        if (!live) return
        setPdf(doc)
        setPages(pages)
        if (pages[0]) draw(doc, pages[0].id)
      },
      () => live && setFailed("This file couldn't be opened as a PDF.")
    )
    return () => {
      live = false
    }
  }, [url])

  const submit = async (reviews: FieldReview[]) => {
    const hash = await changeHash({ documentId, reviews })
    const res = await fetch(`/api/documents/${documentId}/review`, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ reviews, hash }),
    })
    if (!res.ok) throw new Error(await res.text())
  }

  if (failed) return <p role="alert">{failed}</p>
  if (!pdf) return <p role="status">Opening {title}…</p>
  return (
    <ExtractionReview
      title={title}
      pages={pages}
      fields={fields}
      agent="Intake agent"
      onSubmit={submit}
      onPageChange={(id) => {
        if (!pages.find((p) => p.id === id)?.src) draw(pdf, id)
      }}
      onRetry={(id) => draw(pdf, id)}
    />
  )
}

import { changeHash } from "@/lib/candor/change-hash"

export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const user = await currentUser() // your auth: who is asking, and may they review this document?
  const { reviews, hash } = await request.json() // check the shape with zod before trusting it
  // The same canonical form as the browser's, so the hash names exactly the reviews that arrived.
  if ((await changeHash({ documentId: id, reviews })) !== hash) {
    return new Response("The review doesn't match its hash. Reload and review again.", { status: 409 })
  }
  await saveReview({ documentId: id, reviews, hash, reviewer: user.id, at: new Date() }) // your own data layer
  return new Response(null, { status: 204 })
}