@goplusvn/core 0.1.0 → 0.1.2

package/src/configs/data/oauth-links.ts

@@ -0,0 +1,10 @@
+import { Facebook, Github, Chrome, Twitter } from "lucide-react";
+
+import type { OAuthLinkType } from "../../types";
+
+export const oauthLinksData: OAuthLinkType[] = [
+  { href: "/", label: "Facebook", icon: Facebook },
+  { href: "/", label: "GitHub", icon: Github },
+  { href: "/", label: "Google", icon: Chrome },
+  { href: "/", label: "X", icon: Twitter },
+];

package/src/configs/entities/material-categories.config.ts

@@ -0,0 +1,125 @@
+import { FolderTree } from "lucide-react";
+
+import type { EntityConfig } from "../../types";
+
+import { STATUS_OPTIONS } from "../status";
+
+export const materialCategoriesConfig: EntityConfig = {
+  name: "material-category",
+  label: "Danh mục nguyên vật liệu",
+  pluralLabel: "Danh mục nguyên vật liệu",
+  icon: FolderTree,
+  description: "Quản lý danh mục nguyên vật liệu",
+  apiEndpoint: "/api/material-categories",
+  idField: "id",
+  displayField: "name",
+
+  // Custom row actions
+  rowActions: [
+    {
+      label: "Copy",
+      action: "copy",
+      icon: "Copy",
+      excludeFields: ["id", "createdAt", "createdBy", "updatedAt", "updatedBy"],
+      transformData: (rowData) => ({
+        ...rowData,
+        code: `${rowData.code}-COPY`,
+        name: `${rowData.name} (Copy)`,
+      }),
+    },
+  ],
+
+  fields: [
+    {
+      name: "id",
+      label: "ID",
+      type: "text",
+      hideInForm: true,
+      hideInTable: true,
+    },
+    {
+      name: "code",
+      label: "Mã danh mục",
+      type: "text",
+      required: true,
+      placeholder: "Nhập mã danh mục",
+
+      filterable: true,
+      disableOnEdit: true,
+    },
+    {
+      name: "name",
+      label: "Tên danh mục",
+      type: "text",
+      required: true,
+      placeholder: "Nhập tên danh mục",
+
+      filterable: true,
+    },
+    {
+      name: "description",
+      label: "Mô tả",
+      type: "textarea",
+      placeholder: "Nhập mô tả",
+      rows: 3,
+      hideInTable: true,
+    },
+    {
+      name: "status",
+      label: "Trạng thái",
+      type: "switch",
+      required: true,
+      defaultValue: "active",
+
+      filterable: true,
+      options: STATUS_OPTIONS,
+    },
+    {
+      name: "createdAt",
+      label: "Ngày tạo",
+      type: "datetime",
+      hideInForm: true,
+
+      renderCell: (value) => {
+        return new Date(value as string).toLocaleDateString("vi-VN");
+      },
+    },
+  ],
+
+  filters: [
+    {
+      name: "search",
+      label: "Tìm kiếm",
+      type: "text",
+      field: "name",
+      operator: "contains",
+    },
+    {
+      name: "status",
+      label: "Trạng thái",
+      type: "checkbox",
+      field: "status",
+      operator: "in",
+      options: [
+        { label: "Hoạt động", value: "active" },
+        { label: "Không hoạt động", value: "inactive" },
+      ],
+    },
+  ],
+
+  permissions: {
+    create: true,
+    read: true,
+    update: true,
+    delete: true,
+    export: true,
+    import: true,
+  },
+
+  features: {
+    search: true,
+    bulkActions: true,
+    export: true,
+    import: true,
+  },
+};

package/src/configs/i18n.ts

@@ -0,0 +1,12 @@
+export const i18n = {
+  defaultLocale: "vi",
+  locales: ["vi", "en"],
+  localeDirection: {
+    vi: "ltr",
+    en: "ltr",
+  },
+  localeNames: {
+    vi: "vietnamese",
+    en: "english",
+  },
+} as const;

package/src/configs/index.ts

