kempo-inventory 0.2.0

package/public/api/import/preview/POST.js

@@ -0,0 +1,30 @@
+import authorize from '../../../../server/utils/authorize.js';
+import { getSetting } from 'kempo/server/sdk.js';
+import { previewImport } from '../../../../server/utils/importFile.js';
+import { stage } from '../../../../server/utils/importStage.js';
+
+/*
+  Step one of an import: the request body IS the file (a .json or a .zip), sent as raw bytes. Checks it and
+  reports what importing it would do; changes nothing in the inventory. Keeps the upload for the second step
+  and returns its `importId`.
+
+  Top tier only (fields:manage, the kempo-inventory:admin group). The permission is checked before anything
+  is read from the upload: a caller without it gets 401/403 and the bytes are never looked at, parsed or
+  stored. (kempo-server itself has already received the body by the time any route runs, for every route on
+  the site, up to its `maxBodySize`; lower that in the site's kempo-server config to bound it.)
+*/
+export default async (request, response) => {
+  const [authError, auth] = await authorize(request, 'fields:manage');
+  if(authError) return response.status(authError.code).json({ error: authError.msg });
+
+  const [, maxMb] = await getSetting('kempo-inventory', 'import_max_mb', 250);
+  const bytes = await request.buffer();
+  if(!bytes.length) return response.status(400).json({ error: 'No file was uploaded' });
+  if(bytes.length > Number(maxMb) * 1024 * 1024) return response.status(413).json({ error: `That file is larger than the ${maxMb} MB import limit` });
+
+  const [error, report] = await previewImport(bytes, { userId: auth.userId });
+  if(error) return response.status(error.code).json({ error: error.msg });
+
+  const importId = await stage(bytes, auth.userId, String(request.query.name ?? ''));
+  response.json({ ...report, importId });
+};

package/public/api/items/GET.js

@@ -0,0 +1,35 @@
+import { authorizeRead, forCaller } from '../../../server/utils/access.js';
+import { parseTagParam } from '../../../server/utils/tags.js';
+import { getItems } from '../../../server/utils/items.js';
+
+export default async (request, response) => {
+  const [authError, access] = await authorizeRead(request);
+  if(authError) return response.status(authError.code).json({ error: authError.msg });
+
+  const { q, category, tag, uncategorised, filters, owner, limit, offset } = request.query;
+
+  let parsedFilters = {};
+  if(filters){
+    try {
+      parsedFilters = JSON.parse(filters);
+    } catch {
+      return response.status(400).json({ error: 'filters must be a JSON object' });
+    }
+    if(parsedFilters === null || typeof parsedFilters !== 'object' || Array.isArray(parsedFilters)){
+      return response.status(400).json({ error: 'filters must be a JSON object' });
+    }
+  }
+
+  const [error, data] = await getItems({
+    q,
+    category,
+    tag: parseTagParam(tag),
+    uncategorised: uncategorised === 'true',
+    filters: parsedFilters,
+    owner,
+    limit: Math.min(parseInt(limit) || 50, 200),
+    offset: parseInt(offset) || 0,
+  });
+  if(error) return response.status(error.code).json({ error: error.msg });
+  response.json({ ...data, items: data.items.map(item => forCaller(item, access)) });
+};

package/public/api/items/POST.js

@@ -0,0 +1,12 @@
+import authorize from '../../../server/utils/authorize.js';
+import { createItem } from '../../../server/utils/items.js';
+
+export default async (request, response) => {
+  const [authError, auth] = await authorize(request, 'items:create');
+  if(authError) return response.status(authError.code).json({ error: authError.msg });
+
+  const { sku, name, description, category, tags, quantity, fields } = request.body || {};
+  const [error, item] = await createItem({ sku, name, description, category, tags, quantity, fields, userId: auth.userId });
+  if(error) return response.status(error.code).json({ error: error.msg });
+  response.status(201).json({ item });
+};

