Import and Export Settings Block for React

Edit the constants at the top. COLUMNS is the template's header row in order, ON_FILE is the items already in your system, INCOMING is the sample file and KEYS lists the columns a match can be made on, each with the words used when that column is blank. The verdicts, the four totals and the status line are all computed from these by the same small functions, so adding a column means adding it to COLUMNS, FIELD_LABELS and the data.

In this order. A row with nothing in the match column is skipped, because there is nothing to match on. A row whose value matches no item is new. A matching row is then handled by the second rule: skipped, turned into a second item, or compared field by field with the item, where a field counts as a change when the file's value is different and not empty, or when it is empty and the third rule says to clear it. A matching row with no changes is "No change". The comparison ignores case and surrounding spaces for the match, not for the fields. All of it runs on the typed rows in plain functions.

A real file: a CSV named tolmoor-import-template.csv whose only line is the header row (sku,barcode,name,qty,price), made in the browser by the Download Trigger. It is the one thing here that produces a file. Change TEMPLATE and COLUMNS to match your own import and the button follows.

Everything. No file is chosen, read or uploaded, and nothing is imported: the rows are typed into the page and Save only keeps the three rules in the page's state, saying so in the status line. To make it real, let people choose a file, parse it, and run the same verdict function on the parsed rows (or send the rules to your server and show its dry run), then import on a separate, confirmed step. Mapping the file's columns to yours belongs to an import dialog, not to rules.

Yes. Each change to a rule sets the status line to the four totals ("2 new, 3 updates, 1 unchanged, 2 skipped."), and while there are unsaved changes the unsaved count is shown and the totals are kept for assistive technology. Each verdict is also written out as words in its row, with a glyph beside it, never a color. The table is a native table with a caption and row headers.

The three rules sit in a row above the dry run from the small breakpoint up and stack on the smallest screens. Each row of the file becomes a card with the name, the result, the two codes and the first change, all at a fixed height so switching a rule never moves anything. The save bar is pinned to the bottom of the screen. The match key is a native select, so the browser's own picker opens on a phone.