namirasoft-account-react 1.5.38 → 1.5.39

package/src/layouts/NSASectionViewTabPage.tsx

@@ -1,401 +1,401 @@
-import { EnvService, FilterItem, FilterItemOperator, IStorageLocal, NamingConvention } from "namirasoft-core";
-import { EntityResolveResponseRow, SlotEntityType, SlotRow } from "namirasoft-field";
-import { HistoryRow, NamirasoftHistoryServer } from "namirasoft-history";
-import { NamirasoftMap } from "namirasoft-site-map";
-import { BaseColumnFormatter, DateTimeFormatter, IBaseComponentProps, IDFormatter, NSInfoProps, NSLabel, NSLoading, NSNoData, NSTable, NSTabPage, NSTabPageTab, StringFormatter, StringFormatterSizeType, TableColumnInfo } from "namirasoft-site-react";
-import { Component, createRef, Fragment, ReactNode } from "react";
-import { NSFBoxWrapper } from "../components/NSFBoxWrapper";
-import { IEntityInfo } from "../IEntityInfo";
-import { NSARouterMakerResult } from "../NSARouterMakerResult";
-import { CFTUtil } from "./CFTUtil";
-import { NSASectionViewTabMore } from "./NSASectionViewTabMore";
-import Styles from "./NSASectionViewTabPage.module.css";
-
-export type TabRenderItem =
-    | { type: "column"; column: TableColumnInfo }
-    | { type: "custom"; node: ReactNode };
-
-export interface NSASectionViewTabPageTabPageTab<RowType> extends IBaseComponentProps
-{
-    isVisible(model: {
-        id: string | null;
-        row: RowType | null;
-    }): boolean;
-
-    title: string;
-    info?: NSInfoProps;
-    clicked: boolean;
-    getContent: (model: {
-        id: string | null;
-        row: RowType | null;
-    }) => React.ReactNode;
-}
-
-export interface NSASectionViewTabPageUIProps<RowType>
-{
-    enabled?: boolean;
-    tabs?: {
-        general?: {
-            enabled?: boolean;
-            getColumns?: (row: RowType) => TableColumnInfo[];
-            getValue?: (row: RowType, column: string) => string | undefined;
-            buildItems?: (row: RowType, tab: string, columns: TableColumnInfo[]) => TabRenderItem[];
-        }
-        field?: boolean;
-        category?: boolean;
-        tag?: boolean;
-        history?: boolean;
-        more?: boolean;
-        extra?: {
-            before_general?: NSASectionViewTabPageTabPageTab<RowType>[];
-            after_general?: NSASectionViewTabPageTabPageTab<RowType>[];
-            after_field?: NSASectionViewTabPageTabPageTab<RowType>[];
-            after_category?: NSASectionViewTabPageTabPageTab<RowType>[];
-            after_tag?: NSASectionViewTabPageTabPageTab<RowType>[];
-            after_history?: NSASectionViewTabPageTabPageTab<RowType>[];
-            after_more?: NSASectionViewTabPageTabPageTab<RowType>[];
-        };
-    };
-}
-
-export interface NSASectionViewTabPageCutomProps<RowType>
-{
-    ui?: NSASectionViewTabPageUIProps<RowType>;
-    onRowLoaded?: (row: RowType) => void;
-}
-
-export interface NSASectionViewTabPageProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSARouterMakerResult, NSASectionViewTabPageCutomProps<RowType>
-{
-    entity: IEntityInfo<RowType, RowTypeInput>;
-    ctf: {
-        enabled: boolean;
-        rows: EntityResolveResponseRow | null;
-    };
-    model: {
-        id: string | null;
-        row: RowType | null;
-    };
-}
-
-interface NSASectionViewTabPageState<RowType>
-{
-    row: RowType | null;
-}
-
-export class NSASectionViewTabPage<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSASectionViewTabPageProps<RowType, RowTypeInput>, NSASectionViewTabPageState<RowType>>
-{
-    NSTabPage_Ref = createRef<NSTabPage>();
-
-    constructor(props: NSASectionViewTabPageProps<RowType, RowTypeInput>)
-    {
-        super(props);
-
-        this.state = { row: this.props.model.row };
-
-        this.reload = this.reload.bind(this);
-        this.getRow = this.getRow.bind(this);
-    }
-    reload() 
-    {
-        this.setState(prev => ({ ...prev, row: null }));
-        if (this.props.model.id)
-            if (this.props.entity.server.get)
-                this.props.entity.server.get(this.props.model.id).then(row =>
-                {
-                    this.setState(prev => ({ ...prev, row }), () =>
-                    {
-                        this.props.onRowLoaded?.(row);
-                    });
-                }).catch(() => { });
-    }
-    getRow()
-    {
-        return this.state.row;
-    }
-    override componentDidMount()
-    {
-        if (this.props.model.id)
-            if (!this.props.model.row || this.props.model.row.id !== this.props.model.id)
-                this.reload();
-    }
-    override render()
-    {
-        const tabs: NSTabPageTab[] = [];
-        let namirasoft = new NamirasoftMap(this.props.account.token_manager, this.props.notifier.onError);
-
-        let rows = (this.props.model.id && this.props.ctf.enabled) ? this.props.ctf.rows : null;
-        let slots = rows?.slots ?? [];
-
-        let renderSlot = (slot: SlotRow): ReactNode =>
-        {
-            if (!this.state.row || !rows)
-                return null;
-            let ctf = CFTUtil.get(this.props.entity.name, this.state.row);
-            let value = "";
-            if (slot.entity_type === SlotEntityType.Field)
-                value = ctf.fields.filter(x => x.slot_id === slot.id && x.field_id === slot.entity_id).map(x => x.value).join(", ");
-            else if (slot.entity_type === SlotEntityType.CategoryScope)
-            {
-                let ids = ctf.categories.filter(x => x.slot_id === slot.id).map(x => x.category_id);
-                value = rows.categories
-                    .filter(category => category.category_scope_id === slot.entity_id && ids.includes(category.id))
-                    .map(category => category.name)
-                    .join(", ");
-            }
-            return <NSLabel
-                key={`NSASectionViewTabPage_NSLabel_Slot_${slot.id}`}
-                title={slot.name + ":"}
-                classList={[Styles.nsa_section_tab_page_item]}
-            >
-                <div>{value}</div>
-            </NSLabel>;
-        };
-
-        let pushTabs = (ts?: NSASectionViewTabPageTabPageTab<RowType>[]) =>
-        {
-            if (ts)
-                for (let i = 0; i < ts.length; i++)
-                {
-                    const tab = ts[i];
-                    if (tab.isVisible(this.props.model))
-                        tabs.push({
-                            ...tab,
-                            getContent: () =>
-                            {
-                                return tab.getContent(this.props.model);
-                            }
-                        });
-                }
-        };
-
-        pushTabs(this.props.ui?.tabs?.extra?.before_general);
-        if (this.props.ui?.tabs?.general?.enabled ?? true)
-            if (this.props.model.id)
-                if (this.props.entity.server.get)
-                {
-                    let getColumns = (): TableColumnInfo[] =>
-                    {
-                        let columns: TableColumnInfo[] = [];
-                        if (this.state.row)
-                            if (this.props.ui?.tabs?.general?.getColumns)
-                                columns = this.props.ui?.tabs?.general?.getColumns(this.state.row);
-                        if (columns.length === 0)
-                            columns = this.props.entity.client.getColumns();
-                        return columns;
-                    };
-                    let getValue = (column: string): string =>
-                    {
-                        if (this.state.row)
-                            if (this.props.ui?.tabs?.general?.getValue)
-                            {
-                                let ans = this.props.ui?.tabs?.general?.getValue(this.state.row, column);
-                                if (ans !== undefined)
-                                    return ans;
-                            }
-                        return (this.state.row as any)[column];
-                    };
-                    let renderColumn = (column: TableColumnInfo, tab: string, index: number): ReactNode =>
-                    {
-                        let title = column.text;
-                        if (title.startsWith(tab))
-                            title = title.substring(tab.length + 1);
-
-                        let value = getValue(column.name);
-                        let formatted = column.formatter.format(value, column, { index: 0, value: this.state.row }, false);
-
-                        return (
-                            <NSLabel
-                                key={`NSASectionViewTabPage_NSLabel_${tab}_${index}`}
-                                title={title + ":"}
-                                classList={[Styles.nsa_section_tab_page_item]}
-                            >
-                                <div>{formatted}</div>
-                            </NSLabel>
-                        );
-                    }
-
-                    let TAB_GENERAL = "General";
-                    let columns = getColumns();
-                    columns.filter(c => !c.group).forEach(c => { c.group = TAB_GENERAL });
-                    let tab_names: string[] = columns.map(tab => tab.group) as string[];
-                    tab_names = [...new Set(tab_names)];
-                    tab_names = tab_names.filter(t => t !== TAB_GENERAL);
-                    tab_names = [TAB_GENERAL, ...tab_names];
-
-                    tab_names.forEach(tab =>
-                    {
-                        tabs.push({
-                            title: tab,
-                            clicked: false,
-                            getContent: () =>
-                            {
-                                if (!this.state.row)
-                                    return <NSLoading title="Loading row item ..." />;
-
-                                let tab_columns = columns.filter(c => c.group === tab);
-                                let render_items = this.props.ui?.tabs?.general?.buildItems?.(this.state.row, tab, tab_columns);
-
-                                if (!render_items)
-                                    return (
-                                        <div className={Styles.nsa_section_tab_page_parent}>
-                                            <NSFBoxWrapper slots={slots.filter(x => x.tab === tab)} renderSlot={renderSlot}>
-                                                {tab_columns.map((col, index) => renderColumn(col, tab, index))}
-                                            </NSFBoxWrapper>
-                                        </div>
-                                    )
-
-                                return (
-                                    <div className={Styles.nsa_section_tab_page_parent}>
-                                        <NSFBoxWrapper slots={slots.filter(x => x.tab === tab)} renderSlot={renderSlot}>
-                                            {
-                                                render_items.map((render_item, index) =>
-                                                {
-                                                    if (render_item.type === "column")
-                                                        return renderColumn(render_item.column, tab, index);
-
-                                                    return (
-                                                        <Fragment key={`NSASectionViewTabPage_Custom_${tab}_${index}`}>
-                                                            {render_item.node}
-                                                        </Fragment>
-                                                    );
-                                                })
-                                            }
-                                        </NSFBoxWrapper>
-                                    </div>
-                                );
-                            }
-                        });
-                    });
-                }
-        pushTabs(this.props.ui?.tabs?.extra?.after_general);
-
-        if (this.props.ui?.tabs?.history ?? true)
-            if (this.props.model.id)
-                tabs.push({
-                    title: 'History',
-                    clicked: false,
-                    getContent: () =>
-                    {
-                        return <NSTable<HistoryRow>
-                            name="History"
-                            checkbox={false}
-                            columns={[
-                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.id, new IDFormatter(namirasoft, null)),
-                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.owner_id, new IDFormatter(namirasoft, new IStorageLocal())),
-                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.user_id, new IDFormatter(namirasoft, new IStorageLocal())),
-                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.session_id, new IDFormatter(namirasoft, null)),
-                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.entity_name, new StringFormatter(StringFormatterSizeType.TwoWords, NamingConvention.Pascal_Case_Space)),
-                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.entity_id, new IDFormatter(namirasoft, new IStorageLocal())),
-                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.action, new StringFormatter(StringFormatterSizeType.Word)),
-                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.created_at, new DateTimeFormatter()),
-                            ]}
-                            getRows={async () =>
-                            {
-                                if (this.props.model.id)
-                                {
-                                    let REACT_APP_BASE_URL_HISTORY = new EnvService("REACT_APP_BASE_URL_HISTORY", true).getString();
-                                    let server = new NamirasoftHistoryServer(REACT_APP_BASE_URL_HISTORY, this.props.account.token_manager, this.props.notifier.onError);
-                                    let filters = [new FilterItem(namirasoft.history.tables.history, namirasoft.history.tables.history.columns.entity_id, false, FilterItemOperator.all.equals, this.props.model.id)]
-                                    return await server.history.List(filters, null, null, [], null);
-                                }
-                                return { rows: [], count: 0 };
-                            }}
-                            getRowKey={row => row.value.id}
-                            style={{ width: "100%" }}
-                        ></NSTable>;
-                    }
-                });
-        pushTabs(this.props.ui?.tabs?.extra?.after_history);
-
-        if (this.props.ui?.tabs?.field ?? true)
-            if (this.props.model.id)
-                if (this.props.ctf.enabled)
-                {
-                    let known = new Set(tabs.map(tab => tab.title));
-                    let slot_tabs = Array.from(new Set(slots.map(x => x.tab))).filter(tab => !known.has(tab));
-                    slot_tabs.forEach(tab =>
-                    {
-                        tabs.push({
-                            title: tab,
-                            clicked: false,
-                            getContent: () =>
-                            {
-                                if (this.state.row == null)
-                                    return <NSLoading title="Loading row item ..." />;
-                                return <div className={Styles.nsa_section_tab_page_parent}>
-                                    <NSFBoxWrapper slots={slots.filter(x => x.tab === tab)} renderSlot={renderSlot} />
-                                </div>;
-                            }
-                        });
-                    });
-                }
-        pushTabs(this.props.ui?.tabs?.extra?.after_field);
-        pushTabs(this.props.ui?.tabs?.extra?.after_category);
-
-        if (this.props.ui?.tabs?.tag ?? true)
-            if (this.props.model.id)
-                if (this.props.ctf.enabled)
-                    tabs.push({
-                        title: 'Tag',
-                        clicked: false,
-                        getContent: () =>
-                        {
-                            if (this.state.row == null)
-                                return <NSLoading title="Loading row item ..." />;
-                            let ctf = CFTUtil.get(this.props.entity.name, this.state.row);
-                            if (ctf.tags.length === 0)
-                                return <NSNoData lable="No tag found" />
-                            return <div className={Styles.nsa_section_tab_page_parent}>
-                                {
-                                    ctf.tags?.map((tag, index) =>
-                                    {
-                                        return <NSLabel
-                                            key={`NSASectionViewTabPage_NSLabel_Tag_${index}`}
-                                            title={tag.name + ":"}
-                                            classList={[Styles.nsa_section_tab_page_item]}
-                                        >
-                                            <div>{tag.value}</div>
-                                        </NSLabel>
-                                    })
-                                }
-                            </div>;
-                        }
-                    });
-        pushTabs(this.props.ui?.tabs?.extra?.after_tag);
-        //todo
-        // tabs.push({title: 'Log', getContent: todo });
-        // tabs.push({title: 'Monitor', getContent: todo });
-
-        if (this.props.ui?.tabs?.more ?? true)
-            if (this.props.model.id)
-                if (this.props.entity.server.get)
-                    if (this.props.ctf.enabled)
-                        tabs.push({
-                            title: "More",
-                            clicked: true,
-                            getContent: () => <NSASectionViewTabMore
-                                {...this.props}
-                            />
-                        });
-        pushTabs(this.props.ui?.tabs?.extra?.after_more);
-
-        //todo
-        // tabs.push({title: 'How It Works', getContent: todo });
-        // tabs.push({title: 'API', getContent: todo });
-        // tabs.push({title: 'Sample Code', getContent: todo });
-        //todo
-        // tabs.push({title: 'Category', getContent: todo });
-        // tabs.push({title: 'Field', getContent: todo });
-
-        if (!(this.props.ui?.enabled ?? true))
-            return <></>;
-        return (
-            <>
-                {
-                    tabs.length > 0 &&
-                    <NSTabPage ref={this.NSTabPage_Ref} tabs={tabs} />
-                }
-            </>
-        );
-    }
+import { EnvService, FilterItem, FilterItemOperator, IStorageLocal, NamingConvention } from "namirasoft-core";
+import { EntityResolveResponseRow, SlotEntityType, SlotRow } from "namirasoft-field";
+import { HistoryRow, NamirasoftHistoryServer } from "namirasoft-history";
+import { NamirasoftMap } from "namirasoft-site-map";
+import { BaseColumnFormatter, DateTimeFormatter, IBaseComponentProps, IDFormatter, NSInfoProps, NSLabel, NSLoading, NSNoData, NSTable, NSTabPage, NSTabPageTab, StringFormatter, StringFormatterSizeType, TableColumnInfo } from "namirasoft-site-react";
+import { Component, createRef, Fragment, ReactNode } from "react";
+import { NSFBoxWrapper } from "../components/NSFBoxWrapper";
+import { IEntityInfo } from "../IEntityInfo";
+import { NSARouterMakerResult } from "../NSARouterMakerResult";
+import { CFTUtil } from "./CFTUtil";
+import { NSASectionViewTabMore } from "./NSASectionViewTabMore";
+import Styles from "./NSASectionViewTabPage.module.css";
+
+export type TabRenderItem =
+    | { type: "column"; column: TableColumnInfo }
+    | { type: "custom"; node: ReactNode };
+
+export interface NSASectionViewTabPageTabPageTab<RowType> extends IBaseComponentProps
+{
+    isVisible(model: {
+        id: string | null;
+        row: RowType | null;
+    }): boolean;
+
+    title: string;
+    info?: NSInfoProps;
+    clicked: boolean;
+    getContent: (model: {
+        id: string | null;
+        row: RowType | null;
+    }) => React.ReactNode;
+}
+
+export interface NSASectionViewTabPageUIProps<RowType>
+{
+    enabled?: boolean;
+    tabs?: {
+        general?: {
+            enabled?: boolean;
+            getColumns?: (row: RowType) => TableColumnInfo[];
+            getValue?: (row: RowType, column: string) => string | undefined;
+            buildItems?: (row: RowType, tab: string, columns: TableColumnInfo[]) => TabRenderItem[];
+        }
+        field?: boolean;
+        category?: boolean;
+        tag?: boolean;
+        history?: boolean;
+        more?: boolean;
+        extra?: {
+            before_general?: NSASectionViewTabPageTabPageTab<RowType>[];
+            after_general?: NSASectionViewTabPageTabPageTab<RowType>[];
+            after_field?: NSASectionViewTabPageTabPageTab<RowType>[];
+            after_category?: NSASectionViewTabPageTabPageTab<RowType>[];
+            after_tag?: NSASectionViewTabPageTabPageTab<RowType>[];
+            after_history?: NSASectionViewTabPageTabPageTab<RowType>[];
+            after_more?: NSASectionViewTabPageTabPageTab<RowType>[];
+        };
+    };
+}
+
+export interface NSASectionViewTabPageCutomProps<RowType>
+{
+    ui?: NSASectionViewTabPageUIProps<RowType>;
+    onRowLoaded?: (row: RowType) => void;
+}
+
+export interface NSASectionViewTabPageProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSARouterMakerResult, NSASectionViewTabPageCutomProps<RowType>
+{
+    entity: IEntityInfo<RowType, RowTypeInput>;
+    ctf: {
+        enabled: boolean;
+        rows: EntityResolveResponseRow | null;
+    };
+    model: {
+        id: string | null;
+        row: RowType | null;
+    };
+}
+
+interface NSASectionViewTabPageState<RowType>
+{
+    row: RowType | null;
+}
+
+export class NSASectionViewTabPage<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSASectionViewTabPageProps<RowType, RowTypeInput>, NSASectionViewTabPageState<RowType>>
+{
+    NSTabPage_Ref = createRef<NSTabPage>();
+
+    constructor(props: NSASectionViewTabPageProps<RowType, RowTypeInput>)
+    {
+        super(props);
+
+        this.state = { row: this.props.model.row };
+
+        this.reload = this.reload.bind(this);
+        this.getRow = this.getRow.bind(this);
+    }
+    reload() 
+    {
+        this.setState(prev => ({ ...prev, row: null }));
+        if (this.props.model.id)
+            if (this.props.entity.server.get)
+                this.props.entity.server.get(this.props.model.id).then(row =>
+                {
+                    this.setState(prev => ({ ...prev, row }), () =>
+                    {
+                        this.props.onRowLoaded?.(row);
+                    });
+                }).catch(() => { });
+    }
+    getRow()
+    {
+        return this.state.row;
+    }
+    override componentDidMount()
+    {
+        if (this.props.model.id)
+            if (!this.props.model.row || this.props.model.row.id !== this.props.model.id)
+                this.reload();
+    }
+    override render()
+    {
+        const tabs: NSTabPageTab[] = [];
+        let namirasoft = new NamirasoftMap(this.props.account.token_manager, this.props.notifier.onError);
+
+        let rows = (this.props.model.id && this.props.ctf.enabled) ? this.props.ctf.rows : null;
+        let slots = rows?.slots ?? [];
+
+        let renderSlot = (slot: SlotRow): ReactNode =>
+        {
+            if (!this.state.row || !rows)
+                return null;
+            let ctf = CFTUtil.get(this.props.entity.name, this.state.row);
+            let value = "";
+            if (slot.entity_type === SlotEntityType.Field)
+                value = ctf.fields.filter(x => x.slot_id === slot.id && x.field_id === slot.entity_id).map(x => x.value).join(", ");
+            else if (slot.entity_type === SlotEntityType.CategoryScope)
+            {
+                let ids = ctf.categories.filter(x => x.slot_id === slot.id).map(x => x.category_id);
+                value = rows.categories
+                    .filter(category => category.category_scope_id === slot.entity_id && ids.includes(category.id))
+                    .map(category => category.name)
+                    .join(", ");
+            }
+            return <NSLabel
+                key={`NSASectionViewTabPage_NSLabel_Slot_${slot.id}`}
+                title={slot.name + ":"}
+                classList={[Styles.nsa_section_tab_page_item]}
+            >
+                <div>{value}</div>
+            </NSLabel>;
+        };
+
+        let pushTabs = (ts?: NSASectionViewTabPageTabPageTab<RowType>[]) =>
+        {
+            if (ts)
+                for (let i = 0; i < ts.length; i++)
+                {
+                    const tab = ts[i];
+                    if (tab.isVisible(this.props.model))
+                        tabs.push({
+                            ...tab,
+                            getContent: () =>
+                            {
+                                return tab.getContent(this.props.model);
+                            }
+                        });
+                }
+        };
+
+        pushTabs(this.props.ui?.tabs?.extra?.before_general);
+        if (this.props.ui?.tabs?.general?.enabled ?? true)
+            if (this.props.model.id)
+                if (this.props.entity.server.get)
+                {
+                    let getColumns = (): TableColumnInfo[] =>
+                    {
+                        let columns: TableColumnInfo[] = [];
+                        if (this.state.row)
+                            if (this.props.ui?.tabs?.general?.getColumns)
+                                columns = this.props.ui?.tabs?.general?.getColumns(this.state.row);
+                        if (columns.length === 0)
+                            columns = this.props.entity.client.getColumns();
+                        return columns;
+                    };
+                    let getValue = (column: string): string =>
+                    {
+                        if (this.state.row)
+                            if (this.props.ui?.tabs?.general?.getValue)
+                            {
+                                let ans = this.props.ui?.tabs?.general?.getValue(this.state.row, column);
+                                if (ans !== undefined)
+                                    return ans;
+                            }
+                        return (this.state.row as any)[column];
+                    };
+                    let renderColumn = (column: TableColumnInfo, tab: string, index: number): ReactNode =>
+                    {
+                        let title = column.text;
+                        if (title.startsWith(tab))
+                            title = title.substring(tab.length + 1);
+
+                        let value = getValue(column.name);
+                        let formatted = column.formatter.format(value, column, { index: 0, value: this.state.row }, false);
+
+                        return (
+                            <NSLabel
+                                key={`NSASectionViewTabPage_NSLabel_${tab}_${index}`}
+                                title={title + ":"}
+                                classList={[Styles.nsa_section_tab_page_item]}
+                            >
+                                <div>{formatted}</div>
+                            </NSLabel>
+                        );
+                    }
+
+                    let TAB_GENERAL = "General";
+                    let columns = getColumns();
+                    columns.filter(c => !c.group).forEach(c => { c.group = TAB_GENERAL });
+                    let tab_names: string[] = columns.map(tab => tab.group) as string[];
+                    tab_names = [...new Set(tab_names)];
+                    tab_names = tab_names.filter(t => t !== TAB_GENERAL);
+                    tab_names = [TAB_GENERAL, ...tab_names];
+
+                    tab_names.forEach(tab =>
+                    {
+                        tabs.push({
+                            title: tab,
+                            clicked: false,
+                            getContent: () =>
+                            {
+                                if (!this.state.row)
+                                    return <NSLoading title="Loading row item ..." />;
+
+                                let tab_columns = columns.filter(c => c.group === tab);
+                                let render_items = this.props.ui?.tabs?.general?.buildItems?.(this.state.row, tab, tab_columns);
+
+                                if (!render_items)
+                                    return (
+                                        <div className={Styles.nsa_section_tab_page_parent}>
+                                            <NSFBoxWrapper slots={slots.filter(x => x.tab === tab)} renderSlot={renderSlot}>
+                                                {tab_columns.map((col, index) => renderColumn(col, tab, index))}
+                                            </NSFBoxWrapper>
+                                        </div>
+                                    )
+
+                                return (
+                                    <div className={Styles.nsa_section_tab_page_parent}>
+                                        <NSFBoxWrapper slots={slots.filter(x => x.tab === tab)} renderSlot={renderSlot}>
+                                            {
+                                                render_items.map((render_item, index) =>
+                                                {
+                                                    if (render_item.type === "column")
+                                                        return renderColumn(render_item.column, tab, index);
+
+                                                    return (
+                                                        <Fragment key={`NSASectionViewTabPage_Custom_${tab}_${index}`}>
+                                                            {render_item.node}
+                                                        </Fragment>
+                                                    );
+                                                })
+                                            }
+                                        </NSFBoxWrapper>
+                                    </div>
+                                );
+                            }
+                        });
+                    });
+                }
+        pushTabs(this.props.ui?.tabs?.extra?.after_general);
+
+        if (this.props.ui?.tabs?.history ?? true)
+            if (this.props.model.id)
+                tabs.push({
+                    title: 'History',
+                    clicked: false,
+                    getContent: () =>
+                    {
+                        return <NSTable<HistoryRow>
+                            name="History"
+                            checkbox={false}
+                            columns={[
+                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.id, new IDFormatter(namirasoft, null)),
+                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.owner_id, new IDFormatter(namirasoft, new IStorageLocal())),
+                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.user_id, new IDFormatter(namirasoft, new IStorageLocal())),
+                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.session_id, new IDFormatter(namirasoft, null)),
+                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.entity_name, new StringFormatter(StringFormatterSizeType.TwoWords, NamingConvention.Pascal_Case_Space)),
+                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.entity_id, new IDFormatter(namirasoft, new IStorageLocal())),
+                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.action, new StringFormatter(StringFormatterSizeType.Word)),
+                                BaseColumnFormatter.getColumn(namirasoft.history.tables.history.columns.created_at, new DateTimeFormatter()),
+                            ]}
+                            getRows={async () =>
+                            {
+                                if (this.props.model.id)
+                                {
+                                    let REACT_APP_BASE_URL_HISTORY = new EnvService("REACT_APP_BASE_URL_HISTORY", true).getString();
+                                    let server = new NamirasoftHistoryServer(REACT_APP_BASE_URL_HISTORY, this.props.account.token_manager, this.props.notifier.onError);
+                                    let filters = [new FilterItem(namirasoft.history.tables.history, namirasoft.history.tables.history.columns.entity_id, false, FilterItemOperator.all.equals, this.props.model.id)]
+                                    return await server.history.List(filters, null, null, [], null);
+                                }
+                                return { rows: [], count: 0 };
+                            }}
+                            getRowKey={row => row.value.id}
+                            style={{ width: "100%" }}
+                        ></NSTable>;
+                    }
+                });
+        pushTabs(this.props.ui?.tabs?.extra?.after_history);
+
+        if (this.props.ui?.tabs?.field ?? true)
+            if (this.props.model.id)
+                if (this.props.ctf.enabled)
+                {
+                    let known = new Set(tabs.map(tab => tab.title));
+                    let slot_tabs = Array.from(new Set(slots.map(x => x.tab))).filter(tab => !known.has(tab));
+                    slot_tabs.forEach(tab =>
+                    {
+                        tabs.push({
+                            title: tab,
+                            clicked: false,
+                            getContent: () =>
+                            {
+                                if (this.state.row == null)
+                                    return <NSLoading title="Loading row item ..." />;
+                                return <div className={Styles.nsa_section_tab_page_parent}>
+                                    <NSFBoxWrapper slots={slots.filter(x => x.tab === tab)} renderSlot={renderSlot} />
+                                </div>;
+                            }
+                        });
+                    });
+                }
+        pushTabs(this.props.ui?.tabs?.extra?.after_field);
+        pushTabs(this.props.ui?.tabs?.extra?.after_category);
+
+        if (this.props.ui?.tabs?.tag ?? true)
+            if (this.props.model.id)
+                if (this.props.ctf.enabled)
+                    tabs.push({
+                        title: 'Tag',
+                        clicked: false,
+                        getContent: () =>
+                        {
+                            if (this.state.row == null)
+                                return <NSLoading title="Loading row item ..." />;
+                            let ctf = CFTUtil.get(this.props.entity.name, this.state.row);
+                            if (ctf.tags.length === 0)
+                                return <NSNoData lable="No tag found" />
+                            return <div className={Styles.nsa_section_tab_page_parent}>
+                                {
+                                    ctf.tags?.map((tag, index) =>
+                                    {
+                                        return <NSLabel
+                                            key={`NSASectionViewTabPage_NSLabel_Tag_${index}`}
+                                            title={tag.name + ":"}
+                                            classList={[Styles.nsa_section_tab_page_item]}
+                                        >
+                                            <div>{tag.value}</div>
+                                        </NSLabel>
+                                    })
+                                }
+                            </div>;
+                        }
+                    });
+        pushTabs(this.props.ui?.tabs?.extra?.after_tag);
+        //todo
+        // tabs.push({title: 'Log', getContent: todo });
+        // tabs.push({title: 'Monitor', getContent: todo });
+
+        if (this.props.ui?.tabs?.more ?? true)
+            if (this.props.model.id)
+                if (this.props.entity.server.get)
+                    if (this.props.ctf.enabled)
+                        tabs.push({
+                            title: "More",
+                            clicked: true,
+                            getContent: () => <NSASectionViewTabMore
+                                {...this.props}
+                            />
+                        });
+        pushTabs(this.props.ui?.tabs?.extra?.after_more);
+
+        //todo
+        // tabs.push({title: 'How It Works', getContent: todo });
+        // tabs.push({title: 'API', getContent: todo });
+        // tabs.push({title: 'Sample Code', getContent: todo });
+        //todo
+        // tabs.push({title: 'Category', getContent: todo });
+        // tabs.push({title: 'Field', getContent: todo });
+
+        if (!(this.props.ui?.enabled ?? true))
+            return <></>;
+        return (
+            <>
+                {
+                    tabs.length > 0 &&
+                    <NSTabPage ref={this.NSTabPage_Ref} tabs={tabs} />
+                }
+            </>
+        );
+    }
 }