);
}
// ---------------------------------------------------------------------------
// Mission Control device linking — "sync, then link" for all three
// vendors (Victron VRM, Ajax Systems, Teltonika RMS), per unit. The
// company-level connection (paste-a-token) lives on Settings > Data
// Connections (see admin-settings-page.jsx); this modal is the second
// step: pull that company's raw device/installation list from the
// vendor and match one specific item to this specific asset_unit.
// Backend: routes/admin-mission-control.ts.
//
// All three vendors are scoped to this unit's current company — each
// customer has their own separate Victron VRM, Ajax Systems, and
// Teltonika RMS account (confirmed by the customer for all three), so
// every sync/list call below is company-filtered the same way.
function LinkDevicesModal({ unit, isReadOnly, onCancel, onChanged }) {
return (
);
}
// ---------------------------------------------------------------------------
// Import from spreadsheet — CSV upload of the master asset tracking sheet
// (Asset / Version / Business Unit / PO Qty / PO Number / Asset Invoice
// No columns). Direct Google Sheets "Anyone with the link" access was
// explicitly ruled out by the customer as a security risk, so this is a
// manual CSV upload for now (a Google Service Account for genuine hourly
// polling is a planned fast-follow, once set up).
//
// Two-step, stateless flow, matching the backend in
// routes/admin-assets-import.ts. Additive-only: a serial already on file
// is never touched by an import, no matter what the sheet currently says
// for it — this is for bringing in new stock, not correcting old records.
// 1. "analyze" — parses the CSV and returns a full preview with nothing
// written yet: reserved rows excluded, already-tracked serials set
// aside untouched, PO/invoice numbers normalized, and everything
// that needs a decision for the remaining BRAND-NEW rows (unmatched
// Business Unit names, unmatched product-serial prefixes) surfaced
// for review.
// 2. "commit" — re-sends the same CSV text plus the admin's resolutions
// (link-to-existing-customer / create-new-customer for each
// unmatched Business Unit, pick-a-product for each unmatched
// prefix). Every resolution is remembered permanently server-side,
// so future imports of the same Business Unit name or serial prefix
// auto-resolve without asking again. Rows whose serial already
// exists are skipped outright — never updated.
const IMPORT_TIERS = [
{ value: "gold", label: "Gold" },
{ value: "platinum", label: "Platinum" },
{ value: "regional_reseller", label: "Regional Reseller" },
];
function ImportSheetModal({ products, companies, isReadOnly, onCancel, onDone, onNavigate }) {
const [step, setStep] = useState("upload"); // upload | fetching | analyzing | review | committing | done
const [csvText, setCsvText] = useState("");
const [fileName, setFileName] = useState("");
const [fetchedAt, setFetchedAt] = useState(null);
const [analysis, setAnalysis] = useState(null);
const [error, setError] = useState("");
const [result, setResult] = useState(null);
// Resolution state, built up as the admin works through the review step.
const [businessUnitLinks, setBusinessUnitLinks] = useState({}); // raw -> { companyId } | { xeroContact: {...} }
const [productLinks, setProductLinks] = useState({}); // prefix -> productId
const handleFile = (e) => {
const file = e.target.files?.[0];
if (!file) return;
setFileName(file.name);
setFetchedAt(null);
const reader = new FileReader();
reader.onload = () => setCsvText(String(reader.result || ""));
reader.readAsText(file);
};
const runFetchSheet = async () => {
setStep("fetching"); setError("");
try {
const res = await fetch("/api/admin/assets/import/fetch-sheet", { method: "POST", credentials: "same-origin" });
const data = await res.json().catch(() => ({}));
if (!res.ok) { setError(data.error || "Could not pull the live spreadsheet."); setStep("upload"); return; }
setCsvText(data.csvText);
setFileName("");
setFetchedAt(data.fetchedAt);
setStep("upload");
} catch {
setError("Couldn't reach the server. Check your connection and try again.");
setStep("upload");
}
};
const runAnalyze = async () => {
if (!csvText.trim()) { setError("Choose a CSV file first."); return; }
setStep("analyzing"); setError("");
try {
const res = await fetch("/api/admin/assets/import/analyze", {
method: "POST", credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ csvText }),
});
const data = await res.json().catch(() => ({}));
if (!res.ok) { setError(data.error || "Could not read that file."); setStep("upload"); return; }
setAnalysis(data);
// Pre-fill any single-product-prefix case to the only matching product by name prefix, as a convenience —
// still requires the admin to confirm by leaving/selecting it before commit is enabled.
setStep("review");
} catch {
setError("Couldn't reach the server. Check your connection and try again.");
setStep("upload");
}
};
const allBusinessUnitsResolved = (analysis?.unmatchedBusinessUnits || []).every(
(bu) => businessUnitLinks[bu.raw]?.companyId || businessUnitLinks[bu.raw]?.xeroContact?.xeroContactId
);
const allProductsResolved = (analysis?.unmatchedProductPrefixes || []).every((p) => productLinks[p.prefix]);
const canCommit = allBusinessUnitsResolved && allProductsResolved;
const runCommit = async () => {
setStep("committing"); setError("");
try {
const res = await fetch("/api/admin/assets/import/commit", {
method: "POST", credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ csvText, resolutions: { businessUnitLinks, productLinks } }),
});
const data = await res.json().catch(() => ({}));
if (!res.ok) { setError(data.error || "Import failed."); setStep("review"); return; }
setResult(data);
setStep("done");
} catch {
setError("Couldn't reach the server. Check your connection and try again.");
setStep("review");
}
};
if (step === "done") {
return (
Pull the current data straight from the live spreadsheet, or upload a CSV export manually
(columns: Asset, Version, Business Unit, PO Qty, PO Number, Asset Invoice No).
Nothing is saved until you review and confirm on the next screen.
{step === "fetching" ? "Pulling latest data…" : "Update from live spreadsheet"}
{fetchedAt && (
Pulled the current live spreadsheet at {new Date(fetchedAt).toLocaleString()}.
);
}
// step === "review" or "committing"
const s = analysis.summary;
return (
{error && {error}}
{s.totalRows} rows read · {s.skippedReserved} reserved/blank (always excluded) · {s.newUnits} new (will be imported) · {s.existingUnits} already tracked (left untouched)
{(s.poMissingPreview > 0 || s.invoiceMissingPreview > 0) && (
<>
~{s.poMissingPreview} new unit{s.poMissingPreview === 1 ? "" : "s"} with no PO Number, ~{s.invoiceMissingPreview} with no verified invoice —
these will still be imported, just flagged for review (estimate; the final count is confirmed after commit).
)}
{analysis.unmatchedBusinessUnits.length > 0 && (
<>
Link customers ({analysis.unmatchedBusinessUnits.length})
These "Business Unit" names from the sheet don't match any existing customer. Link each to an existing
customer or create a new one — this is remembered, so future imports won't ask again.
)}
);
}
// ---------------------------------------------------------------------------
// XeroContactPicker — shared "pick a Xero Contact" widget. Loads early
// (this file) so it's available to admin-companies-page.jsx's Add
// customer modal and admin-portal-page.jsx's pending-approval flow, both
// of which load after this file (see index.html) and now need the exact
// same pick UX. Exported on window (see bottom of this block).
//
// Loads the FULL Xero contact list once on mount (GET
// /api/admin/xero/contacts/list — see listXeroContacts in lib/xero.ts)
// and lets the admin instantly filter it client-side as they type, rather
// than the old flow of typing a query and waiting on a live per-keystroke
// Xero API round-trip. This is what "instead of searching, give me a list
// to choose from" (reported as slow) refers to.
//
// Deliberately dumb/controlled: it only lists/filters and reports the
// admin's pick via onSelect({ contactId, name, linkedCompany }) — every
// caller decides what to actually DO with that pick (create a company,
// bind an existing one, etc.), since that differs per call site. It does
// NOT check Xero connection status itself — callers show their own
// "not connected" warning (via GET /api/admin/xero/status) before even
// rendering this, since the right recovery action reads differently in
// each context.
function XeroContactPicker({ defaultQuery, onSelect, disabledContactId, disabledNote }) {
const [filter, setFilter] = useState(defaultQuery || "");
const [state, setState] = useState("loading"); // loading | done | error
const [contacts, setContacts] = useState([]);
const [error, setError] = useState("");
const loadList = async () => {
setState("loading"); setError("");
try {
const res = await fetch("/api/admin/xero/contacts/list", { credentials: "same-origin" });
const data = await res.json().catch(() => ({}));
if (!res.ok) { setError(data.error || "Couldn't load Xero contacts."); setState("error"); return; }
setContacts(data.contacts || []);
setState("done");
} catch {
setError("Couldn't reach the server. Check your connection and try again.");
setState("error");
}
};
// NOTE: must wrap in a synchronous arrow, not pass loadList directly —
// loadList is `async` and always returns a Promise, which React tries
// to call as an effect cleanup function ("destroy is not a function"),
// crashing this component (and everything above it, with no error
// boundary) the moment Xero isn't connected and the fetch 500s. Every
// other load() in this codebase avoids this by using .then() chains
// instead of async/await — this is the one exception.
useEffect(() => { loadList(); }, []); // eslint-disable-line react-hooks/exhaustive-deps -- mount-only
const needle = filter.trim().toLowerCase();
const visible = needle
? contacts.filter((c) => c.name.toLowerCase().includes(needle))
: contacts;
return (
setFilter(e.target.value)}
placeholder="Filter the list by name…" style={{ ...inputStyle, flex: 1 }}
data-testid="xero-picker-filter"
/>
{state === "loading" && (
Loading Xero contacts…
)}
{state === "error" && (
{error}
Retry
)}
{state === "done" && visible.length === 0 && (
{contacts.length === 0 ? "No Xero contacts found." : "No matches — try a different name."}
{ if (e.target === e.currentTarget) onCancel(); }}>
{title}
{children}
);
}
function ModalError({ children }) {
return (
{children}
);
}
function SectionLabel({ children }) {
return (
{children}
);
}
function EmptyNote({ children }) {
return (
{children}
);
}
function MiniField({ label, children }) {
return (
);
}
// readOnly: pass true when the signed-in admin is role "admin" (Solo Staff)
// rather than "super_admin" — forces the button disabled regardless of the
// caller's own `disabled` logic, and swaps in an explanatory tooltip. The
// backend already rejects these calls for non-super-admins (requireSuperAdmin
// middleware) — this is UX polish so read-only viewers don't hit a dead-end
// 403 after filling in a form, not a security boundary itself.
function ActionButton({ children, danger, disabled, readOnly, onClick, testId }) {
const isDisabled = disabled || readOnly;
return (
);
}
const navBtnStyle = {
background: "none", border: "1px solid rgba(0,0,0,0.35)",
color: "rgba(0,0,0,0.8)", cursor: "pointer", padding: "12px 20px",
fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 500,
letterSpacing: "0.18em", textTransform: "uppercase",
};
const inputStyle = {
width: "100%", boxSizing: "border-box",
background: "rgba(0,0,0,0.03)", border: "1px solid rgba(0,0,0,0.25)",
color: "#000", fontFamily: "var(--font-body)", fontSize: 13.5, padding: "9px 10px",
outline: "none",
};
const selectStyle = { ...inputStyle, appearance: "auto" };
// Exported for reuse by admin-companies-page.jsx's per-customer asset
// register section, so that page doesn't need to duplicate the unit
// row/modal markup — same components, same behaviour, either place.
// ImportSheetModal is also exported so admin-settings-page.jsx's "Data
// Connections" > Asset Spreadsheet card can launch the exact same import
// wizard directly from Settings, not just from the Assets page toolbar.
Object.assign(window, {
AdminAssetsPage,
UnitRow, AddUnitModal, BulkAddUnitsModal, AssignUnitModal, HistoryModal, ImportSheetModal,
MiniField, ActionButton, ModalShell, ModalError, SectionLabel, EmptyNote,
adminInputStyle: inputStyle, adminSelectStyle: selectStyle, adminNavBtnStyle: navBtnStyle,
});