Implement adjudicated DO items across backend, frontend, deploy

From the ROADMAP adjudication (12 of 13 DO items; D2 is a commit action).

Backend:
- B3: pytest suite (auth, entity CRUD, rollup) + dev deps + pytest config
- B4: cap document uploads at TEN31_MAX_UPLOAD_SIZE (default 50MB), stream-
  checked with partial-file cleanup, 413 on overflow
- B7: type AuditLog.detail as dict|list|str|None to match the JSON column
- B10: index foreign-key columns (migration a7b8c9d0e1f2 + index=True)
- B11: cli delete-user logs file-removal errors instead of swallowing them

Frontend:
- F2: distinguish "server unreachable" from "logged out"; retry prompt
- F4: confirm before destructive holdings-replace on import; step progress
- F6: expandable audit-log detail with full JSON
- F7: empty-state on the Investments page
- F8: shared role helpers (WRITER_ROLES/canEditRound/isApprover), used by
  EntitiesList, AuditLog, Import, ValuationWorkflow

Deploy:
- D5: run tsc --noEmit before packaging (build script)
- D6: TEN31_LOG_LEVEL env var (defaults to info)

Verified: 8/8 backend tests pass; alembic upgrades to head with 13 FK
indexes; upload limit rejects oversized + cleans up; frontend tsc + vite
build clean; dev server serves and proxies to the API.
This commit is contained in:
Jonathan Kirkwood
2026-07-01 13:33:40 -05:00
parent 77eeb3bd7f
commit 8247c28243
22 changed files with 1757 additions and 465 deletions
+361 -337
View File
@@ -1,382 +1,406 @@
import { useEffect, useRef, useState } from "react";
import { api, type Entity, type EntityType } from "../api";
import { useEffect, useState } from "react";
import { api, isAdmin, type Entity, type EntityType, type CapitalImportPreview } from "../api";
import { useAuth } from "../context/AuthContext";
import { formatMoneyExact } from "../format";
type EntityMode = "existing" | "from_file";
type Decision = {
action: "match" | "create" | "skip";
source_name: string;
external_id: string | null;
matched_username: string | null;
user_id: number | null;
value_dollars: number;
commitment_dollars: number;
contributions_dollars: number;
distributions_dollars: number;
// create fields
name: string;
username: string;
email: string;
};
export default function Import() {
const { user } = useAuth();
const [entities, setEntities] = useState<Entity[]>([]);
const [entityMode, setEntityMode] = useState<EntityMode>("from_file");
const [entityMode, setEntityMode] = useState<EntityMode>("existing");
const [entityId, setEntityId] = useState("");
const [createType, setCreateType] = useState<EntityType>("fund");
const [vintageYear, setVintageYear] = useState("");
const [asOf, setAsOf] = useState("");
const [mode, setMode] = useState<"entities" | "schedule">("schedule");
const [commit, setCommit] = useState(false);
const [password, setPassword] = useState("");
const [file, setFile] = useState<File | null>(null);
const [replaceExisting, setReplaceExisting] = useState(false);
const [holdings, setHoldings] = useState<{ count: number; nav: number; sourceName: string | null } | null>(null);
const [memberPv, setMemberPv] = useState<CapitalImportPreview | null>(null);
const [decisions, setDecisions] = useState<Decision[]>([]);
const [asOf, setAsOf] = useState("");
const [result, setResult] = useState<any>(null);
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const fileRef = useRef<HTMLInputElement>(null);
const [busy, setBusy] = useState(false);
const [step, setStep] = useState("");
const [confirmReplace, setConfirmReplace] = useState(false);
const canImport = user && ["approver", "cfo"].includes(user.role);
const canImport = user && isAdmin(user.role);
const inputCls = "w-full px-3 py-2 border border-gray-300 rounded text-sm";
useEffect(() => {
api.listEntities().then(setEntities);
}, []);
async function handleImport() {
if (!file) return;
setError("");
function reset() {
setHoldings(null);
setMemberPv(null);
setDecisions([]);
setResult(null);
setLoading(true);
setReplaceExisting(false);
}
async function readEnav() {
if (!file) return;
if (entityMode === "existing" && !entityId) {
setError("Select the fund, or choose 'Create from file'.");
return;
}
setError("");
setBusy(true);
setResult(null);
try {
const form = new FormData();
form.append("file", file);
const eid = entityMode === "existing" ? Number(entityId) : undefined;
// Holdings (dry run) + members preview from the same file.
const [sched, members] = await Promise.all([
api.scheduleImport(file, {
commit: false,
entityId: eid,
password: password || undefined,
createType,
vintageYear,
}),
api.capitalImportPreview(file, eid as number, undefined, password || undefined),
]);
const params = new URLSearchParams();
params.set("commit", String(commit));
let url: string;
if (mode === "entities") {
url = `/api/import/entities?${params}`;
} else {
if (!asOf) {
setError("Quarter-end date is required.");
setLoading(false);
return;
}
params.set("as_of", asOf);
if (entityMode === "existing") {
if (!entityId) {
setError("Select an entity.");
setLoading(false);
return;
}
params.set("entity_id", entityId);
} else {
// from_file mode: let backend resolve from row 1
params.set("create_entity_type", createType);
if (vintageYear) params.set("create_vintage_year", vintageYear);
}
url = `/api/import/schedule?${params}`;
}
const res = await fetch(url, { method: "POST", body: form });
let data: any;
try {
data = await res.json();
} catch {
setError(`Server error (${res.status}). Check file format and try again.`);
setLoading(false);
return;
}
if (!res.ok) {
setError(data.detail || "Import failed");
} else {
setResult(data);
// Refresh entity list after commit
if (data.committed) {
api.listEntities().then(setEntities);
}
}
} catch (err: any) {
setError(err.message);
const nav = (sched.positions || []).reduce((s: number, p: any) => s + (p.value_cents || 0), 0);
setHoldings({
count: sched.positions?.length ?? 0,
nav,
sourceName: sched.source_entity_name ?? null,
});
setAsOf(members.as_of_date ?? sched.seed_round?.quarter_end ?? "");
setMemberPv(members);
setDecisions(
members.investors.map((i) => ({
action: i.matched_user_id ? "match" : "create",
source_name: i.source_name,
external_id: i.external_id,
matched_username: i.matched_username,
user_id: i.matched_user_id,
value_dollars: i.value_dollars,
commitment_dollars: i.commitment_dollars,
contributions_dollars: i.contributions_dollars,
distributions_dollars: i.distributions_dollars,
name: i.source_name,
username: i.suggested_username ?? "",
email: "",
})),
);
} catch (e: any) {
setError(e.message || "Could not read the workbook");
reset();
} finally {
setLoading(false);
setBusy(false);
}
}
const update = (idx: number, patch: Partial<Decision>) =>
setDecisions((d) => d.map((row, i) => (i === idx ? { ...row, ...patch } : row)));
// The "Confirm import" button routes through here so a destructive holdings-replace gets a
// final confirmation before anything is cleared.
function handleConfirmClick() {
if (entityMode === "existing" && replaceExisting) {
setConfirmReplace(true);
return;
}
confirmImport();
}
async function confirmImport() {
if (!file || !asOf) return;
setConfirmReplace(false);
setError("");
setBusy(true);
try {
const memberPayload = {
as_of_date: asOf,
investors: decisions.map((d) => ({
action: d.action,
value_dollars: d.value_dollars,
commitment_dollars: d.commitment_dollars,
contributions_dollars: d.contributions_dollars,
distributions_dollars: d.distributions_dollars,
user_id: d.action === "match" ? d.user_id : undefined,
name: d.action === "create" ? d.name : undefined,
username: d.action === "create" ? d.username : undefined,
email: d.action === "create" ? d.email || undefined : undefined,
external_id: d.external_id || undefined,
})),
};
let resolvedEntityId: number;
let holdingsNote = "";
if (entityMode === "existing") {
resolvedEntityId = Number(entityId);
// Members first (idempotent), then holdings.
setStep("Saving members…");
await api.capitalImportCommit({ entity_id: resolvedEntityId, ...memberPayload });
setStep(replaceExisting ? "Replacing holdings…" : "Loading holdings…");
try {
await api.scheduleImport(file, {
commit: true,
entityId: resolvedEntityId,
password: password || undefined,
asOf,
replaceExisting,
});
} catch (e: any) {
if (String(e.message).toLowerCase().includes("already exists")) {
holdingsNote = "A signed valuation round exists for this quarter — holdings left unchanged.";
} else {
throw e;
}
}
} else {
// Create-from-file: holdings commit creates the fund, then members.
setStep("Creating fund and loading holdings…");
const sres = await api.scheduleImport(file, {
commit: true,
password: password || undefined,
asOf,
createType,
vintageYear,
});
resolvedEntityId = sres.entity.entity_id;
setStep("Saving members…");
await api.capitalImportCommit({ entity_id: resolvedEntityId, ...memberPayload });
}
setResult({
holdings: holdings?.count ?? 0,
nav: holdings?.nav ?? 0,
members: decisions.filter((d) => d.action !== "skip").length,
created: decisions.filter((d) => d.action === "create").length,
note: holdingsNote,
});
reset();
api.listEntities().then(setEntities);
} catch (e: any) {
setError(e.message || "Import failed");
} finally {
setBusy(false);
setStep("");
}
}
if (!canImport) {
return (
<div className="text-gray-500 text-sm">
Import requires approver or CFO role.
</div>
);
return <div className="text-gray-500 text-sm">Import requires Managing Partner, Operations, or CFO role.</div>;
}
return (
<div className="max-w-2xl">
<h1 className="text-2xl font-semibold text-gray-900 mb-6">Import</h1>
<div className="max-w-4xl">
<h1 className="text-2xl font-semibold text-gray-900 mb-1">Import eNAV</h1>
<p className="text-sm text-gray-500 mb-6">
Upload the fund administrator's eNAV workbook once. Portal loads the fund's holdings and NAV
(HLD tab) and the members with their capital commitment, paid-in, distributions, and
current value (ALLOC SI tab). You confirm new members before anything is saved.
</p>
{/* Mode selector */}
<div className="flex gap-4 mb-6">
<button
onClick={() => setMode("schedule")}
className={`px-4 py-2 text-sm rounded ${
mode === "schedule"
? "bg-gray-900 text-white"
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
}`}
>
Schedule of Investments
</button>
<button
onClick={() => setMode("entities")}
className={`px-4 py-2 text-sm rounded ${
mode === "entities"
? "bg-gray-900 text-white"
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
}`}
>
Entities
</button>
</div>
{error && <div className="p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700 mb-4">{error}</div>}
<div className="bg-white border border-gray-200 rounded-lg p-6 space-y-4">
{mode === "schedule" && (
<>
{/* Entity resolution mode */}
<div>
<label className="block text-sm text-gray-700 mb-2">Entity</label>
<div className="flex gap-4 mb-3">
<label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
<input
type="radio"
name="entityMode"
checked={entityMode === "from_file"}
onChange={() => setEntityMode("from_file")}
className="text-orange-500"
/>
Create from file
</label>
<label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
<input
type="radio"
name="entityMode"
checked={entityMode === "existing"}
onChange={() => setEntityMode("existing")}
className="text-orange-500"
/>
Use existing entity
</label>
</div>
{entityMode === "existing" ? (
<select
value={entityId}
onChange={(e) => setEntityId(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
>
<option value="">Select entity...</option>
{entities.map((e) => (
<option key={e.id} value={e.id}>
{e.name}
</option>
))}
</select>
) : (
<div className="flex gap-3">
<div className="flex-1">
<label className="block text-xs text-gray-500 mb-1">Type</label>
<select
value={createType}
onChange={(e) => setCreateType(e.target.value as EntityType)}
className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
>
<option value="fund">Fund</option>
<option value="spv">SPV</option>
<option value="gp">GP</option>
<option value="mgmt_co">Mgmt Co</option>
</select>
</div>
<div className="w-32">
<label className="block text-xs text-gray-500 mb-1">Vintage Year</label>
<input
type="text"
value={vintageYear}
onChange={(e) => setVintageYear(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
placeholder="2021"
/>
</div>
</div>
)}
</div>
<div>
<label className="block text-sm text-gray-700 mb-1">
Quarter-end date (seed round)
{result ? (
<div className="bg-green-50 border border-green-200 rounded-lg p-4 text-sm">
<p className="font-medium text-green-800">Import complete.</p>
<ul className="mt-2 text-green-700 list-disc list-inside">
<li>{result.holdings} holdings loaded · NAV {formatMoneyExact(result.nav)}</li>
<li>{result.members} members ({result.created} newly created)</li>
{result.note && <li className="text-amber-700">{result.note}</li>}
</ul>
<button onClick={() => setResult(null)} className="mt-3 px-3 py-1.5 bg-gray-900 text-white rounded hover:bg-gray-800">
Import another
</button>
</div>
) : (
<div className="bg-white border border-gray-200 rounded-lg p-4 space-y-3">
<div>
<label className="block text-sm text-gray-700 mb-2">Fund</label>
<div className="flex gap-4 mb-2">
<label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
<input type="radio" checked={entityMode === "existing"} onChange={() => { setEntityMode("existing"); reset(); }} className="text-orange-500" />
Use existing fund
</label>
<label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
<input type="radio" checked={entityMode === "from_file"} onChange={() => { setEntityMode("from_file"); reset(); }} className="text-orange-500" />
Create from file
</label>
<input
type="date"
value={asOf}
onChange={(e) => setAsOf(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
/>
</div>
</>
)}
<div>
<label className="block text-sm text-gray-700 mb-1">
{mode === "schedule" ? "Carta XLSX or CSV file" : "Entities CSV file"}
</label>
<input
ref={fileRef}
type="file"
accept={mode === "schedule" ? ".xlsx,.xls,.csv" : ".csv"}
onChange={(e) => setFile(e.target.files?.[0] || null)}
className="w-full text-sm text-gray-600"
/>
</div>
<div className="flex items-center gap-2">
<input
type="checkbox"
id="commit"
checked={commit}
onChange={(e) => setCommit(e.target.checked)}
className="rounded border-gray-300"
/>
<label htmlFor="commit" className="text-sm text-gray-700">
Commit (uncheck for dry-run preview)
</label>
</div>
{error && (
<div className="p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">
{error}
</div>
)}
<button
onClick={handleImport}
disabled={loading || !file}
className="px-4 py-2 bg-gray-900 text-white text-sm rounded hover:bg-gray-800 disabled:opacity-50"
>
{loading ? "Importing..." : commit ? "Import" : "Preview (dry run)"}
</button>
</div>
{/* Results */}
{result && (
<div className="mt-6 bg-white border border-gray-200 rounded-lg p-6">
<h3 className="text-sm font-medium text-gray-900 mb-3">
{result.committed ? "Import Complete" : "Dry Run Preview"}
</h3>
{/* Entity resolution info */}
{result.entity && (
<div className="mb-3 p-3 bg-gray-50 border border-gray-200 rounded text-sm">
{result.entity.resolution === "will_create" ? (
<span className="text-purple-700">
Will create entity: <strong>{result.entity.entity_name}</strong> ({result.entity.entity_type})
{result.entity.vintage_year && `, vintage ${result.entity.vintage_year}`}
</span>
) : result.entity.resolution === "matched" ? (
<span className="text-blue-700">
Matched existing entity: <strong>{result.entity.entity_name}</strong> (#{result.entity.entity_id})
</span>
) : (
<span className="text-gray-700">
Entity: <strong>{result.entity.entity_name}</strong> (#{result.entity.entity_id})
</span>
)}
</div>
)}
{result.source_entity_name && !result.entity && (
<p className="text-sm text-gray-600 mb-2">
Source: {result.source_entity_name}
</p>
)}
{result.summary && (
<div className="text-sm text-gray-700 mb-3">
Created: {result.summary.created} | Updated: {result.summary.updated} | Errors: {result.summary.error_rows}
</div>
)}
{result.holdings_count != null && (
<div className="text-sm text-gray-700 mb-3">
Holdings: {result.holdings_count} | Positions: {result.positions_count}
{result.seed_round_id && ` | Seed round #${result.seed_round_id}`}
</div>
)}
{result.holdings && result.holdings.length > 0 && (
<div className="mb-3">
<h4 className="text-xs font-medium text-gray-500 uppercase mb-1">Holdings</h4>
<ul className="text-sm text-gray-700 space-y-0.5">
{result.holdings.map((h: any, i: number) => (
<li key={i}>{h.company_name}</li>
))}
</ul>
</div>
)}
{result.positions && result.positions.length > 0 && (
<div className="mb-3">
<h4 className="text-xs font-medium text-gray-500 uppercase mb-1">
Positions ({result.positions.length})
</h4>
<div className="overflow-x-auto">
<table className="text-xs w-full">
<thead>
<tr className="text-left text-gray-500">
<th className="pr-3 py-1">Company</th>
<th className="pr-3 py-1">Security</th>
<th className="pr-3 py-1">Date</th>
<th className="pr-3 py-1 text-right">Cost</th>
<th className="pr-3 py-1 text-right">Value</th>
</tr>
</thead>
<tbody>
{result.positions.map((p: any, i: number) => (
<tr key={i} className="text-gray-700">
<td className="pr-3 py-0.5">{p.company_name}</td>
<td className="pr-3 py-0.5">{p.security_name}</td>
<td className="pr-3 py-0.5">{p.investment_date || "—"}</td>
<td className="pr-3 py-0.5 text-right">
{p.cost_cents != null ? `$${(p.cost_cents / 100).toLocaleString()}` : "—"}
</td>
<td className="pr-3 py-0.5 text-right">
{p.value_cents != null ? `$${(p.value_cents / 100).toLocaleString()}` : "—"}
</td>
</tr>
))}
</tbody>
</table>
{entityMode === "existing" ? (
<select value={entityId} onChange={(e) => { setEntityId(e.target.value); reset(); }} className={inputCls}>
<option value="">Select fund</option>
{entities.map((e) => <option key={e.id} value={e.id}>{e.name}</option>)}
</select>
) : (
<div className="flex gap-3">
<select value={createType} onChange={(e) => setCreateType(e.target.value as EntityType)} className={inputCls}>
<option value="fund">Fund</option>
<option value="spv">SPV</option>
<option value="gp">GP</option>
<option value="mgmt_co">Mgmt Co</option>
</select>
<input className={inputCls} placeholder="Vintage year" value={vintageYear} onChange={(e) => setVintageYear(e.target.value)} />
</div>
)}
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-xs text-gray-500 mb-1">eNAV workbook (.xlsx)</label>
<input type="file" accept=".xlsx" onChange={(e) => { setFile(e.target.files?.[0] ?? null); reset(); }} className="text-sm" />
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Spreadsheet password</label>
<input type="text" className={inputCls} value={password} placeholder="If the file is protected" autoComplete="off" onChange={(e) => { setPassword(e.target.value); reset(); }} />
</div>
</div>
<div className="flex justify-end">
<button onClick={readEnav} disabled={busy || !file} className="px-3 py-1.5 bg-gray-900 text-white text-sm rounded hover:bg-gray-800 disabled:opacity-50">
{busy ? "Reading…" : "Read eNAV"}
</button>
</div>
</div>
)}
{memberPv && !result && (
<div className="mt-6 space-y-4">
{/* Holdings summary */}
<div className="bg-white border border-gray-200 rounded-lg p-4 text-sm flex items-center gap-6">
<div>
<span className="text-gray-500">Holdings: </span>
<span className="text-gray-900 font-medium">{holdings?.count ?? 0}</span>
</div>
<div>
<span className="text-gray-500">Fund NAV: </span>
<span className="text-gray-900 font-medium">{formatMoneyExact(holdings?.nav ?? 0)}</span>
</div>
<div className="ml-auto">
<label className="text-xs text-gray-500 mr-2">As-of</label>
<input type="date" className="px-2 py-1 border border-gray-300 rounded text-sm" value={asOf} onChange={(e) => setAsOf(e.target.value)} />
</div>
</div>
{entityMode === "existing" && (
<label className="flex items-start gap-2 text-sm text-gray-700 bg-amber-50 border border-amber-200 rounded-lg p-3">
<input
type="checkbox"
className="mt-0.5"
checked={replaceExisting}
onChange={(e) => setReplaceExisting(e.target.checked)}
/>
<span>
<span className="font-medium">Replace existing holdings</span> clear this fund's
current holdings, positions, and valuation history first, then rebuild from this file.
Use after switching source workbooks (e.g. Carta → eNAV) renamed the positions.
Investor capital accounts are not affected.
</span>
</label>
)}
{result.errors && result.errors.length > 0 && (
<div>
<h4 className="text-xs font-medium text-red-500 uppercase mb-1">
Errors ({result.errors.length})
</h4>
<ul className="text-xs text-red-600 space-y-1">
{result.errors.map((e: any, i: number) => (
<li key={i}>
Row {e.row}: {e.errors?.join(", ")}
</li>
{/* Members review */}
<div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
<table className="w-full text-sm">
<thead className="bg-gray-50 text-gray-500 text-left">
<tr>
<th className="px-3 py-2 font-medium">Member</th>
<th className="px-3 py-2 font-medium text-right">Commitment</th>
<th className="px-3 py-2 font-medium text-right">Paid-in</th>
<th className="px-3 py-2 font-medium text-right">Distrib.</th>
<th className="px-3 py-2 font-medium text-right">Value</th>
<th className="px-3 py-2 font-medium">Action</th>
<th className="px-3 py-2 font-medium">New account</th>
</tr>
</thead>
<tbody>
{decisions.map((d, i) => (
<tr key={i} className="border-t border-gray-100 align-top">
<td className="px-3 py-2 text-gray-900">{d.source_name}</td>
<td className="px-3 py-2 text-right text-gray-600">{formatMoneyExact(Math.round(d.commitment_dollars * 100))}</td>
<td className="px-3 py-2 text-right text-gray-600">{formatMoneyExact(Math.round(d.contributions_dollars * 100))}</td>
<td className="px-3 py-2 text-right text-gray-600">{formatMoneyExact(Math.round(d.distributions_dollars * 100))}</td>
<td className="px-3 py-2 text-right text-gray-900">{formatMoneyExact(Math.round(d.value_dollars * 100))}</td>
<td className="px-3 py-2">
<select className="px-2 py-1 border border-gray-300 rounded text-sm" value={d.action} onChange={(e) => update(i, { action: e.target.value as Decision["action"] })}>
{d.user_id != null && <option value="match">Match {d.matched_username}</option>}
<option value="create">Create new</option>
<option value="skip">Skip</option>
</select>
</td>
<td className="px-3 py-2">
{d.action === "create" ? (
<div className="flex gap-2">
<input className="px-2 py-1 border border-gray-300 rounded text-sm w-28" placeholder="Username" value={d.username} onChange={(e) => update(i, { username: e.target.value })} />
<span className="text-xs text-gray-400 self-center">no login until set</span>
</div>
) : d.action === "match" ? (
<span className="text-xs text-gray-500">updates {d.matched_username}</span>
) : (
<span className="text-xs text-gray-400">ignored</span>
)}
</td>
</tr>
))}
</ul>
</div>
)}
</tbody>
</table>
</div>
{result.preview && result.preview.length > 0 && (
<div>
<h4 className="text-xs font-medium text-gray-500 uppercase mb-1">
Entities ({result.preview.length})
</h4>
<ul className="text-sm text-gray-700 space-y-0.5">
{result.preview.map((p: any, i: number) => (
<li key={i}>
<span className={`text-xs px-1 rounded ${p.action === "create" ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`}>
{p.action}
</span>{" "}
{p.name}
</li>
))}
</ul>
<div className="flex items-center justify-end gap-3">
<span className="text-xs text-gray-400">
{decisions.filter((d) => d.action === "create").length} new ·{" "}
{decisions.filter((d) => d.action === "match").length} matched ·{" "}
{decisions.filter((d) => d.action === "skip").length} skipped
</span>
<button onClick={handleConfirmClick} disabled={busy || !asOf} className="px-4 py-1.5 bg-gray-900 text-white text-sm rounded hover:bg-gray-800 disabled:opacity-50">
{busy ? (step || "Importing…") : "Confirm import"}
</button>
</div>
</div>
)}
{confirmReplace && (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50">
<div className="bg-white rounded-lg p-6 max-w-md w-full">
<h3 className="text-sm font-semibold text-gray-900 mb-2">Replace existing holdings?</h3>
<p className="text-sm text-gray-600">
This will permanently clear this fund's current holdings, positions, and valuation
history, then rebuild them from this file. Investor capital accounts are not
affected. This can't be undone.
</p>
<div className="flex justify-end gap-2 mt-5">
<button
onClick={() => setConfirmReplace(false)}
className="px-4 py-1.5 border border-gray-300 text-sm rounded hover:bg-gray-50"
>
Cancel
</button>
<button
onClick={confirmImport}
className="px-4 py-1.5 bg-red-600 text-white text-sm rounded hover:bg-red-700"
>
Replace and import
</button>
</div>
)}
</div>
</div>
)}
</div>