package/public/api/items/[id]/DELETE.js

@@ -0,0 +1,11 @@
+import authorize from '../../../../server/utils/authorize.js';
+import { deleteItem } from '../../../../server/utils/items.js';
+
+export default async (request, response) => {
+  const [authError, auth] = await authorize(request, 'items:delete');
+  if(authError) return response.status(authError.code).json({ error: authError.msg });
+
+  const [error, result] = await deleteItem(request.params.id, { userId: auth.userId });
+  if(error) return response.status(error.code).json({ error: error.msg });
+  response.json(result);
+};

package/public/api/items/[id]/GET.js

@@ -0,0 +1,15 @@
+import { authorizeRead, forCaller } from '../../../../server/utils/access.js';
+import { getItem, getMovements, getLinked, getMedia } from '../../../../server/utils/items.js';
+
+export default async (request, response) => {
+  const [authError, access] = await authorizeRead(request);
+  if(authError) return response.status(authError.code).json({ error: authError.msg });
+
+  const [error, item] = await getItem(request.params.id);
+  if(error) return response.status(error.code).json({ error: error.msg });
+  /* The stock history is all counts, so it is only for people who manage stock. */
+  const [, movements] = access.canSeeStock ? await getMovements({ itemId: item.id, limit: 100 }) : [null, []];
+  const [, linked] = await getLinked(item);
+  const [, media] = await getMedia(item);
+  response.json({ item: forCaller(item, access), movements: movements || [], linked: linked || {}, media: media || {} });
+};

package/public/api/items/[id]/PATCH.js

@@ -0,0 +1,12 @@
+import authorize from '../../../../server/utils/authorize.js';
+import { updateItem } from '../../../../server/utils/items.js';
+
+export default async (request, response) => {
+  const [authError, auth] = await authorize(request, 'items:update');
+  if(authError) return response.status(authError.code).json({ error: authError.msg });
+
+  const { sku, name, description, category, tags, fields } = request.body || {};
+  const [error, item] = await updateItem(request.params.id, { sku, name, description, category, tags, fields, userId: auth.userId });
+  if(error) return response.status(error.code).json({ error: error.msg });
+  response.json({ item });
+};

package/public/api/items/[id]/adjust/POST.js

@@ -0,0 +1,12 @@
+import authorize from '../../../../../server/utils/authorize.js';
+import { adjustStock } from '../../../../../server/utils/items.js';
+
+export default async (request, response) => {
+  const [authError, auth] = await authorize(request, 'stock:adjust');
+  if(authError) return response.status(authError.code).json({ error: authError.msg });
+
+  const { delta, reason, note } = request.body || {};
+  const [error, item] = await adjustStock(request.params.id, { delta, reason, note, userId: auth.userId });
+  if(error) return response.status(error.code).json({ error: error.msg });
+  response.json({ item });
+};

package/public/api/movements/GET.js

@@ -0,0 +1,17 @@
+import { authorizeRead } from '../../../server/utils/access.js';
+import { getMovements } from '../../../server/utils/items.js';
+
+export default async (request, response) => {
+  const [authError, access] = await authorizeRead(request);
+  if(authError) return response.status(authError.code).json({ error: authError.msg });
+  if(!access.canSeeStock) return response.status(403).json({ error: 'Insufficient permissions' });
+
+  const { itemId, limit, offset } = request.query;
+  const [error, movements] = await getMovements({
+    itemId,
+    limit: Math.min(parseInt(limit) || 50, 200),
+    offset: parseInt(offset) || 0,
+  });
+  if(error) return response.status(error.code).json({ error: error.msg });
+  response.json({ movements });
+};

package/public/api/tags/GET.js

