@goplusvn/core 0.1.55 → 0.1.56

package/PLATFORM.md

@@ -117,6 +117,50 @@ import { toCsv } from "@goerp/core/export/to-csv"           // server CSV routes
 return new Response(toCsv(rows, columns), { headers: { ... } })
 ```
 
+## Import
+
+One dialog for both server contracts — a workbook harness (`templateApiUrl`) or
+an EntityConfig-driven CRUD import (`config`). A `202` reply means the server
+queued a background task; the dialog closes instead of reporting "0 rows".
+
+```tsx
+import { ImportDialog } from "@goerp/core/import"
+
+<ImportDialog
+  apiUrl={`/api/purchase-orders/import`}
+  templateApiUrl={`/api/purchase-orders/import/template`}
+  tasksPath={`/${lang}/tasks`}      // where the 202 toast links to
+  canImport={can("purchase-orders", "create")}
+/>
+```
+
+The parsing half is pure and server-side — domain import services keep the DB
+work and call these:
+
+```ts
+import { parseExcelBuffer, validateHeaders, normalizeRow } from "@goerp/core/import"
+```
+
+`parseFlexibleDate` refuses impossible dates (`31/06`) instead of rolling them
+into the next month, and decodes Excel serials in UTC — local-time arithmetic is
+off by a day in zones with pre-1911 LMT offsets (Asia/Ho_Chi_Minh among them).
+
+Note: `@goerp/core/import` types carry a `Workbook` prefix
+(`WorkbookImportResult`, …) so they don't collide with the flat CRUD
+`ImportResult`/`ImportOptions` in `@goerp/core/types`.
+
+## Advanced filters
+
+The client half of the CRUD filter-tree DSL — nested AND/OR groups that
+serialize to the same `FilterTreeNode` the server query builder consumes.
+
+```tsx
+import { AdvancedFilterBuilder } from "@goerp/core/ui/filters/advanced-filter-builder"
+
+<AdvancedFilterBuilder fields={FIELDS} value={tree} onChange={setTree} />
+// tzOffset defaults to "+07:00": a date leaf means that zone's whole day
+```
+
 ## Print
 
 Core owns *how* to print; the app supplies *what* via `renderContent`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -47,6 +47,7 @@
     "./notification/ui": "./src/notification/ui/index.ts",
     "./tasks": "./src/tasks/index.ts",
     "./tasks/ui": "./src/tasks/ui/task-list-client.tsx",
+    "./import": "./src/import/index.ts",
     "./auth/proxy-gate": "./src/auth/proxy-gate.ts",
     "./rbac/route-handlers": "./src/rbac/route-handlers.ts",
     "./rbac/permissions-version": "./src/rbac/permissions-version.ts",
@@ -74,6 +75,7 @@
     "./ui/primitives/sidebar": "./src/ui/primitives/sidebar.tsx",
     "./ui/primitives/select": "./src/ui/primitives/select.tsx",
     "./ui/forms/multi-select": "./src/ui/forms/multi-select.tsx",
+    "./ui/filters/advanced-filter-builder": "./src/ui/filters/advanced-filter-builder.tsx",
     "./ui/data-display/collapsible": "./src/ui/data-display/collapsible.tsx",
     "./system/services/settings-service": "./src/system/services/settings-service.ts",
     "./system/services/system-category-service": "./src/system/services/system-category-service.ts",

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(""),