@goplusvn/core 0.1.54 → 0.1.56

package/src/crud/components/crud-import-dialog.tsx

@@ -1,33 +1,18 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { AlertCircle, Download, FileText, Upload, X } from "lucide-react";
-
-import type { EntityConfig, ImportOptions, ImportResult } from "../../types";
-
-import {
-  downloadFile,
-  generateCSVTemplate,
-  generateJSONTemplate,
-  generateXLSXTemplate,
-  parseFile,
-  validateImportData,
-} from "../lib/import-export-service";
-
-import { Alert, AlertDescription } from "../../ui";
-import { Button } from "../../ui";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../ui";
-
-interface CrudImportDialogProps {
+import type { EntityConfig } from "../../types";
+
+import { ImportDialog } from "../../import/import-dialog";
+
+/**
+ * @deprecated Dùng `ImportDialog` của `@goerp/core/import`. Giữ lại tên và
+ * chữ ký cũ để các app đang gọi (`endpoint` thay vì `apiUrl`) không vỡ.
+ *
+ * Bản cũ có LỖI THẬT: `if (!canImport) return null` nằm TRƯỚC `useMemo`/
+ * `useCallback`, nên khi quyền đổi false → true React ném "Rendered more hooks
+ * than during the previous render". `ImportDialog` đặt cổng quyền sau mọi hook.
+ */
+export interface CrudImportDialogProps {
   config: EntityConfig;
   endpoint: string;
   canImport?: boolean;
@@ -41,400 +26,17 @@ export function CrudImportDialog({
   endpoint,
   canImport = true,
   onSuccess,
-  open: controlledOpen,
-  onOpenChange: controlledOnOpenChange,
+  open,
+  onOpenChange,
 }: CrudImportDialogProps) {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const [file, setFile] = useState<File | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState<ImportResult | 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;
-
-  if (!canImport) {
-    return null;
-  }
-
-  const requiredLabels = useMemo(() => {
-    return config.fields
-      .filter((f) => !f.hideInForm && f.required)
-      .map((f) => f.label);
-  }, [config.fields]);
-
-  const handleFileSelect = useCallback((selectedFile: File) => {
-    setFile(selectedFile);
-    setResult(null);
-
-    // Detect format from file extension
-    const extension = selectedFile.name.split(".").pop()?.toLowerCase();
-    if (extension === "xlsx" || extension === "xls") {
-      setFormat("xlsx");
-    } else if (extension === "json") {
-      setFormat("json");
-    } else if (extension === "csv") {
-      setFormat("csv");
-    } else {
-      setFormat("xlsx");
-    }
-  }, []);
-
-  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: {
-      "text/csv": [".csv"],
-      "application/json": [".json"],
-      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
-        ".xlsx",
-      ],
-      "application/vnd.ms-excel": [".xls"],
-    },
-  });
-
-  const handleDownloadTemplate = async (
-    templateFormat: ImportOptions["format"] = format,
-  ) => {
-    try {
-      let blob: Blob;
-      let filename: string;
-
-      switch (templateFormat) {
-        case "csv": {
-          const csvContent = generateCSVTemplate(config);
-          blob = new Blob([csvContent], { type: "text/csv" });
-          filename = `${config.name}_template.csv`;
-          break;
-        }
-        case "json": {
-          const jsonContent = JSON.stringify(
-            generateJSONTemplate(config),
-            null,
-            2,
-          );
-          blob = new Blob([jsonContent], { type: "application/json" });
-          filename = `${config.name}_template.json`;
-          break;
-        }
-        case "xlsx": {
-          blob = await generateXLSXTemplate(config);
-          filename = `${config.name}_template.xlsx`;
-          break;
-        }
-      }
-
-      downloadFile(blob, filename);
-    } catch (error) {
-      console.error("Error generating template:", error);
-    }
-  };
-
-  const handleQuickDownloadTemplate = async (
-    nextFormat: ImportOptions["format"],
-  ) => {
-    setFormat(nextFormat);
-    await handleDownloadTemplate(nextFormat);
-  };
-
-  const handleImport = async () => {
-    if (!file) return;
-
-    setLoading(true);
-    setResult(null);
-
-    try {
-      // Parse file
-      const data = await parseFile(file, format);
-
-      // Validate data
-      const validationResult = validateImportData(data, config, {
-        format,
-        skipErrors: false,
-      });
-
-      if (!validationResult.success && validationResult.errors.length > 0) {
-        setResult(validationResult);
-        setLoading(false);
-        return;
-      }
-
-      // Parse endpoint to preserve query params (e.g., supplierId)
-      const url = new URL(endpoint, window.location.origin);
-      const importUrl = `${url.pathname}${url.search}`;
-
-      // Upload to API
-      const formData = new FormData();
-      formData.append("file", file);
-      formData.append("format", format);
-
-      const response = await fetch(importUrl, {
-        method: "POST",
-        body: formData,
-      });
-
-      const importResult = await response.json();
-
-      if (!response.ok) {
-        // API returned an error - show the error message if available
-        const errorMessage =
-          importResult?.errors?.[0]?.message ||
-          importResult?.error ||
-          `Import failed with status ${response.status}`;
-        throw new Error(errorMessage);
-      }
-
-      setResult(importResult);
-
-      if (importResult.success) {
-        // Clear any existing timeout
-        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,
-        imported: 0,
-        failed: 0,
-        errors: [
-          {
-            row: 0,
-            field: "",
-            message: error instanceof Error ? error.message : "Import failed",
-          },
-        ],
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // Cleanup timeout when component unmounts or dialog closes
-  useEffect(() => {
-    return () => {
-      if (successTimeoutRef.current) {
-        clearTimeout(successTimeoutRef.current);
-        successTimeoutRef.current = null;
-      }
-    };
-  }, []);
-
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm">
-          <Upload className="mr-2 h-4 w-4" />
-          Import
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[640px]">
-        <DialogHeader>
-          <DialogTitle>Import {config.pluralLabel}</DialogTitle>
-          <DialogDescription>
-            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">
-          {/* Step 1: Template */}
-          <div className="rounded-lg border bg-muted/20 p-4 space-y-3">
-            <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="text-sm text-muted-foreground mt-1">
-                  Tải mẫu đúng cột, điền dữ liệu rồi quay lại chọn file để
-                  import.
-                </p>
-              </div>
-              <div className="shrink-0 text-xs text-muted-foreground">
-                Định dạng:{" "}
-                <span className="font-medium uppercase">{format}</span>
-              </div>
-            </div>
-
-            <div className="flex flex-wrap gap-2">
-              <Button
-                type="button"
-                variant={format === "xlsx" ? "default" : "outline"}
-                size="sm"
-                onClick={() => handleQuickDownloadTemplate("xlsx")}
-              >
-                <Download className="mr-2 h-4 w-4" />
-                Tải mẫu XLSX
-              </Button>
-              {/* <Button
-                type="button"
-                variant={format === "csv" ? "default" : "outline"}
-                size="sm"
-                onClick={() => handleQuickDownloadTemplate("csv")}
-              >
-                <Download className="mr-2 h-4 w-4" />
-                Tải mẫu CSV
-              </Button>
-              <Button
-                type="button"
-                variant={format === "json" ? "default" : "outline"}
-                size="sm"
-                onClick={() => handleQuickDownloadTemplate("json")}
-              >
-                <Download className="mr-2 h-4 w-4" />
-                Tải mẫu JSON
-              </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>
-
-          {/* Step 2: Upload */}
-          <div className="rounded-lg border p-4 space-y-3">
-            <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="text-sm text-muted-foreground mt-1">
-                  Kéo thả file vào vùng bên dưới hoặc bấm “Chọn file”.
-                </p>
-              </div>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={openFilePicker}
-              >
-                Chọn file
-              </Button>
-            </div>
-
-            {/* Omit popover to fix React 18 type mismatch */}
-            <div
-              {...(() => {
-                const { 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, ...rest } = getInputProps() as any;
-                  return rest;
-                })()}
-              />
-              {file ? (
-                <div className="flex items-center justify-between gap-3">
-                  <div className="min-w-0">
-                    <p className="text-sm font-medium truncate">{file.name}</p>
-                    <p className="text-xs text-muted-foreground">
-                      Đã nhận diện đị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="text-xs text-muted-foreground mt-1">
-                    Hỗ trợ: .xlsx, .csv, .json
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {result && (
-            <Alert variant={result.success ? "default" : "destructive"}>
-              <AlertCircle className="h-4 w-4" />
-              <AlertDescription>
-                <div className="space-y-1">
-                  <div>Import thành công: {result.imported}</div>
-                  <div>Lỗi: {result.failed}</div>
-                  {result.errors.length > 0 && (
-                    <div className="mt-2 max-h-32 overflow-y-auto">
-                      {result.errors.slice(0, 5).map((error, index) => (
-                        <div key={index} className="text-xs">
-                          Dòng {error.row}: {error.message}
-                        </div>
-                      ))}
-                      {result.errors.length > 5 && (
-                        <div className="text-xs">
-                          ... và {result.errors.length - 5} lỗi khác
-                        </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>
+    <ImportDialog
+      apiUrl={endpoint}
+      config={config}
+      canImport={canImport}
+      onSuccess={onSuccess}
+      open={open}
+      onOpenChange={onOpenChange}
+    />
   );
 }

package/src/crud/components/crud-page.tsx

@@ -91,10 +91,10 @@ const CrudSheet = dynamic(
   },
 );
 
-const CrudImportDialog = dynamic(
+const ImportDialog = dynamic(
   () =>
-    import("./crud-import-dialog").then((m) => ({
-      default: m.CrudImportDialog,
+    import("../../import/import-dialog").then((m) => ({
+      default: m.ImportDialog,
     })),
   {
     ssr: false, // Import dialog doesn't need SSR
@@ -139,7 +139,6 @@ function CrudPageContent({
   dictionary,
   customActions,
 }: CrudPageContentProps) {
-
   const router = useRouter();
   const params = useParams();
   const lang = (params?.lang as string) || "vi";
@@ -861,9 +860,9 @@ function CrudPageContent({
                   <div className="flex items-center gap-2 flex-wrap sm:flex-nowrap">
                     {permissions.import && config.features?.import && (
                       <Suspense fallback={null}>
-                        <CrudImportDialog
+                        <ImportDialog
                           config={config}
-                          endpoint={(() => {
+                          apiUrl={(() => {
                             // Handle endpoint with query params correctly
                             const baseUrl = config.apiEndpoint.split("?")[0];
                             const queryParams = config.apiEndpoint.includes("?")
@@ -913,9 +912,7 @@ function CrudPageContent({
                 onEdit={handleEdit}
                 onDelete={handleDelete}
                 onCustomAction={handleCustomAction}
-                onRowClick={
-                  showDetailOnRowClick ? handleRowClick : undefined
-                }
+                onRowClick={showDetailOnRowClick ? handleRowClick : undefined}
                 onTableReady={setTableInstance}
                 onEmptyStateAction={{
                   onCreate: handleCreate,
@@ -934,9 +931,7 @@ function CrudPageContent({
                   onEdit={handleEdit}
                   onDelete={handleDelete}
                   onCustomAction={handleCustomAction}
-                  onRowClick={
-                    showDetailOnRowClick ? handleRowClick : undefined
-                  }
+                  onRowClick={showDetailOnRowClick ? handleRowClick : undefined}
                   onEmptyStateAction={{
                     onCreate: handleCreate,
                     onClearSearch: () => setSearch(""),

package/src/import/__tests__/import-dialog.test.tsx

@@ -0,0 +1,141 @@
+/**
+ * Hộp thoại nhập hợp nhất. Ba điều dễ vỡ:
+ *  - cổng quyền phải nằm SAU mọi hook (bản CrudImportDialog cũ đặt trước nên
+ *    khi quyền đổi false → true React ném "Rendered more hooks…"),
+ *  - hai hợp đồng server (harness workbook và CRUD theo EntityConfig) phải quy
+ *    về một mô hình hiển thị,
+ *  - 202 nghĩa là nhập nền: đóng dialog, KHÔNG hiện báo cáo "0 dòng".
+ */
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ImportDialog, normalizeImportResult } from "../import-dialog";
+
+const toastSuccess = vi.fn();
+vi.mock("sonner", () => ({
+  toast: {
+    success: (...args: unknown[]) => toastSuccess(...args),
+    error: vi.fn(),
+  },
+}));
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  toastSuccess.mockClear();
+});
+
+describe("normalizeImportResult", () => {
+  it("đọc được hợp đồng harness workbook", () => {
+    expect(
+      normalizeImportResult({
+        success: true,
+        totalRows: 10,
+        importedCount: 8,
+        skippedCount: 2,
+        errors: [{ row: 3, column: "Số lượng", message: "phải là số" }],
+        warnings: [{ row: 4, message: "trùng mã" }],
+      }),
+    ).toEqual({
+      success: true,
+      totalRows: 10,
+      importedCount: 8,
+      skippedCount: 2,
+      errors: [{ row: 3, label: "Số lượng", message: "phải là số" }],
+      warnings: [{ row: 4, message: "trùng mã" }],
+    });
+  });
+
+  it("đọc được hợp đồng CRUD (imported/failed/field) và tự suy totalRows", () => {
+    const r = normalizeImportResult({
+      success: false,
+      imported: 3,
+      failed: 1,
+      errors: [{ row: 2, field: "email", message: "sai định dạng" }],
+    });
+    expect(r.importedCount).toBe(3);
+    expect(r.skippedCount).toBe(1);
+    expect(r.totalRows).toBe(4);
+    expect(r.errors[0].label).toBe("email");
+    expect(r.warnings).toBeUndefined();
+  });
+
+  it("lỗi không kèm cột lẫn field thì nhãn để trống, không bịa", () => {
+    const r = normalizeImportResult({
+      success: false,
+      errors: [{ row: 0, message: "File rỗng" }],
+    });
+    expect(r.errors[0]).toEqual({
+      row: 0,
+      label: undefined,
+      message: "File rỗng",
+    });
+  });
+
+  it("chịu được phản hồi rỗng/rác mà không ném", () => {
+    expect(normalizeImportResult(null)).toMatchObject({
+      success: false,
+      importedCount: 0,
+      errors: [],
+    });
+    expect(normalizeImportResult({ errors: "x" }).errors).toEqual([]);
+  });
+});
+
+describe("ImportDialog", () => {
+  it("không có quyền thì không render gì, và BẬT quyền giữa chừng không vỡ hook", () => {
+    const { rerender, container } = render(
+      <ImportDialog apiUrl="/api/x/import" canImport={false} />,
+    );
+    expect(container.innerHTML).toBe("");
+
+    // Chính là ca làm vỡ bản cũ (early return đứng trước useMemo/useCallback).
+    rerender(<ImportDialog apiUrl="/api/x/import" canImport />);
+    expect(screen.getByRole("button", { name: "Import" })).toBeTruthy();
+
+    rerender(<ImportDialog apiUrl="/api/x/import" canImport={false} />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("chế độ điều khiển ngoài: mở sẵn, không render nút kích hoạt", () => {
+    render(
+      <ImportDialog apiUrl="/api/x/import" open onOpenChange={() => {}} />,
+    );
+    expect(screen.getByText("Import dữ liệu")).toBeTruthy();
+    expect(screen.getByText("Bước 1: Tải file mẫu")).toBeTruthy();
+
+    // Chỉ còn nút gửi trong footer (đang tắt vì chưa chọn file) — không có nút mở.
+    const importButtons = screen.getAllByRole("button", { name: "Import" });
+    expect(importButtons).toHaveLength(1);
+    expect((importButtons[0] as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("tải mẫu từ server lấy tên file theo content-disposition", async () => {
+    const createUrl = vi
+      .spyOn(URL, "createObjectURL")
+      .mockReturnValue("blob:x");
+    vi.spyOn(URL, "revokeObjectURL").mockImplementation(() => {});
+    global.fetch = vi.fn(
+      async () =>
+        new Response(new Blob(["x"]), {
+          headers: {
+            "content-disposition": 'attachment; filename="mau-don-mua.xlsx"',
+          },
+        }),
+    ) as unknown as typeof fetch;
+
+    render(
+      <ImportDialog
+        apiUrl="/api/purchase-orders/import"
+        templateApiUrl="/api/purchase-orders/import/template"
+        open
+        onOpenChange={() => {}}
+      />,
+    );
+    screen.getByText("Tải mẫu XLSX").click();
+
+    await waitFor(() => expect(createUrl).toHaveBeenCalled());
+    expect(String((global.fetch as any).mock.calls[0][0])).toContain(
+      "/import/template",
+    );
+  });
+});