@goplusvn/core 0.1.0 → 0.1.2

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

@@ -0,0 +1,352 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import type { ColumnDef, Table } from "@tanstack/react-table";
+
+import { StatusBadge } from "../../ui";
+
+import type { CrudResponse } from "../../types";
+
+import { isFieldVisibleInTable, sortFieldsByOrder } from "../lib/crud-utils";
+import { formatFieldValue } from "../lib/field-formatter";
+import { dataLoader } from "../lib/data-loader";
+
+import { DataTableColumnHeader } from "../../ui";
+import { useCrudConfig, useCrudSelection, useCrudState } from "./crud-context";
+import { CrudRowActions } from "./crud-row-actions";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../../ui/primitives/client";
+import { DataTable } from "../../ui/data-display/data-table/data-table";
+
+interface CrudTableProps<TData = Record<string, unknown>> {
+  data: CrudResponse<TData>;
+  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>;
+  onTableReady?: (table: Table<TData>) => void;
+  onEmptyStateAction?: {
+    onCreate?: () => void;
+    onClearSearch?: () => void;
+    onClearFilters?: () => void;
+  };
+  getTranslation?: (key: string) => string;
+}
+
+export function CrudTable<TData extends Record<string, unknown>>({
+  data,
+  loading = false,
+  onEdit,
+  onDelete,
+  onCustomAction,
+  onTableReady,
+  onEmptyStateAction,
+  getTranslation,
+}: CrudTableProps<TData>) {
+  const { config, permissions, translations } = useCrudConfig();
+  const { selectedRows, setSelectedRows } = useCrudSelection();
+  const {
+    sorting,
+    setSorting,
+    pagination,
+    setPage,
+    setPageSize,
+    search,
+    filters,
+    clearFilters,
+    setSearch,
+  } = useCrudState();
+
+  // Load options for fields with dataSource
+  const [dataSourceOptions, setDataSourceOptions] = useState<
+    Map<string, Array<{ label: string; value: string | number | boolean }>>
+  >(new Map());
+
+  useEffect(() => {
+    if (!config) return;
+
+    const fieldsWithDataSource = config.fields.filter(
+      (field) =>
+        field.dataSource &&
+        (field.type === "select" || field.type === "multiselect"),
+    );
+
+    const loadOptions = async () => {
+      const optionsMap = new Map<
+        string,
+        Array<{ label: string; value: string | number | boolean }>
+      >();
+
+      await Promise.all(
+        fieldsWithDataSource.map(async (field) => {
+          if (!field.dataSource) return;
+
+          try {
+            const options = await dataLoader.loadOptions(field.dataSource);
+            optionsMap.set(field.name, options);
+          } catch (error) {
+            console.error(
+              `Failed to load options for field ${field.name}:`,
+              error,
+            );
+            optionsMap.set(field.name, []);
+          }
+        }),
+      );
+
+      setDataSourceOptions(optionsMap);
+    };
+
+    loadOptions();
+  }, [config]);
+
+  // Handle selection change from DataTable
+  const handleSelectionChange = (newSelectedRows: Set<string>) => {
+    setSelectedRows(newSelectedRows);
+  };
+
+  // Build columns from config
+  const columns = useMemo<ColumnDef<TData>[]>(() => {
+    if (!config) return [];
+    const cols: ColumnDef<TData>[] = [];
+
+    // Data columns from config - sort by order first
+    sortFieldsByOrder(config.fields)
+      .filter(isFieldVisibleInTable)
+      .forEach((field) => {
+        cols.push({
+          accessorKey: field.name,
+          size: field.width
+            ? typeof field.width === "number"
+              ? field.width
+              : parseInt(String(field.width))
+            : 200, // Default 200px
+          minSize: field.minWidth
+            ? typeof field.minWidth === "number"
+              ? field.minWidth
+              : parseInt(String(field.minWidth))
+            : 100, // Default 100px
+          maxSize: field.maxWidth
+            ? typeof field.maxWidth === "number"
+              ? field.maxWidth
+              : parseInt(String(field.maxWidth))
+            : 500, // Default 500px
+          header: ({ column }) => (
+            <DataTableColumnHeader column={column} title={field.label} />
+          ),
+          cell: ({ row }) => {
+            const value = row.getValue(field.name);
+            let content: ReactNode;
+
+            if (field.renderCell) {
+              content = field.renderCell(value, row.original) as any;
+            } else if (field.type === "switch") {
+              
+              if (typeof value === "boolean" && !field.options) {
+                 const label = value ? "Có" : "Không";
+                 // Map boolean to status colors that StatusBadge likely supports
+                 const status = value ? "active" : "inactive";
+                 content = <StatusBadge status={status} label={label} />;
+              } else {
+                const option = field.options?.find((opt) => {
+                  const optValue = typeof opt === "object" ? opt.value : opt;
+                  return optValue === value;
+                });
+                const label = typeof option === "object" ? option.label : option;
+                // Translate label if translator provided and label is a valid string
+                const translatedLabel =
+                  getTranslation && typeof label === "string"
+                    ? getTranslation(label)
+                    : (label as string) || String(value);
+                content = <StatusBadge status={value} label={translatedLabel} />;
+              }
+            } else if (
+              field.dataSource &&
+              (field.type === "select" || field.type === "multiselect") &&
+              value !== null &&
+              value !== undefined &&
+              value !== ""
+            ) {
+              // Resolve label from dataSource
+              const options = dataSourceOptions.get(field.name) || [];
+              if (field.type === "multiselect" && Array.isArray(value)) {
+                // Handle multiselect - show all labels
+                const labels = value
+                  .map((val) => {
+                    const option = options.find(
+                      (opt) => String(opt.value) === String(val),
+                    );
+                    return option ? option.label : String(val);
+                  })
+                  .filter(Boolean);
+                content = labels.join(", ") || String(value);
+              } else {
+                // Handle single select
+                const option = options.find(
+                  (opt) => String(opt.value) === String(value),
+                );
+                content = option
+                  ? option.label
+                  : formatFieldValue(value, field);
+              }
+            } else {
+              content = formatFieldValue(value, field);
+            }
+
+            // Default truncation for text-like fields or when no custom render
+            // Skip truncation for specific types where it might break UI (e.g. image, boolean, actions, switch)
+            const isTruncatable =
+              !field.renderCell &&
+              !["switch"].includes(field.type) &&
+              [
+                "text",
+                "email",
+                "url",
+                "textarea",
+                "select",
+                "number",
+                "integer",
+              ].includes(field.type);
+
+            if (isTruncatable) {
+              return (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div
+                        className="truncate select-none cursor-default"
+                        title={
+                          typeof content === "string" ? content : undefined
+                        }
+                      >
+                        {content}
+                      </div>
+                    </TooltipTrigger>
+                    {content && (
+                      <TooltipContent
+                        className="max-w-[400px] break-words"
+                        side="bottom"
+                        align="start"
+                      >
+                        <p>{content}</p>
+                      </TooltipContent>
+                    )}
+                  </Tooltip>
+                </TooltipProvider>
+              );
+            }
+
+            return content;
+          },
+          enableSorting: field.sortable !== false,
+        });
+      });
+
+    // Actions column
+    if (permissions.update || permissions.delete || config.rowActions) {
+      cols.push({
+        id: "actions",
+        header: () => (
+          <div className="text-right font-semibold text-xs">
+            {translations.actions || "Actions"}
+          </div>
+        ),
+        cell: ({ row }) => {
+          const rowId = String(row.original[config.idField]);
+          return (
+            <div className="text-right">
+              <CrudRowActions
+                rowId={rowId}
+                rowData={row.original as Record<string, unknown>}
+                config={config}
+                permissions={permissions}
+                onEdit={onEdit}
+                onDelete={onDelete}
+                onCustomAction={onCustomAction}
+                translations={{
+                  edit: translations.edit,
+                  delete: translations.delete,
+                  actions: translations.actions,
+                }}
+              />
+            </div>
+          );
+        },
+        enableSorting: false,
+        enableHiding: false,
+        size: 80,
+      });
+    }
+
+    return cols;
+  }, [
+    config,
+    permissions,
+    onEdit,
+    onDelete,
+    onCustomAction,
+    getTranslation,
+    translations,
+    dataSourceOptions,
+  ]);
+
+  if (!config) {
+    return (
+      <div className="space-y-4">
+        <div className="text-center p-4">Initializing configuration...</div>
+      </div>
+    );
+  }
+
+  // Construct ID getter
+  const getRowId = (row: TData) => String((row as any)[config.idField]);
+
+  return (
+    <DataTable
+      data={data.data}
+      columns={columns}
+      loading={loading}
+      // Pagination
+      pagination={{
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+        total: data.total,
+      }}
+      onPaginationChange={({ page, pageSize }) => {
+        if (page !== pagination.page) setPage(page);
+        if (pageSize !== pagination.pageSize) setPageSize(pageSize);
+      }}
+      // Sorting
+      sorting={sorting}
+      onSortingChange={setSorting}
+      // Selection
+      enableRowSelection={config.features?.showRowSelection !== false}
+      selectedRows={selectedRows}
+      onSelectionChange={handleSelectionChange}
+      getRowId={getRowId}
+      // Row Number
+      enableRowNumber={config.features?.showRowNumber !== false}
+      // Empty State
+      emptyStateConfig={{
+        hasSearch: !!search && search.trim().length > 0,
+        hasFilters: filters.length > 0,
+        onClearSearch: () => setSearch(""),
+        onClearFilters: clearFilters,
+        onCreate: permissions.create ? onEmptyStateAction?.onCreate : undefined,
+      }}
+      // Callbacks
+      onTableReady={onTableReady}
+      className="min-h-[calc(100vh-16rem)]"
+      height="full"
+    />
+  );
+}

