src/features/reviews/computation-final-error.tsx

Linked repository file from this build.

import { resolveReviewPolicy } from "@/programs/snap-negative/policy";
import type { SnapReview } from "@/programs/snap-negative/types";
import { formatDecimal2FromCents, type CalcCell, type ColumnId } from "./computation-grid.helpers";
export function finalErrorDisplay(review: SnapReview) {
  const final = review.facts.final;
  if (!final || final.inputsRevision !== review.facts.inputsRevision) return null;
  return benefitErrorDisplay(review, final.errorCents);
}
function benefitErrorDisplay(review: SnapReview, errorCents: number) {
  const amount = Math.abs(errorCents);
  const threshold = resolveReviewPolicy(review).errorThreshold * 100;
  return {
    amount,
    threshold,
    label: errorCents > 0 ? "Overissuance" : errorCents < 0 ? "Underissuance" : "No benefit error",
    reportable: amount >= threshold,
    colored: amount > 0 && (review.outcome !== "clean" || amount >= threshold),
  };
}
export function ComputationErrorRow({
  review,
  columns,
}: {
  review: SnapReview;
  columns: Record<ColumnId, CalcCell>;
}) {
  const baseline = columns.eligibility;
  return (
    <tr className="border-t-2">
      <th scope="row" className="p-2 text-left font-medium">
        Result vs Eligibility
      </th>
      {(Object.keys(columns) as ColumnId[]).map((column) => {
        const cell = columns[column];
        const display =
          column === "eligibility" || baseline.kind !== "ok" || cell.kind !== "ok"
            ? null
            : column === "final"
              ? finalErrorDisplay(review)
              : benefitErrorDisplay(
                  review,
                  baseline.result.benefitCents - cell.result.benefitCents,
                );
        return (
          <td key={column} className="px-2 py-1.5 align-top">
            {display && (
              <div
                className={
                  display.colored
                    ? display.reportable
                      ? "rounded bg-destructive/10 py-1 text-destructive"
                      : "rounded bg-green-500/10 py-1 text-green-700 dark:text-green-400"
                    : undefined
                }
              >
                <p className="px-2">{display.label}</p>
                <p className="flex min-h-8 items-center px-2 tabular-nums">
                  ${formatDecimal2FromCents(display.amount)}
                </p>
                <p className="px-2 text-xs">
                  Reportable threshold: ${formatDecimal2FromCents(display.threshold)}
                </p>
              </div>
            )}
          </td>
        );
      })}
    </tr>
  );
}