@goplusvn/core 0.1.0 → 0.1.2

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

@@ -0,0 +1,1017 @@
+"use client";
+
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  useCallback,
+  Suspense,
+} from "react";
+import dynamic from "next/dynamic";
+import { Card, CardContent, CardHeader } from "../../ui";
+
+import { Button } from "../../ui";
+import { globalError } from "../../ui/feedback/error-dialog";
+import { Separator } from "../../ui";
+import { Badge } from "../../ui";
+import { DynamicIcon } from "../../ui";
+import { Plus, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import type {
+  EntityConfig,
+  CrudPermissions,
+  CrudResponse,
+  RowAction,
+} from "../../types";
+import { CrudProvider } from "./crud-provider";
+import { useCrudConfig, useCrudState } from "./crud-context";
+import { CrudTable } from "./crud-table";
+import { CrudTableToolbar } from "./crud-table-toolbar";
+import { useRouter, useParams } from "next/navigation";
+import { CrudBulkActions } from "./crud-bulk-actions";
+import { CrudDeleteDialog } from "./crud-delete-dialog";
+import { crudService } from "../lib/crud-service";
+import { usePrefetch } from "../../hooks";
+import type { DictionaryType } from "../../hooks";
+
+// ✅ Defer non-critical features - CardView only loads when needed
+const CrudCardView = dynamic(
+  () => import("./crud-card-view").then((m) => ({ default: m.CrudCardView })),
+  {
+    loading: () => (
+      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, index) => (
+          <Card key={`skeleton-card-${index}`} className="animate-pulse">
+            <CardHeader className="pb-3">
+              <div className="flex items-start gap-2">
+                <div className="h-4 w-4 bg-muted rounded shrink-0 mt-0.5" />
+                <div className="flex-1 space-y-2">
+                  <div className="h-4 w-3/4 bg-muted rounded" />
+                  <div className="h-3 w-1/2 bg-muted rounded" />
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="space-y-2">
+                <div className="h-4 w-full bg-muted rounded" />
+                <div className="h-4 w-2/3 bg-muted rounded" />
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    ),
+    ssr: false,
+  },
+);
+
+// ✅ Dynamic imports for code splitting - only load when needed
+const CrudDialog = dynamic(
+  () => import("./crud-dialog").then((m) => ({ default: m.CrudDialog })),
+  {
+    loading: () => (
+      <div className="flex items-center justify-center p-4">
+        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+      </div>
+    ),
+    ssr: false, // Dialog doesn't need SSR
+  },
+);
+
+const CrudSheet = dynamic(
+  () => import("./crud-sheet").then((m) => ({ default: m.CrudSheet })),
+  {
+    loading: () => (
+      <div className="flex items-center justify-center p-4">
+        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+      </div>
+    ),
+    ssr: false, // Sheet doesn't need SSR
+  },
+);
+
+const CrudImportDialog = dynamic(
+  () =>
+    import("./crud-import-dialog").then((m) => ({
+      default: m.CrudImportDialog,
+    })),
+  {
+    ssr: false, // Import dialog doesn't need SSR
+  },
+);
+
+const CrudExportButton = dynamic(
+  () =>
+    import("./crud-export-button").then((m) => ({
+      default: m.CrudExportButton,
+    })),
+  {
+    ssr: false, // Export button doesn't need SSR
+  },
+);
+
+interface CrudPageContentProps {
+  config: EntityConfig;
+  permissions: CrudPermissions;
+  entityName?: string; // Entity name from URL route (e.g., "suppliers", "warehouses")
+  dictionary: DictionaryType;
+  customActions?: React.ReactNode;
+}
+
+function CrudPageContent({
+  config,
+  permissions,
+  entityName,
+  dictionary,
+  customActions,
+}: CrudPageContentProps) {
+
+  const router = useRouter();
+  const params = useParams();
+  const lang = (params?.lang as string) || "vi";
+  const { prefetchNextPage } = usePrefetch();
+
+  // Get CRUD translations from dictionary
+  const crudDict = (dictionary as Record<string, unknown>).crud as
+    | Record<string, unknown>
+    | undefined;
+  const commonDict = (crudDict?.common as Record<string, string>) || {};
+  const messagesDict = (crudDict?.messages as Record<string, string>) || {};
+
+  // Create translations object for child components
+  const translations = {
+    edit: commonDict.edit || "Edit",
+    delete: commonDict.delete || "Delete",
+    save: commonDict.save || "Save",
+    cancel: commonDict.cancel || "Cancel",
+    create: commonDict.create || "Create",
+    update: commonDict.update || "Update",
+    creating: commonDict.creating || "Creating...",
+    updating: commonDict.updating || "Updating...",
+    deleting: commonDict.deleting || "Deleting...",
+    savedSuccessfully: commonDict.savedSuccessfully || "Saved successfully!",
+    createdSuccessfully:
+      commonDict.createdSuccessfully || "Created successfully!",
+    updatedSuccessfully:
+      commonDict.updatedSuccessfully || "Updated successfully!",
+    confirmDeleteTitle: commonDict.confirmDeleteTitle,
+    confirmBulkDeleteTitle: commonDict.confirmBulkDeleteTitle,
+    confirmDeleteDescription: commonDict.confirmDeleteDescription,
+    confirmBulkDeleteDescription: commonDict.confirmBulkDeleteDescription,
+    deleteSelected: commonDict.deleteSelected || "Delete selected",
+    actions: commonDict.actions || "Actions",
+    add: commonDict.add || "Add",
+    addNew: commonDict.addNew || "Add New",
+  };
+
+  // Helper function to get translation with fallback
+  // Supports dot notation for nested keys (e.g., "crud.common.options.active")
+  const t = useCallback(
+    (key: string, fallback: string): string => {
+      if (!key) return fallback;
+
+      // 1. Try simple lookup in common dict first (legacy behavior)
+      if (commonDict[key]) return commonDict[key];
+
+      // 2. Try deep lookup in full dictionary
+      const keys = key.split(".");
+      let current: any = dictionary;
+
+      for (const k of keys) {
+        if (current === undefined || current === null) break;
+        current = current[k];
+      }
+
+      if (current && typeof current === "string") {
+        return current;
+      }
+
+      return fallback;
+    },
+    [commonDict, dictionary],
+  );
+
+  // Helper function to get message translation with parameters
+  const tMessage = useCallback(
+    (key: string, params?: Record<string, string | number>): string => {
+      let message = messagesDict[key] || key;
+      if (params) {
+        Object.entries(params).forEach(([param, value]) => {
+          message = message.replace(
+            new RegExp(`\\{\\{${param}\\}\\}`, "g"),
+            String(value),
+          );
+        });
+      }
+      return message;
+    },
+    [messagesDict],
+  );
+
+  // Get form modes from config (default to "dialog")
+  const createMode = config.formMode?.create || "dialog";
+  const editMode = config.formMode?.edit || "dialog";
+  const sheetSide = config.formMode?.sheetSide || "right";
+
+  // Load view mode from localStorage or default to "table"
+  // ✅ Fix hydration mismatch: Initialize with default value, sync with localStorage in useEffect
+  const [viewMode, setViewMode] = useState<"table" | "card">("table");
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem(`crud-view-mode-${config.name}`);
+      if (saved === "table" || saved === "card") {
+        setViewMode(saved);
+      }
+    }
+  }, [config.name]);
+
+  const handleViewModeChange = (mode: "table" | "card") => {
+    setViewMode(mode);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(`crud-view-mode-${config.name}`, mode);
+    }
+  };
+
+  const { setConfig, setPermissions } = useCrudConfig();
+
+  const {
+    getQueryParams,
+    pagination,
+    setPage,
+    search,
+    sorting,
+    filters,
+    setSearch,
+    clearFilters,
+  } = useCrudState();
+  const [data, setData] = useState<CrudResponse>({
+    data: [],
+    total: 0,
+    page: 1,
+    pageSize: 10,
+  });
+  const [loading, setLoading] = useState(true);
+  const [tableLoading, setTableLoading] = useState(false); // Separate loading state for table only
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingRowId, setEditingRowId] = useState<string | null>(null);
+  const [tableInstance, setTableInstance] = useState<any>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deletingRowId, setDeletingRowId] = useState<string | null>(null);
+  const [bulkDeleteIds, setBulkDeleteIds] = useState<string[]>([]);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const currentRequestRef = useRef<number>(0);
+  const hasInitializedRef = useRef<boolean>(false);
+  const previousQueryParamsRef = useRef<string>("");
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Initialize config and permissions
+  useEffect(() => {
+    setConfig(config);
+    setPermissions(permissions);
+  }, [config, permissions, setConfig, setPermissions]);
+
+  // Memoize filters string to avoid unnecessary re-renders
+  const filtersKey = useMemo(() => {
+    // Sort a copy to avoid mutating the original array
+    const sortedFilters = [...filters].sort((a, b) =>
+      a.name.localeCompare(b.name),
+    );
+    return JSON.stringify(sortedFilters);
+  }, [filters]);
+
+  // Memoize query params string to detect actual changes
+  const queryParamsString = useMemo(() => {
+    return JSON.stringify({
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      search: search || "",
+      sortField: sorting?.field || "",
+      sortDirection: sorting?.direction || "",
+      filters: filtersKey, // Use filtersKey which is already a JSON string
+    });
+  }, [
+    pagination.page,
+    pagination.pageSize,
+    search,
+    sorting?.field,
+    sorting?.direction,
+    filtersKey,
+  ]);
+
+  // Fetch data with race condition protection and cancellation
+  const fetchData = useCallback(
+    async (isInitialLoad = false) => {
+      // Increment request ID to track the latest request
+      const requestId = ++currentRequestRef.current;
+
+      // Cancel previous request if exists
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+
+      // Create new abort controller
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      // Use full loading for initial load, table loading for pagination
+      if (isInitialLoad) {
+        setLoading(true);
+      } else {
+        setTableLoading(true);
+      }
+
+      try {
+        const queryParams = getQueryParams();
+        const response = await crudService.fetch(
+          config.apiEndpoint,
+          queryParams,
+          abortController.signal,
+        );
+
+        // Only set data if this is still the latest request
+        if (requestId === currentRequestRef.current) {
+          setData(response);
+        }
+      } catch (error) {
+        // Ignore abort errors
+        if (error instanceof Error && error.name === "AbortError") {
+          return;
+        }
+
+        // Only handle error if this is still the latest request
+        if (requestId === currentRequestRef.current) {
+          console.error("Error fetching data:", error);
+          // Set empty data on error
+          setData({
+            data: [],
+            total: 0,
+            page: 1,
+            pageSize: 10,
+          });
+          // Show toast notification to user
+          // Show error dialog to user
+          globalError.emit({
+            title: t("error", "Error"),
+            description: tMessage("loadFailed", {}),
+            trace: error instanceof Error ? error.stack : undefined,
+          });
+        }
+      } finally {
+        // Only update loading state if this is still the latest request
+        if (requestId === currentRequestRef.current) {
+          if (isInitialLoad) {
+            setLoading(false);
+          } else {
+            setTableLoading(false);
+          }
+        }
+      }
+    },
+    [config.apiEndpoint, getQueryParams, t, tMessage],
+  );
+
+  // Initial load - only run once on mount
+  useEffect(() => {
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      // Initialize previousQueryParamsRef with current query params
+      previousQueryParamsRef.current = queryParamsString;
+      fetchData(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run on mount
+
+  // Listen for external refresh events (e.g., from role dialog)
+  useEffect(() => {
+    const handleRefresh = () => {
+      fetchData(false);
+    };
+    window.addEventListener("crudRefreshData", handleRefresh);
+    return () => {
+      window.removeEventListener("crudRefreshData", handleRefresh);
+    };
+  }, [fetchData]);
+
+  // ✅ Memoize pageCount to avoid recalculation
+  const pageCount = useMemo(() => {
+    const total = data.total || 0;
+    const pageSize = pagination.pageSize || 10;
+    const count = Math.ceil(total / pageSize);
+    return count > 0 ? count : 1;
+  }, [data.total, pagination.pageSize]);
+
+  // ✅ Prefetch next page when near the end
+  useEffect(() => {
+    // Skip prefetch if:
+    // - Not initialized yet
+    // - Still loading
+    // - On last page or beyond
+    // - Only one page (no need to prefetch)
+    // - On first page (don't prefetch immediately on initial load)
+    if (
+      !hasInitializedRef.current ||
+      loading ||
+      tableLoading ||
+      pagination.page >= pageCount ||
+      pageCount <= 1 ||
+      pagination.page === 1 // Don't prefetch on first page load
+    ) {
+      return;
+    }
+
+    // Prefetch next page when we're within 1 page of the end
+    // Only prefetch if there's actually a next page
+    if (pagination.page >= pageCount - 1 && pagination.page < pageCount) {
+      const queryParams = getQueryParams();
+      prefetchNextPage(
+        config.apiEndpoint,
+        pagination.page,
+        pagination.pageSize,
+        {
+          search: queryParams.search,
+          sort: queryParams.sort,
+          filters: queryParams.filters,
+        },
+      );
+    }
+  }, [
+    pagination.page,
+    pageCount,
+    loading,
+    tableLoading,
+    config.apiEndpoint,
+    pagination.pageSize,
+    getQueryParams,
+    prefetchNextPage,
+  ]);
+
+  // Fetch data when query params change (except initial load)
+  useEffect(() => {
+    // Skip if not initialized yet or still initial loading
+    if (!hasInitializedRef.current || loading) return;
+
+    // Only fetch if query params actually changed
+    if (queryParamsString !== previousQueryParamsRef.current) {
+      previousQueryParamsRef.current = queryParamsString;
+      fetchData(false);
+    }
+  }, [queryParamsString, loading, fetchData]);
+
+  const handleCreate = () => {
+    if (createMode === "navigate") {
+      let path =
+        config.formMode?.createPath || `/${entityName || config.name}/new`;
+      // Add lang prefix if not already present
+      if (!path.startsWith(`/${lang}/`)) {
+        path = `/${lang}${path}`;
+      }
+      router.push(path);
+      return;
+    }
+    setEditingRowId(null);
+    setDialogOpen(true);
+  };
+
+  const handleEdit = (rowId: string, rowData?: Record<string, unknown>) => {
+    if (editMode === "navigate") {
+      const editPath =
+        config.formMode?.editPath ||
+        `/${entityName || config.name}/${rowId}/edit`;
+      // For recipes, use dishId from rowData if available, otherwise use rowId
+      let idToUse = rowId;
+      if (editPath.includes("[dishId]") && rowData?.dishId) {
+        idToUse = String(rowData.dishId);
+      }
+      // Replace both [id] and [dishId] placeholders
+      let path = editPath.replace("[id]", rowId).replace("[dishId]", idToUse);
+      // Add lang prefix if not already present
+      if (!path.startsWith(`/${lang}/`)) {
+        path = `/${lang}${path}`;
+      }
+      router.push(path);
+      return;
+    }
+    setEditingRowId(rowId);
+    setDialogOpen(true);
+  };
+
+  const handleDelete = (rowId: string) => {
+    setDeletingRowId(rowId);
+    setBulkDeleteIds([]);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleCustomAction = async (
+    action: string,
+    rowId: string,
+    rowData: Record<string, unknown>,
+  ) => {
+    const rowAction = config.rowActions?.find((a) => a.action === action);
+    if (!rowAction) return;
+
+    try {
+      switch (action) {
+        case "copy":
+        case "duplicate": {
+          // Get data to copy
+          let copyData = { ...rowData };
+
+          // Exclude fields specified in config
+          if (rowAction.excludeFields) {
+            rowAction.excludeFields.forEach((field) => {
+              delete copyData[field];
+            });
+          } else {
+            // Default: exclude id and timestamps
+            delete copyData[config.idField];
+            delete copyData["id"];
+            delete copyData["createdAt"];
+            delete copyData["createdBy"];
+            delete copyData["updatedAt"];
+            delete copyData["updatedBy"];
+          }
+
+          // Transform data if specified
+          if (rowAction.transformData) {
+            copyData = rowAction.transformData(copyData);
+          }
+
+          // Create new record with copied data
+          await crudService.create(config.apiEndpoint, copyData);
+          await fetchData(false);
+          toast.success(t("success", "Success"), {
+            description: tMessage("created", { entity: config.label }),
+          });
+          break;
+        }
+
+        case "view": {
+          // Navigate to view page or open view dialog
+          const editPath =
+            config.formMode?.editPath ||
+            `/${entityName || config.name}/${rowId}`;
+          let viewPath = editPath
+            .replace("[id]", rowId)
+            .replace("[dishId]", rowId);
+          // Add lang prefix if not already present
+          if (!viewPath.startsWith(`/${lang}/`)) {
+            viewPath = `/${lang}${viewPath}`;
+          }
+          router.push(viewPath);
+          break;
+        }
+
+        case "archive": {
+          // Archive the record (update status to archived)
+          await crudService.update(config.apiEndpoint, rowId, {
+            ...rowData,
+            status: "archived",
+          });
+          await fetchData(false);
+          toast.success(t("success", "Success"), {
+            description: tMessage("updated", { entity: config.label }),
+          });
+          break;
+        }
+
+        default: {
+          // Custom handler: Get original config to access handler function
+          // NOTE: This logic is deprecated because Core package cannot import App configs directly.
+          // Custom handlers passed via config functions are lost during serialization.
+          // If you need custom actions with handlers, please implement them via `customActions` prop
+          // or a registered event handler mechanism.
+
+          console.warn(
+            `Action "${action}" has no built-in handler and custom handlers via config are not supported in this architecture. Please use customActions prop.`,
+          );
+
+          /* Deprecated logic removed to fix build:
+          if (entityName) {
+            try {
+              const originalConfig = getEntityConfig(entityName)
+               ...
+            }
+          }
+          */
+        }
+      }
+    } catch (error) {
+      console.error(`Error executing ${action} action:`, error);
+      globalError.emit({
+        title: t("error", "Error"),
+        description: tMessage("saveFailed", { entity: rowAction.label }),
+        trace: error instanceof Error ? error.stack : undefined,
+      });
+    }
+  };
+
+  const confirmDelete = async () => {
+    const rowId = deletingRowId;
+    const ids = bulkDeleteIds.length > 0 ? bulkDeleteIds : rowId ? [rowId] : [];
+
+    if (ids.length === 0) return;
+
+    setDeleteLoading(true);
+    try {
+      await Promise.all(
+        ids.map((id) => crudService.delete(config.apiEndpoint, id)),
+      );
+      await fetchData(false); // Only reload table data, not entire component
+      toast.success(t("success", "Success"), {
+        description:
+          ids.length === 1
+            ? tMessage("deleted", { entity: config.label })
+            : tMessage("bulkDeleted", {
+                count: ids.length,
+                entities: config.pluralLabel,
+              }),
+      });
+      setDeleteDialogOpen(false);
+      setDeletingRowId(null);
+      setBulkDeleteIds([]);
+    } catch (error) {
+      console.error("Error deleting:", error);
+
+      let description = tMessage("deleteFailed", {
+        entity: config.pluralLabel,
+      });
+
+      if (error instanceof Error) {
+        description = error.message;
+
+        // Enhance FK errors for better user experience
+        if (
+          description.includes("violates foreign key constraint") ||
+          description.includes("violates RESTRICT setting")
+        ) {
+          const match = description.match(/on table "([^"]+)"/);
+          if (match) {
+            const tableName = match[1];
+            // Format table name: role_permissions -> Role Permissions
+            const readableTable = tableName
+              .split("_")
+              .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+              .join(" ");
+            description = `Cannot delete because it is used in "${readableTable}".`;
+          }
+        }
+      }
+
+      globalError.emit({
+        title: t("error", "Error"),
+        description: description,
+        trace: error instanceof Error ? error.stack : undefined,
+      });
+    } finally {
+      setDeleteLoading(false);
+    }
+  };
+
+  const handleBulkDelete = (rowIds: string[]) => {
+    setDeletingRowId(null);
+    setBulkDeleteIds(rowIds);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleSubmit = async (formData: Record<string, unknown>) => {
+    try {
+      if (editingRowId) {
+        await crudService.update(config.apiEndpoint, editingRowId, formData);
+        toast.success(t("success", "Success"), {
+          description: tMessage("updated", { entity: config.label }),
+        });
+      } else {
+        await crudService.create(config.apiEndpoint, formData);
+        toast.success(t("success", "Success"), {
+          description: tMessage("created", { entity: config.label }),
+        });
+      }
+      await fetchData(false); // Only reload table data, not entire component
+    } catch (error) {
+      console.error("Error saving:", error);
+      // Extract error message from error object
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : tMessage("saveFailed", { entity: config.label });
+
+      // Use detailed error message if available, otherwise fallback to generic message
+      const displayMessage =
+        errorMessage && errorMessage !== "Failed to POST: Bad Request"
+          ? errorMessage
+          : tMessage("saveFailed", { entity: config.label });
+
+      globalError.emit({
+        title: t("error", "Error"),
+        description: displayMessage,
+        trace: error instanceof Error ? error.stack : undefined,
+      });
+      throw error;
+    }
+  };
+
+  // ✅ Memoize editingData to avoid recalculation
+  const editingData = useMemo(() => {
+    if (!editingRowId) return undefined;
+    return data.data.find(
+      (row) =>
+        String((row as Record<string, unknown>)[config.idField]) ===
+        editingRowId,
+    );
+  }, [editingRowId, data.data, config.idField]);
+
+  // ✅ Memoize deletingData to avoid recalculation
+  const deletingData = useMemo(() => {
+    if (!deletingRowId) return undefined;
+    return data.data.find(
+      (row) =>
+        String((row as Record<string, unknown>)[config.idField]) ===
+        deletingRowId,
+    );
+  }, [deletingRowId, data.data, config.idField]);
+
+  return (
+    <>
+      <div className="space-y-3">
+        <div className="pb-2">
+          {/* Header: Title + Description + Actions */}
+          <div className="flex items-start justify-between gap-4 flex-wrap">
+            <div className="space-y-1">
+              <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
+                {config.iconName && (
+                  <div className="p-1.5 sm:p-2 rounded-lg bg-primary/10 shrink-0">
+                    <DynamicIcon
+                      name={config.iconName as any}
+                      className="h-4 w-4 sm:h-5 sm:w-5 text-primary"
+                    />
+                  </div>
+                )}
+                <div className="min-w-0 flex-1">
+                  <h2 className="text-lg sm:text-xl font-bold tracking-tight">
+                    {config.pluralLabel}
+                  </h2>
+                  {config.description && (
+                    <p className="text-xs sm:text-sm text-muted-foreground mt-0.5 sm:mt-1 hidden sm:block">
+                      {config.description}
+                    </p>
+                  )}
+                </div>
+                {data.total !== undefined && (
+                  <Badge
+                    variant="secondary"
+                    className="text-xs shrink-0 hidden sm:inline-flex"
+                  >
+                    {data.total}{" "}
+                    {data.total === 1 ? t("item", "item") : t("items", "items")}
+                  </Badge>
+                )}
+              </div>
+              {/* Mobile: Show total count below title */}
+              {data.total !== undefined && (
+                <Badge variant="secondary" className="text-xs w-fit sm:hidden">
+                  {data.total}{" "}
+                  {data.total === 1 ? t("item", "item") : t("items", "items")}
+                </Badge>
+              )}
+            </div>
+
+            {/* Action Buttons Grouped */}
+            <div className="flex items-center gap-2 flex-wrap sm:flex-nowrap">
+              {/* Primary Actions */}
+              <div className="flex items-center gap-2 flex-wrap sm:flex-nowrap">
+                <CrudBulkActions
+                  config={config}
+                  permissions={permissions}
+                  onDelete={handleBulkDelete}
+                />
+                {customActions}
+                {permissions.create && (
+                  <Button onClick={handleCreate} size="sm" className="shrink-0">
+                    <Plus className="mr-2 h-4 w-4" />
+                    <span className="hidden sm:inline">
+                      {t("create", "Create")} {config.label}
+                    </span>
+                    <span className="sm:hidden">{t("create", "Create")}</span>
+                  </Button>
+                )}
+              </div>
+
+              {/* Secondary Actions - Conditional loading with Suspense */}
+              {(permissions.import && config.features?.import) ||
+              (permissions.export && config.features?.export) ? (
+                <>
+                  <Separator
+                    orientation="vertical"
+                    className="h-6 hidden sm:block"
+                  />
+                  <div className="flex items-center gap-2 flex-wrap sm:flex-nowrap">
+                    {permissions.import && config.features?.import && (
+                      <Suspense fallback={null}>
+                        <CrudImportDialog
+                          config={config}
+                          endpoint={(() => {
+                            // Handle endpoint with query params correctly
+                            const baseUrl = config.apiEndpoint.split("?")[0];
+                            const queryParams = config.apiEndpoint.includes("?")
+                              ? config.apiEndpoint.split("?")[1]
+                              : "";
+                            return `${baseUrl}/import${queryParams ? `?${queryParams}` : ""}`;
+                          })()}
+                          canImport={permissions.import}
+                        />
+                      </Suspense>
+                    )}
+                    {permissions.export && config.features?.export && (
+                      <Suspense fallback={null}>
+                        <CrudExportButton
+                          endpoint={`/api/crud/${entityName || config.name}/export`}
+                          filters={filters}
+                          search={search}
+                          canExport={permissions.export}
+                        />
+                      </Suspense>
+                    )}
+                  </div>
+                </>
+              ) : null}
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          {/* Toolbar Section - Sticky when scrolling */}
+          <div className="sticky top-0 z-20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pb-2 pt-0 border-b border-border/50 transition-all duration-200">
+            <CrudTableToolbar
+              table={tableInstance}
+              config={config}
+              permissions={permissions}
+              viewMode={viewMode}
+              onViewModeChange={handleViewModeChange}
+            />
+          </div>
+
+          {/* Table/Card Section */}
+          <div className="overflow-hidden">
+            {viewMode === "table" ? (
+              <CrudTable
+                data={data as CrudResponse<Record<string, unknown>>}
+                loading={loading || tableLoading}
+                onEdit={handleEdit}
+                onDelete={handleDelete}
+                onCustomAction={handleCustomAction}
+                onTableReady={setTableInstance}
+                onEmptyStateAction={{
+                  onCreate: handleCreate,
+                  onClearSearch: () => setSearch(""),
+                  onClearFilters: clearFilters,
+                }}
+                getTranslation={(key: string) => t(key, key)}
+              />
+            ) : (
+              <div className="p-4">
+                <CrudCardView
+                  config={config}
+                  data={data as CrudResponse<Record<string, unknown>>}
+                  permissions={permissions}
+                  loading={loading || tableLoading}
+                  onEdit={handleEdit}
+                  onDelete={handleDelete}
+                  onCustomAction={handleCustomAction}
+                  onEmptyStateAction={{
+                    onCreate: handleCreate,
+                    onClearSearch: () => setSearch(""),
+                    onClearFilters: clearFilters,
+                  }}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {permissions.create || permissions.update ? (
+        <>
+          {/* Dialog Mode */}
+          {((!editingRowId && createMode === "dialog") ||
+            (editingRowId && editMode === "dialog")) && (
+            <CrudDialog
+              open={dialogOpen}
+              onOpenChange={(open) => {
+                setDialogOpen(open);
+                if (!open) setEditingRowId(null);
+              }}
+              config={config}
+              initialData={editingData as Record<string, unknown> | undefined}
+              mode={editingRowId ? "edit" : "create"}
+              onSubmit={handleSubmit}
+            />
+          )}
+
+          {/* Sheet Mode */}
+          {((!editingRowId && createMode === "sheet") ||
+            (editingRowId && editMode === "sheet")) && (
+            <CrudSheet
+              open={dialogOpen}
+              onOpenChange={(open) => {
+                setDialogOpen(open);
+                if (!open) setEditingRowId(null);
+              }}
+              config={config}
+              initialData={editingData as Record<string, unknown> | undefined}
+              mode={editingRowId ? "edit" : "create"}
+              onSubmit={handleSubmit}
+              side={sheetSide}
+            />
+          )}
+        </>
+      ) : null}
+
+      {permissions.delete && (
+        <CrudDeleteDialog
+          open={deleteDialogOpen}
+          onOpenChange={setDeleteDialogOpen}
+          config={config}
+          itemData={deletingData as Record<string, unknown> | undefined}
+          itemCount={
+            bulkDeleteIds.length > 0 ? bulkDeleteIds.length : undefined
+          }
+          onConfirm={confirmDelete}
+          loading={deleteLoading}
+          translations={{
+            cancel: translations.cancel,
+            delete: translations.delete,
+            deleting: translations.deleting,
+            confirmDeleteTitle: translations.confirmDeleteTitle,
+            confirmBulkDeleteTitle: translations.confirmBulkDeleteTitle,
+            confirmDeleteDescription: translations.confirmDeleteDescription,
+            confirmBulkDeleteDescription:
+              translations.confirmBulkDeleteDescription,
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+interface CrudPageProps {
+  config: EntityConfig;
+  permissions: CrudPermissions;
+  entityName?: string;
+  dictionary: DictionaryType;
+  customActions?: React.ReactNode;
+}
+
+export function CrudPage({
+  config,
+  permissions,
+  entityName,
+  dictionary,
+  customActions,
+}: CrudPageProps) {
+  // Extract translations from dictionary for CrudProvider
+  const crudDict = (dictionary as Record<string, unknown>).crud as
+    | Record<string, unknown>
+    | undefined;
+  const commonDict = (crudDict?.common as Record<string, string>) || {};
+
+  const initialTranslations = {
+    edit: commonDict.edit,
+    delete: commonDict.delete,
+    save: commonDict.save,
+    cancel: commonDict.cancel,
+    create: commonDict.create,
+    update: commonDict.update,
+    creating: commonDict.creating,
+    updating: commonDict.updating,
+    deleting: commonDict.deleting,
+    savedSuccessfully: commonDict.savedSuccessfully,
+    createdSuccessfully: commonDict.createdSuccessfully,
+    updatedSuccessfully: commonDict.updatedSuccessfully,
+    confirmDeleteTitle: commonDict.confirmDeleteTitle,
+    confirmBulkDeleteTitle: commonDict.confirmBulkDeleteTitle,
+    confirmDeleteDescription: commonDict.confirmDeleteDescription,
+    confirmBulkDeleteDescription: commonDict.confirmBulkDeleteDescription,
+    deleteSelected: commonDict.deleteSelected,
+    actions: commonDict.actions,
+    add: commonDict.add,
+    addNew: commonDict.addNew,
+  };
+
+  return (
+    <CrudProvider
+      initialConfig={config}
+      initialPermissions={permissions}
+      initialTranslations={initialTranslations}
+    >
+      <CrudPageContent
+        config={config}
+        permissions={permissions}
+        entityName={entityName}
+        dictionary={dictionary}
+        customActions={customActions}
+      />
+    </CrudProvider>
+  );
+}