nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/NucleusEntityShowcase.js

@@ -0,0 +1,1409 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useNucleusEntity } from "../hooks/useNucleusEntity";
+import { cn } from "../utils/cn";
+import { formatLabel, getColumnType, getDateFilterColumns, getEnumFilterColumns, getEnumValues, getNumericFilterColumns, getSearchableColumns, isArrayColumn, isBooleanColumn, isJsonColumn, isReferenceColumn, shouldExcludeColumn, shouldExcludeFromForm } from "../utils/columnUtils";
+import { Button } from "./Button";
+import { Checkbox } from "./Checkbox";
+import { DataTable } from "./DataTable";
+import { DatePicker } from "./DatePicker";
+import { NucleusTextInput } from "./NucleusTextInput";
+import { RangePicker } from "./RangePicker";
+import { SearchBox } from "./SearchBox";
+import { SelectBox } from "./SelectBox";
+gsap.registerPlugin(useGSAP);
+const theme = {
+    container: "w-full h-full flex flex-col min-h-0",
+    header: {
+        base: "mb-4",
+        title: "text-xl font-semibold text-zinc-900 dark:text-white",
+        description: "mt-1 text-sm text-zinc-500 dark:text-zinc-400"
+    },
+    toolbar: {
+        base: "flex flex-col gap-3 mb-4",
+        row: "flex flex-wrap items-center gap-3",
+        search: "flex-1 min-w-[200px] max-w-md",
+        searchFields: "flex flex-wrap items-center gap-2",
+        filters: "flex flex-wrap items-center gap-2",
+        actions: "flex items-center gap-2 ml-auto"
+    },
+    table: {
+        container: "w-full flex-1 overflow-auto rounded-lg border border-zinc-200 dark:border-zinc-700 min-h-0 relative",
+        table: "w-full text-sm table-fixed",
+        thead: "bg-zinc-50 dark:bg-zinc-800 sticky top-0 z-10",
+        th: "px-3 py-2.5 text-left text-xs font-medium text-zinc-600 dark:text-zinc-400 uppercase tracking-wider bg-zinc-50 dark:bg-zinc-800",
+        thSortable: "cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 select-none",
+        tbody: "divide-y divide-zinc-100 dark:divide-zinc-800",
+        tr: "hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors",
+        trSelected: "bg-blue-50 dark:bg-blue-900/20",
+        td: "px-3 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 truncate relative",
+        empty: "px-4 py-12 text-center text-zinc-500 dark:text-zinc-400",
+        loading: "px-4 py-8 text-center text-zinc-500"
+    },
+    pagination: {
+        base: "flex items-center justify-between py-3 text-sm border-t border-zinc-200 dark:border-zinc-700",
+        info: "text-zinc-500 dark:text-zinc-400",
+        buttons: "flex items-center gap-2"
+    },
+    modal: {
+        overlay: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200",
+        container: "w-full max-w-lg rounded-2xl bg-white p-6 shadow-2xl dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 animate-in zoom-in-95 slide-in-from-bottom-4 duration-200",
+        header: "mb-6 flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 pb-4",
+        title: "text-lg font-semibold text-zinc-900 dark:text-white",
+        closeButton: "rounded-full p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+    },
+    button: {
+        base: "inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+        primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+        secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700",
+        danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
+        success: "bg-green-600 text-white hover:bg-green-700 focus:ring-green-500",
+        ghost: "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800",
+        sizes: {
+            sm: "px-3 py-1.5 text-sm",
+            md: "px-4 py-2 text-sm",
+            lg: "px-5 py-2.5 text-base"
+        }
+    },
+    input: {
+        base: "w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-500",
+        label: "mb-1.5 block text-sm font-medium text-zinc-700 dark:text-zinc-300",
+        error: "mt-1 text-xs text-red-500 dark:text-red-400"
+    },
+    select: {
+        base: "w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100"
+    },
+    checkbox: {
+        base: "h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800"
+    },
+    skeleton: {
+        base: "animate-pulse rounded bg-zinc-200 dark:bg-zinc-700",
+        row: "h-12"
+    }
+};
+export function NucleusEntityShowcase({ entity, apiActions, title, description, pageSize = 20, searchable = true, searchFields: _searchFields, filterable = true, sortable = true, selectable = true, showAdd = true, showEdit = true, showDelete = true, showBulkAdd: _showBulkAdd = false, showBulkDelete = true, columnConfigs, fieldConfigs, excludeColumns = [], excludeFields = [], onRowClick, renderHeader, renderToolbar, className }) {
+    const table = entity.table_name;
+    const containerRef = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [modalState, setModalState] = useState({
+        isOpen: false,
+        mode: "add"
+    });
+    const [formValues, setFormValues] = useState({});
+    const [formErrors, setFormErrors] = useState({});
+    const [detailModal, setDetailModal] = useState({
+        isOpen: false,
+        table: "",
+        data: null
+    });
+    useEffect(()=>{
+        setMounted(true);
+    }, []);
+    const { items, meta, isLoading, isLoadingMore, loadData, loadMore, hasMore, addItem, updateItem, deleteItem, bulkDelete, search, setSearch, setSort, filters, setFilters } = useNucleusEntity({
+        entity,
+        apiActions: apiActions,
+        pageSize
+    });
+    // Base columns added when entity.add_base_columns is true
+    const baseColumns = entity.add_base_columns ? [
+        {
+            name: "id",
+            type: "uuid",
+            primaryKey: true
+        },
+        {
+            name: "created_at",
+            type: "timestamptz"
+        },
+        {
+            name: "updated_at",
+            type: "timestamptz"
+        }
+    ] : [];
+    const entityColumnNames = new Set((entity.columns ?? []).map((c)=>c.name));
+    const filteredBaseColumns = baseColumns.filter((c)=>!entityColumnNames.has(c.name));
+    const columns = [
+        ...entity.columns ?? [],
+        ...filteredBaseColumns
+    ];
+    const visibleColumns = columns.filter((col)=>{
+        if (shouldExcludeColumn(col)) return false;
+        if (excludeColumns.includes(col.name)) return false;
+        const config = columnConfigs?.[col.name];
+        if (config?.hidden) return false;
+        return true;
+    });
+    const getFormColumns = (mode)=>columns.filter((col)=>{
+            if (shouldExcludeFromForm(col, mode)) return false;
+            if (excludeFields.includes(col.name)) return false;
+            const config = fieldConfigs?.[col.name];
+            if (config?.hidden) return false;
+            return true;
+        });
+    const [referenceData, setReferenceData] = useState({});
+    const [loadingReferences, setLoadingReferences] = useState({});
+    const referenceColumns = useMemo(()=>columns.filter((col)=>isReferenceColumn(col)), [
+        columns
+    ]);
+    const loadedRefsRef = useRef(new Set());
+    const loadReferenceData = useCallback((column)=>{
+        if (!column.references) return;
+        const refTable = column.references.table;
+        if (loadedRefsRef.current.has(refTable)) return;
+        loadedRefsRef.current.add(refTable);
+        const endpointKey = `GET_${refTable.toUpperCase()}`;
+        const action = apiActions[endpointKey];
+        if (action) {
+            action.start({
+                payload: {
+                    limit: 100
+                },
+                onAfterHandle: (data)=>{
+                    const response = data;
+                    const items = response?.data?.items ?? [];
+                    const options = items.map((item)=>({
+                            id: String(item.id ?? ""),
+                            label: String(item.name ?? item.title ?? item.label ?? item.id ?? ""),
+                            data: item
+                        }));
+                    setReferenceData((prev)=>({
+                            ...prev,
+                            [refTable]: options
+                        }));
+                    setLoadingReferences((prev)=>({
+                            ...prev,
+                            [refTable]: false
+                        }));
+                },
+                onErrorHandle: ()=>{
+                    setLoadingReferences((prev)=>({
+                            ...prev,
+                            [refTable]: false
+                        }));
+                }
+            });
+        }
+    }, [
+        apiActions
+    ]);
+    const openDetailModal = (table, id)=>{
+        const options = referenceData[table] ?? [];
+        const found = options.find((opt)=>opt.id === id);
+        if (found) {
+            setDetailModal({
+                isOpen: true,
+                table,
+                data: found.data
+            });
+        }
+    };
+    const closeDetailModal = ()=>{
+        setDetailModal({
+            isOpen: false,
+            table: "",
+            data: null
+        });
+    };
+    useEffect(()=>{
+        for (const col of referenceColumns){
+            loadReferenceData(col);
+        }
+    }, [
+        referenceColumns,
+        loadReferenceData
+    ]);
+    useGSAP(()=>{
+        if (containerRef.current) {
+            gsap.fromTo(containerRef.current, {
+                opacity: 0,
+                y: 10
+            }, {
+                opacity: 1,
+                y: 0,
+                duration: 0.3,
+                ease: "power2.out"
+            });
+        }
+    }, []);
+    const handleSearch = (query)=>{
+        setSearch(query);
+        loadData({
+            search: query,
+            page: 1
+        });
+    };
+    const handleClearSelection = ()=>{
+        setSelectedRows([]);
+    };
+    const openAddModal = ()=>{
+        const initialValues = {};
+        for (const col of getFormColumns("add")){
+            const enumVals = col.enumValues ?? col.enum?.values;
+            if (col.default !== undefined) {
+                initialValues[col.name] = col.default;
+            } else if (enumVals && enumVals.length > 0) {
+                initialValues[col.name] = enumVals[0];
+            } else if (col.type === "boolean") {
+                initialValues[col.name] = false;
+            } else {
+                initialValues[col.name] = "";
+            }
+        }
+        setFormValues(initialValues);
+        setFormErrors({});
+        setModalState({
+            isOpen: true,
+            mode: "add"
+        });
+    };
+    const openEditModal = (row)=>{
+        const normalizedValues = {};
+        const rowData = row;
+        for (const col of columns){
+            const colName = col.name;
+            const camelKey = colName.replace(/_([a-z])/g, (_, c)=>c.toUpperCase());
+            // For relation columns, look up by foreignKey
+            if (col.references?.foreignKey) {
+                const fk = col.references.foreignKey;
+                if (fk in rowData) {
+                    normalizedValues[colName] = rowData[fk];
+                    continue;
+                }
+            }
+            if (colName in rowData) {
+                normalizedValues[colName] = rowData[colName];
+            } else if (camelKey in rowData) {
+                normalizedValues[colName] = rowData[camelKey];
+            } else {
+                // Try with Id suffix for relations without explicit foreignKey
+                const withIdSuffix = `${camelKey}Id`;
+                if (withIdSuffix in rowData) {
+                    normalizedValues[colName] = rowData[withIdSuffix];
+                } else {
+                    normalizedValues[colName] = undefined;
+                }
+            }
+        }
+        setFormValues(normalizedValues);
+        setFormErrors({});
+        setModalState({
+            isOpen: true,
+            mode: "edit",
+            data: row
+        });
+    };
+    const closeModal = ()=>{
+        setModalState({
+            isOpen: false,
+            mode: "add"
+        });
+        setFormValues({});
+        setFormErrors({});
+        setSubmitError(null);
+    };
+    const validateForm = ()=>{
+        const errors = {};
+        for (const col of getFormColumns(modalState.mode)){
+            const value = formValues[col.name];
+            const isEmpty = value === undefined || value === null || value === "";
+            if (col.notNull && isEmpty) {
+                errors[col.name] = "This field is required";
+                continue;
+            }
+            if (!isEmpty && col.validation) {
+                if (col.validation.minLength && String(value).length < col.validation.minLength) {
+                    errors[col.name] = `Minimum ${col.validation.minLength} characters`;
+                }
+                if (col.validation.maxLength && String(value).length > col.validation.maxLength) {
+                    errors[col.name] = `Maximum ${col.validation.maxLength} characters`;
+                }
+                if (col.validation.min !== undefined && Number(value) < col.validation.min) {
+                    errors[col.name] = `Minimum value is ${col.validation.min}`;
+                }
+                if (col.validation.max !== undefined && Number(value) > col.validation.max) {
+                    errors[col.name] = `Maximum value is ${col.validation.max}`;
+                }
+            }
+        }
+        setFormErrors(errors);
+        return Object.keys(errors).length === 0;
+    };
+    const [submitError, setSubmitError] = useState(null);
+    const prepareDataForSubmit = (data)=>{
+        const prepared = {};
+        const formCols = getFormColumns(modalState.mode);
+        const numericTypes = [
+            "integer",
+            "smallint",
+            "bigint",
+            "real",
+            "doublePrecision",
+            "numeric",
+            "decimal",
+            "money"
+        ];
+        for (const col of formCols){
+            const value = data[col.name];
+            // Use foreignKey for relation columns, otherwise use column name
+            const key = col.references?.foreignKey ?? col.name;
+            if (value === undefined || value === null || value === "") {
+                if (!col.notNull) {
+                    prepared[key] = null;
+                }
+                continue;
+            }
+            if (isArrayColumn(col)) {
+                prepared[key] = Array.isArray(value) ? value.join(",") : String(value);
+            } else if (numericTypes.includes(col.type)) {
+                prepared[key] = Number(value);
+            } else {
+                prepared[key] = value;
+            }
+        }
+        return prepared;
+    };
+    const handleSubmit = async ()=>{
+        if (!validateForm()) return;
+        setSubmitError(null);
+        const preparedData = prepareDataForSubmit(formValues);
+        try {
+            if (modalState.mode === "add") {
+                await addItem(preparedData);
+            } else {
+                const id = modalState.data?.id;
+                if (id) {
+                    await updateItem(id, preparedData);
+                }
+            }
+            closeModal();
+        } catch (err) {
+            let errorMessage = "An error occurred";
+            const extractMessage = (obj)=>{
+                if (typeof obj === "string") return obj;
+                if (obj && typeof obj === "object") {
+                    const o = obj;
+                    if (o.summary) return String(o.summary);
+                    if (o.message) return String(o.message);
+                    if (o.errors && Array.isArray(o.errors)) {
+                        return o.errors.map((e)=>extractMessage(e)).join(", ");
+                    }
+                }
+                return JSON.stringify(obj);
+            };
+            try {
+                const error = err;
+                if (error.errors && Array.isArray(error.errors) && error.errors.length > 0) {
+                    errorMessage = error.errors.map((e)=>extractMessage(e)).join(", ");
+                } else if (error.message) {
+                    try {
+                        const parsed = JSON.parse(error.message);
+                        errorMessage = extractMessage(parsed);
+                    } catch  {
+                        errorMessage = error.message;
+                    }
+                } else {
+                    errorMessage = extractMessage(err);
+                }
+            } catch  {
+                errorMessage = String(err);
+            }
+            setSubmitError(errorMessage);
+        }
+    };
+    const handleDelete = async (id)=>{
+        if (window.confirm("Are you sure you want to delete this item?")) {
+            await deleteItem(id);
+        }
+    };
+    const handleBulkDelete = async ()=>{
+        if (selectedRows.length === 0) return;
+        if (window.confirm(`Are you sure you want to delete ${selectedRows.length} items?`)) {
+            const ids = selectedRows.map((r)=>r.id);
+            await bulkDelete(ids);
+            setSelectedRows([]);
+        }
+    };
+    const renderCellValue = (column, value)=>{
+        const config = columnConfigs?.[column.name];
+        if (config?.cellRenderer) {
+            return config.cellRenderer({
+                value,
+                row: {}
+            });
+        }
+        if (value === null || value === undefined) {
+            return /*#__PURE__*/ _jsx("span", {
+                className: "text-zinc-400",
+                children: "-"
+            });
+        }
+        if (column.type === "boolean") {
+            return value ? "Yes" : "No";
+        }
+        if (column.type === "timestamp" || column.type === "timestamptz" || column.type === "date") {
+            return new Date(value).toLocaleDateString();
+        }
+        if (column.type === "json" || column.type === "jsonb") {
+            return /*#__PURE__*/ _jsxs("code", {
+                className: "text-xs",
+                children: [
+                    JSON.stringify(value).slice(0, 50),
+                    "..."
+                ]
+            });
+        }
+        if (isReferenceColumn(column) && column.references) {
+            const refTable = column.references.table;
+            const options = referenceData[refTable] ?? [];
+            const found = options.find((opt)=>opt.id === String(value));
+            if (found) {
+                return /*#__PURE__*/ _jsxs("button", {
+                    type: "button",
+                    onClick: (e)=>{
+                        e.stopPropagation();
+                        openDetailModal(refTable, found.id);
+                    },
+                    className: "group inline-flex items-center gap-1.5 rounded-md border border-zinc-200 bg-zinc-50 px-2 py-1 text-xs font-medium text-zinc-700 transition-all hover:border-zinc-300 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "max-w-[120px] truncate",
+                            children: found.label
+                        }),
+                        /*#__PURE__*/ _jsx("svg", {
+                            className: "h-3 w-3 text-zinc-400 transition-transform group-hover:translate-x-0.5 group-hover:text-zinc-600 dark:group-hover:text-zinc-300",
+                            fill: "none",
+                            viewBox: "0 0 24 24",
+                            stroke: "currentColor",
+                            "aria-hidden": "true",
+                            children: /*#__PURE__*/ _jsx("path", {
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                strokeWidth: 2,
+                                d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                            })
+                        })
+                    ]
+                });
+            }
+            return /*#__PURE__*/ _jsx("span", {
+                className: "text-zinc-400",
+                children: "-"
+            });
+        }
+        return String(value);
+    };
+    const renderFormField = (column)=>{
+        const config = fieldConfigs?.[column.name];
+        const label = config?.label ?? formatLabel(column.name);
+        const value = formValues[column.name];
+        const error = formErrors[column.name];
+        const colType = getColumnType(column);
+        if (config?.render) {
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "mb-4",
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        htmlFor: `field-${column.name}`,
+                        className: theme.input.label,
+                        children: label
+                    }),
+                    config.render({
+                        value,
+                        onChange: (v)=>setFormValues((prev)=>({
+                                    ...prev,
+                                    [column.name]: v
+                                }))
+                    }),
+                    error && /*#__PURE__*/ _jsx("p", {
+                        className: theme.input.error,
+                        children: error
+                    })
+                ]
+            }, column.name);
+        }
+        if (colType === "boolean") {
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "mb-4",
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        htmlFor: `field-${column.name}`,
+                        className: theme.input.label,
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx(Checkbox, {
+                        checked: Boolean(value),
+                        onChange: (checked)=>setFormValues((prev)=>({
+                                    ...prev,
+                                    [column.name]: checked
+                                })),
+                        disabled: config?.disabled,
+                        size: "sm"
+                    }),
+                    error && /*#__PURE__*/ _jsx("p", {
+                        className: theme.input.error,
+                        children: error
+                    })
+                ]
+            }, column.name);
+        }
+        const enumValues = column.enumValues ?? column.enum?.values;
+        if (colType === "select" && enumValues) {
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "mb-4",
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        htmlFor: `field-${column.name}`,
+                        className: theme.input.label,
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx(SelectBox, {
+                        value: String(value ?? ""),
+                        onChange: (v)=>setFormValues((prev)=>({
+                                    ...prev,
+                                    [column.name]: v
+                                })),
+                        options: enumValues.map((opt)=>({
+                                value: opt,
+                                label: formatLabel(opt)
+                            })),
+                        placeholder: `Select ${label.toLowerCase()}`,
+                        size: "sm"
+                    }),
+                    error && /*#__PURE__*/ _jsx("p", {
+                        className: theme.input.error,
+                        children: error
+                    })
+                ]
+            }, column.name);
+        }
+        if (isReferenceColumn(column) && column.references) {
+            const refTable = column.references.table;
+            const options = referenceData[refTable] ?? [];
+            const isLoadingRef = loadingReferences[refTable] ?? false;
+            const currentValue = value ? String(value) : undefined;
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "mb-4",
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        htmlFor: `ref-${column.name}`,
+                        className: theme.input.label,
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx(SelectBox, {
+                        value: currentValue,
+                        onChange: (v)=>setFormValues((prev)=>({
+                                    ...prev,
+                                    [column.name]: v ?? null
+                                })),
+                        options: options.map((opt)=>({
+                                value: opt.id,
+                                label: opt.label
+                            })),
+                        placeholder: isLoadingRef ? "Loading..." : `Select ${label.toLowerCase()}`,
+                        size: "sm",
+                        clearable: true
+                    }),
+                    error && /*#__PURE__*/ _jsx("p", {
+                        className: theme.input.error,
+                        children: error
+                    })
+                ]
+            }, column.name);
+        }
+        if (isJsonColumn(column)) {
+            const jsonValue = typeof value === "object" ? JSON.stringify(value, null, 2) : String(value ?? "{}");
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "mb-4",
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        htmlFor: `json-${column.name}`,
+                        className: theme.input.label,
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx("textarea", {
+                        id: `json-${column.name}`,
+                        value: jsonValue,
+                        onChange: (e)=>{
+                            try {
+                                const parsed = JSON.parse(e.target.value);
+                                setFormValues((prev)=>({
+                                        ...prev,
+                                        [column.name]: parsed
+                                    }));
+                                setFormErrors((prev)=>{
+                                    const next = {
+                                        ...prev
+                                    };
+                                    delete next[column.name];
+                                    return next;
+                                });
+                            } catch  {
+                                setFormValues((prev)=>({
+                                        ...prev,
+                                        [column.name]: e.target.value
+                                    }));
+                                setFormErrors((prev)=>({
+                                        ...prev,
+                                        [column.name]: "Invalid JSON"
+                                    }));
+                            }
+                        },
+                        placeholder: config?.placeholder ?? "Enter JSON...",
+                        className: cn(theme.input.base, "min-h-[100px] font-mono text-xs"),
+                        disabled: config?.disabled,
+                        readOnly: config?.readOnly
+                    }),
+                    error && /*#__PURE__*/ _jsx("p", {
+                        className: theme.input.error,
+                        children: error
+                    })
+                ]
+            }, column.name);
+        }
+        if (isArrayColumn(column)) {
+            const arrayValue = Array.isArray(value) ? value : [];
+            const inputId = `array-${column.name}`;
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "mb-4",
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        htmlFor: inputId,
+                        className: theme.input.label,
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-wrap gap-1 rounded-lg border border-zinc-300 bg-white p-2 dark:border-zinc-600 dark:bg-zinc-800",
+                        children: [
+                            arrayValue.map((tag, idx)=>/*#__PURE__*/ _jsxs("span", {
+                                    className: "inline-flex items-center gap-1 rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-200",
+                                    children: [
+                                        tag,
+                                        /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            onClick: ()=>{
+                                                const newArr = arrayValue.filter((_, i)=>i !== idx);
+                                                setFormValues((prev)=>({
+                                                        ...prev,
+                                                        [column.name]: newArr
+                                                    }));
+                                            },
+                                            className: "ml-1 text-blue-600 hover:text-blue-800 dark:text-blue-300",
+                                            children: "×"
+                                        })
+                                    ]
+                                }, idx)),
+                            /*#__PURE__*/ _jsx("input", {
+                                id: inputId,
+                                type: "text",
+                                className: "min-w-[100px] flex-1 border-none bg-transparent text-sm outline-none",
+                                placeholder: arrayValue.length === 0 ? config?.placeholder ?? "Type and press Enter" : "",
+                                onKeyDown: (e)=>{
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        const input = e.currentTarget;
+                                        const val = input.value.trim();
+                                        if (val) {
+                                            setFormValues((prev)=>({
+                                                    ...prev,
+                                                    [column.name]: [
+                                                        ...arrayValue,
+                                                        val
+                                                    ]
+                                                }));
+                                            input.value = "";
+                                        }
+                                    }
+                                },
+                                disabled: config?.disabled,
+                                readOnly: config?.readOnly
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "mt-1 text-xs text-zinc-500",
+                        children: "Press Enter to add"
+                    }),
+                    error && /*#__PURE__*/ _jsx("p", {
+                        className: theme.input.error,
+                        children: error
+                    })
+                ]
+            }, column.name);
+        }
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "mb-4",
+            children: [
+                /*#__PURE__*/ _jsx(NucleusTextInput, {
+                    type: colType === "number" ? "number" : "text",
+                    label: label,
+                    value: String(value ?? ""),
+                    onChange: (newValue)=>{
+                        const finalValue = colType === "number" ? newValue === "" ? "" : Number(newValue) : newValue;
+                        setFormValues((prev)=>({
+                                ...prev,
+                                [column.name]: finalValue
+                            }));
+                    },
+                    placeholder: config?.placeholder ?? `Enter ${label.toLowerCase()}`,
+                    disabled: config?.disabled,
+                    readOnly: config?.readOnly
+                }),
+                error && /*#__PURE__*/ _jsx("p", {
+                    className: theme.input.error,
+                    children: error
+                })
+            ]
+        }, column.name);
+    };
+    const tableContainerRef = useRef(null);
+    // Get categorized columns using type-safe utilities
+    const searchableColumns = getSearchableColumns(columns);
+    const enumFilterColumns = getEnumFilterColumns(columns);
+    const numericFilterColumns = getNumericFilterColumns(columns);
+    const dateFilterColumns = getDateFilterColumns(columns);
+    const [searchFieldsEnabled, setSearchFieldsEnabled] = useState(()=>{
+        const initial = {};
+        for (const col of searchableColumns){
+            initial[col.name] = true;
+        }
+        return initial;
+    });
+    const loadMoreRef = useRef(loadMore);
+    loadMoreRef.current = loadMore;
+    const stateRef = useRef({
+        hasMore,
+        isLoadingMore,
+        isLoading
+    });
+    stateRef.current = {
+        hasMore,
+        isLoadingMore,
+        isLoading
+    };
+    useEffect(()=>{
+        const container = tableContainerRef.current;
+        if (!container) return;
+        const checkAndLoadMore = ()=>{
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            const threshold = 100;
+            const needsMore = scrollHeight <= clientHeight || scrollHeight - scrollTop - clientHeight < threshold;
+            const { hasMore, isLoadingMore, isLoading } = stateRef.current;
+            if (needsMore && hasMore && !isLoadingMore && !isLoading) {
+                loadMoreRef.current();
+            }
+        };
+        checkAndLoadMore();
+        container.addEventListener("scroll", checkAndLoadMore);
+        return ()=>container.removeEventListener("scroll", checkAndLoadMore);
+    }, [
+        items.length
+    ]);
+    const handleFilterChange = (field, value)=>{
+        if (!value) {
+            setFilters(filters.filter((f)=>f.field !== field));
+        } else {
+            const existing = filters.find((f)=>f.field === field);
+            if (existing) {
+                setFilters(filters.map((f)=>f.field === field ? {
+                        ...f,
+                        value
+                    } : f));
+            } else {
+                setFilters([
+                    ...filters,
+                    {
+                        field,
+                        operator: "eq",
+                        value
+                    }
+                ]);
+            }
+        }
+        loadData({
+            filters: value ? [
+                ...filters.filter((f)=>f.field !== field),
+                {
+                    field,
+                    operator: "eq",
+                    value
+                }
+            ] : filters.filter((f)=>f.field !== field),
+            page: 1
+        });
+    };
+    const getFilterValue = (field)=>{
+        const f = filters.find((item)=>item.field === field);
+        return f ? String(f.value) : "";
+    };
+    const toggleSearchField = (field)=>{
+        setSearchFieldsEnabled((prev)=>({
+                ...prev,
+                [field]: !prev[field]
+            }));
+    };
+    const getColumnWidth = (col)=>{
+        const config = columnConfigs?.[col.name];
+        if (config?.width) return `${config.width}px`;
+        switch(col.type){
+            case "uuid":
+                return "140px";
+            case "boolean":
+                return "80px";
+            case "integer":
+            case "smallint":
+            case "bigint":
+                return "90px";
+            case "numeric":
+            case "decimal":
+            case "real":
+            case "doublePrecision":
+                return "100px";
+            case "timestamp":
+            case "timestamptz":
+            case "date":
+                return "120px";
+            case "json":
+            case "jsonb":
+                return "100px";
+            default:
+                return "150px";
+        }
+    };
+    const displayTitle = title ?? formatLabel(table);
+    const getRowValue = (row, colName, column)=>{
+        const rowData = row;
+        // For relation columns, look up by foreignKey
+        if (column?.references?.foreignKey) {
+            const fk = column.references.foreignKey;
+            if (fk in rowData) return rowData[fk];
+        }
+        // Direct lookup
+        if (colName in rowData) return rowData[colName];
+        // Try camelCase conversion
+        const camelKey = colName.replace(/_([a-z])/g, (_, c)=>c.toUpperCase());
+        if (camelKey in rowData) return rowData[camelKey];
+        // Try adding Id suffix for relations
+        const withIdSuffix = `${camelKey}Id`;
+        if (withIdSuffix in rowData) return rowData[withIdSuffix];
+        return undefined;
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
+        className: cn(theme.container, className),
+        children: [
+            renderHeader ? renderHeader() : /*#__PURE__*/ _jsxs("div", {
+                className: theme.header.base,
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        className: theme.header.title,
+                        children: displayTitle
+                    }),
+                    description && /*#__PURE__*/ _jsx("p", {
+                        className: theme.header.description,
+                        children: description
+                    })
+                ]
+            }),
+            searchable && /*#__PURE__*/ _jsxs("div", {
+                className: "mb-6 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-4",
+                children: [
+                    /*#__PURE__*/ _jsx(SearchBox, {
+                        value: search,
+                        onChange: setSearch,
+                        onSearch: handleSearch,
+                        placeholder: `Search ${displayTitle.toLowerCase()}...`,
+                        loading: isLoading,
+                        debounceMs: 400,
+                        disableDropdown: true,
+                        showSearchIcon: true,
+                        showClearButton: true
+                    }),
+                    searchableColumns.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                        className: "mt-4 flex flex-wrap items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-xs font-medium text-zinc-600 dark:text-zinc-400",
+                                children: "Search in:"
+                            }),
+                            searchableColumns.map((col)=>/*#__PURE__*/ _jsxs("label", {
+                                    htmlFor: `search-field-${col.name}`,
+                                    className: "flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 cursor-pointer transition-colors",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Checkbox, {
+                                            checked: searchFieldsEnabled[col.name] ?? false,
+                                            onChange: ()=>toggleSearchField(col.name),
+                                            size: "sm"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs font-medium text-zinc-700 dark:text-zinc-300",
+                                            children: formatLabel(col.name)
+                                        })
+                                    ]
+                                }, col.name))
+                        ]
+                    })
+                ]
+            }),
+            (showAdd || selectedRows.length > 0) && /*#__PURE__*/ _jsxs("div", {
+                className: "mb-6 flex items-center gap-3",
+                children: [
+                    selectedRows.length > 0 && showBulkDelete && /*#__PURE__*/ _jsxs(Button, {
+                        variant: "danger",
+                        size: "sm",
+                        onClick: handleBulkDelete,
+                        children: [
+                            "Delete (",
+                            selectedRows.length,
+                            ")"
+                        ]
+                    }),
+                    showAdd && !entity.excluded_methods?.includes("POST") && /*#__PURE__*/ _jsxs(Button, {
+                        variant: "success",
+                        size: "sm",
+                        onClick: openAddModal,
+                        children: [
+                            "Add",
+                            " ",
+                            formatLabel(table.endsWith("s") ? table.slice(0, -1) : table)
+                        ]
+                    })
+                ]
+            }),
+            filterable && (enumFilterColumns.length > 0 || numericFilterColumns.length > 0 || dateFilterColumns.length > 0) && /*#__PURE__*/ _jsxs("div", {
+                className: "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-6",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "mb-6 flex items-center justify-between",
+                        children: [
+                            /*#__PURE__*/ _jsx("h3", {
+                                className: "text-sm font-semibold text-zinc-900 dark:text-white",
+                                children: "Filters"
+                            }),
+                            filters.length > 0 && /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: ()=>setFilters([]),
+                                className: "text-xs px-2 py-1 rounded text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-950 dark:text-emerald-400 font-medium transition-colors",
+                                children: "Clear"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8",
+                        children: [
+                            enumFilterColumns.map((col)=>{
+                                const enumValues = getEnumValues(col);
+                                const options = isBooleanColumn(col) ? [
+                                    {
+                                        value: "",
+                                        label: "All"
+                                    },
+                                    {
+                                        value: "true",
+                                        label: "Yes"
+                                    },
+                                    {
+                                        value: "false",
+                                        label: "No"
+                                    }
+                                ] : [
+                                    {
+                                        value: "",
+                                        label: "All"
+                                    },
+                                    ...enumValues.map((v)=>({
+                                            value: v,
+                                            label: formatLabel(v)
+                                        }))
+                                ];
+                                return /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-2",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs font-medium text-zinc-600 dark:text-zinc-400",
+                                            children: formatLabel(col.name)
+                                        }),
+                                        /*#__PURE__*/ _jsx(SelectBox, {
+                                            value: getFilterValue(col.name) || undefined,
+                                            onChange: (v)=>handleFilterChange(col.name, v ?? ""),
+                                            options: options,
+                                            placeholder: "All",
+                                            size: "sm",
+                                            clearable: true
+                                        })
+                                    ]
+                                }, col.name);
+                            }),
+                            numericFilterColumns.map((col)=>{
+                                const minVal = Number(getFilterValue(`${col.name}_min`)) || 0;
+                                const maxVal = Number(getFilterValue(`${col.name}_max`)) || 10000;
+                                return /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-3",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center justify-between",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: "text-xs font-medium text-zinc-600 dark:text-zinc-400",
+                                                    children: formatLabel(col.name)
+                                                }),
+                                                /*#__PURE__*/ _jsxs("span", {
+                                                    className: "text-xs font-semibold text-zinc-700 dark:text-zinc-300",
+                                                    children: [
+                                                        minVal,
+                                                        " - ",
+                                                        maxVal
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(RangePicker, {
+                                            min: 0,
+                                            max: 10000,
+                                            step: col.type === "numeric" || col.type === "decimal" ? 0.01 : 1,
+                                            value: {
+                                                min: minVal,
+                                                max: maxVal
+                                            },
+                                            onChange: (v)=>{
+                                                handleFilterChange(`${col.name}_min`, String(v.min));
+                                                handleFilterChange(`${col.name}_max`, String(v.max));
+                                            },
+                                            showTooltip: true,
+                                            size: "md"
+                                        })
+                                    ]
+                                }, col.name);
+                            }),
+                            dateFilterColumns.map((col)=>/*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-2",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs font-medium text-zinc-600 dark:text-zinc-400",
+                                            children: formatLabel(col.name)
+                                        }),
+                                        /*#__PURE__*/ _jsx(DatePicker, {
+                                            mode: "range",
+                                            value: {
+                                                start: getFilterValue(`${col.name}_from`) ? new Date(getFilterValue(`${col.name}_from`)) : null,
+                                                end: getFilterValue(`${col.name}_to`) ? new Date(getFilterValue(`${col.name}_to`)) : null
+                                            },
+                                            onChange: (v)=>{
+                                                handleFilterChange(`${col.name}_from`, v.start?.toISOString().split("T")[0] ?? "");
+                                                handleFilterChange(`${col.name}_to`, v.end?.toISOString().split("T")[0] ?? "");
+                                            },
+                                            placeholder: "Select range"
+                                        })
+                                    ]
+                                }, col.name))
+                        ]
+                    })
+                ]
+            }),
+            renderToolbar?.({
+                selectedRows,
+                onClearSelection: handleClearSelection
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "mt-6 flex-1 min-h-0 overflow-x-auto",
+                children: /*#__PURE__*/ _jsx(DataTable, {
+                    data: items,
+                    columns: visibleColumns.map((col)=>{
+                        const config = columnConfigs?.[col.name];
+                        const colWidth = getColumnWidth(col);
+                        return {
+                            key: `col_${col.name}`,
+                            header: config?.header ?? formatLabel(col.name),
+                            width: Number.parseInt(colWidth, 10) || 150,
+                            sortable: sortable && config?.sortable !== false,
+                            resizable: true,
+                            cellRenderer: ({ row })=>{
+                                const cellValue = getRowValue(row, col.name, col);
+                                return renderCellValue(col, cellValue);
+                            }
+                        };
+                    }),
+                    actionColumns: showEdit || showDelete ? [
+                        {
+                            key: "actions",
+                            header: "Actions",
+                            width: 120,
+                            renderer: ({ row })=>{
+                                const rowId = row.id ?? "";
+                                return /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex items-center gap-2",
+                                    children: [
+                                        showEdit && !entity.excluded_methods?.includes("PUT") && /*#__PURE__*/ _jsx(Button, {
+                                            variant: "outline",
+                                            size: "xs",
+                                            onClick: ()=>openEditModal(row),
+                                            children: "Edit"
+                                        }),
+                                        showDelete && !entity.excluded_methods?.includes("DELETE") && /*#__PURE__*/ _jsx(Button, {
+                                            variant: "ghost",
+                                            size: "xs",
+                                            onClick: ()=>handleDelete(rowId),
+                                            className: "text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950",
+                                            children: "Delete"
+                                        })
+                                    ]
+                                });
+                            }
+                        }
+                    ] : undefined,
+                    keyExtractor: (row)=>row.id ?? String(Math.random()),
+                    callbacks: {
+                        onSort: (columnKey, direction)=>{
+                            if (direction) {
+                                setSort([
+                                    {
+                                        field: String(columnKey),
+                                        direction
+                                    }
+                                ]);
+                                loadData({
+                                    sort: [
+                                        {
+                                            field: String(columnKey),
+                                            direction
+                                        }
+                                    ]
+                                });
+                            } else {
+                                setSort([]);
+                                loadData({
+                                    sort: []
+                                });
+                            }
+                        },
+                        onLoadMore: loadMore,
+                        onCellClick: onRowClick ? ({ row })=>{
+                            onRowClick(row);
+                        } : undefined
+                    },
+                    config: {
+                        hasClickAction: Boolean(onRowClick),
+                        isFrontendSort: false,
+                        enableInfiniteScroll: true,
+                        autoFetchUntilScroll: true,
+                        enableSelection: selectable
+                    },
+                    isLoading: isLoading && items.length === 0,
+                    isPending: isLoading && items.length === 0,
+                    isLoadingMore: isLoadingMore,
+                    hasMoreData: hasMore,
+                    emptyMessage: `No ${displayTitle.toLowerCase()} found`,
+                    selectionToolbar: selectable ? ({ selectedData, onClearSelection: clearSel })=>/*#__PURE__*/ _jsx(_Fragment, {
+                            children: showBulkDelete && selectedData.length > 0 && /*#__PURE__*/ _jsxs(Button, {
+                                variant: "danger",
+                                size: "sm",
+                                onClick: ()=>{
+                                    const ids = selectedData.map((r)=>r.id).filter(Boolean);
+                                    if (ids.length > 0 && window.confirm(`Delete ${ids.length} items?`)) {
+                                        bulkDelete(ids).then(()=>clearSel());
+                                    }
+                                },
+                                children: [
+                                    "Delete (",
+                                    selectedData.length,
+                                    ")"
+                                ]
+                            })
+                        }) : undefined
+                })
+            }),
+            (meta || isLoadingMore) && /*#__PURE__*/ _jsxs("div", {
+                className: theme.pagination.base,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: theme.pagination.info,
+                        children: meta ? `Showing ${items.length} of ${meta.totalItems} items` : ""
+                    }),
+                    isLoadingMore && /*#__PURE__*/ _jsxs("span", {
+                        className: "flex items-center gap-2 text-zinc-500 dark:text-zinc-400",
+                        children: [
+                            /*#__PURE__*/ _jsxs("svg", {
+                                className: "h-4 w-4 animate-spin",
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                "aria-hidden": "true",
+                                children: [
+                                    /*#__PURE__*/ _jsx("circle", {
+                                        className: "opacity-25",
+                                        cx: "12",
+                                        cy: "12",
+                                        r: "10",
+                                        stroke: "currentColor",
+                                        strokeWidth: "4"
+                                    }),
+                                    /*#__PURE__*/ _jsx("path", {
+                                        className: "opacity-75",
+                                        fill: "currentColor",
+                                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                                    })
+                                ]
+                            }),
+                            "Loading more..."
+                        ]
+                    })
+                ]
+            }),
+            mounted && modalState.isOpen && /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx("div", {
+                style: {
+                    position: "fixed",
+                    inset: 0,
+                    zIndex: 9999,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "rgba(0,0,0,0.6)",
+                    backdropFilter: "blur(4px)",
+                    padding: "1rem"
+                },
+                onClick: closeModal,
+                onKeyDown: (e)=>e.key === "Escape" && closeModal(),
+                role: "dialog",
+                "aria-modal": "true",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "w-full max-w-lg rounded-2xl bg-white p-6 shadow-2xl dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700",
+                    onClick: (e)=>e.stopPropagation(),
+                    onKeyDown: (e)=>{
+                        e.stopPropagation();
+                        if (e.key === "Escape") closeModal();
+                    },
+                    role: "document",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: theme.modal.header,
+                            children: [
+                                /*#__PURE__*/ _jsxs("h3", {
+                                    className: theme.modal.title,
+                                    children: [
+                                        modalState.mode === "add" ? "Add" : "Edit",
+                                        " ",
+                                        formatLabel(table.endsWith("s") ? table.slice(0, -1) : table)
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "ghost",
+                                    size: "sm",
+                                    onClick: closeModal,
+                                    children: "✕"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("form", {
+                            onSubmit: (e)=>{
+                                e.preventDefault();
+                                handleSubmit();
+                            },
+                            children: [
+                                submitError && /*#__PURE__*/ _jsx("div", {
+                                    className: "mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400",
+                                    children: submitError
+                                }),
+                                getFormColumns(modalState.mode).map((col)=>renderFormField(col)),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "mt-6 flex justify-end gap-2",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            size: "sm",
+                                            onClick: closeModal,
+                                            children: "Cancel"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "primary",
+                                            size: "sm",
+                                            type: "submit",
+                                            children: modalState.mode === "add" ? "Create" : "Update"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }), document.body),
+            mounted && detailModal.isOpen && detailModal.data && /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx("div", {
+                style: {
+                    position: "fixed",
+                    inset: 0,
+                    zIndex: 9999,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "rgba(0,0,0,0.6)",
+                    backdropFilter: "blur(4px)",
+                    padding: "1rem"
+                },
+                onClick: closeDetailModal,
+                onKeyDown: (e)=>e.key === "Escape" && closeDetailModal(),
+                role: "dialog",
+                "aria-modal": "true",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "w-full max-w-lg rounded-2xl bg-white p-6 shadow-2xl dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700",
+                    onClick: (e)=>e.stopPropagation(),
+                    onKeyDown: (e)=>{
+                        e.stopPropagation();
+                        if (e.key === "Escape") closeDetailModal();
+                    },
+                    role: "document",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: theme.modal.header,
+                            children: [
+                                /*#__PURE__*/ _jsxs("h3", {
+                                    className: theme.modal.title,
+                                    children: [
+                                        formatLabel(detailModal.table.endsWith("s") ? detailModal.table.slice(0, -1) : detailModal.table),
+                                        " ",
+                                        "Details"
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "ghost",
+                                    size: "sm",
+                                    onClick: closeDetailModal,
+                                    children: "✕"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "space-y-3",
+                            children: Object.entries(detailModal.data).map(([key, value])=>{
+                                if (key === "id" || key.endsWith("At") || key.endsWith("By")) return null;
+                                return /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-1",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs font-medium text-zinc-500 dark:text-zinc-400",
+                                            children: formatLabel(key)
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-sm text-zinc-900 dark:text-zinc-100",
+                                            children: value === null || value === undefined ? "-" : typeof value === "object" ? JSON.stringify(value) : String(value)
+                                        })
+                                    ]
+                                }, key);
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "mt-6 flex justify-end",
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                size: "sm",
+                                onClick: closeDetailModal,
+                                children: "Close"
+                            })
+                        })
+                    ]
+                })
+            }), document.body)
+        ]
+    });
+}