web/src/customer-grid/ImportDialog.tsx

// ---------------------------------------------------------------------------
// customer-grid / ImportDialog.tsx
//
// ⭐⭐ WAVE-29 T25 (owner item 6) — IMPORT A SPREADSHEET INTO A USER DATABASE.
//
// Three steps in one window, because each answers the question the last one raised:
//   1. pick a file      -> the server parses it and says which columns it found
//   2. map its columns  -> to fields, or to nothing; unmapped is the default
//   3. check + import   -> every value coerced FIRST, the problems named BEFORE anything writes
//
// ⛔ APPEND-ONLY IN V1, AND THE DIALOG SAYS SO. Nothing is matched, nothing is overwritten — every
// row becomes a new record. The only bulk-merge primitive in the product is upsert-BY-KEY shaped,
// and choosing a key on the user's behalf is how an import quietly rewrites rows somebody edited.
// The sentence is on screen rather than in a doc, because that is where the decision is made.
//
// ⛔ REUSE, NOT A SECOND COERCER. `clipboard.coerceClipboardValue` is THE client answer to "can
// this text be this field's value" (it is what a paste already goes through), and
// `POST /api/v1/uploads/tabular` is the parser that already exists — 5 MB / 20,000 rows, xlsx AND
// csv, and it never writes a row. A second copy of either is a second set of rules for one
// question ([[one-evaluator-per-question]]).
//
// ⚠ THE SERVER IS THE WALL, not this dialog. It refuses computed columns BY NAME and refuses the
// whole batch if it would pass the row cap. What happens here is the part a person needs before
// they press the button: which column goes where, and what will not survive the trip.
// ---------------------------------------------------------------------------

import { useMemo, useRef, useState } from "react";
// ⚠ From `apiContract`, which is where these two are DECLARED — not re-exported from
// `apiBridge`, which does not export them and is another session's fence this wave.
import { API_V1, CREDENTIALS } from "../apiContract";
import { isImportTarget } from "./types";
import type { Field } from "./types";
// ⭐ W29-T76 — the plan lives in a pure module so a test can EXECUTE it against the server's real
// payload. This file holds the WINDOW; `importPlan.ts` holds what would be written.
import { buildImportPlan } from "./importPlan";
import type { ImportMapping, ParsedUpload } from "./importPlan";
import "./ImportDialog.css";

/** The one header a JSON POST needs. `apiBridge` keeps its own module-local copy; this is a

 *  literal rather than an import because that constant is not exported and that file is not

 *  this session's to change. */
const JSON_HEADERS = { "Content-Type": "application/json" };

/** The upload door's answer (`routes_uploads.tabular`) — declared in `importPlan.ts`, beside the

 *  only code that reads its shape. ⛔ It is COLUMN-MAJOR; the copy that used to live here said

 *  `string[][]` and that one wrong word is why nothing ever imported. */
type Parsed = ParsedUpload;

export interface ImportDialogProps {
  /** The target database's fields — the mapping targets, before this file filters them. */
  fields: Field[];
  /** `ut_*` table key; the import door is per-table. */
  scope: string;
  /** How the database calls itself, for the sentence that says where rows are going. */
  tableName: string;
  /** Fired after a successful import so the host can re-read its rows. */
  onImported: (count: number) => void;
  onClose: () => void;
}

const NONE = "";

