56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import type { CustomerImportPreviewRow } from "@/types/customer";
|
|
|
|
const actionLabels = {
|
|
create: "Create",
|
|
update: "Update",
|
|
skip: "Skip",
|
|
error: "Error",
|
|
};
|
|
|
|
const actionClasses = {
|
|
create: "bg-emerald-50 text-emerald-700",
|
|
update: "bg-blue-50 text-blue-700",
|
|
skip: "bg-slate-100 text-slate-600",
|
|
error: "bg-red-50 text-red-700",
|
|
};
|
|
|
|
function issueText(row: CustomerImportPreviewRow) {
|
|
const issues = [...row.errors, ...row.warnings];
|
|
if (issues.length === 0) {
|
|
return "-";
|
|
}
|
|
return issues.map((issue) => `${issue.field || "Zeile"}: ${issue.message}`).join(" · ");
|
|
}
|
|
|
|
export default function ImportPreviewTable({ rows }: { rows: CustomerImportPreviewRow[] }) {
|
|
return (
|
|
<div className="max-h-80 overflow-auto rounded-lg border">
|
|
<table className="w-full min-w-[720px] border-collapse text-sm">
|
|
<thead className="sticky top-0 bg-slate-50 text-left text-xs uppercase text-slate-500">
|
|
<tr>
|
|
<th className="px-3 py-2">Zeile</th>
|
|
<th className="px-3 py-2">Aktion</th>
|
|
<th className="px-3 py-2">Kundennummer</th>
|
|
<th className="px-3 py-2">Firma</th>
|
|
<th className="px-3 py-2">Hinweise</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y bg-white">
|
|
{rows.map((row) => (
|
|
<tr key={row.row}>
|
|
<td className="px-3 py-2 font-medium">{row.row}</td>
|
|
<td className="px-3 py-2">
|
|
<span className={`rounded-full px-2 py-1 text-xs font-semibold ${actionClasses[row.action]}`}>
|
|
{actionLabels[row.action]}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-2">{row.customer_number || "-"}</td>
|
|
<td className="px-3 py-2">{row.company_name || "-"}</td>
|
|
<td className="px-3 py-2 text-slate-600">{issueText(row)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|