@@ -0,0 +1,12 @@
+import { authorizeRead } from '../../../server/utils/access.js';
+import { getTags } from '../../../server/utils/tagList.js';
+
+/* Every tag in use, for suggestions and filters: [{ tag, count }]. Readable like items are. */
+export default async (request, response) => {
+  const [authError] = await authorizeRead(request);
+  if(authError) return response.status(authError.code).json({ error: authError.msg });
+
+  const [error, tags] = await getTags({ q: request.query.q, limit: Math.min(parseInt(request.query.limit) || 100, 500) });
+  if(error) return response.status(error.code).json({ error: error.msg });
+  response.json({ tags });
+};

package/public/components/BarcodeScanner.js

@@ -0,0 +1,198 @@
+import Dialog from '/kempo-ui/components/Dialog.js';
+
+/*
+  Scan barcodes with the device's camera. Two ways in:
+
+    import { scanBarcode, startScanner } from '/inventory/components/BarcodeScanner.js';
+
+    const code = await scanBarcode();                 // a dialog; the code's text, or null if cancelled
+
+    const scanner = await startScanner({ video, onCode: code => ... });   // your own <video>, keeps going
+    scanner.setPaused(true);                          // ignore codes for a while (e.g. a form is open)
+    scanner.stop();                                   // release the camera
+
+  Uses the browser's own BarcodeDetector where it exists (Chrome on Android), which is fast and
+  needs no code of ours. Everywhere else (iPhone, Firefox, most desktops) it falls back to ZXing,
+  bundled in /inventory/vendor/ so nothing is loaded from a CDN.
+
+  Cameras are only available to pages served over HTTPS (or from localhost), so on a plain-http
+  address this explains why rather than failing silently.
+*/
+
+const FORMATS = ['ean_13', 'ean_8', 'upc_a', 'upc_e', 'code_128', 'code_39', 'code_93', 'codabar', 'itf', 'qr_code', 'data_matrix', 'pdf417', 'aztec'];
+
+const CONSTRAINTS = { video: { facingMode: { ideal: 'environment' } }, audio: false };
+
+/*
+  How long a code has to be out of view before it counts as a new scan. Long enough that a code
+  flickering in and out of focus is not read twice, short enough that picking up the next bottle
+  of the same paint is.
+*/
+const GAP_MS = 700;
+
+const POLL_MS = 120;
+
+/*
+  Why the camera cannot be used here, as a sentence for the user, or null when it can.
+*/
+export const cameraProblem = () => {
+  if(!window.isSecureContext){
+    return 'The camera only works on secure (https) pages. Open this site over https, or from localhost.';
+  }
+  if(!navigator.mediaDevices?.getUserMedia) return 'This browser cannot access a camera.';
+  return null;
+};
+
+export const explainCameraError = error => {
+  if(error?.name === 'NotAllowedError') return 'Camera access was blocked. Allow the camera for this site in the browser settings, then try again.';
+  if(error?.name === 'NotFoundError') return 'No camera was found on this device.';
+  if(error?.name === 'NotReadableError') return 'The camera is in use by another app.';
+  return error?.message ? `Could not start the camera: ${error.message}` : 'Could not start the camera.';
+};
+
+/*
+  The native detector, or null when this browser has none or supports none of our formats.
+*/
+const nativeDetector = async () => {
+  if(!('BarcodeDetector' in window)) return null;
+  try {
+    const supported = await window.BarcodeDetector.getSupportedFormats();
+    const formats = FORMATS.filter(format => supported.includes(format));
+    return formats.length ? new window.BarcodeDetector({ formats }) : null;
+  } catch {
+    return null;
+  }
+};
+
+/*
+  Starts the camera in `video` and calls `onCode(text)` once each time a code comes into view. The
+  same code is not reported again until it has been out of view for a moment, so holding a bottle
+  still gives one scan, and scanning the next bottle of the same paint gives another.
+
+  Rejects (with the underlying camera error, or an Error carrying a sentence for the user) if the
+  camera cannot be started. Resolves to { stop, setPaused }.
+*/
+export const startScanner = async ({ video, onCode }) => {
+  const problem = cameraProblem();
+  if(problem) throw new Error(problem);
+
+  video.setAttribute('playsinline', '');
+  video.muted = true;
+  video.autoplay = true;
+
+  let stopped = false;
+  let paused = false;
+  let armed = true;
+  let lastSeen = 0;
+  let stopCamera = () => {};
+
+  /* `text` is the code in view this frame, or null when there is none. */
+  const frame = text => {
+    if(stopped) return;
+    const now = performance.now();
+    if(text){
+      lastSeen = now;
+      if(armed && !paused){
+        armed = false;
+        onCode(text);
+      }
+    } else if(now - lastSeen > GAP_MS){
+      armed = true;
+    }
+  };
+
+  const detector = await nativeDetector();
+
+  if(detector){
+    const stream = await navigator.mediaDevices.getUserMedia(CONSTRAINTS);
+    stopCamera = () => stream.getTracks().forEach(track => track.stop());
+    video.srcObject = stream;
+    await video.play();
+    const look = async () => {
+      if(stopped) return;
+      try {
+        const [found] = await detector.detect(video);
+        frame(found?.rawValue ?? null);
+      } catch {
+        frame(null);   // a frame that cannot be read is just a frame without a code in it
+      }
+      setTimeout(look, POLL_MS);
+    };
+    look();
+  } else {
+    const { BrowserMultiFormatReader } = await import('/inventory/vendor/zxing-browser.js');
+    const controls = await new BrowserMultiFormatReader().decodeFromConstraints(CONSTRAINTS, video, result => {
+      frame(result ? result.getText() : null);
+    });
+    stopCamera = () => controls.stop();
+  }
+
+  return {
+    stop(){
+      stopped = true;
+      stopCamera();
+    },
+    /*
+      Resuming does not re-fire a code that is still in view: it has to leave and come back, which
+      is what stops a result being dismissed and then immediately scanned again.
+    */
+    setPaused(value){
+      paused = value;
+      if(!value) armed = false;
+    },
+  };
+};
+
+/*
+  A one-shot scan in a dialog: resolves to the code's text, or null if cancelled.
+*/
+export const scanBarcode = ({ title = 'Scan a barcode' } = {}) => new Promise(resolve => {
+  let finished = false;
+  let scanner = null;
+
+  const $video = document.createElement('video');
+  $video.style.cssText = 'width: 100%; max-height: 55vh; background: #000; border-radius: var(--radius);';
+
+  const $status = document.createElement('p');
+  $status.className = 'tc-muted mt';
+  $status.textContent = 'Starting the camera…';
+
+  const $content = document.createElement('div');
+  $content.className = 'p';
+  $content.append($video, $status);
+
+  const finish = value => {
+    if(finished) return;
+    finished = true;
+    scanner?.stop();
+    if(value) navigator.vibrate?.(60);
+    $dialog.close();
+    resolve(value);
+  };
+
+  /*
+    closeExisting: false, because this is usually opened from inside another dialog (the item
+    form), which Dialog.create would otherwise close.
+  */
+  const $dialog = Dialog.create($content, {
+    title,
+    cancelText: 'Cancel',
+    closeExisting: false,
+    closeCallback: () => finish(null),
+  });
+
+  startScanner({ video: $video, onCode: finish })
+    .then(started => {
+      if(finished){
+        started.stop();   // closed before the camera finished starting
+        return;
+      }
+      scanner = started;
+      $status.textContent = 'Point the camera at a barcode';
+    })
+    .catch(error => {
+      if(finished) return;
+      $status.textContent = cameraProblem() ?? explainCameraError(error);
+      $video.style.display = 'none';
+    });
+});

