Document Match

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add document-match

Usage#

The grid matches nothing itself. Run your matching engine, then map each result line to a row: the status of the line, a cell per document, and the cell that disagrees marked with its own status and delta.

Anatomy#

import {
  DocumentMatch,
  DocumentMatchSummary,
  DocumentMatchCount,
  DocumentMatchNavigator,
  DocumentMatchGrid,
  DocumentMatchHeader,
  DocumentMatchLineHead,
  DocumentMatchDocument,
  DocumentMatchDocumentTitle,
  DocumentMatchDocumentNumber,
  DocumentMatchDocumentMeta,
  DocumentMatchActionHead,
  DocumentMatchBody,
  DocumentMatchLine,
  DocumentMatchLineHeader,
  DocumentMatchLineTitle,
  DocumentMatchLineMeta,
  DocumentMatchTolerance,
  DocumentMatchCell,
  DocumentMatchValue,
  DocumentMatchValueDetail,
  DocumentMatchDelta,
  DocumentMatchAction,
  DocumentMatchTotals,
  DocumentMatchTotal,
  DocumentMatchTotalLabel,
} from "@/components/ui/document-match"

Two-way match#

The grid takes any number of documents. A service has nothing to receive, so it matches the order against the invoice. Here navigate is set to exceptions, so the lines within tolerance are skipped.

Tolerance#

The track is the allowed band around the reference, and the dot is where the line landed: grey when exact, amber inside the band, red outside it. Hover it for the numbers.

Card and density#

On its own page the grid needs no frame. Set variant="card" when it sits beside other panels, and density="compact" for a tighter workspace.

Keyboard#

The grid is one tab stop. From a line:

• ↓ ↑ move to the next or previous line.
• N P jump to the next or previous variance.
• Home End go to the first or last line.
• Tab moves into the line's proposed action.

API reference#

FAQ#