@goplusvn/core 0.1.0 → 0.1.2

package/src/crud/lib/translate-config.ts

@@ -0,0 +1,335 @@
+/**
+ * CRUD Translation Utilities
+ * Translate EntityConfig ở server-side trước khi pass xuống client
+ */
+
+import type { DictionaryType } from "../../hooks";
+import type { EntityConfig, FieldConfig, FilterConfig } from "../../types";
+
+/**
+ * Get nested value from object bằng dot notation
+ */
+function getNestedValue(obj: Record<string, unknown>, path: string): unknown {
+  return path.split(".").reduce((current, key) => {
+    return current && typeof current === "object" && key in current
+      ? (current as Record<string, unknown>)[key]
+      : undefined;
+  }, obj as unknown);
+}
+
+/**
+ * Translate a string với fallback
+ */
+function translate(
+  key: string,
+  dictionary: Record<string, unknown>,
+  fallback: string,
+): string {
+  const value = getNestedValue(dictionary, key);
+  return typeof value === "string" ? value : fallback;
+}
+
+/**
+ * Translate EntityConfig với dictionary
+ * Chạy ở server-side trước khi pass xuống client
+ */
+export function translateEntityConfig(
+  config: EntityConfig,
+  dictionary: DictionaryType,
+  locale: string,
+  entityName?: string,
+): EntityConfig {
+  const crudDict = (dictionary as Record<string, unknown>).crud as
+    | Record<string, unknown>
+    | undefined;
+  // Use entityName from URL (e.g., "materials") instead of config.name (e.g., "material")
+  // This ensures we match the dictionary key correctly
+  const dictKey = entityName || config.name;
+  const entitiesDict = (crudDict?.entities as Record<string, unknown>) || {};
+  const entityDict = entitiesDict[dictKey] as
+    | Record<string, unknown>
+    | undefined;
+  const commonDict = (crudDict?.common as Record<string, unknown>) || {};
+
+  // Translate entity-level labels
+  const translatedConfig: EntityConfig = {
+    ...config,
+    label:
+      (entityDict?.label as string) ||
+      translate(`crud.entities.${dictKey}.label`, dictionary, config.label),
+    pluralLabel:
+      (entityDict?.pluralLabel as string) ||
+      translate(
+        `crud.entities.${dictKey}.pluralLabel`,
+        dictionary,
+        config.pluralLabel,
+      ),
+    description:
+      (entityDict?.description as string) ||
+      translate(
+        `crud.entities.${dictKey}.description`,
+        dictionary,
+        config.description || "",
+      ),
+  };
+
+  // Translate fields
+  translatedConfig.fields = config.fields.map((field) => {
+    const fieldDict = (entityDict?.fields as Record<string, unknown>)?.[
+      field.name
+    ] as Record<string, unknown> | undefined;
+
+    const translatedField: FieldConfig = {
+      ...field,
+      label:
+        (fieldDict?.label as string) ||
+        translate(
+          `crud.entities.${dictKey}.fields.${field.name}.label`,
+          dictionary,
+          field.label,
+        ),
+      placeholder:
+        (fieldDict?.placeholder as string) ||
+        translate(
+          `crud.entities.${dictKey}.fields.${field.name}.placeholder`,
+          dictionary,
+          field.placeholder || "",
+        ),
+      helpText:
+        (fieldDict?.helpText as string) ||
+        translate(
+          `crud.entities.${dictKey}.fields.${field.name}.helpText`,
+          dictionary,
+          field.helpText || "",
+        ),
+      description:
+        (fieldDict?.description as string) ||
+        translate(
+          `crud.entities.${dictKey}.fields.${field.name}.description`,
+          dictionary,
+          field.description || "",
+        ),
+    };
+
+    // Translate options if they exist
+    if (field.options && field.options.length > 0) {
+      const optionsDict = (fieldDict?.options as Record<string, string>) || {};
+      // Fallback to common options
+      const commonOptionsDict =
+        (commonDict?.options as Record<string, string>) || {};
+
+      translatedField.options = field.options.map((opt) => {
+        const isObject = typeof opt === "object" && opt !== null;
+        const optValue = isObject ? opt.value : opt;
+        const optLabel = isObject ? opt.label : String(opt);
+        const valueStr = String(optValue);
+
+        if (!isObject) {
+          return (
+            optionsDict[valueStr] ||
+            commonOptionsDict[valueStr] ||
+            translate(
+              `crud.entities.${dictKey}.fields.${field.name}.options.${valueStr}`,
+              dictionary,
+              optLabel,
+            )
+          );
+        }
+
+        return {
+          ...opt,
+          label:
+            optionsDict[valueStr] ||
+            commonOptionsDict[valueStr] ||
+            translate(
+              `crud.entities.${dictKey}.fields.${field.name}.options.${valueStr}`,
+              dictionary,
+              optLabel.startsWith("crud.")
+                ? translate(optLabel, dictionary, optLabel)
+                : optLabel,
+            ),
+        };
+      });
+    }
+
+    return translatedField;
+  });
+
+  // Translate filters
+  if (config.filters && config.filters.length > 0) {
+    translatedConfig.filters = config.filters.map((filter) => {
+      const filterDict = (entityDict?.filters as Record<string, unknown>)?.[
+        filter.name
+      ] as Record<string, unknown> | undefined;
+
+      const translatedFilter: FilterConfig = {
+        ...filter,
+        label:
+          (filterDict?.label as string) ||
+          translate(
+            `crud.entities.${dictKey}.filters.${filter.name}.label`,
+            dictionary,
+            filter.label,
+          ),
+      };
+
+      // Translate filter options
+      if (filter.options && filter.options.length > 0) {
+        const optionsDict =
+          (filterDict?.options as Record<string, string>) || {};
+        translatedFilter.options = filter.options.map((opt) => {
+          const isObject = typeof opt === "object" && opt !== null;
+          const optValue = isObject ? opt.value : opt;
+          const optLabel = isObject ? opt.label : String(opt);
+          const valueStr = String(optValue);
+
+          if (!isObject) {
+            return {
+              label:
+                optionsDict[valueStr] ||
+                translate(
+                  `crud.entities.${dictKey}.filters.${filter.name}.options.${valueStr}`,
+                  dictionary,
+                  optLabel,
+                ),
+              value: optValue,
+            };
+          }
+
+          return {
+            ...opt,
+            label:
+              optionsDict[valueStr] ||
+              translate(
+                `crud.entities.${dictKey}.filters.${filter.name}.options.${valueStr}`,
+                dictionary,
+                optLabel.startsWith("crud.")
+                  ? translate(optLabel, dictionary, optLabel)
+                  : optLabel,
+              ),
+          };
+        });
+      }
+
+      return translatedFilter;
+    });
+  }
+
+  // Translate rowActions
+  if (config.rowActions && config.rowActions.length > 0) {
+    const actionsDict =
+      (entityDict?.actions as Record<string, Record<string, string>>) || {};
+    translatedConfig.rowActions = config.rowActions.map((action) => {
+      const actionDict = actionsDict[action.action];
+      return {
+        ...action,
+        label:
+          actionDict?.label ||
+          translate(
+            `crud.entities.${dictKey}.actions.${action.action}.label`,
+            dictionary,
+            action.label,
+          ),
+      };
+    });
+  }
+
+  // Translate formSections
+  if (config.formSections && config.formSections.length > 0) {
+    const sectionsDict =
+      (entityDict?.sections as Record<string, Record<string, string>>) || {};
+    translatedConfig.formSections = config.formSections.map((section) => {
+      const sectionDict = sectionsDict[section.title] || {};
+      return {
+        ...section,
+        title:
+          sectionDict.title ||
+          translate(
+            `crud.entities.${dictKey}.sections.${section.title}.title`,
+            dictionary,
+            section.title,
+          ),
+        description:
+          sectionDict.description ||
+          translate(
+            `crud.entities.${dictKey}.sections.${section.title}.description`,
+            dictionary,
+            section.description || "",
+          ),
+        fields: section.fields, // Field names không cần translate
+      };
+    });
+  }
+
+  // Strip non-serializable properties to avoid Next.js serialization errors
+  // These should be handled by identifiers (strings) on the client
+  const { icon: _icon, ...serializableConfig } = translatedConfig;
+
+  // Cleanup fields
+  serializableConfig.fields = translatedConfig.fields.map((field) => {
+    const {
+      renderCell: _renderCell,
+      renderForm: _renderForm,
+      renderInput: _renderInput,
+      validation: _validation,
+      ...serializableField
+    } = field;
+    return serializableField;
+  });
+
+  // Cleanup row actions
+  if (translatedConfig.rowActions) {
+    serializableConfig.rowActions = translatedConfig.rowActions.map(
+      (action) => {
+        const {
+          handler: _handler,
+          visibleWhen: _visibleWhen,
+          ...serializableAction
+        } = action;
+        return serializableAction;
+      },
+    );
+  }
+
+  return serializableConfig as EntityConfig;
+}
+
+/**
+ * Get common CRUD translations
+ */
+export function getCrudCommonTranslations(
+  dictionary: DictionaryType,
+): Record<string, string> {
+  const crudDict = (dictionary as Record<string, unknown>).crud as
+    | Record<string, unknown>
+    | undefined;
+  return (crudDict?.common as Record<string, string>) || {};
+}
+
+/**
+ * Translate CRUD message với parameters
+ */
+export function translateCrudMessage(
+  dictionary: DictionaryType,
+  key: string,
+  params?: Record<string, string | number>,
+): string {
+  const crudDict = (dictionary as Record<string, unknown>).crud as
+    | Record<string, unknown>
+    | undefined;
+  const commonDict = (crudDict?.common as Record<string, unknown>) || {};
+  const messagesDict = (commonDict.messages as Record<string, string>) || {};
+  let message = messagesDict[key] || key;
+
+  // Replace parameters
+  if (params) {
+    Object.entries(params).forEach(([param, value]) => {
+      message = message.replace(
+        new RegExp(`\\{\\{${param}\\}\\}`, "g"),
+        String(value),
+      );
+    });
+  }
+
+  return message;
+}