package/public/components/ImageCropDialog.js

@@ -0,0 +1,94 @@
+import { html } from '/kempo-ui/lit-all.min.js';
+import Toast from '/kempo-ui/components/Toast.js';
+import Dialog from '/kempo-ui/components/Dialog.js';
+import '/kempo-ui/components/ImageCrop.js';
+
+/*
+  Forces the shape and size of photos as they are added, with Kempo UI's <k-image-crop>.
+
+    import { prepareImages } from '/inventory/components/ImageCropDialog.js';
+    const files = await prepareImages(chosenFiles, { ratio: '1 / 1', max: 1600 });   // what to upload
+
+  - With a `ratio` each photo opens in a cropper locked to that shape, so only that shape can be
+    saved. "Skip" leaves the photo out. The result is also kept within `max` pixels.
+  - With only a `max`, photos are scaled down to fit, silently.
+  - With neither, the files are returned untouched.
+
+  Files that are not a still image the browser can edit (GIF, SVG, HEIC, video...) are returned as they
+  are: nothing can be cropped there.
+*/
+
+const EDITABLE = /^image\/(jpeg|png|webp|bmp)$/;
+const OUTPUT_TYPES = { 'image/jpeg': 'image/jpeg', 'image/webp': 'image/webp' };   // anything else is saved as PNG
+const EXTENSIONS = { 'image/jpeg': '.jpg', 'image/webp': '.webp', 'image/png': '.png' };
+
+/* Scales a photo down so neither side is bigger than `max` (it is never scaled up). */
+const shrink = async (file, max) => {
+  let bitmap;
+  try {
+    bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' });
+  } catch {
+    return file;
+  }
+  const scale = Math.min(1, max / Math.max(bitmap.width, bitmap.height));
+  if(scale === 1){
+    bitmap.close?.();
+    return file;
+  }
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+  canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+  canvas.getContext('2d').drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+  bitmap.close?.();
+  const type = OUTPUT_TYPES[file.type] ?? 'image/png';
+  const blob = await new Promise(done => canvas.toBlob(done, type, 0.92));
+  return blob ? new File([blob], file.name.replace(/\.[^.]+$/, '') + EXTENSIONS[type], { type }) : file;
+};
+
+/* Opens one photo in a cropper locked to `ratio`. Resolves to the cropped File, the original if the browser cannot read it, or null if skipped. */
+const crop = (file, ratio, max, { index, total }) => new Promise(resolve => {
+  let settled = false;
+  const finish = value => {
+    if(settled) return;
+    settled = true;
+    resolve(value);
+  };
+
+  const $dialog = Dialog.create(html`
+    <div class="p" style="max-height: calc(100vh - 14rem); overflow-y: auto;">
+      <p class="tc-muted mb">Drag the box to choose what to keep. It is locked to the shape this photo is saved in.</p>
+      <k-image-crop id="inventory-crop" aspect-ratio=${ratio} max-width=${max || 0} max-height=${max || 0}
+        type=${OUTPUT_TYPES[file.type] ?? 'image/png'} quality="0.92" label="Choose another photo"
+        @error=${() => { Toast.error(`${file.name} could not be opened, so it is uploaded as it is`); finish(file); $dialog.close(); }}></k-image-crop>
+    </div>
+  `, {
+    title: total > 1 ? `Crop photo ${index + 1} of ${total}` : 'Crop photo',
+    confirmText: 'Use photo',
+    cancelText: 'Skip',
+    closeExisting: false,   // the form this photo is being added to stays open underneath
+    confirmAction: async event => {
+      event.keepDialogOpen = true;
+      const $crop = $dialog.querySelector('#inventory-crop');
+      finish(await $crop.toFile() ?? null);
+      $dialog.close();
+    },
+    closeCallback: () => finish(null),
+  });
+
+  customElements.whenDefined('k-image-crop').then(() => $dialog.querySelector('#inventory-crop')?.loadImage(file));
+});
+
+export const prepareImages = async (files, { ratio = '', max = 0 } = {}) => {
+  const prepared = [];
+  for(const [index, file] of files.entries()){
+    if(!EDITABLE.test(file.type) || (!ratio && !max)){
+      prepared.push(file);
+    } else if(!ratio){
+      prepared.push(await shrink(file, max));
+    } else {
+      const result = await crop(file, ratio, max, { index, total: files.length });
+      if(result) prepared.push(result);   // null: skipped
+    }
+  }
+  return prepared;
+};

