Data Import Success Block for React

Nothing was imported and the file never left the device: the 1,248 rows, the 47 duplicates and the 17 failed rows are typed sample data. What the browser really does is the download, a CSV built in the tab. To wire it, fill TOTAL and DUPLICATES from your import job and FAILURES with the rows it refused; the imported count, the shares, the bar and the report are all worked out from them.

Each part is as long as its count: solid for the rows imported (1,184), hatched for the rows skipped as duplicates (47) and hollow for the rows that failed (17). The imported number is what remains of the file's rows after the other two, so the three always add up. The shares under the bar (95, 4 and 1 percent) are worked out by the largest remainder, so they add to exactly 100, and the bar carries one sentence with the three counts for a screen reader.

One line per failed row, 17 of them, under a header line: the row, the column, the problem and the value the file had. Any field with a comma, a quote or a line break is quoted, and a value that starts with an equals sign, a plus, a minus, an at sign, a tab or a return gets a leading apostrophe, so a spreadsheet keeps it as text instead of running it as a formula. It is saved as customers-2026-09-import-errors.csv, and the live line says so.

It is a focusable region with a name, so the arrow keys and Page Down scroll it from the keyboard, and its header row stays at the top. Its height is fixed, so the panel never moves however many rows fail. All 17 rows are in it; the box shows about six and a half at a time, so the next row is always peeking out.

The ledger keeps two columns: the row, with its column name under it, and the problem. The value the file had is in the report. The three counts stay in one row and the download button is full width under the live line.

View all records is the Shine Button in the header: a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.