package/src/crud/components/crud-virtual-table.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+/**
+ * CrudVirtualTable - Optional virtual scrolling component
+ *
+ * This component provides virtual scrolling for large datasets (1000+ rows)
+ * using @tanstack/react-virtual or react-window.
+ *
+ * Note: This is optional and can be implemented later if needed for performance.
+ * For now, CrudTable handles regular pagination which is sufficient for most use cases.
+ */
+import type { CrudPermissions, CrudResponse, EntityConfig } from "../../types";
+
+interface CrudVirtualTableProps<TData = Record<string, unknown>> {
+  config: EntityConfig;
+  data: CrudResponse<TData>;
+  permissions: CrudPermissions;
+  loading?: boolean;
+  onEdit?: (rowId: string) => void;
+  onDelete?: (rowId: string) => void;
+}
+
+/**
+ * Virtual table component for large datasets
+ *
+ * TODO: Implement with @tanstack/react-virtual when needed
+ * Example implementation:
+ *
+ * import { useVirtualizer } from '@tanstack/react-virtual'
+ *
+ * const parentRef = useRef<HTMLDivElement>(null)
+ * const virtualizer = useVirtualizer({
+ *   count: data.data.length,
+ *   getScrollElement: () => parentRef.current,
+ *   estimateSize: () => 50,
+ *   overscan: 5,
+ * })
+ */
+export function CrudVirtualTable<TData extends Record<string, unknown>>({
+  config,
+  data,
+  permissions,
+  loading = false,
+  onEdit,
+  onDelete,
+}: CrudVirtualTableProps<TData>) {
+  // For now, fallback to regular CrudTable
+  // This can be implemented later if virtual scrolling is needed
+  return (
+    <div className="text-sm text-muted-foreground p-4">
+      Virtual scrolling not yet implemented. Use CrudTable for regular
+      pagination.
+    </div>
+  );
+}