package/src/crud/lib/types.ts

@@ -0,0 +1,11 @@
+/**
+ * CRUD Types
+ * Shared types for CRUD operations
+ */
+
+export interface CrudListResponse<T> {
+  total: number;
+  page: number;
+  pageSize: number;
+  items: T[];
+}

package/src/crud/pages/entity-crud-page.tsx

@@ -0,0 +1,144 @@
+import { cache } from "react";
+import type { EntityConfig, FilterConfig, LocaleType } from "../../types";
+import { CrudPage } from "../components/crud-page";
+import { mergePermissions } from "../lib/permissions";
+import { translateEntityConfig } from "../lib/translate-config";
+
+interface EntityCrudPageProps {
+  entity: string;
+  lang: string;
+  config: EntityConfig;
+  session: any;
+  dictionary: any;
+}
+
+// Serialize config to make it safe for Client Components
+// Removes non-serializable React components and functions
+function serializeConfig(config: EntityConfig): Omit<EntityConfig, "icon"> {
+  const { icon, fields, filters, ...rest } = config;
+
+  // If icon exists but iconName doesn't, try to extract icon name from displayName
+  if (icon && !rest.iconName) {
+    const iconComponent = icon as { displayName?: string };
+    if (iconComponent.displayName) {
+      rest.iconName = iconComponent.displayName;
+    }
+  }
+
+  // Serialize fields
+  const serializedFields = fields.map((field) => {
+    const {
+      renderCell: _renderCell,
+      renderForm: _renderForm,
+      renderInput: _renderInput,
+      validation: _validation,
+      dataSource,
+      ...fieldRest
+    } = field;
+
+    if (dataSource?.transform) {
+      const { transform: _transform, ...dataSourceRest } = dataSource;
+      return {
+        ...fieldRest,
+        dataSource: dataSourceRest,
+      };
+    }
+
+    return dataSource ? { ...fieldRest, dataSource } : fieldRest;
+  });
+
+  // Serialize filters
+  const serializedFilters = filters?.map((filter) => {
+    const { renderFilter: _renderFilter, ...filterRest } = filter;
+    return filterRest as Omit<FilterConfig, "renderFilter">;
+  });
+
+  // Serialize rowActions
+  const serializedRowActions = rest.rowActions?.map((action) => {
+    const {
+      handler: _handler,
+      transformData: _transformData,
+      visibleWhen: _visibleWhen,
+      ...actionRest
+    } = action;
+    return actionRest;
+  });
+
+  return {
+    ...rest,
+    fields: serializedFields,
+    filters: serializedFilters,
+    rowActions: serializedRowActions,
+  };
+}
+
+// Process config (translate + serialize)
+const getProcessedConfig = cache(
+  async (
+    config: EntityConfig,
+    entity: string,
+    lang: string,
+    dictionary: any,
+  ) => {
+    // Translate config
+    const translatedConfig = translateEntityConfig(
+      config,
+      dictionary,
+      lang,
+      entity,
+    );
+
+    // Serialize translated config
+    const serializedConfig = serializeConfig(translatedConfig);
+
+    return serializedConfig;
+  },
+);
+
+export async function EntityCrudPage({
+  entity,
+  lang,
+  config,
+  session,
+  dictionary,
+}: EntityCrudPageProps) {
+  try {
+    const serializedConfig = await getProcessedConfig(
+      config,
+      entity,
+      lang,
+      dictionary,
+    );
+
+    // Get user permissions for this entity if available in session or passed explicitly?
+    // In vinhhoa/page.tsx: getCrudPermissions(session, entity) is called.
+    // We should probably rely on `session` having what we need OR generic permissions logic.
+    // The `mergePermissions` below merges generic config perms with USER perms.
+    // We need user perms.
+
+    // We can import getCrudPermissions from ../lib/permissions if it effectively uses session
+    const { getCrudPermissions } = await import("../lib/permissions");
+    const userPermissions = await getCrudPermissions(session, entity);
+
+    const permissions = mergePermissions(config.permissions, userPermissions);
+
+    return (
+      <CrudPage
+        config={serializedConfig as EntityConfig}
+        permissions={permissions}
+        entityName={entity}
+        dictionary={dictionary}
+      />
+    );
+  } catch (error) {
+    console.error(`Error loading CRUD page for ${entity}:`, error);
+    return (
+      <div className="p-4">
+        <h1 className="text-2xl font-bold">Error</h1>
+        <p className="text-muted-foreground">
+          {error instanceof Error ? error.message : "Failed to load page"}
+        </p>
+      </div>
+    );
+  }
+}

