Spaces:
Runtime error
Runtime error
File size: 3,044 Bytes
e46698f 8b8b6f5 e46698f 8b8b6f5 e46698f 8b8b6f5 e46698f 8b8b6f5 e46698f 8b8b6f5 e46698f 8b8b6f5 e46698f 8b8b6f5 e46698f 8b8b6f5 e46698f 8b8b6f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import { X, Edit3, CheckCircle2, AlertTriangle } from "lucide-react";
export type ImportResult = {
addedCount: number;
skipped: Array<string | { name: string; reason?: string }>;
};
export default function ImportResultModal(props: {
result: ImportResult;
onClose: () => void;
onEdit: (name: string) => void;
}) {
const { result, onClose, onEdit } = props;
const skipped = (result.skipped || []).map((s) =>
typeof s === "string" ? { name: s } : s
);
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="w-[560px] max-w-[92vw] bg-white rounded-2xl border shadow p-5 space-y-3">
<div className="flex items-center justify-between">
<div className="text-lg font-semibold">Import Summary</div>
<button className="p-1 rounded hover:bg-gray-100" onClick={onClose}>
<X className="h-5 w-5" />
</button>
</div>
<div className="flex items-center gap-2 text-sm">
<CheckCircle2 className="h-5 w-5 text-green-600" />
<span><b>{result.addedCount}</b> new product(s) added.</span>
</div>
{skipped.length > 0 && (
<div className="mt-2">
<div className="flex items-center gap-2 text-sm mb-2">
<AlertTriangle className="h-5 w-5 text-amber-600" />
<span><b>{skipped.length}</b> duplicate(s) skipped — click **Edit** to modify.</span>
</div>
<div className="max-h-56 overflow-auto border rounded-lg">
<table className="w-full text-sm">
<thead className="bg-gray-50">
<tr>
<th className="text-left p-2">Name</th>
<th className="text-left p-2">Reason</th>
<th className="text-left p-2">Action</th>
</tr>
</thead>
<tbody>
{skipped.map((d, i) => (
<tr key={i} className="border-t">
<td className="p-2">{d.name}</td>
<td className="p-2 text-gray-600">{d.reason || "Duplicate name"}</td>
<td className="p-2">
<button
className="inline-flex items-center gap-1 border rounded px-2 py-1"
onClick={() => onEdit(d.name)}
>
<Edit3 className="h-4 w-4" /> Edit
</button>
</td>
</tr>
))}
{skipped.length === 0 && (
<tr><td className="p-3 text-center text-gray-500" colSpan={3}>No duplicates.</td></tr>
)}
</tbody>
</table>
</div>
</div>
)}
<div className="pt-2 flex justify-end">
<button className="border rounded px-3 py-2" onClick={onClose}>Close</button>
</div>
</div>
</div>
);
}
|