@aglyn/plugins-crm 1.0.0-beta.143

package/src/lib/components/csv-import-drawer.js

@@ -0,0 +1,746 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * IMPORTING A CSV INTO A CRM COLLECTION — the screen, for whichever
+ * collection (AGL-2602, shared since AGL-2621).
+ *
+ * The contact import settled the walk from a file on disk to a result the
+ * operator can act on: choose the file, read what is in it, match its
+ * columns to fields with the first row beside each, preview the ten rows
+ * the mapping produces, run it in bounded requests with a progress bar,
+ * and report what was added, updated and skipped with the skipped rows as
+ * a file to fix. A companies file walks the same path with a different
+ * vocabulary, so the walk lives here once and each collection hands in a
+ * {@link CsvImportVocabulary}: its fields and their labels, the one field
+ * every row needs, its route, its tally, its template.
+ *
+ * ## The file is read in the browser, and judged on the server
+ *
+ * `parseCsv` — the same parser the list import and the dataset import run
+ * — turns the file into cells here, so the operator can map and preview
+ * without a round trip and without uploading a file they may still decide
+ * not to import. Nothing is VALIDATED here beyond counting the rows whose
+ * required cell is unusable, and that count is a courtesy: every row is
+ * judged by the route, through the normalizers every other door uses, and
+ * the numbers on the result panel are the server's.
+ *
+ * ## Bounded requests, and closing stops them
+ *
+ * A chunk per request, as many requests as the file needs, and a progress
+ * bar between them. Closing the drawer mid-run stops the loop after the
+ * request in flight; the rows already written stay written and the result
+ * panel says how far it got. There is no durable job to resume — an import
+ * is idempotent by construction (the door dedupes on the address, or the
+ * domain and the name), so running the same file again finishes what a
+ * closed drawer left, reporting the earlier rows as merged.
+ */ import { customImportTarget, customImportTargetKey, LIST_IMPORT_MAX_CHARACTERS, parseCsv } from "@aglyn/aglyn";
+import { ICON_VARIANT_CLOSE } from "@aglyn/shared-data-enums";
+import { Container, HelpTip, MdiIcon, SrOnly } from "@aglyn/shared-ui-jsx";
+import { NavigationDrawerComponent } from "@aglyn/shared-ui-jsx/components/navigation-drawer.component";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
+import { useOrgDataScope, useUser } from "@aglyn/tenant-feature-instance";
+import { useConsoleWidgetSlot } from "@aglyn/aglyn/app-utils/console-widget-slot-context";
+import { Alert, AlertTitle, Box, Button, Chip, IconButton, LinearProgress, MenuItem, Stack, TableBody, TableCell, TableHead, TableRow, TextField, Typography } from "@mui/material";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCrmOrgMount } from "../hooks/use-crm-org-mount.js";
+import { downloadTextFile } from "../model/contacts-csv.js";
+import { importColumns } from "../model/import-column-shapes.js";
+import { CrmSitePicker } from "./crm-site-picker.js";
+/** The value the mapping select shows for a column that is not imported. */ const SKIP_TARGET = '';
+/** What a target is called — a standard field's label, or the custom field's. */ function targetLabel(target, vocabulary) {
+    var _vocabulary_fieldLabels_target;
+    const customKey = customImportTargetKey(target);
+    if (customKey) {
+        var _ref;
+        var _vocabulary_customFields_find, _vocabulary_customFields;
+        return (_ref = (_vocabulary_customFields = vocabulary.customFields) == null ? void 0 : (_vocabulary_customFields_find = _vocabulary_customFields.find((field)=>field.key === customKey)) == null ? void 0 : _vocabulary_customFields_find.label) != null ? _ref : customKey;
+    }
+    return (_vocabulary_fieldLabels_target = vocabulary.fieldLabels[target]) != null ? _vocabulary_fieldLabels_target : target;
+}
+/** What a dropped-value field is called in the result panel — the label without its hint. */ function droppedFieldLabel(field, vocabulary) {
+    return targetLabel(field, vocabulary).replace(/ \(.*\)$/, '');
+}
+export function CsvImportDrawer(props) {
+    var _ref, _rows_;
+    const { open, onClose, hostId, vocabulary } = props;
+    const { data: user } = useUser();
+    const { enqueueSnackbar } = useSnackbar();
+    // The site every row is captured under: the mounted one, or at the
+    // organization level the one the picker named — `null` until it has.
+    const mount = useCrmOrgMount();
+    const createHostId = (_ref = hostId != null ? hostId : mount == null ? void 0 : mount.createHostId) != null ? _ref : null;
+    const [fileName, setFileName] = useState('');
+    const [columns, setColumns] = useState([]);
+    const [rows, setRows] = useState([]);
+    /** How many rows the file had past the ceiling, so the drawer can say so. */ const [overCeiling, setOverCeiling] = useState(0);
+    const [mapping, setMapping] = useState({});
+    const [result, setResult] = useState(null);
+    const [progress, setProgress] = useState(null);
+    const [busy, setBusy] = useState(false);
+    /**
+   * Set when the drawer closes mid-run, read by the loop.
+   *
+   * A ref and not state, for the reason the list import gives: the loop is
+   * an `async` function that captured its closure when it started, and a
+   * state value it read would be the one from that render.
+   */ const abandoned = useRef(false);
+    useEffect(()=>{
+        if (open) abandoned.current = false;
+    }, [
+        open
+    ]);
+    const reset = useCallback(()=>{
+        setFileName('');
+        setColumns([]);
+        setRows([]);
+        setOverCeiling(0);
+        setMapping({});
+        setResult(null);
+        setProgress(null);
+    }, []);
+    const handleClose = useCallback(()=>{
+        abandoned.current = true;
+        onClose();
+    }, [
+        onClose
+    ]);
+    const handleFile = useCallback(async (file)=>{
+        if (!file) return;
+        const contents = await file.text().catch(()=>'');
+        if (contents.length > LIST_IMPORT_MAX_CHARACTERS) {
+            return void enqueueSnackbar('That file is too large to read in one go. Split it and import the ' + 'pieces.', {
+                variant: 'warning',
+                allowDuplicate: true
+            });
+        }
+        const table = parseCsv(contents).filter((cells)=>cells.some((cell)=>String(cell != null ? cell : '').trim()));
+        if (table.length < 2) {
+            return void enqueueSnackbar('That file needs a header row and at least one row under it.', {
+                variant: 'warning',
+                allowDuplicate: true
+            });
+        }
+        const header = table[0].map((cell)=>String(cell != null ? cell : '').trim());
+        const body = table.slice(1);
+        setFileName(file.name);
+        setColumns(header);
+        setRows(body.slice(0, vocabulary.maxRows));
+        setOverCeiling(Math.max(0, body.length - vocabulary.maxRows));
+        setMapping(vocabulary.guessMapping(header));
+        setResult(null);
+        setProgress(null);
+    }, [
+        enqueueSnackbar,
+        vocabulary
+    ]);
+    const requiredMapped = Object.values(mapping).includes(vocabulary.requiredField);
+    /** Rows whose required cell the server would refuse. */ const unusableRows = useMemo(()=>{
+        var _ref, _vocabulary_unusable;
+        var _Object_entries_find;
+        const at = Number((_ref = (_Object_entries_find = Object.entries(mapping).find(([, target])=>target === vocabulary.requiredField)) == null ? void 0 : _Object_entries_find[0]) != null ? _ref : -1);
+        if (at < 0) return rows.length;
+        const unusable = (_vocabulary_unusable = vocabulary.unusable) != null ? _vocabulary_unusable : (cell)=>!cell.trim();
+        return rows.filter((cells)=>{
+            var _cells_at;
+            return unusable(String((_cells_at = cells[at]) != null ? _cells_at : ''));
+        }).length;
+    }, [
+        mapping,
+        rows,
+        vocabulary
+    ]);
+    const preview = useMemo(()=>rows.slice(0, vocabulary.previewRows).map((cells)=>vocabulary.mapRow(cells, mapping)), [
+        rows,
+        mapping,
+        vocabulary
+    ]);
+    const mappedTargets = useMemo(()=>Object.entries(mapping).sort(([a], [b])=>Number(a) - Number(b)).map(([, target])=>target), [
+        mapping
+    ]);
+    /*
+   * The `importMapping` zone (AGL-2917), hosted through the shell's renderer:
+   * a widget there reads each column's header and shape, never a cell, and
+   * proposes a matching, which replaces the table's above for the preview to
+   * show. A target this import does not offer, or one a column before it
+   * already took, is dropped, as the table itself would refuse it.
+   */ const MappingSlot = useConsoleWidgetSlot();
+    const { orgId } = useOrgDataScope({
+        hostId: hostId != null ? hostId : undefined,
+        orgId: mount == null ? void 0 : mount.orgId
+    });
+    const shapedColumns = useMemo(()=>importColumns(columns, rows), [
+        columns,
+        rows
+    ]);
+    const offeredTargets = useMemo(()=>{
+        var _vocabulary_customFields;
+        return new Set([
+            ...vocabulary.fields,
+            ...((_vocabulary_customFields = vocabulary.customFields) != null ? _vocabulary_customFields : []).map((field)=>customImportTarget(field.key))
+        ]);
+    }, [
+        vocabulary
+    ]);
+    const proposeMapping = useCallback((proposed)=>{
+        const taken = new Set();
+        const next = {};
+        for (const [column, target] of Object.entries(proposed).sort(([a], [b])=>Number(a) - Number(b))){
+            const index = Number(column);
+            if (!Number.isInteger(index) || index < 0 || index >= columns.length) continue;
+            if (!offeredTargets.has(target) || taken.has(target)) continue;
+            taken.add(target);
+            next[index] = target;
+        }
+        setMapping(next);
+    }, [
+        offeredTargets,
+        columns.length
+    ]);
+    const handleMap = useCallback((index, target)=>{
+        setMapping((previous)=>{
+            const next = {};
+            for (const [column, existing] of Object.entries(previous)){
+                // One column per target: choosing a target already taken moves it
+                // here rather than importing one field from two columns.
+                if (Number(column) !== index && existing !== target) {
+                    next[Number(column)] = existing;
+                }
+            }
+            if (target !== SKIP_TARGET) next[index] = target;
+            return next;
+        });
+    }, []);
+    /**
+   * Runs the file, one bounded request at a time.
+   *
+   * Every chunk's result is folded into the running total as it arrives,
+   * so a file that stops halfway — a lost connection, a closed drawer —
+   * still reports what it did rather than nothing.
+   */ const handleImport = useCallback(async ()=>{
+        if (busy || !rows.length || !requiredMapped || !createHostId) return;
+        setBusy(true);
+        let total = vocabulary.emptyResult();
+        setResult(total);
+        setProgress({
+            sent: 0,
+            total: rows.length
+        });
+        try {
+            for(let offset = 0; offset < rows.length; offset += vocabulary.chunkSize){
+                if (abandoned.current) return;
+                const chunk = rows.slice(offset, offset + vocabulary.chunkSize).map((cells)=>vocabulary.mapRow(cells, mapping));
+                const response = await authorizedFetch(user, vocabulary.route, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        hostId: createHostId,
+                        rows: chunk
+                    })
+                });
+                const payload = await response.json().catch(()=>({}));
+                if (!response.ok) {
+                    var _ref;
+                    return void enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The import could not continue.', {
+                        variant: 'warning',
+                        allowDuplicate: true
+                    });
+                }
+                total = vocabulary.mergeResults(total, payload, offset);
+                setResult(total);
+                setProgress({
+                    sent: Math.min(offset + chunk.length, rows.length),
+                    total: rows.length
+                });
+            }
+            enqueueSnackbar('Import finished', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (unused) {
+            enqueueSnackbar('The import could not continue.', {
+                variant: 'warning',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        busy,
+        rows,
+        requiredMapped,
+        mapping,
+        user,
+        createHostId,
+        enqueueSnackbar,
+        vocabulary
+    ]);
+    const handleDownloadSkipped = useCallback(()=>{
+        if (!(result == null ? void 0 : result.skipped.length)) return;
+        downloadTextFile(vocabulary.skippedFileName, 'text/csv', vocabulary.skippedCsv(columns, result.skipped.map((entry)=>{
+            var _rows_entry_index;
+            return {
+                cells: (_rows_entry_index = rows[entry.index]) != null ? _rows_entry_index : [],
+                reason: entry.reason
+            };
+        })));
+    }, [
+        result,
+        columns,
+        rows,
+        vocabulary
+    ]);
+    const finished = !!result && !busy;
+    return /*#__PURE__*/ _jsx(NavigationDrawerComponent, {
+        open: open,
+        anchor: "right",
+        variant: "temporary",
+        onClose: handleClose,
+        AppBarProps: {
+            color: 'surface'
+        },
+        appBarLeft: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(IconButton, {
+                    color: "inherit",
+                    edge: "start",
+                    onClick: handleClose,
+                    sx: {
+                        mr: 2
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: ICON_VARIANT_CLOSE.path
+                        }),
+                        /*#__PURE__*/ _jsx(SrOnly, {
+                            children: 'close drawer'
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h6",
+                    component: "div",
+                    children: vocabulary.title
+                }),
+                /*#__PURE__*/ _jsx(HelpTip, _extends({}, vocabulary.help))
+            ]
+        }),
+        appBarRight: /*#__PURE__*/ _jsx(Button, {
+            variant: "outlined",
+            color: "inherit",
+            onClick: handleClose,
+            children: finished ? 'Done' : 'Cancel'
+        }),
+        children: /*#__PURE__*/ _jsx(Container, {
+            gutterY: true,
+            children: /*#__PURE__*/ _jsx(Stack, {
+                spacing: 2,
+                children: result ? /*#__PURE__*/ _jsx(ImportResultPanel, {
+                    result: result,
+                    progress: progress,
+                    busy: busy,
+                    vocabulary: vocabulary,
+                    onDownloadSkipped: handleDownloadSkipped,
+                    onAnother: reset
+                }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CrmSitePicker, {
+                            hostId: hostId,
+                            disabled: busy,
+                            helperText: vocabulary.sitePickerHelperText
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: vocabulary.intro
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                alignItems: 'center',
+                                flexWrap: 'wrap',
+                                rowGap: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs(Button, {
+                                    variant: "outlined",
+                                    component: "label",
+                                    disabled: busy,
+                                    children: [
+                                        'Choose file',
+                                        /*#__PURE__*/ _jsx("input", {
+                                            type: "file",
+                                            accept: ".csv,text/csv",
+                                            hidden: true,
+                                            onChange: (event)=>{
+                                                var _event_target_files;
+                                                void handleFile((_event_target_files = event.target.files) == null ? void 0 : _event_target_files[0]);
+                                                event.target.value = '';
+                                            }
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    disabled: busy,
+                                    onClick: ()=>downloadTextFile(vocabulary.templateFileName, 'text/csv', vocabulary.templateCsv()),
+                                    children: 'Download template'
+                                }),
+                                fileName ? /*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    variant: "outlined",
+                                    label: fileName
+                                }) : null,
+                                rows.length ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: `${rows.length.toLocaleString()} rows`
+                                }) : null
+                            ]
+                        }),
+                        overCeiling > 0 ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "warning",
+                            children: `This file has ${(rows.length + overCeiling).toLocaleString()} ` + `rows. Only the first ${vocabulary.maxRows.toLocaleString()} ` + 'are imported — split the file and import the rest ' + 'separately.'
+                        }) : null,
+                        columns.length ? /*#__PURE__*/ _jsx(ImportMappingTable, {
+                            columns: columns,
+                            sample: (_rows_ = rows[0]) != null ? _rows_ : [],
+                            mapping: mapping,
+                            vocabulary: vocabulary,
+                            onMap: handleMap
+                        }) : null,
+                        columns.length && MappingSlot && vocabulary.collection ? /*#__PURE__*/ _jsx(MappingSlot, {
+                            slot: "importMapping",
+                            hostId: hostId,
+                            orgId: orgId != null ? orgId : undefined,
+                            collection: vocabulary.collection,
+                            columns: shapedColumns,
+                            mapping: mapping,
+                            proposeMapping: (proposed)=>proposeMapping(proposed)
+                        }) : null,
+                        columns.length > 0 && !requiredMapped ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "warning",
+                            children: vocabulary.requiredWarning
+                        }) : null,
+                        columns.length > 0 && requiredMapped ? /*#__PURE__*/ _jsx(ImportPreviewTable, {
+                            targets: mappedTargets,
+                            preview: preview,
+                            total: rows.length,
+                            unusable: unusableRows,
+                            vocabulary: vocabulary
+                        }) : null,
+                        /*#__PURE__*/ _jsx(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                justifyContent: 'flex-end'
+                            },
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                // Held until the capturing site is known.
+                                disabled: busy || !rows.length || !requiredMapped || !createHostId,
+                                onClick: ()=>void handleImport(),
+                                children: rows.length ? `Import ${rows.length.toLocaleString()} rows` : 'Import'
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+CsvImportDrawer.displayName = 'CsvImportDrawer';
+/**
+ * WHICH COLUMN IS WHICH.
+ *
+ * One row per column in the file: its header, the first row's value under
+ * it so the operator can tell "Title" the job from "Title" the honorific,
+ * and a select naming where it goes. The proposal came from the alias
+ * table; every row of this table is the operator's to overrule.
+ */ function ImportMappingTable(props) {
+    const { columns, sample, mapping, vocabulary, onMap } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                children: 'Columns'
+            }),
+            /*#__PURE__*/ _jsxs(ScrollTable, {
+                size: "small",
+                children: [
+                    /*#__PURE__*/ _jsx(TableHead, {
+                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                            children: [
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: 'Column'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: 'First row'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: 'Imports as'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(TableBody, {
+                        children: columns.map((column, index)=>{
+                            var _sample_index, _mapping_index, _vocabulary_customFields;
+                            return /*#__PURE__*/ _jsxs(TableRow, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        children: column || `Column ${index + 1}`
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        children: /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body2",
+                                            color: "text.secondary",
+                                            noWrap: true,
+                                            children: String((_sample_index = sample[index]) != null ? _sample_index : '')
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        children: /*#__PURE__*/ _jsxs(TextField, {
+                                            select: true,
+                                            size: "small",
+                                            value: (_mapping_index = mapping[index]) != null ? _mapping_index : SKIP_TARGET,
+                                            onChange: (event)=>onMap(index, event.target.value),
+                                            sx: {
+                                                minWidth: 220
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: SKIP_TARGET,
+                                                    children: 'Do not import'
+                                                }),
+                                                vocabulary.fields.map((field)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                        value: field,
+                                                        children: vocabulary.fieldLabels[field]
+                                                    }, field)),
+                                                ((_vocabulary_customFields = vocabulary.customFields) != null ? _vocabulary_customFields : []).map((field)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                        value: customImportTarget(field.key),
+                                                        children: `${field.label} (custom)`
+                                                    }, field.key))
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }, `${column}-${index}`);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+/**
+ * The first rows, as the mapping reads them.
+ *
+ * Verbatim cell values under the fields they were mapped to — not the
+ * normalized ones, because normalization is the server's and a preview that
+ * showed a cleaned phone number would be promising a result the route may
+ * refuse. What it does say is how many rows have no usable required cell,
+ * since that is the one refusal the operator can fix before sending.
+ */ function ImportPreviewTable(props) {
+    const { targets, preview, total, unusable, vocabulary } = props;
+    const cell = (row, target)=>{
+        var _row_target;
+        const customKey = customImportTargetKey(target);
+        if (customKey) {
+            var _ref;
+            var _row_custom;
+            return String((_ref = (_row_custom = row['custom']) == null ? void 0 : _row_custom[customKey]) != null ? _ref : '');
+        }
+        return String((_row_target = row[target]) != null ? _row_target : '');
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                children: `Preview — first ${Math.min(preview.length, vocabulary.previewRows)} of ${total.toLocaleString()}`
+            }),
+            unusable > 0 ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: vocabulary.unusableNotice(unusable, total)
+            }) : null,
+            /*#__PURE__*/ _jsx(Box, {
+                children: /*#__PURE__*/ _jsxs(ScrollTable, {
+                    size: "small",
+                    children: [
+                        /*#__PURE__*/ _jsx(TableHead, {
+                            children: /*#__PURE__*/ _jsx(TableRow, {
+                                children: targets.map((target)=>/*#__PURE__*/ _jsx(TableCell, {
+                                        children: targetLabel(target, vocabulary)
+                                    }, target))
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(TableBody, {
+                            children: preview.map((row, index)=>/*#__PURE__*/ _jsx(TableRow, {
+                                    children: targets.map((target)=>/*#__PURE__*/ _jsx(TableCell, {
+                                            children: /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
+                                                noWrap: true,
+                                                sx: {
+                                                    maxWidth: 240
+                                                },
+                                                children: cell(row, target)
+                                            })
+                                        }, target))
+                                }, index))
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+/** How far the run has got, and what it did. */ function ImportResultPanel(props) {
+    var _ref, _ref1;
+    const { result, progress, busy, vocabulary, onDownloadSkipped, onAnother } = props;
+    const percent = (progress == null ? void 0 : progress.total) ? Math.min(progress.sent / progress.total * 100, 100) : 0;
+    const skippedByReason = useMemo(()=>{
+        const counts = {};
+        for (const entry of result.skipped){
+            var _counts_entry_reason;
+            counts[entry.reason] = ((_counts_entry_reason = counts[entry.reason]) != null ? _counts_entry_reason : 0) + 1;
+        }
+        return Object.entries(counts);
+    }, [
+        result.skipped
+    ]);
+    const droppedFields = Object.entries(result.dropped).filter(([, count])=>count > 0);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: busy ? `${((_ref = progress == null ? void 0 : progress.sent) != null ? _ref : 0).toLocaleString()} of ${((_ref1 = progress == null ? void 0 : progress.total) != null ? _ref1 : 0).toLocaleString()} rows sent.` : `Finished. ${result.created.toLocaleString()} added, ` + `${result.merged.toLocaleString()} updated, ` + `${result.skipped.length.toLocaleString()} skipped.`
+            }),
+            /*#__PURE__*/ _jsx(LinearProgress, {
+                variant: "determinate",
+                value: percent,
+                sx: {
+                    borderRadius: 1
+                }
+            }),
+            skippedByReason.length ? /*#__PURE__*/ _jsxs(ScrollTable, {
+                size: "small",
+                children: [
+                    /*#__PURE__*/ _jsx(TableHead, {
+                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                            children: [
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: 'Skipped'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    align: "right",
+                                    children: 'Rows'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(TableBody, {
+                        children: skippedByReason.map(([reason, count])=>{
+                            var _vocabulary_skipLabels_reason;
+                            return /*#__PURE__*/ _jsxs(TableRow, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        children: (_vocabulary_skipLabels_reason = vocabulary.skipLabels[reason]) != null ? _vocabulary_skipLabels_reason : reason
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        children: count
+                                    })
+                                ]
+                            }, reason);
+                        })
+                    })
+                ]
+            }) : null,
+            droppedFields.length ? /*#__PURE__*/ _jsxs(Alert, {
+                severity: "info",
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: 'Some values could not be read'
+                    }),
+                    'The rows were imported without them: ' + droppedFields.map(([field, count])=>`${droppedFieldLabel(field, vocabulary)} (${count})`).join(', ') + '.'
+                ]
+            }) : null,
+            result.ownersUnresolved.length ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: 'No team member has these owner addresses, so those rows ' + `have no owner: ${result.ownersUnresolved.slice(0, 5).join(', ')}` + (result.ownersUnresolved.length > 5 ? ` and ${result.ownersUnresolved.length - 5} more.` : '.')
+            }) : null,
+            vocabulary.resultExtras == null ? void 0 : vocabulary.resultExtras.call(vocabulary, result),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    justifyContent: 'flex-end'
+                },
+                children: [
+                    result.skipped.length ? /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        onClick: onDownloadSkipped,
+                        children: 'Download skipped rows'
+                    }) : null,
+                    !busy ? /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        onClick: onAnother,
+                        children: 'Import another file'
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+/**
+ * An "Import CSV" button that mounts its drawer only once it has been
+ * opened, so the list pays nothing — no hooks, no listeners — for a
+ * feature the operator has not reached for.
+ */ export function CsvImportButton(props) {
+    const { label = 'Import CSV', children } = props;
+    const [open, setOpen] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const handleOpen = useCallback(()=>{
+        setMounted(true);
+        setOpen(true);
+    }, []);
+    const handleClose = useCallback(()=>setOpen(false), []);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                onClick: handleOpen,
+                children: label
+            }),
+            mounted ? children(open, handleClose) : null
+        ]
+    });
+}
+CsvImportButton.displayName = 'CsvImportButton';
+export default CsvImportDrawer;
+
+//# sourceMappingURL=csv-import-drawer.js.map