@goplusvn/core 0.1.55 → 0.1.57

package/src/import/import-dialog.tsx

@@ -0,0 +1,570 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { toast } from "sonner";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Download,
+  FileText,
+  Upload,
+  X,
+} from "lucide-react";
+
+import type { EntityConfig, ImportOptions } from "../types";
+
+import {
+  generateXLSXTemplate,
+  parseFile,
+  validateImportData,
+} from "../crud/lib/import-export-service";
+import {
+  filenameFromContentDisposition,
+  triggerBlobDownload,
+} from "../export/download-file";
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui";
+
+// ─────────────────────────────────────────────────
+// Kiểu dữ liệu
+// ─────────────────────────────────────────────────
+
+/**
+ * Hai hợp đồng server trả về hai hình dạng khác nhau. Quy về MỘT mô hình hiển
+ * thị để thân dialog không cần biết nguồn nào:
+ *   - harness workbook: { importedCount, skippedCount, totalRows, errors:[{column}], warnings }
+ *   - CRUD theo EntityConfig: { imported, failed, errors:[{field}] }
+ */
+interface NormalizedResult {
+  success: boolean;
+  importedCount: number;
+  skippedCount: number;
+  totalRows: number;
+  errors: { row: number; label?: string; message: string }[];
+  warnings?: { row: number; message: string }[];
+}
+
+export function normalizeImportResult(raw: any): NormalizedResult {
+  const importedCount = raw?.importedCount ?? raw?.imported ?? 0;
+  const skippedCount = raw?.skippedCount ?? raw?.failed ?? 0;
+  const errors = Array.isArray(raw?.errors)
+    ? raw.errors.map((e: any) => ({
+        row: e?.row ?? 0,
+        label: e?.column ?? e?.field ?? undefined,
+        message: e?.message ?? "",
+      }))
+    : [];
+  return {
+    success: Boolean(raw?.success),
+    importedCount,
+    skippedCount,
+    totalRows: raw?.totalRows ?? importedCount + skippedCount,
+    errors,
+    warnings: Array.isArray(raw?.warnings)
+      ? raw.warnings.map((w: any) => ({
+          row: w?.row ?? 0,
+          message: w?.message ?? "",
+        }))
+      : undefined,
+  };
+}
+
+export interface ImportDialogProps {
+  /** Mở/đóng do ngoài điều khiển. Bỏ CẢ HAI để dialog tự quản (tự render nút). */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Nút mở khi chạy chế độ tự quản (mặc định là nút "Import"). */
+  trigger?: ReactNode;
+  /** Tiêu đề. Mặc định `Import {config.pluralLabel}` khi có config. */
+  title?: string;
+  description?: string;
+  /** Endpoint nhận POST multipart. */
+  apiUrl: string;
+  /**
+   * Nguồn file mẫu — chọn MỘT:
+   *  - `templateApiUrl`: GET mẫu do server dựng (nhiều sheet, chứng từ), hoặc
+   *  - `config`: dựng mẫu ngay ở client từ EntityConfig.
+   * Có `config` thì dialog còn kiểm tra file TRƯỚC khi gửi và gửi kèm `format`.
+   */
+  templateApiUrl?: string;
+  config?: EntityConfig;
+  /** Không có quyền nhập thì không render gì. */
+  canImport?: boolean;
+  onSuccess?: () => void;
+  /**
+   * Trang theo dõi tác vụ nền, dùng cho nút "Xem tiến độ" khi server trả 202.
+   * Mặc định `/{lang}/tasks` suy từ đoạn đầu của đường dẫn hiện tại.
+   */
+  tasksPath?: string;
+}
+
+// ─────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────
+
+/**
+ * MỘT dialog nhập file cho cả app. Hai chế độ, chung một thân:
+ *  - mẫu từ server (`templateApiUrl`): chứng từ nhiều sheet (đơn mua/đơn bán).
+ *  - theo config (`config`): thực thể phẳng — dựng mẫu ở client, kiểm tra
+ *    trước khi gửi, tự nhận định dạng theo đuôi file.
+ *
+ * Server trả 202 nghĩa là file lớn và đã chuyển sang NHẬP NỀN: đóng dialog,
+ * báo toast kèm lối sang trang tác vụ; kết quả sẽ về qua chuông thông báo.
+ */
+export function ImportDialog({
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  trigger,
+  title,
+  description,
+  apiUrl,
+  templateApiUrl,
+  config,
+  canImport = true,
+  onSuccess,
+  tasksPath,
+}: ImportDialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [file, setFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<NormalizedResult | null>(null);
+  const [format, setFormat] = useState<ImportOptions["format"]>("xlsx");
+  const successTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = isControlled
+    ? (controlledOnOpenChange ?? (() => {}))
+    : setInternalOpen;
+
+  const configMode = Boolean(config);
+  const resolvedTitle =
+    title ?? (config ? `Import ${config.pluralLabel}` : "Import dữ liệu");
+
+  const requiredLabels = useMemo(() => {
+    if (!config) return [];
+    return config.fields
+      .filter((f) => !f.hideInForm && f.required)
+      .map((f) => f.label);
+  }, [config]);
+
+  const handleFileSelect = useCallback(
+    (selectedFile: File) => {
+      setFile(selectedFile);
+      setResult(null);
+      if (configMode) {
+        const extension = selectedFile.name.split(".").pop()?.toLowerCase();
+        if (extension === "json") setFormat("json");
+        else if (extension === "csv") setFormat("csv");
+        else setFormat("xlsx");
+      }
+    },
+    [configMode],
+  );
+
+  const clearSelectedFile = () => {
+    setFile(null);
+    setResult(null);
+  };
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const first = acceptedFiles[0];
+      if (first) handleFileSelect(first);
+    },
+    [handleFileSelect],
+  );
+
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    open: openFilePicker,
+  } = useDropzone({
+    onDrop,
+    multiple: false,
+    maxFiles: 1,
+    noClick: true,
+    accept: configMode
+      ? {
+          "text/csv": [".csv"],
+          "application/json": [".json"],
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
+            ".xlsx",
+          ],
+          "application/vnd.ms-excel": [".xls"],
+        }
+      : {
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
+            ".xlsx",
+          ],
+          "application/vnd.ms-excel": [".xls"],
+        },
+  });
+
+  const handleDownloadTemplate = async () => {
+    try {
+      if (config) {
+        const blob = await generateXLSXTemplate(config);
+        triggerBlobDownload(blob, `${config.name}_template.xlsx`);
+        return;
+      }
+      if (!templateApiUrl) return;
+      const response = await fetch(templateApiUrl);
+      if (!response.ok) throw new Error("Không thể tải file mẫu");
+      const blob = await response.blob();
+      triggerBlobDownload(
+        blob,
+        filenameFromContentDisposition(
+          response.headers.get("content-disposition"),
+          "template.xlsx",
+        ),
+      );
+    } catch (error) {
+      console.error("Error downloading template:", error);
+    }
+  };
+
+  const handleImport = async () => {
+    if (!file) return;
+
+    setLoading(true);
+    setResult(null);
+
+    try {
+      // Chế độ config kiểm tra ở client trước, để người dùng thấy lỗi cột mà
+      // không cần tải file lên.
+      if (config) {
+        const parsed = await parseFile(file, format);
+        const validation = validateImportData(parsed, config, {
+          format,
+          skipErrors: false,
+        });
+        if (!validation.success && validation.errors.length > 0) {
+          setResult(normalizeImportResult(validation));
+          setLoading(false);
+          return;
+        }
+      }
+
+      const formData = new FormData();
+      formData.append("file", file);
+      if (configMode) {
+        formData.append("format", format ?? "xlsx");
+      } else {
+        formData.append("mode", "full");
+      }
+
+      // Giữ nguyên query string trên apiUrl (ví dụ ?supplierId=...).
+      const url = new URL(apiUrl, window.location.origin);
+      const postUrl = `${url.pathname}${url.search}`;
+
+      const response = await fetch(postUrl, { method: "POST", body: formData });
+      const raw = await response.json();
+
+      // 202 = server chuyển sang NHẬP NỀN (file lớn) — chuông sẽ báo kết quả,
+      // kèm link tải file lỗi từng dòng nếu có.
+      if (response.status === 202) {
+        const totalNote =
+          typeof raw?.total === "number"
+            ? ` (${raw.total.toLocaleString("vi-VN")} dòng)`
+            : "";
+        toast.success(
+          `File lớn${totalNote} — đang nhập nền, sẽ có thông báo khi xong.`,
+          {
+            duration: 8000,
+            action: {
+              label: "Xem tiến độ",
+              onClick: () => {
+                const lang = window.location.pathname.split("/")[1] || "vi";
+                window.location.href = tasksPath ?? `/${lang}/tasks`;
+              },
+            },
+          },
+        );
+        setOpen(false);
+        setFile(null);
+        setResult(null);
+        setLoading(false);
+        return;
+      }
+
+      if (!response.ok && !raw?.errors) {
+        throw new Error(raw?.error || `Import thất bại (${response.status})`);
+      }
+
+      const normalized = normalizeImportResult(raw);
+      setResult(normalized);
+
+      if (normalized.success && normalized.importedCount > 0) {
+        if (successTimeoutRef.current) clearTimeout(successTimeoutRef.current);
+        successTimeoutRef.current = setTimeout(() => {
+          setOpen(false);
+          setFile(null);
+          setResult(null);
+          onSuccess?.();
+          successTimeoutRef.current = null;
+        }, 2000);
+      }
+    } catch (error) {
+      console.error("Import error:", error);
+      setResult({
+        success: false,
+        totalRows: 0,
+        importedCount: 0,
+        skippedCount: 0,
+        errors: [
+          {
+            row: 0,
+            message:
+              error instanceof Error ? error.message : "Lỗi không xác định",
+          },
+        ],
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Dọn timeout đóng-sau-khi-thành-công khi unmount.
+  useEffect(() => {
+    return () => {
+      if (successTimeoutRef.current) {
+        clearTimeout(successTimeoutRef.current);
+        successTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  // Đóng dialog thì xoá trạng thái tạm.
+  useEffect(() => {
+    if (!open) {
+      setFile(null);
+      setResult(null);
+    }
+  }, [open]);
+
+  // Cổng quyền đặt SAU mọi hook — đổi `canImport` giữa chừng không được phép
+  // làm lệch thứ tự hook (lỗi cũ của CrudImportDialog).
+  if (!canImport) return null;
+
+  const acceptHint = configMode ? ".xlsx, .csv, .json" : ".xlsx, .xls";
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {!isControlled && (
+        <DialogTrigger asChild>
+          {trigger ?? (
+            <Button variant="outline" size="sm">
+              <Upload className="mr-2 h-4 w-4" />
+              Import
+            </Button>
+          )}
+        </DialogTrigger>
+      )}
+      <DialogContent className="sm:max-w-[640px]">
+        <DialogHeader>
+          <DialogTitle>{resolvedTitle}</DialogTitle>
+          <DialogDescription>
+            {description ||
+              "Làm theo 2 bước: tải file mẫu, điền dữ liệu rồi chọn file để import."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Bước 1: file mẫu */}
+          <div className="space-y-3 rounded-lg border bg-muted/20 p-4">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <FileText className="h-4 w-4 text-muted-foreground" />
+                  <p className="font-medium">Bước 1: Tải file mẫu</p>
+                </div>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  Tải mẫu đúng cột, điền dữ liệu rồi quay lại chọn file để
+                  import.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              <Button
+                type="button"
+                variant="default"
+                size="sm"
+                onClick={handleDownloadTemplate}
+              >
+                <Download className="mr-2 h-4 w-4" />
+                Tải mẫu XLSX
+              </Button>
+            </div>
+
+            {requiredLabels.length > 0 && (
+              <p className="text-xs text-muted-foreground">
+                Trường bắt buộc:{" "}
+                <span className="font-medium">{requiredLabels.join(", ")}</span>
+              </p>
+            )}
+          </div>
+
+          {/* Bước 2: chọn file */}
+          <div className="space-y-3 rounded-lg border p-4">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <Upload className="h-4 w-4 text-muted-foreground" />
+                  <p className="font-medium">Bước 2: Chọn file để import</p>
+                </div>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  Kéo thả file vào vùng bên dưới hoặc bấm &quot;Chọn file&quot;.
+                </p>
+              </div>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={openFilePicker}
+              >
+                Chọn file
+              </Button>
+            </div>
+
+            {/* Vùng kéo thả — react-dropzone trả kèm prop `popover` mà React
+                chưa biết, bỏ ra để tránh cảnh báo unknown attribute. */}
+            <div
+              {...(() => {
+                const { popover: _popover, ...rest } = getRootProps() as any;
+                return rest;
+              })()}
+              className={[
+                "rounded-lg border-2 border-dashed p-4 transition-colors",
+                "bg-background hover:bg-muted/30",
+                isDragActive ? "border-primary bg-muted/30" : "border-input",
+              ].join(" ")}
+            >
+              <input
+                {...(() => {
+                  const { popover: _popover, ...rest } = getInputProps() as any;
+                  return rest;
+                })()}
+              />
+              {file ? (
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium">{file.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {(file.size / 1024).toFixed(1)} KB — Định dạng:{" "}
+                      <span className="font-medium uppercase">{format}</span>
+                    </p>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="icon"
+                    onClick={clearSelectedFile}
+                    aria-label="Remove"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ) : (
+                <div className="py-6 text-center">
+                  <p className="text-sm font-medium">
+                    Kéo thả file vào đây để import
+                  </p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    Hỗ trợ: {acceptHint}
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Kết quả */}
+          {result && (
+            <Alert variant={result.success ? "default" : "destructive"}>
+              {result.success ? (
+                <CheckCircle2 className="h-4 w-4" />
+              ) : (
+                <AlertCircle className="h-4 w-4" />
+              )}
+              <AlertDescription>
+                <div className="space-y-1">
+                  {result.success ? (
+                    <div className="font-medium text-success-text">
+                      ✅ Import thành công: {result.importedCount} dòng
+                    </div>
+                  ) : (
+                    <div>
+                      Tổng: {result.totalRows} | Thành công:{" "}
+                      {result.importedCount} | Lỗi: {result.errors.length}
+                    </div>
+                  )}
+                  {result.errors.length > 0 && (
+                    <div className="mt-2 max-h-40 space-y-1 overflow-y-auto">
+                      {result.errors.slice(0, 10).map((error, index) => (
+                        <div key={index} className="text-xs">
+                          {error.row > 0 ? (
+                            <>
+                              <span className="font-mono font-medium">
+                                Dòng {error.row}
+                              </span>
+                              {error.label && (
+                                <span className="text-muted-foreground">
+                                  {" "}
+                                  [{error.label}]
+                                </span>
+                              )}
+                              : {error.message}
+                            </>
+                          ) : (
+                            error.message
+                          )}
+                        </div>
+                      ))}
+                      {result.errors.length > 10 && (
+                        <div className="text-xs text-muted-foreground">
+                          ... và {result.errors.length - 10} lỗi khác
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  {result.warnings && result.warnings.length > 0 && (
+                    <div className="mt-2 max-h-20 space-y-1 overflow-y-auto">
+                      {result.warnings.slice(0, 5).map((w, index) => (
+                        <div key={index} className="text-xs text-warning-text">
+                          ⚠️ Dòng {w.row}: {w.message}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Đóng
+          </Button>
+          <Button onClick={handleImport} disabled={!file || loading}>
+            {loading ? "Đang import..." : "Import"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}