@@ -0,0 +1,26 @@
+// @goerp/core/configs
+// Core configuration for GoERP platform
+// Consolidated from packages/shared/configs
+
+// Local data configs
+export * from "./data/oauth-links";
+
+// Inline configs
+export * from "./i18n";
+export * from "./themes";
+export * from "./auth-routes";
+export * from "./status";
+export * from "./crud";
+
+// Create locales export for backward compatibility
+import { i18n as _i18n } from "./i18n";
+export const locales = _i18n.locales;
+
+// Re-exports with aliases for backward compatibility
+export {
+  STATUS_COLORS as CONFIG_STATUS_COLORS,
+  STATUS_ACTIVE as CONFIG_STATUS_ACTIVE,
+  STATUS_INACTIVE as CONFIG_STATUS_INACTIVE,
+  STATUS_OPTIONS as CONFIG_STATUS_OPTIONS,
+  STATUS_VALUES as CONFIG_STATUS_VALUES,
+} from "./status";

package/src/configs/status.ts

@@ -0,0 +1,25 @@
+export const STATUS_ACTIVE = "active";
+export const STATUS_INACTIVE = "inactive";
+
+export const STATUS_VALUES = [STATUS_ACTIVE, STATUS_INACTIVE] as const;
+
+export const STATUS_OPTIONS = [
+  { label: "crud.common.options.active", value: STATUS_ACTIVE },
+  { label: "crud.common.options.inactive", value: STATUS_INACTIVE },
+];
+
+export const STATUS_COLORS: Record<
+  string,
+  "success" | "warning" | "default" | "destructive" | "secondary" | "outline"
+> = {
+  [STATUS_ACTIVE]: "success",
+  [STATUS_INACTIVE]: "warning",
+};
+
+export function booleanToStatus(value: boolean): string {
+  return value ? STATUS_ACTIVE : STATUS_INACTIVE;
+}
+
+export function statusToBoolean(value: string): boolean {
+  return value === STATUS_ACTIVE;
+}

package/src/configs/themes.ts

@@ -0,0 +1,100 @@
+export const radii = [0, 0.3, 0.5, 0.75, 1];
+
+export const themes = {
+  zinc: {
+    label: "Zinc",
+    activeColor: {
+      light: "240 5.9% 10%",
+      dark: "240 5.2% 33.9%",
+      foreground: "0 0% 98%",
+    },
+  },
+  slate: {
+    label: "Slate",
+    activeColor: {
+      light: "215.4 16.3% 46.9%",
+      dark: "215.3 19.3% 34.5%",
+      foreground: "210 40% 98%",
+    },
+  },
+  stone: {
+    label: "Stone",
+    activeColor: {
+      light: "25 5.3% 44.7%",
+      dark: "33.3 5.5% 32.4%",
+      foreground: "60 9.1% 97.8%",
+    },
+  },
+  gray: {
+    label: "Gray",
+    activeColor: {
+      light: "220 8.9% 46.1%",
+      dark: "215 13.8% 34.1%",
+      foreground: "210 20% 98%",
+    },
+  },
+  neutral: {
+    label: "Neutral",
+    activeColor: {
+      light: "0 0% 45.1%",
+      dark: "0 0% 32.2%",
+      foreground: "0 0% 98%",
+    },
+  },
+  red: {
+    label: "Red",
+    activeColor: {
+      light: "0 72.2% 50.6%",
+      dark: "0 72.2% 50.6%",
+      foreground: "0 85.7% 97.3%",
+    },
+  },
+  rose: {
+    label: "Rose",
+    activeColor: {
+      light: "346.8 77.2% 49.8%",
+      dark: "346.8 77.2% 49.8%",
+      foreground: "355.7 100% 97.3%",
+    },
+  },
+  orange: {
+    label: "Orange",
+    activeColor: {
+      light: "24.6 95% 53.1%",
+      dark: "20.5 90.2% 48.2%",
+      foreground: "60 9.1% 97.8%",
+    },
+  },
+  green: {
+    label: "Green",
+    activeColor: {
+      light: "142.1 76.2% 36.3%",
+      dark: "142.1 70.6% 45.3%",
+      foreground: "355.7 100% 97.3%",
+    },
+  },
+  blue: {
+    label: "Blue",
+    activeColor: {
+      light: "221.2 83.2% 53.3%",
+      dark: "217.2 91.2% 59.8%",
+      foreground: "210 40% 98%",
+    },
+  },
+  yellow: {
+    label: "Yellow",
+    activeColor: {
+      light: "47.9 95.8% 53.1%",
+      dark: "47.9 95.8% 53.1%",
+      foreground: "26 83.3% 14.1%",
+    },
+  },
+  violet: {
+    label: "Violet",
+    activeColor: {
+      light: "262.1 83.3% 57.8%",
+      dark: "263.4 70% 50.4%",
+      foreground: "210 20% 98%",
+    },
+  },
+};