package/public/components/ImportExport.js

@@ -0,0 +1,194 @@
+import { html, render } from '/kempo-ui/lit-all.min.js';
+import Toast from '/kempo-ui/components/Toast.js';
+import Dialog from '/kempo-ui/components/Dialog.js';
+import '/kempo-ui/components/Spinner.js';
+import { exportUrl, previewImport, applyImport } from '/inventory/sdk.js';
+
+/*
+  The admin's import and export dialogs (top tier only: the server enforces it, the buttons only follow).
+
+    import { openExportDialog, openImportDialog } from '/inventory/components/ImportExport.js';
+    openExportDialog();
+    openImportDialog({ onDone: () => reload() });
+
+  Two kinds of export, both read by the import:
+    - Data only (.json): items, categories and tags, without any photos.
+    - With media (.zip): the same data (inventory.json) plus every photo and file (media/).
+  See server/utils/importExport.js for exactly what an export holds.
+*/
+
+/* ---------- export ---------- */
+export const openExportDialog = () => {
+  let kind = 'json';
+  const draw = () => render(html`
+    <p class="mb">Download the whole inventory: every item and category with its tags and field values.</p>
+    <label class="d-f mb" style="gap: var(--spacer_h); align-items: flex-start; cursor: pointer;">
+      <input type="radio" name="exportKind" value="json" ?checked=${kind === 'json'} @change=${() => { kind = 'json'; }}>
+      <span><strong>Data only</strong> (.json)<br><small class="tc-muted">Items, categories, tags and field values. No photos, so it is small and easy to read.</small></span>
+    </label>
+    <label class="d-f mb" style="gap: var(--spacer_h); align-items: flex-start; cursor: pointer;">
+      <input type="radio" name="exportKind" value="zip" ?checked=${kind === 'zip'} @change=${() => { kind = 'zip'; }}>
+      <span><strong>With media</strong> (.zip)<br><small class="tc-muted">The same data plus every photo and file, in one zip. Importing it brings the photos back.</small></span>
+    </label>`, $body);
+
+  const $body = document.createElement('div');
+  $body.className = 'p';
+  draw();
+
+  const $dialog = Dialog.create($body, {
+    title: 'Export inventory',
+    confirmText: 'Download',
+    cancelText: 'Cancel',
+    confirmAction: async event => {
+      event.keepDialogOpen = true;
+      const response = await fetch(exportUrl(kind), { credentials: 'same-origin' }).catch(() => null);
+      if(!response?.ok){
+        const body = await response?.json().catch(() => ({}));
+        Toast.error(body?.error || 'The export failed');
+        return;
+      }
+      const blob = await response.blob();
+      const name = /filename="([^"]+)"/.exec(response.headers.get('Content-Disposition') ?? '')?.[1] ?? `inventory.${kind}`;
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = name;
+      link.click();
+      setTimeout(() => URL.revokeObjectURL(link.href), 10000);
+      const missing = Number(response.headers.get('X-Missing-Media') ?? 0);
+      if(missing) Toast.warning(`${missing} photo${missing === 1 ? ' was' : 's were'} missing from the library and left out`);
+      $dialog.close();
+    },
+  });
+  return $dialog;
+};
+
+/* ---------- import ---------- */
+
+/*
+  The file is uploaded as it is to the server, which checks it (preview), keeps it, and later does the import
+  (apply). The server opens zips and stores their photos; this page never reads a zip.
+*/
+export const openImportDialog = ({ onDone = () => {} } = {}) => {
+  const state = {
+    phase: 'choose',       // choose -> checking -> review -> importing -> done
+    fileName: '',
+    preview: null,         // the server's report on the file, with its importId
+    onMatch: 'skip',
+    report: null,
+    error: '',
+  };
+
+  const $body = document.createElement('div');
+  $body.className = 'p';
+  $body.style.cssText = 'max-height: calc(100vh - 14rem); overflow-y: auto;';
+
+  const problemList = results => {
+    const list = results.filter(r => r.action === 'error');
+    return list.length ? html`
+      <p class="mt mb-sm tc-danger"><strong>${list.length} problem${list.length === 1 ? '' : 's'}</strong>: these rows will not be imported.</p>
+      <ul class="mb" style="max-height: 9rem; overflow-y: auto; padding-left: 1.2rem;">
+        ${list.slice(0, 50).map(r => html`<li><small>Row ${r.row}${r.sku || r.name ? html` (${r.sku || r.name})` : ''}: ${r.message}</small></li>`)}
+        ${list.length > 50 ? html`<li><small>…and ${list.length - 50} more</small></li>` : ''}
+      </ul>` : '';
+  };
+
+  const draw = () => {
+    const preview = state.preview;
+    const summary = preview?.summary;
+    render(html`
+      ${state.error ? html`<p class="tc-danger mb">${state.error}</p>` : ''}
+      ${state.phase === 'choose' || state.phase === 'checking' ? html`
+        <p class="mb">Choose an export: a <strong>.json</strong> file (data only) or a <strong>.zip</strong> (data with photos), both made by <strong>Export</strong>.</p>
+        <input type="file" id="importFile" accept=".json,.zip,application/json,application/zip" class="full" @change=${choose} ?disabled=${state.phase === 'checking'}>
+        ${state.phase === 'checking' ? html`<p class="mt tc-muted"><k-spinner size="sm"></k-spinner> Uploading and checking ${state.fileName}…</p>` : ''}
+        <p class="mt tc-muted"><small>The file is checked on the server, which only accepts it from the top permission tier. Fields are not created or changed by an import: a value only comes across when a field with the same key exists here. Photos come across only from a zip, and only real photo, video, audio and PDF files.</small></p>` : ''}
+      ${state.phase === 'review' ? html`
+        <p class="mb"><strong>${state.fileName}</strong>: ${preview.counts.items} item${preview.counts.items === 1 ? '' : 's'}${preview.counts.categories ? html` and ${preview.counts.categories} categor${preview.counts.categories === 1 ? 'y' : 'ies'}` : ''}${preview.withMedia ? html` with ${preview.mediaFiles} photo${preview.mediaFiles === 1 ? '' : 's'}` : ', no photos'}.</p>
+        <ul class="mb">
+          <li><strong>${summary.created}</strong> new item${summary.created === 1 ? '' : 's'}</li>
+          <li><strong>${summary.updated}</strong> already ${summary.updated === 1 ? 'exists' : 'exist'} (same SKU)</li>
+          ${preview.counts.categories ? html`<li><strong>${summary.categoriesCreated}</strong> new categor${summary.categoriesCreated === 1 ? 'y' : 'ies'}, <strong>${summary.categoriesUpdated}</strong> already ${summary.categoriesUpdated === 1 ? 'exists' : 'exist'}</li>` : ''}
+          ${summary.ignoredValues ? html`<li class="tc-muted">${summary.ignoredValues} value${summary.ignoredValues === 1 ? '' : 's'} for fields that do not exist here (or do not apply to the item's category) will be ignored</li>` : ''}
+        </ul>
+        ${summary.updated + summary.categoriesUpdated > 0 ? html`
+          <p class="mb-sm"><strong>For the ones that already exist:</strong></p>
+          <label class="d-f mb-sm" style="gap: var(--spacer_h); align-items: flex-start; cursor: pointer;">
+            <input type="radio" name="onMatch" value="skip" ?checked=${state.onMatch === 'skip'} @change=${() => { state.onMatch = 'skip'; draw(); }}>
+            <span><strong>Ignore them</strong><br><small class="tc-muted">Leave what is already here exactly as it is. Only the new ones are added.</small></span>
+          </label>
+          <label class="d-f mb" style="gap: var(--spacer_h); align-items: flex-start; cursor: pointer;">
+            <input type="radio" name="onMatch" value="update" ?checked=${state.onMatch === 'update'} @change=${() => { state.onMatch = 'update'; draw(); }}>
+            <span><strong>Update them</strong> with the values in the file<br><small class="tc-muted">A value the file leaves empty never clears anything. A changed quantity is recorded as a stock adjustment.</small></span>
+          </label>` : ''}
+        ${problemList(preview.results)}` : ''}
+      ${state.phase === 'importing' ? html`<p><k-spinner size="sm"></k-spinner> Importing. With photos this can take a while; keep this window open.</p>` : ''}
+      ${state.phase === 'done' ? html`
+        <p class="mb"><strong>Import finished.</strong></p>
+        <ul class="mb">
+          <li><strong>${state.report.summary.created}</strong> added</li>
+          <li><strong>${state.report.summary.updated}</strong> updated</li>
+          <li><strong>${state.report.summary.skipped}</strong> ignored (already existed)</li>
+          ${state.report.summary.categoriesCreated + state.report.summary.categoriesUpdated ? html`<li><strong>${state.report.summary.categoriesCreated}</strong> categories added, <strong>${state.report.summary.categoriesUpdated}</strong> updated</li>` : ''}
+          ${state.report.uploaded ? html`<li><strong>${state.report.uploaded}</strong> photo${state.report.uploaded === 1 ? '' : 's'} uploaded</li>` : ''}
+          ${state.report.skippedFiles?.length ? html`<li class="tc-danger">${state.report.skippedFiles.length} file${state.report.skippedFiles.length === 1 ? '' : 's'} not uploaded: <small>${state.report.skippedFiles.slice(0, 5).map(file => `${file.name} (${file.reason})`).join(', ')}</small></li>` : ''}
+        </ul>
+        ${problemList(state.report.results)}` : ''}
+    `, $body);
+  };
+
+  const choose = async event => {
+    const [file] = event.target.files;
+    if(!file) return;
+    state.error = '';
+    state.fileName = file.name;
+    state.phase = 'checking';
+    draw();
+    const [error, preview] = await previewImport(file);
+    if(error){
+      state.error = error.msg || 'The file could not be checked';
+      state.phase = 'choose';
+      draw();
+      return;
+    }
+    state.preview = preview;
+    state.onMatch = 'skip';
+    state.phase = 'review';
+    draw();
+  };
+
+  const run = async () => {
+    state.phase = 'importing';
+    draw();
+    $dialog.confirmText = '…';
+    const [error, report] = await applyImport(state.preview.importId, state.onMatch);
+    if(error){
+      state.error = error.msg || 'The import failed';
+      state.phase = error.code === 404 ? 'choose' : 'review';
+      $dialog.confirmText = 'Import';
+      draw();
+      return;
+    }
+    state.report = report;
+    state.phase = 'done';
+    $dialog.confirmText = 'Close';
+    draw();
+    onDone(report);
+  };
+
+  draw();
+  const $dialog = Dialog.create($body, {
+    title: 'Import inventory',
+    confirmText: 'Import',
+    cancelText: 'Cancel',
+    confirmAction: async event => {
+      event.keepDialogOpen = true;
+      if(state.phase === 'done'){ $dialog.close(); return; }
+      if(state.phase !== 'review'){
+        Toast.error(state.phase === 'choose' ? 'Choose a file first' : 'Please wait');
+        return;
+      }
+      await run();
+    },
+  });
+  return $dialog;
+};