export default function ImportDialog({

  fields,

  scope,

  tableName,

  onImported,

  onClose,

}: ImportDialogProps): React.ReactElement {
  const [parsed, setParsed] = useState<Parsed | null>(null);
  const [mapping, setMapping] = useState<ImportMapping>({});
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const fileRef = useRef<HTMLInputElement | null>(null);

  const targets = useMemo(() => fields.filter(isImportTarget), [fields]);

  /**

   * The parse. `FormData` and NO `Content-Type` header: the browser has to set the multipart

   * boundary itself, and spelling the header by hand is the classic way to make a working upload

   * 400 with a message about a missing part.

   */
  async function pick(file: File): Promise<void> {
    setBusy(true);
    setError("");
    try {
      const form = new FormData();
      form.append("file", file);
      const res = await fetch(`${API_V1}/uploads/tabular`, {
        method: "POST",
        credentials: CREDENTIALS,
        body: form,
      });
      const body = (await res.json().catch(() => null)) as
        | (Parsed & { error?: { message?: string } })
        | null;
      if (!res.ok || !body) {
        setError(
          body?.error?.message ??
            `That file could not be read (the server answered ${res.status}).`
        );
        return;
      }
      setParsed(body);
      // ⭐ AUTO-MAP BY NAME, case- and space-insensitively, because the overwhelmingly common
      // case is a sheet exported from this very grid. Every guess is VISIBLE in a picker the
      // user can change — a silent auto-map is only dangerous when it is also invisible.
      const byName = new Map(
        targets.map((f) => [f.label.trim().toLowerCase(), f.key] as const)
      );
      const guess: ImportMapping = {};
      (body.columns ?? []).forEach((name, i) => {
        const hit = byName.get(String(name).trim().toLowerCase());
        if (hit) guess[i] = hit;
      });
      setMapping(guess);
    } catch {
      setError("That file could not be read.");
    } finally {
      setBusy(false);
    }
  }

  /**

   * What would be written, and what cannot be. The work is `importPlan.buildImportPlan` — a pure

   * module, so the node suite executes it against the server's real payload rather than grepping

   * this file for the shape of a loop.

   */
  const plan = useMemo(
    () => buildImportPlan(parsed, mapping, targets),
    [parsed, mapping, targets]
  );

  async function run(): Promise<void> {
    setBusy(true);
    setError("");
    try {
      const res = await fetch(
        `${API_V1}/tables/${encodeURIComponent(scope)}/rows/import`,
        {
          method: "POST",
          credentials: CREDENTIALS,
          headers: JSON_HEADERS,
          body: JSON.stringify({ rows: plan.rows }),
        }
      );
      const body = (await res.json().catch(() => null)) as
        | { imported?: number; error?: { message?: string } }
        | null;
      if (!res.ok) {
        // The server's sentence beats anything invented here: it names the column, or the cap.
        setError(body?.error?.message ?? `The server answered ${res.status}.`);
        return;
      }
      onImported(body?.imported ?? plan.rows.length);
      onClose();
    } catch {
      setError("Nothing was imported — the request did not complete.");
    } finally {
      setBusy(false);
    }
  }

  const mappedCount = Object.values(mapping).filter((k) => k !== NONE).length;

  return (
    <div className="cg-import-scrim" role="presentation" onClick={onClose}>

      <div

        className="cg-import"

        role="dialog"

        aria-modal="true"

        aria-label={`Import records into ${tableName}`}

        onClick={(event) => event.stopPropagation()}

      >

        <div className="cg-import-head">

          <h2>Import records</h2>

          <button type="button" className="cg-import-x" aria-label="Close" onClick={onClose}>

            ×

          </button>

        </div>



        {!parsed ? (

          <div className="cg-import-body">

            <p className="cg-import-lede">

              Add records to <strong>{tableName}</strong> from a spreadsheet. Excel

              (<code>.xlsx</code>) or <code>.csv</code>, up to 5&nbsp;MB.

            </p>

            <p className="cg-import-note">

              Every row becomes a <strong>new record</strong>. Nothing already in this database is

              matched or overwritten.

            </p>

            <input

              ref={fileRef}

              type="file"

              accept=".xlsx,.csv"

              className="cg-import-file"

              onChange={(event) => {

                const file = event.currentTarget.files?.[0];

                if (file) void pick(file);

              }}

            />

          </div>

        ) : (

          <div className="cg-import-body">

            <p className="cg-import-lede">

              {parsed.rows.toLocaleString()} row{parsed.rows === 1 ? "" : "s"} read

              {parsed.truncated ? " (the first 20,000 — the rest were not read)" : ""}. Choose

              where each column goes.

            </p>

            <div className="cg-import-map" role="list">

              {parsed.columns.map((name, i) => (

                <label className="cg-import-row" role="listitem" key={`${name}:${i}`}>

                  <span className="cg-import-col" title={name}>

                    {name || `Column ${i + 1}`}

                  </span>

                  <select

                    value={mapping[i] ?? NONE}

                    onChange={(event) => {

                      const next = event.target.value;

                      setMapping((cur) => ({ ...cur, [i]: next }));

                    }}

                  >

                    <option value={NONE}>Don&rsquo;t import</option>

                    {targets.map((f) => (

                      <option key={f.key} value={f.key}>

                        {f.label}

                      </option>

                    ))}

                  </select>

                </label>

              ))}

            </div>

            {plan.problems.length > 0 && (

              <div className="cg-import-problems" role="alert">

                <strong>

                  {plan.problems.length.toLocaleString()} value

                  {plan.problems.length === 1 ? "" : "s"} cannot go in the column

                  {plan.problems.length === 1 ? "" : "s"} chosen for them

                </strong>

                <ul>

                  {plan.problems.slice(0, 5).map((p, i) => (

                    <li key={i}>

                      Row {p.row}, {p.column}: {p.value ? `“${p.value}”` : "(blank)"} is not a

                      valid {p.field}

                    </li>

                  ))}

                </ul>

                {plan.problems.length > 5 && (

                  <p>…and {(plan.problems.length - 5).toLocaleString()} more.</p>

                )}

                <p>

                  Fix them in the file, or point that column somewhere else — nothing has been

                  imported yet.

                </p>

              </div>

            )}

          </div>

        )}



        {error && (

          <p className="cg-import-error" role="alert">

            {error}

          </p>

        )}



        <div className="cg-import-foot">

          {parsed && (

            <span className="cg-import-count">

              {mappedCount === 0

                ? "No columns chosen yet"

                : `${plan.rows.length.toLocaleString()} record${

                    plan.rows.length === 1 ? "" : "s"

                  } from ${mappedCount} column${mappedCount === 1 ? "" : "s"}`}

            </span>

          )}

          <button type="button" className="cg-btn" onClick={onClose}>

            Cancel

          </button>

          {parsed && (

            <button

              type="button"

              className="cg-btn cg-btn--primary"

              /* ⛔ DISABLED WHILE ANY VALUE IS REFUSED. The alternative — import the good rows and

                 report the rest — leaves somebody reconciling a spreadsheet against a table by

                 hand, and neither existing write door demonstrates a partial policy. Refusing

                 whole is recoverable in one edit; a half-import is not. */

              disabled={busy || plan.rows.length === 0 || plan.problems.length > 0}

              onClick={() => void run()}

            >

              {busy ? "Importing…" : `Import ${plan.rows.length.toLocaleString()} record${

                plan.rows.length === 1 ? "" : "s"

              }`}

            </button>

          )}

        </div>

      </div>

    </div>
  );
}