Add CSV import/export for students (Stage 11)
Import wizard (4 steps): - Upload CSV with UTF-8 or Windows-1251 (iconv-lite) decoding - Auto-detect columns: Email, Имя, Фамилия, Телефон - Preview table with per-row status: new / update / error - Options: auto-verify email, assign course + access days, send welcome email - Apply: creates users with bcrypt password + Account record, grants enrollments Export: - GET /api/admin/export-users with course filter + encoding selection - UTF-8 with BOM (works in all apps) or Windows-1251 (legacy Excel) - Fields: Email, Имя, Телефон, Дата регистрации, Курсы, Прогресс Navigation: added "Импорт / Экспорт" link to admin sidebar Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,7 @@ const links = [
|
||||
{ href: "/admin/categories", label: "Категории" },
|
||||
{ href: "/admin/users", label: "Пользователи" },
|
||||
{ href: "/curator/homework", label: "ДЗ на проверку" },
|
||||
{ href: "/admin/import-export", label: "Импорт / Экспорт" },
|
||||
{ href: "/admin/settings", label: "Настройки" },
|
||||
];
|
||||
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Download } from "lucide-react";
|
||||
|
||||
type Course = { id: string; title: string };
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
border: "2px solid var(--border)",
|
||||
background: "var(--background)",
|
||||
outline: "none",
|
||||
width: "100%",
|
||||
padding: "0.5rem 0.75rem",
|
||||
fontSize: "0.875rem",
|
||||
fontFamily: "inherit",
|
||||
};
|
||||
const focusHandlers = {
|
||||
onFocus: (e: React.FocusEvent<HTMLSelectElement>) =>
|
||||
(e.currentTarget.style.borderColor = "var(--foreground)"),
|
||||
onBlur: (e: React.FocusEvent<HTMLSelectElement>) =>
|
||||
(e.currentTarget.style.borderColor = "var(--border)"),
|
||||
};
|
||||
|
||||
export function CsvExporter({ courses }: { courses: Course[] }) {
|
||||
const [courseId, setCourseId] = useState("");
|
||||
const [encoding, setEncoding] = useState<"utf8" | "win1251">("utf8");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function handleExport() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams({ encoding });
|
||||
if (courseId) params.set("courseId", courseId);
|
||||
|
||||
const res = await fetch(`/api/admin/export-users?${params}`);
|
||||
if (!res.ok) throw new Error("Ошибка сервера");
|
||||
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
const cd = res.headers.get("content-disposition") ?? "";
|
||||
const match = cd.match(/filename="([^"]+)"/);
|
||||
a.download = match?.[1] ?? "students.csv";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-5 max-w-md">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>
|
||||
Фильтр по курсу
|
||||
</label>
|
||||
<select value={courseId} onChange={(e) => setCourseId(e.target.value)} style={{ ...inputStyle, appearance: "none" }} {...focusHandlers}>
|
||||
<option value="">Все ученики</option>
|
||||
{courses.map((c) => <option key={c.id} value={c.id}>{c.title}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>
|
||||
Кодировка файла
|
||||
</label>
|
||||
<select value={encoding} onChange={(e) => setEncoding(e.target.value as "utf8" | "win1251")} style={{ ...inputStyle, appearance: "none" }} {...focusHandlers}>
|
||||
<option value="utf8">UTF-8 (универсальная)</option>
|
||||
<option value="win1251">Windows-1251 (для Excel на Windows)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-1" style={{ border: "2px solid var(--border)" }}>
|
||||
<p className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>Поля в файле</p>
|
||||
<p className="text-sm">Email · Имя · Телефон · Дата регистрации · Курсы · Прогресс (уроков)</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleExport}
|
||||
disabled={loading}
|
||||
className="btn-aubade btn-aubade-accent flex items-center gap-2 px-5 py-2 text-sm"
|
||||
style={{ opacity: loading ? 0.6 : 1 }}
|
||||
>
|
||||
<Download size={14} />
|
||||
{loading ? "Формирую файл..." : "Скачать CSV"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition, useRef } from "react";
|
||||
import { Upload, FileText, CheckCircle, AlertCircle, Loader } from "lucide-react";
|
||||
import {
|
||||
parseCSV,
|
||||
applyImport,
|
||||
type PreviewResult,
|
||||
type ImportOptions,
|
||||
type ApplyResult,
|
||||
} from "@/app/admin/import-export/import-actions";
|
||||
|
||||
type Course = { id: string; title: string };
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
border: "2px solid var(--border)",
|
||||
background: "var(--background)",
|
||||
outline: "none",
|
||||
width: "100%",
|
||||
padding: "0.5rem 0.75rem",
|
||||
fontSize: "0.875rem",
|
||||
fontFamily: "inherit",
|
||||
};
|
||||
const focusHandlers = {
|
||||
onFocus: (e: React.FocusEvent<HTMLInputElement | HTMLSelectElement>) =>
|
||||
(e.currentTarget.style.borderColor = "var(--foreground)"),
|
||||
onBlur: (e: React.FocusEvent<HTMLInputElement | HTMLSelectElement>) =>
|
||||
(e.currentTarget.style.borderColor = "var(--border)"),
|
||||
};
|
||||
|
||||
function Toggle({ label, hint, checked, onChange }: { label: string; hint?: string; checked: boolean; onChange: (v: boolean) => void }) {
|
||||
return (
|
||||
<div className="flex items-start gap-3">
|
||||
<button type="button" onClick={() => onChange(!checked)} className="mt-0.5 shrink-0">
|
||||
<span className="relative inline-block w-10 h-6" style={{ background: checked ? "var(--accent)" : "var(--border)", border: "2px solid var(--foreground)" }}>
|
||||
<span className="absolute top-0.5 w-4 h-4 transition-transform" style={{ background: "var(--foreground)", left: "2px", transform: checked ? "translateX(16px)" : "translateX(0)" }} />
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{label}</p>
|
||||
{hint && <p className="text-xs mt-0.5" style={{ color: "var(--muted-foreground)" }}>{hint}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StepIndicator({ step }: { step: number }) {
|
||||
const steps = ["Загрузка", "Предпросмотр", "Опции", "Готово"];
|
||||
return (
|
||||
<div className="flex items-center gap-0 mb-6">
|
||||
{steps.map((label, i) => {
|
||||
const num = i + 1;
|
||||
const active = num === step;
|
||||
const done = num < step;
|
||||
return (
|
||||
<div key={num} className="flex items-center">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div
|
||||
className="w-7 h-7 flex items-center justify-center text-xs font-bold"
|
||||
style={{
|
||||
border: "2px solid var(--foreground)",
|
||||
background: done || active ? "var(--foreground)" : "transparent",
|
||||
color: done || active ? "var(--background)" : "var(--foreground)",
|
||||
}}
|
||||
>
|
||||
{done ? "✓" : num}
|
||||
</div>
|
||||
<span className="text-xs" style={{ color: active ? "var(--foreground)" : "var(--muted-foreground)", fontWeight: active ? 700 : 400 }}>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
{i < steps.length - 1 && (
|
||||
<div className="w-12 h-0.5 mx-1 mb-5" style={{ background: done ? "var(--foreground)" : "var(--border)" }} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main component ────────────────────────────────────────────────────────────
|
||||
|
||||
export function CsvImporter({ courses }: { courses: Course[] }) {
|
||||
const [step, setStep] = useState(1);
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Step 1 state
|
||||
const [encoding, setEncoding] = useState<"utf8" | "win1251">("utf8");
|
||||
const [updateExisting, setUpdateExisting] = useState(false);
|
||||
const [fileBase64, setFileBase64] = useState<string | null>(null);
|
||||
const [fileName, setFileName] = useState<string | null>(null);
|
||||
|
||||
// Step 2 state
|
||||
const [preview, setPreview] = useState<PreviewResult | null>(null);
|
||||
|
||||
// Step 3 state
|
||||
const [autoVerifyEmail, setAutoVerifyEmail] = useState(true);
|
||||
const [courseId, setCourseId] = useState("");
|
||||
const [accessDays, setAccessDays] = useState("0");
|
||||
const [sendWelcome, setSendWelcome] = useState(false);
|
||||
|
||||
// Step 4 state
|
||||
const [result, setResult] = useState<ApplyResult | null>(null);
|
||||
|
||||
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
setFileName(file.name);
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const ab = reader.result as ArrayBuffer;
|
||||
const bytes = new Uint8Array(ab);
|
||||
let binary = "";
|
||||
bytes.forEach((b) => (binary += String.fromCharCode(b)));
|
||||
setFileBase64(btoa(binary));
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
}
|
||||
|
||||
function handleParse() {
|
||||
if (!fileBase64) return;
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const result = await parseCSV(fileBase64, encoding, updateExisting);
|
||||
setPreview(result);
|
||||
setStep(2);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Ошибка разбора файла");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleApply() {
|
||||
if (!preview) return;
|
||||
setError(null);
|
||||
const options: ImportOptions = {
|
||||
updateExisting,
|
||||
autoVerifyEmail,
|
||||
courseId: courseId || undefined,
|
||||
accessDays: parseInt(accessDays) || 0,
|
||||
sendWelcome,
|
||||
encoding,
|
||||
};
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const r = await applyImport(preview.rows, options);
|
||||
setResult(r);
|
||||
setStep(4);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Ошибка импорта");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
setStep(1);
|
||||
setFileBase64(null);
|
||||
setFileName(null);
|
||||
setPreview(null);
|
||||
setResult(null);
|
||||
setError(null);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<StepIndicator step={step} />
|
||||
|
||||
{/* ── Step 1: Upload ── */}
|
||||
{step === 1 && (
|
||||
<div className="space-y-5">
|
||||
{/* File picker */}
|
||||
<div
|
||||
className="flex flex-col items-center justify-center gap-3 p-8 cursor-pointer"
|
||||
style={{ border: "2px dashed var(--border)" }}
|
||||
onClick={() => fileRef.current?.click()}
|
||||
>
|
||||
<Upload size={28} style={{ color: "var(--muted-foreground)" }} />
|
||||
{fileName ? (
|
||||
<div className="text-center">
|
||||
<p className="font-medium flex items-center gap-1.5">
|
||||
<FileText size={15} /> {fileName}
|
||||
</p>
|
||||
<p className="text-xs mt-0.5" style={{ color: "var(--muted-foreground)" }}>Нажмите чтобы выбрать другой файл</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<p className="font-medium">Выберите CSV-файл</p>
|
||||
<p className="text-xs mt-0.5" style={{ color: "var(--muted-foreground)" }}>Поддерживаются файлы из emdesell, Excel и любого табличного редактора</p>
|
||||
</div>
|
||||
)}
|
||||
<input ref={fileRef} type="file" accept=".csv,text/csv" className="hidden" onChange={handleFileChange} />
|
||||
</div>
|
||||
|
||||
{/* Options */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>Кодировка</label>
|
||||
<select value={encoding} onChange={(e) => setEncoding(e.target.value as "utf8" | "win1251")} style={{ ...inputStyle, appearance: "none" }} {...focusHandlers}>
|
||||
<option value="utf8">UTF-8 (стандарт)</option>
|
||||
<option value="win1251">Windows-1251 (Excel)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-end pb-0.5">
|
||||
<Toggle
|
||||
label="Обновлять существующих"
|
||||
hint="Если пользователь уже есть — обновить данные"
|
||||
checked={updateExisting}
|
||||
onChange={setUpdateExisting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Template download hint */}
|
||||
<p className="text-xs" style={{ color: "var(--muted-foreground)" }}>
|
||||
Ожидаемые колонки: <span className="font-mono">Email</span>, <span className="font-mono">Имя</span>, <span className="font-mono">Фамилия</span>, <span className="font-mono">Телефон</span> (порядок не важен, первая строка — заголовки).
|
||||
</p>
|
||||
|
||||
{error && <p className="text-sm p-3" style={{ border: "2px solid oklch(0.577 0.245 27.325)", color: "oklch(0.577 0.245 27.325)" }}>{error}</p>}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={!fileBase64 || pending}
|
||||
onClick={handleParse}
|
||||
className="btn-aubade btn-aubade-accent px-5 py-2 text-sm flex items-center gap-2"
|
||||
style={{ opacity: !fileBase64 || pending ? 0.5 : 1 }}
|
||||
>
|
||||
{pending ? <><Loader size={14} className="animate-spin" /> Разбираю...</> : "Далее →"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Step 2: Preview ── */}
|
||||
{step === 2 && preview && (
|
||||
<div className="space-y-4">
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ label: "Будет создано", count: preview.countNew, color: "#3A6A3A" },
|
||||
{ label: "Будет обновлено", count: preview.countUpdate, color: "var(--foreground)" },
|
||||
{ label: "Ошибок", count: preview.countError, color: "oklch(0.577 0.245 27.325)" },
|
||||
].map(({ label, count, color }) => (
|
||||
<div key={label} className="card-aubade p-4 text-center">
|
||||
<p className="text-2xl font-bold" style={{ color }}>{count}</p>
|
||||
<p className="text-xs mt-0.5" style={{ color: "var(--muted-foreground)" }}>{label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-auto max-h-72" style={{ border: "2px solid var(--border)" }}>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ borderBottom: "2px solid var(--border)", background: "var(--background)" }}>
|
||||
{["#", "Email", "Имя", "Телефон", "Статус"].map((h) => (
|
||||
<th key={h} className="text-left px-3 py-2 text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{preview.rows.map((row) => (
|
||||
<tr key={row.index} style={{ borderBottom: "1px solid var(--border)" }}>
|
||||
<td className="px-3 py-1.5 text-xs" style={{ color: "var(--muted-foreground)" }}>{row.index}</td>
|
||||
<td className="px-3 py-1.5 font-mono text-xs">{row.email}</td>
|
||||
<td className="px-3 py-1.5 text-xs">{row.name}</td>
|
||||
<td className="px-3 py-1.5 text-xs">{row.phone || "—"}</td>
|
||||
<td className="px-3 py-1.5">
|
||||
{row.status === "new" && <span className="text-xs font-bold" style={{ color: "#3A6A3A" }}>✦ Новый</span>}
|
||||
{row.status === "update" && <span className="text-xs font-bold">↻ Обновить</span>}
|
||||
{row.status === "error" && (
|
||||
<span className="text-xs font-bold flex items-center gap-1" style={{ color: "oklch(0.577 0.245 27.325)" }}>
|
||||
<AlertCircle size={12} /> {row.errorMsg}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button type="button" onClick={() => setStep(3)} disabled={preview.countNew + preview.countUpdate === 0}
|
||||
className="btn-aubade btn-aubade-accent px-5 py-2 text-sm"
|
||||
style={{ opacity: preview.countNew + preview.countUpdate === 0 ? 0.4 : 1 }}>
|
||||
Далее →
|
||||
</button>
|
||||
<button type="button" onClick={handleReset} className="btn-aubade px-4 py-2 text-sm">← Назад</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Step 3: Options ── */}
|
||||
{step === 3 && (
|
||||
<div className="space-y-5 max-w-md">
|
||||
<Toggle
|
||||
label="Подтвердить email автоматически"
|
||||
hint="Пользователи смогут войти сразу, без подтверждения почты."
|
||||
checked={autoVerifyEmail}
|
||||
onChange={setAutoVerifyEmail}
|
||||
/>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>Курс для доступа</label>
|
||||
<select value={courseId} onChange={(e) => setCourseId(e.target.value)} style={{ ...inputStyle, appearance: "none" }} {...focusHandlers}>
|
||||
<option value="">— Не присваивать —</option>
|
||||
{courses.map((c) => <option key={c.id} value={c.id}>{c.title}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{courseId && (
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>Срок доступа (дней)</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={accessDays}
|
||||
onChange={(e) => setAccessDays(e.target.value)}
|
||||
placeholder="0 — бессрочно"
|
||||
style={inputStyle}
|
||||
{...focusHandlers}
|
||||
/>
|
||||
<p className="text-xs" style={{ color: "var(--muted-foreground)" }}>0 = бессрочный доступ</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Toggle
|
||||
label="Отправить приветственное письмо"
|
||||
hint="Письмо будет отправлено каждому новому пользователю."
|
||||
checked={sendWelcome}
|
||||
onChange={setSendWelcome}
|
||||
/>
|
||||
|
||||
{error && <p className="text-sm p-3" style={{ border: "2px solid oklch(0.577 0.245 27.325)", color: "oklch(0.577 0.245 27.325)" }}>{error}</p>}
|
||||
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button type="button" onClick={handleApply} disabled={pending}
|
||||
className="btn-aubade btn-aubade-accent px-5 py-2 text-sm flex items-center gap-2"
|
||||
style={{ opacity: pending ? 0.5 : 1 }}>
|
||||
{pending ? <><Loader size={14} className="animate-spin" /> Импортирую...</> : "Применить импорт"}
|
||||
</button>
|
||||
<button type="button" onClick={() => setStep(2)} className="btn-aubade px-4 py-2 text-sm">← Назад</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Step 4: Result ── */}
|
||||
{step === 4 && result && (
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center gap-3 p-5" style={{ border: "2px solid #3A6A3A" }}>
|
||||
<CheckCircle size={24} style={{ color: "#3A6A3A", flexShrink: 0 }} />
|
||||
<div>
|
||||
<p className="font-bold">Импорт завершён</p>
|
||||
<p className="text-sm mt-0.5" style={{ color: "var(--muted-foreground)" }}>
|
||||
Создано: <strong>{result.created}</strong> · Обновлено: <strong>{result.updated}</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{result.errors.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-bold uppercase tracking-widest" style={{ color: "oklch(0.577 0.245 27.325)" }}>
|
||||
Ошибки ({result.errors.length})
|
||||
</p>
|
||||
<div className="max-h-40 overflow-y-auto space-y-1">
|
||||
{result.errors.map((e, i) => (
|
||||
<p key={i} className="text-xs font-mono p-2" style={{ border: "1px solid oklch(0.577 0.245 27.325)", color: "oklch(0.577 0.245 27.325)" }}>{e}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button type="button" onClick={handleReset} className="btn-aubade px-4 py-2 text-sm">
|
||||
Импортировать ещё
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user