package/src/crud/components/index.tsx

@@ -0,0 +1,20 @@
+// Main CRUD components
+export { CrudProvider, useCrudContext } from "./crud-provider";
+export { CrudPage } from "./crud-page";
+export { CrudTable } from "./crud-table";
+export { CrudTableSkeleton } from "./crud-table-skeleton";
+export { CrudTableToolbar } from "./crud-table-toolbar";
+export { CrudRowActions } from "./crud-row-actions";
+export { CrudForm } from "./crud-form";
+export { CrudDialog } from "./crud-dialog";
+export { CrudSheet } from "./crud-sheet";
+export { CrudSearch } from "./crud-search";
+export { CrudBulkActions } from "./crud-bulk-actions";
+export { CrudImportDialog } from "./crud-import-dialog";
+export { CrudExportButton } from "./crud-export-button";
+export { CrudFieldRenderer } from "./crud-field-renderer";
+export { CrudInfiniteScroll } from "./crud-infinite-scroll";
+export { CrudVirtualTable } from "./crud-virtual-table";
+
+// Filter components
+export * from "./crud-filters";

package/src/crud/crud-filters/checkbox-filter.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { dataLoader } from "../lib/data-loader";
+
+import { useCrudContext } from "../components/crud-provider";
+import { Checkbox } from "../../ui/primitives/checkbox";
+import { Label } from "../../ui/primitives/label";
+import { ScrollArea } from "../../ui/primitives/scroll-area";
+import type { FilterConfig } from "../../types";
+
+export function CheckboxFilter({ filter }: { filter: FilterConfig }) {
+  const { filters, addFilter, removeFilter } = useCrudContext();
+  const currentFilter = filters.find((f: any) => f.name === filter.name);
+  const [value, setValue] = useState<string[]>(
+    currentFilter?.value
+      ? (currentFilter.value as string[])
+      : (filter.defaultValue as string[]) || [],
+  );
+  const [options, setOptions] = useState<
+    Array<{ label: string; value: string | number | boolean }>
+  >(filter.options || []);
+
+  // Load options from API if dataSource is provided
+  useEffect(() => {
+    if (filter.dataSource) {
+      dataLoader
+        .loadOptions(filter.dataSource)
+        .then(setOptions)
+        .catch((error) => {
+          console.error("Error loading filter options:", error);
+        });
+    }
+  }, [filter.dataSource]);
+
+  useEffect(() => {
+    const externalFilter = filters.find((f) => f.name === filter.name);
+    if (externalFilter && externalFilter.value !== value) {
+      setValue((externalFilter.value as string[]) || []);
+    }
+  }, [filters, filter.name, value]);
+
+  const handleChange = (optionValue: string | number, checked: boolean) => {
+    const stringValue = String(optionValue);
+    const updatedValues = checked
+      ? [...value, stringValue]
+      : value.filter((v) => v !== stringValue);
+
+    setValue(updatedValues);
+
+    if (updatedValues.length === 0) {
+      return;
+    }
+
+    addFilter({
+      name: filter.name,
+      value: updatedValues,
+      operator: filter.operator || "in",
+    });
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label>{filter.label}</Label>
+      <div className="space-y-2">
+        {options.map((option) => (
+          <div key={String(option.value)} className="flex items-center space-x-2">
+            <Checkbox
+              id={`${filter.name}-${option.value}`}
+              checked={value.includes(String(option.value))}
+              onCheckedChange={(checked) =>
+                handleChange(String(option.value), checked === true)
+              }
+            />
+            <Label
+              htmlFor={`${filter.name}-${option.value}`}
+              className="font-normal cursor-pointer"
+            >
+              {option.label}
+            </Label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/crud/crud-filters/datetime-filter.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { useCrudContext } from "../components/crud-provider";
+import { Calendar } from "../../ui/primitives/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/primitives/popover";
+import { Button } from "../../ui/primitives/button";
+import { cn } from "../../utils";
+import { format } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { FilterConfig } from "../../types";
+import { Label } from "../../ui/primitives/label"; // Imported Label
+import { DateRangePicker } from "../../ui/forms/date-range-picker"; // Imported DateRangePicker
+import { DatePicker } from "../../ui/forms/date-picker"; // Imported DatePicker
+
+export function DatetimeFilter({ filter, mode: propMode }: { filter: FilterConfig; mode?: string }) {
+  const { filters, setFilters, addFilter } = useCrudContext(); // Added addFilter
+  const currentFilter = filters.find((f: any) => f.name === filter.name);
+  // Since 'mode' is removed, we assume single date selection.
+  // Wait, the code uses 'mode'.
+  // "const operator = mode === 'range' ? ..."
+  // I need to define mode.
+  const mode = propMode || filter.mode || "single";
+
+  const [value, setValue] = useState<Date | [Date, Date] | null>(
+    currentFilter?.value ? (currentFilter.value as Date) : null,
+  );
+
+  useEffect(() => {
+    const externalFilter = filters.find((f) => f.name === filter.name);
+    if (externalFilter && externalFilter.value !== value) {
+      setValue(
+        mode === "range"
+          ? (externalFilter.value as [Date, Date])
+          : (externalFilter.value as Date),
+      );
+    }
+  }, [filters, filter.name, mode, value]);
+
+  const handleChange = (newValue: Date | [Date, Date] | null) => {
+    setValue(newValue);
+
+    if (!newValue) {
+      return;
+    }
+
+    const operator =
+      mode === "range" ? filter.operator || "between" : filter.operator || "eq";
+
+    addFilter({
+      name: filter.name,
+      value: newValue,
+      operator,
+    });
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={filter.name}>{filter.label}</Label>
+      {mode === "range" ? (
+        <DateRangePicker
+          value={
+            value && Array.isArray(value)
+              ? { from: value[0], to: value[1] }
+              : undefined
+          }
+          onValueChange={(range) => {
+            handleChange(
+              range?.from && range?.to ? [range.from, range.to] : null,
+            );
+          }}
+        />
+      ) : (
+        <DatePicker
+          value={(value as Date) || undefined}
+          onValueChange={(date) => handleChange(date || null)}
+        />
+      )}
+    </div>
+  );
+}

package/src/crud/crud-filters/filter-builder.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import type { FilterConfig } from "../../types";
+
+import { CheckboxFilter } from "./checkbox-filter";
+import { DatetimeFilter } from "./datetime-filter";
+import { RadioFilter } from "./radio-filter";
+import { SelectFilter } from "./select-filter";
+import { TextFilter } from "./text-filter";
+
+interface FilterBuilderProps {
+  filters: FilterConfig[];
+}
+
+export function FilterBuilder({ filters }: FilterBuilderProps) {
+  if (!filters || filters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      {filters.map((filter) => {
+        switch (filter.type) {
+          case "text":
+            return <TextFilter key={filter.name} filter={filter} />;
+          case "datetime":
+            // Check if filter should be range based on operator
+            const isRange =
+              filter.operator === "between" ||
+              filter.name.toLowerCase().includes("range");
+            return (
+              <DatetimeFilter
+                key={filter.name}
+                filter={filter}
+                mode={isRange ? "range" : "single"}
+              />
+            );
+          case "select":
+            return <SelectFilter key={filter.name} filter={filter} />;
+          case "checkbox":
+            return <CheckboxFilter key={filter.name} filter={filter} />;
+          case "radio":
+            return <RadioFilter key={filter.name} filter={filter} />;
+          case "custom":
+            // Custom filter renderer
+            if (filter.renderFilter) {
+              return (
+                <div key={filter.name}>
+                  {filter.renderFilter({
+                    filter,
+                    name: filter.name,
+                    label: filter.label,
+                  })}
+                </div>
+              );
+            }
+            return null;
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}