package/src/crud/components/crud-bulk-actions.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { MoreHorizontal, Trash2 } from "lucide-react";
+
+import type { CrudPermissions, EntityConfig } from "../../types";
+
+import { Button } from "../../ui";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../ui/primitives/client";
+import { useCrudContext } from "./crud-provider";
+
+interface CrudBulkActionsProps {
+  config: EntityConfig;
+  permissions: CrudPermissions;
+  onDelete?: (rowIds: string[]) => void;
+  onExport?: (rowIds: string[]) => void;
+}
+
+export function CrudBulkActions({
+  config,
+  permissions,
+  onDelete,
+  onExport,
+}: CrudBulkActionsProps) {
+  const { selectedRows, clearSelection, translations } = useCrudContext();
+
+  // Chỉ hiển thị bulk actions nếu selection column được bật
+  const showRowSelection = config.features?.showRowSelection !== false; // Default: true
+  if (!showRowSelection) {
+    return null;
+  }
+
+  const selectedCount = selectedRows.size;
+
+  if (selectedCount === 0) {
+    return null;
+  }
+
+  const selectedIds = Array.from(selectedRows);
+
+  // Translation fallbacks
+  const t = {
+    selected: "selected",
+    actions: translations.actions || "Actions",
+    exportSelected: "Export selected",
+    deleteSelected: translations.deleteSelected || "Delete selected",
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-sm text-muted-foreground">
+        {selectedCount} {t.selected}
+      </span>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm">
+            <MoreHorizontal className="mr-2 h-4 w-4" />
+            {t.actions}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {permissions.export && onExport && (
+            <DropdownMenuItem onClick={() => onExport(selectedIds)}>
+              {t.exportSelected}
+            </DropdownMenuItem>
+          )}
+          {permissions.delete && onDelete && (
+            <>
+              {permissions.export && <DropdownMenuSeparator />}
+              <DropdownMenuItem
+                onClick={() => {
+                  onDelete(selectedIds);
+                  clearSelection();
+                }}
+                className="text-destructive"
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                {t.deleteSelected}
+              </DropdownMenuItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/crud/components/crud-card-view.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { useState } from "react";
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import type { CrudPermissions, CrudResponse, EntityConfig } from "../../types";
+
+import { isFieldVisibleInTable, sortFieldsByOrder } from "../lib/crud-utils";
+import { formatFieldValue } from "../lib/field-formatter";
+
+import { Badge } from "../../ui";
+import { Card, CardContent, CardHeader } from "../../ui";
+import { Checkbox } from "../../ui/primitives/client";
+import { DataTablePagination } from "../../ui";
+import { CrudEmptyState } from "./crud-empty-state";
+import { useCrudConfig, useCrudSelection, useCrudState } from "./crud-context";
+import { CrudRowActions } from "./crud-row-actions";
+import { CrudTableSkeleton } from "./crud-table-skeleton";
+
+interface CrudCardViewProps<TData = Record<string, unknown>> {
+  // ... existing props ...
+  config: EntityConfig; // Config is passed as prop here, but we should use context if possible or keep it consistent
+  data: CrudResponse<TData>;
+  permissions: CrudPermissions; // Permissions passed as prop
+  loading?: boolean;
+  onEdit?: (rowId: string, rowData?: Record<string, unknown>) => void;
+  onDelete?: (rowId: string) => void;
+  onCustomAction?: (
+    action: string,
+    rowId: string,
+    rowData: Record<string, unknown>,
+  ) => void | Promise<void>;
+  onEmptyStateAction?: {
+    onCreate?: () => void;
+    onClearSearch?: () => void;
+    onClearFilters?: () => void;
+  };
+}
+
+export function CrudCardView<TData extends Record<string, unknown>>({
+  config: propConfig, // Rename to avoid conflict if we use context, but here we might just use props as it was designed
+  data,
+  permissions: propPermissions,
+  loading = false,
+  onEdit,
+  onDelete,
+  onCustomAction,
+  onEmptyStateAction,
+}: CrudCardViewProps<TData>) {
+  // ✅ All hooks must be called before any early returns
+  // Note: CrudCardView receives config and permissions as props, so we might not need useCrudConfig
+  // But to be consistent with Context Splitting, we should use what we need.
+  // However, the original code used props for config/permissions.
+  // Let's stick to using the hooks for state and selection.
+
+  const { selectedRows, toggleRowSelection } = useCrudSelection();
+  const { search, filters, clearFilters, setSearch, pagination } =
+    useCrudState();
+
+  // Use props for config/permissions as they are passed down
+  const config = propConfig;
+  const permissions = propPermissions;
+
+  // Create a minimal table instance for pagination
+  // Always call this hook, even when loading or empty data
+  const table = useReactTable({
+    data: data.data || [],
+    columns: [],
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    pageCount: Math.ceil((data.total || 0) / (data.pageSize || 10)),
+    state: {
+      pagination: {
+        pageIndex: (data.page || 1) - 1,
+        pageSize: data.pageSize || 10,
+      },
+    },
+    manualPagination: true,
+  });
+
+  // Get visible fields (not hidden in table) - sort by order first
+  const visibleFields = sortFieldsByOrder(config.fields).filter(
+    (field) => !field.hideInTable && field.name !== config.idField,
+  );
+
+  // Get primary field (displayField) and secondary fields
+  const primaryField = config.fields.find(
+    (f) => f.name === config.displayField,
+  );
+  const secondaryFields = visibleFields
+    .filter((f) => f.name !== config.displayField)
+    .slice(0, 3); // Show max 3 secondary fields
+
+  if (loading) {
+    return (
+      <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">
+                {config.features?.showRowSelection !== false && (
+                  <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>
+    );
+  }
+
+  if (!data.data || data.data.length === 0) {
+    return (
+      <div className="min-h-[400px]">
+        <CrudEmptyState
+          config={config}
+          hasSearch={!!search && search.trim().length > 0}
+          hasFilters={filters.length > 0}
+          onClearSearch={() => setSearch("")}
+          onClearFilters={clearFilters}
+          onCreate={onEmptyStateAction?.onCreate}
+          canCreate={permissions.create}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+        {data.data.map((row) => {
+          const rowId = String(row[config.idField]);
+          const isSelected = selectedRows.has(rowId);
+          const primaryValue = row[config.displayField];
+          const primaryLabel = primaryField?.label || config.displayField;
+
+          return (
+            <Card
+              key={rowId}
+              className={`transition-all duration-150 hover:shadow-md ${
+                isSelected ? "ring-2 ring-primary" : ""
+              }`}
+            >
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex items-start gap-2 flex-1 min-w-0">
+                    {config.features?.showRowSelection !== false && (
+                      <Checkbox
+                        checked={isSelected}
+                        onCheckedChange={() => toggleRowSelection(rowId)}
+                        className="mt-0.5 shrink-0"
+                        aria-label={`Select ${primaryValue}`}
+                      />
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-semibold text-sm truncate">
+                        {primaryField?.renderCell
+                          ? (primaryField.renderCell(primaryValue, row) as any)
+                          : primaryField
+                            ? formatFieldValue(primaryValue, primaryField)
+                            : String(primaryValue ?? "")}
+                      </h3>
+                      {primaryField?.description && (
+                        <p className="text-xs text-muted-foreground mt-0.5">
+                          {primaryField.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  {(permissions.update ||
+                    permissions.delete ||
+                    (config.rowActions && config.rowActions.length > 0)) && (
+                    <CrudRowActions
+                      rowId={rowId}
+                      rowData={row as Record<string, unknown>}
+                      config={config}
+                      permissions={permissions}
+                      onEdit={onEdit}
+                      onDelete={onDelete}
+                      onCustomAction={onCustomAction}
+                    />
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent className="pt-0">
+                <div className="space-y-2">
+                  {secondaryFields.map((field) => {
+                    const value = row[field.name];
+                    if (value === null || value === undefined || value === "") {
+                      return null;
+                    }
+
+                    return (
+                      <div
+                        key={field.name}
+                        className="flex items-start gap-2 text-sm"
+                      >
+                        <span className="text-muted-foreground font-medium shrink-0 min-w-[80px]">
+                          {field.label}:
+                        </span>
+                        <span className="text-foreground flex-1 break-words">
+                          {field.renderCell
+                            ? (field.renderCell(value, row) as any)
+                            : formatFieldValue(value, field)}
+                        </span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* Pagination Section */}
+      <div className="border-t bg-muted/30 px-4 sm:px-6 py-3">
+        <DataTablePagination
+          table={table}
+          totalItems={data.total}
+          currentPage={pagination.page}
+          pageSize={pagination.pageSize}
+        />
+      </div>
+    </div>
+  );
+}