package/src/crud/server.ts

@@ -0,0 +1,8 @@
+// @goerp/core/crud/server
+// Server-only CRUD utilities - no client components
+// Use this in Server Components and API routes to avoid bundling client code
+
+export {
+  getCrudPermissions,
+  mergePermissions,
+} from './lib/permissions'

package/src/home/constants.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+
+// Icon mapping for common actions
+export const iconMap: Record<string, React.ReactNode> = {
+  "shopping-cart": (
+    <svg
+      className="h-5 w-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
+      />
+    </svg>
+  ),
+  users: (
+    <svg
+      className="h-5 w-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+      />
+    </svg>
+  ),
+  package: (
+    <svg
+      className="h-5 w-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+      />
+    </svg>
+  ),
+  "chart-bar": (
+    <svg
+      className="h-5 w-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+      />
+    </svg>
+  ),
+  "document-text": (
+    <svg
+      className="h-5 w-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+      />
+    </svg>
+  ),
+  cog: (
+    <svg
+      className="h-5 w-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  ),
+  "currency-dollar": (
+    <svg
+      className="h-5 w-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  ),
+  "clipboard-list": (
+    <svg
+      className="h-5 w-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
+      />
+    </svg>
+  ),
+};
+
+export const colorClasses: Record<string, string> = {
+  blue: "bg-blue-500 hover:bg-blue-600 text-white",
+  green: "bg-green-500 hover:bg-green-600 text-white",
+  purple: "bg-purple-500 hover:bg-purple-600 text-white",
+  orange: "bg-orange-500 hover:bg-orange-600 text-white",
+  pink: "bg-pink-500 hover:bg-pink-600 text-white",
+  indigo: "bg-indigo-500 hover:bg-indigo-600 text-white",
+  teal: "bg-teal-500 hover:bg-teal-600 text-white",
+  red: "bg-red-500 hover:bg-red-600 text-white",
+};