@airoom/nextmin-react 1.4.5 → 2.0.1

package/dist/providers/NextMinProvider.d.ts

@@ -1,5 +1,12 @@
 import React from 'react';
-export declare function NextMinProvider({ children, navigate }: {
+import { NextMinClient } from '../lib/api';
+export interface NextMinContextType {
+    client: NextMinClient;
+}
+export declare function useNextMin(): NextMinContextType;
+export declare function NextMinProvider({ children, navigate, apiUrl, apiKey }: {
     children: React.ReactNode;
     navigate?: (url: string) => void;
+    apiUrl?: string;
+    apiKey?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/providers/NextMinProvider.js

@@ -1,27 +1,59 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { HeroUIProvider } from '@heroui/react';
 import { Provider, useDispatch, useSelector } from 'react-redux';
 import { nextminstore } from '../state/store';
-import { fetchSchemas } from '../state/schemasSlice';
-import { startSchemaLive } from '../state/schemaLive'; // socket
+import { fetchSchemas, setSchemas } from '../state/schemasSlice';
+import { RealtimeClient } from '../lib/RealtimeClient';
+import { AuthClient } from '../lib/AuthClient';
 function Bootstrapper() {
     const dispatch = useDispatch();
     const status = useSelector((s) => s.schemas.status);
     const booted = useRef(false);
     useEffect(() => {
         if (!booted.current) {
-            // start socket once (dev/prod both OK; you can guard by NODE_ENV if you want)
-            startSchemaLive(nextminstore);
+            const rt = RealtimeClient.getInstance();
+            // Connect if we have a token OR an API key (for public/playground access)
+            if (AuthClient.getToken() || rt.apiKey) {
+                rt.connect();
+                rt.on('schemasData', (data) => dispatch(setSchemas(data)));
+                rt.on('schemasUpdated', (data) => dispatch(setSchemas(data)));
+            }
             booted.current = true;
         }
         if (status === 'idle') {
-            dispatch(fetchSchemas()); // one-time HTTP load as fallback/initial
+            dispatch(fetchSchemas());
         }
     }, [status, dispatch]);
     return null;
 }
-export function NextMinProvider({ children, navigate }) {
-    return (_jsx(Provider, { store: nextminstore, children: _jsxs(HeroUIProvider, { navigate: navigate, children: [_jsx(Bootstrapper, {}), children] }) }));
+import { NextMinClient } from '../lib/api';
+const NextMinContext = React.createContext(undefined);
+export function useNextMin() {
+    const context = React.useContext(NextMinContext);
+    if (!context)
+        throw new Error('useNextMin must be used within NextMinProvider');
+    return context;
+}
+export function NextMinProvider({ children, navigate, apiUrl, apiKey }) {
+    const client = React.useMemo(() => {
+        if (apiUrl)
+            AuthClient.setBaseURL(apiUrl);
+        if (apiKey)
+            AuthClient.setApiKey(apiKey);
+        const rt = RealtimeClient.getInstance();
+        if (apiUrl) {
+            // Ensure absolute URL for socket.io if possible
+            const base = apiUrl.startsWith('http') ? apiUrl.replace('/rest', '') : typeof window !== 'undefined' ? window.location.origin : '';
+            rt.setBaseURL(base);
+        }
+        if (apiKey)
+            rt.setApiKey(apiKey);
+        return new NextMinClient({
+            baseURL: apiUrl || '/api',
+            apiKey: apiKey
+        });
+    }, [apiUrl, apiKey]);
+    return (_jsx(Provider, { store: nextminstore, children: _jsx(NextMinContext.Provider, { value: { client }, children: _jsxs(HeroUIProvider, { navigate: navigate, children: [_jsx(Bootstrapper, {}), children] }) }) }));
 }

package/dist/router/NextMinRouter.d.ts

@@ -1,2 +1,2 @@
-import '@airoom/nextmin-react/editor.css';
+import '../components/editor/editor.css';
 export declare function NextMinRouter(): import("react/jsx-runtime").JSX.Element;

package/dist/router/NextMinRouter.js

@@ -10,7 +10,7 @@ import { DashboardPage } from '../views/DashboardPage';
 import { SectionLoader } from '../components/SectionLoader';
 import SettingsEdit from '../views/SettingsEdit';
 import ProfilePage from '../views/ProfilePage';
-import '@airoom/nextmin-react/editor.css';
+import '../components/editor/editor.css';
 export function NextMinRouter() {
     const pathname = usePathname();
     const router = useRouter();

package/dist/state/schemasSlice.js

@@ -14,12 +14,18 @@ export const fetchSchemas = createAsyncThunk('schemas/fetch', async () => {
         return status === 'idle';
     },
 });
+const mergeSchemas = (existing, incoming) => {
+    const map = new Map();
+    existing.forEach((s) => map.set(s.modelName, s));
+    incoming.forEach((s) => map.set(s.modelName, s));
+    return Array.from(map.values());
+};
 const schemasSlice = createSlice({
     name: 'schemas',
     initialState,
     reducers: {
         setSchemas(state, action) {
-            state.items = action.payload;
+            state.items = mergeSchemas(state.items, action.payload);
             state.status = 'succeeded';
         },
     },
@@ -31,7 +37,7 @@ const schemasSlice = createSlice({
         })
             .addCase(fetchSchemas.fulfilled, (state, action) => {
             state.status = 'succeeded';
-            state.items = action.payload;
+            state.items = mergeSchemas(state.items, action.payload);
         })
             .addCase(fetchSchemas.rejected, (state, action) => {
             state.status = 'failed';

package/dist/views/DashboardPage.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { api } from '../lib/api';
 import { Divider, Card, CardBody } from '@heroui/react';
+import { useRealtime } from '../hooks/useRealtime';
 export function DashboardPage() {
-    const schemas = useSelector((s) => s.schemas.items);
-    const status = useSelector((s) => s.schemas.status);
+    const { items: schemas, status } = useSelector((s) => s.schemas);
+    const { isConnected, lastEvent } = useRealtime();
     // Build cards dynamically for schemas with showCount === true
     const cards = useMemo(() => {
         return (schemas || [])
@@ -23,52 +24,65 @@ export function DashboardPage() {
     const [counts, setCounts] = useState({});
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
-    useEffect(() => {
-        let cancelled = false;
-        async function load() {
-            if (status !== 'succeeded')
-                return;
+    const load = React.useCallback(async (isCancelled = () => false, specificModel) => {
+        if (status !== 'succeeded')
+            return;
+        if (!specificModel)
             setLoading(true);
-            setError(null);
-            try {
-                const entries = await Promise.all(cards.map(async (c) => {
-                    if (!c.model)
-                        return [c.key, null]; // schema missing
-                    try {
-                        const res = await api.list(c.model, 0, 1);
-                        const total = res?.pagination?.totalRows ?? res?.data?.length ?? 0;
-                        return [c.key, total];
-                    }
-                    catch (e) {
-                        return [c.key, null];
-                    }
-                }));
-                if (!cancelled) {
-                    const map = {};
-                    for (const [k, v] of entries)
-                        map[k] = v;
-                    setCounts(map);
+        setError(null);
+        try {
+            const targets = specificModel
+                ? cards.filter(c => c.model === specificModel)
+                : cards;
+            const entries = await Promise.all(targets.map(async (c) => {
+                if (!c.model)
+                    return [c.key, null];
+                try {
+                    const res = await api.list(c.model, { page: 1, limit: 1 });
+                    const total = res?.pagination?.totalRows ?? res?.data?.length ?? 0;
+                    return [c.key, total];
                 }
+                catch (e) {
+                    return [c.key, null];
+                }
+            }));
+            if (!isCancelled()) {
+                setCounts((prev) => {
+                    const newMap = { ...prev };
+                    for (const [k, v] of entries)
+                        newMap[k] = v;
+                    return newMap;
+                });
             }
-            catch (e) {
-                if (!cancelled)
-                    setError(e?.message || 'Failed to load stats');
-            }
-            finally {
-                if (!cancelled)
-                    setLoading(false);
-            }
         }
-        load();
+        catch (e) {
+            if (!isCancelled())
+                setError(e?.message || 'Failed to load stats');
+        }
+        finally {
+            if (!isCancelled())
+                setLoading(false);
+        }
+    }, [cards, status]);
+    useEffect(() => {
+        let cancelled = false;
+        load(() => cancelled);
         return () => {
             cancelled = true;
         };
-    }, [cards, status]);
-    return (_jsxs("div", { className: "grid gap-4 px-4", children: [_jsx("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: _jsx("h2", { className: "m-0 text-xl font-semibold", children: "Dashboard" }) }), _jsx(Divider, { className: "my-3" }), (error || loading) && (_jsx("div", { className: 'rounded-md px-3 py-2 ' +
-                    (error
-                        ? 'bg-red-100 text-red-700'
-                        : 'bg-default-100 text-default-700'), children: error || 'Loading summary…' })), _jsx("div", { className: "rounded-md px-3 py-2 text-2xl text-center bg-default-50 text-foreground/80", children: "Welcome to your dashboard!" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4", children: cards.map((c) => {
+    }, [load]);
+    useEffect(() => {
+        if (lastEvent) {
+            const { event, payload } = lastEvent;
+            const model = (payload?.model || payload?.modelName)?.toLowerCase();
+            // Refresh specific model count if it changed
+            if (model && (event.includes('created') || event.includes('deleted') || event.includes('create') || event.includes('delete'))) {
+                load(() => false, model);
+            }
+        }
+    }, [lastEvent, status]);
+    return (_jsxs("div", { className: "grid gap-6 px-4 pb-8", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("h2", { className: "m-0 text-2xl font-bold text-gray-800", children: "Admin Overview" }) }), _jsx(Divider, {}), (error || loading) && (_jsxs("div", { className: "rounded-xl bg-blue-50/50 border border-blue-100 p-4 text-blue-700 text-sm font-medium flex items-center gap-3", children: [_jsxs("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), error || 'Synchronizing statistics...'] })), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: cards.map((c) => {
                     const value = counts[c.key];
-                    return (_jsx(Card, { className: "shadow-sm border border-default-200", children: _jsx(CardBody, { className: "flex flex-row items-center justify-start gap-3", children: _jsxs("div", { children: [_jsx("div", { className: "text-sm text-foreground/60", children: c.label }), _jsx("div", { className: "text-2xl font-semibold mt-1", children: value == null ? '—' : value })] }) }) }, c.key));
+                    return (_jsx(Card, { className: "shadow-sm border border-gray-100 hover:border-blue-200 transition-all duration-200", children: _jsxs(CardBody, { className: "flex flex-row items-center justify-start gap-4 p-5", children: [_jsx("div", { className: "p-3 rounded-xl bg-blue-50 text-blue-600", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "9", cy: "7", r: "4" }), _jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), _jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }) }), _jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1", children: c.label }), _jsx("div", { className: "text-2xl font-bold text-gray-900 leading-none", children: value == null ? '—' : value.toLocaleString() })] })] }) }, c.key));
                 }) })] }));
 }

package/dist/views/ListPage.js

@@ -47,7 +47,7 @@ export function ListPage({ model }) {
         searchKey: filters.searchKey,
     });
     // columns (ALWAYS call hooks; derive from schema or empty object)
-    const attributes = (schema?.attributes ?? {});
+    const attributes = (viewSchema?.attributes ?? {});
     // Generic password detectors (hide from table columns as well)
     const normKey = (k) => k.toLowerCase().replace(/[^a-z]/g, '');
     const isPasswordKeyRaw = (k) => {
@@ -67,8 +67,15 @@ export function ListPage({ model }) {
         return !isPriv && !isPasswordKeyRaw(k) && !isPasswordByAttr(a);
     })
         .map(([k]) => k), [attributes]);
-    // default visible: first 4 + 'createdAt' if present (stable via useMemo)
+    // default visible columns: respect columnsSelector if present, else use heuristic
     const defaultVisible = useMemo(() => {
+        // 1) Explicit selector from schema
+        const selector = schema?.columnsSelector;
+        if (selector && Array.isArray(selector)) {
+            // only include columns that actually exist in the attributes
+            return selector.filter(c => allColumns.includes(c));
+        }
+        // 2) Heuristic fallback
         const set = new Set();
         // first 4 non-private fields
         allColumns.slice(0, 4).forEach((c) => set.add(c));
@@ -79,14 +86,37 @@ export function ListPage({ model }) {
         if (allColumns.includes('createdAt'))
             set.add('createdAt');
         return Array.from(set);
-    }, [allColumns]);
+    }, [allColumns, schema]);
     // visible columns state (init once, update when model/defaultVisible change)
     const [visibleColumns, setVisibleColumns] = useState(() => new Set(defaultVisible));
     useEffect(() => {
         // whenever model or defaultVisible changes, reset visible columns
         setVisibleColumns(new Set(defaultVisible));
     }, [model, defaultVisible]);
-    const tableColumns = useMemo(() => allColumns.filter((c) => visibleColumns.has(c)), [allColumns, visibleColumns]);
+    const tableColumns = useMemo(() => {
+        const visible = allColumns.filter((c) => visibleColumns.has(c));
+        const selector = schema?.columnsSelector;
+        if (selector && Array.isArray(selector)) {
+            // Order based on selector
+            const ordered = [];
+            const visited = new Set();
+            // 1) Add columns from selector if they are visible
+            selector.forEach((c) => {
+                if (visibleColumns.has(c)) {
+                    ordered.push(c);
+                    visited.add(c);
+                }
+            });
+            // 2) Add any other visible columns not in the selector (safety)
+            visible.forEach((c) => {
+                if (!visited.has(c)) {
+                    ordered.push(c);
+                }
+            });
+            return ordered;
+        }
+        return visible;
+    }, [allColumns, visibleColumns, schema]);
     const baseHref = useMemo(() => `/admin/${model}`, [model]);
     const handleRefetch = useCallback(async () => {
         await refetch();

package/dist/views/SettingsEdit.js

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { ListHeader } from './list/ListHeader';
 import { NoAccess } from '../components/NoAccess';
 import { SchemaForm } from '../components/SchemaForm';
+import { Button } from '@heroui/react';
 import { api, ApiError } from '../lib/api';
 import { systemLoaded } from '../state/nextMinSlice';
 const MODEL = 'settings'; // use lowercase to match router/api paths
@@ -16,15 +17,17 @@ export function SettingsEdit() {
     const [doc, setDoc] = useState(null);
     const [loading, setLoading] = useState(true);
     const [saving, setSaving] = useState(false);
+    const [cleaning, setCleaning] = useState(false);
     const [forbidden, setForbidden] = useState(null);
     const [error, setError] = useState(null);
+    const [cleanupReport, setCleanupReport] = useState(null);
     const fetchSingleton = useCallback(async () => {
         setLoading(true);
         setForbidden(null);
         setError(null);
         try {
             // Only one Settings row exists; fetch first page with 1 item
-            const resp = await api.list(MODEL, 0, 1);
+            const resp = await api.list(MODEL, { page: 0, limit: 1 });
             const first = resp?.data?.[0] ?? null;
             setDoc(first);
             const normalized = first == null
@@ -75,6 +78,25 @@ export function SettingsEdit() {
             setSaving(false);
         }
     }, [doc, fetchSingleton]);
+    const handleCleanup = useCallback(async () => {
+        if (!confirm('WARNING: This will permanently delete all database fields that are not defined in your schemas. Are you sure you want to proceed?')) {
+            return;
+        }
+        setCleaning(true);
+        setError(null);
+        setCleanupReport(null);
+        try {
+            const resp = await api.cleanup();
+            setCleanupReport(resp.data);
+            alert('Database cleanup completed successfully.');
+        }
+        catch (e) {
+            setError(e?.message || 'Cleanup failed');
+        }
+        finally {
+            setCleaning(false);
+        }
+    }, []);
     const title = schema?.modelName ?? 'Settings';
     if (!schema) {
         return (_jsx("div", { className: "p-4 text-danger text-sm", children: "Settings schema not found." }));
@@ -82,6 +104,7 @@ export function SettingsEdit() {
     if (forbidden) {
         return (_jsxs("div", { className: "px-4", children: [_jsx(ListHeader, { title: title, createHref: "", loading: false }), _jsx(NoAccess, { message: forbidden })] }));
     }
-    return (_jsxs("div", { className: "grid gap-3 px-4", children: [_jsx(ListHeader, { title: title, hideCreate: true, createHref: "", loading: loading || saving }), error ? (_jsx("div", { className: "text-danger text-sm", children: error })) : (_jsx(SchemaForm, { model: MODEL, schemaOverride: schema, initialValues: doc ?? undefined, submitLabel: "Save", busy: loading || saving, onSubmit: handleSubmit, showReset: false }))] }));
+    const hasCleanupData = cleanupReport && Object.keys(cleanupReport).length > 0;
+    return (_jsxs("div", { className: "grid gap-3 px-4", children: [_jsx(ListHeader, { title: title, hideCreate: true, createHref: "", loading: loading || saving || cleaning, children: _jsx(Button, { size: "sm", color: "danger", variant: "flat", isLoading: cleaning, onPress: handleCleanup, children: "Cleanup Database" }) }), error && _jsx("div", { className: "text-danger text-sm", children: error }), hasCleanupData && (_jsxs("div", { className: "p-3 bg-success-50 rounded-lg border border-success-200", children: [_jsx("div", { className: "font-semibold text-success-700 text-sm mb-1", children: "Cleanup Summary:" }), _jsx("ul", { className: "text-xs text-success-600 list-disc list-inside", children: Object.entries(cleanupReport).map(([model, fields]) => (_jsxs("li", { children: [_jsx("span", { className: "font-medium", children: model }), ": ", fields.join(', ')] }, model))) })] })), !error && (_jsx(SchemaForm, { model: MODEL, schemaOverride: schema, initialValues: doc ?? undefined, submitLabel: "Save", busy: loading || saving || cleaning, onSubmit: handleSubmit, showReset: false }))] }));
 }
 export default SettingsEdit;