namirasoft-account-react 1.5.37 → 1.5.39

package/src/layouts/NSALayout.tsx

@@ -1,751 +1,751 @@
-import { NamirasoftAccountClient } from 'namirasoft-account-client';
-import { ProductFullRow } from 'namirasoft-api-product';
-import { CacheService, EnvService, IStorageLocal, NamingConvention } from 'namirasoft-core';
-import { NamirasoftMessageServer } from 'namirasoft-message';
-import { NamirasoftMap } from 'namirasoft-site-map';
-import { IBackgroundProps, IBaseComponentProps, IHeaderIconProps, IHeaderRightProps, NSBarActionProps, NSBarAlertProps, NSBarTitleProps, NSDialogDelete, NSLayout, NSLoading, ProductCacheService } from 'namirasoft-site-react';
-import { IHeaderLeftProps } from 'namirasoft-site-react/dist/props/IHeaderLeftProps';
-import { Component, createRef, ReactElement } from 'react';
-import { Helmet } from 'react-helmet';
-import { NSAAccessListDialog } from '../components/NSAAccessListDialog';
-import NSAMasterMenu from '../components/NSAMasterMenu';
-import { NSAMessageListDialog } from '../components/NSAMessageListDialog';
-import { NSAProductListDialog } from '../components/NSAProductListDialog';
-import { NSATaskBar } from '../components/NSATaskBar';
-import { NSAUserDialog } from '../components/NSAUserDialog';
-import { NSAWorkspaceListDialog } from '../components/NSAWorkspaceListDialog';
-import { FieldCacheService } from '../FieldCacheService';
-import { IEntityInfo } from '../IEntityInfo';
-import { NSACacheService } from '../NSACacheService';
-import { NSARouterMakerResult } from '../NSARouterMakerResult';
-import { UseParams } from '../UseParams';
-import { Actions } from './Actions';
-import { NSALayout_Field } from './NSALayout_Field';
-import { NSASectionEdit, NSASectionEditCustomProps } from './NSASectionEdit';
-import { NSASectionList, NSASectionListCustomProps } from './NSASectionList';
-import { NSASectionView, NSASectionViewCutomProps } from './NSASectionView';
-
-let REACT_APP_BASE_URL_ACCOUNT_CONSOLE = new EnvService("REACT_APP_BASE_URL_ACCOUNT_CONSOLE").getString();
-let client = new NamirasoftAccountClient(REACT_APP_BASE_URL_ACCOUNT_CONSOLE);
-client.onLoggedin = () => { window.location.reload(); };
-client.onLoggedout = () => { window.location.reload(); };
-
-export interface NSALayoutPagesProps<RowType extends { id: string }, RowTypeInput = RowType>
-{
-    entity: IEntityInfo<RowType, RowTypeInput>;
-    ui?: {
-        action?: {
-            menus: {
-                _new?: boolean;
-                list?: boolean;
-                view?: boolean;
-                view_history?: boolean;
-                copy?: boolean;
-                edit?: boolean;
-                delete?: boolean;
-                apply?: boolean;
-            };
-            children?: JSX.Element | JSX.Element[];
-        };
-    }
-    list?: NSASectionListCustomProps<RowType, RowTypeInput>;
-    edit?: NSASectionEditCustomProps<RowType, RowTypeInput> & {
-        ui: {
-            action?: {
-                menus: {
-                    apply?: boolean,
-                }
-            },
-        }
-    };
-    view?: NSASectionViewCutomProps<RowType>;
-}
-export interface NSALayoutCustomProps<RowType extends { id: string }, RowTypeInput = RowType> extends IBaseComponentProps, NSARouterMakerResult
-{
-    action?: NSBarActionProps;
-    title?: NSBarTitleProps;
-    alerts?: NSBarAlertProps[];
-    pages?: NSALayoutPagesProps<RowType, RowTypeInput>;
-    children: ReactElement;
-    onEnterPressed?: () => void;
-    onDidMounted?: () => void;
-}
-export interface NSALayoutProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSALayoutCustomProps<RowType, RowTypeInput>
-{
-    model?: {
-        id: string | null;
-    }
-    scope?: string;
-    logo?: string;
-    master_menu?: boolean;
-    background?: IBackgroundProps;
-    header?: {
-        enabled?: boolean,
-        right?: IHeaderRightProps;
-        left?: IHeaderLeftProps;
-        built_in?: {
-            logout?: boolean;
-            message?: boolean;
-            access?: boolean;
-            workspace?: boolean;
-            product?: boolean;
-            user?: boolean;
-        };
-        mega_menu?: boolean;
-    };
-}
-
-interface NSALayoutState
-{
-    parmas: any | null;
-    product: ProductFullRow | null;
-    refresher: number;
-    message_count: number;
-    showDeleteDialog: boolean;
-    delete_ids: string[];
-    delete_title: string;
-    showMessageListDialog: boolean;
-    showAccessListDialog: boolean;
-    showProductListDialog: boolean;
-    showWorkspaceListDialog: boolean;
-    showUserDialog: boolean;
-    showMasterMenu: boolean;
-}
-
-export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSALayoutProps<RowType, RowTypeInput>, NSALayoutState>
-{
-    private onDidMounted_Called: boolean = false;
-    private onDidMounted_Ready: boolean = false;
-    private hasCFT: boolean;
-    private isLoggedIn: boolean;
-    private cache_product: CacheService<ProductFullRow>;
-    private cache_message: CacheService<number>;
-    private cache_master_menu: CacheService<{ open: boolean }>;
-    NSASectionList_Ref = createRef<NSASectionList<RowType, RowTypeInput>>();
-    NSASectionEdit_Ref = createRef<NSASectionEdit<RowType, RowTypeInput>>();
-    NSASectionView_Ref = createRef<NSASectionView<RowType, RowTypeInput>>();
-    NSATaskBar_Ref = createRef<NSATaskBar<string>>();
-
-    constructor(props: NSALayoutProps<RowType, RowTypeInput>)
-    {
-        super(props);
-
-        // Account
-        this.isLoggedIn = this.props.account?.token_manager?.exists() ?? false;
-
-        // CFT
-        this.hasCFT = false;
-        if (this.props.pages?.entity)
-            try
-            {
-                let namirasoft = new NamirasoftMap(this.props.account.token_manager, props.notifier.onError);
-                let table = namirasoft.getByProductID(this.props.product_id).tables[this.props.pages.entity.name];
-                this.hasCFT = table.hasFieldTables();
-            } catch (error)
-            { }
-
-        // Cache Product
-        this.cache_product = ProductCacheService.get(this.props.product_id, console.error);
-
-        // Cache Message
-        this.cache_message = new CacheService<number>(
-            "ns-messsage-count",
-            new IStorageLocal(),
-            15,
-            async () => "1.0.0",
-            async () =>
-            {
-                let REACT_APP_BASE_URL_MESSAGE = new EnvService("REACT_APP_BASE_URL_MESSAGE", true).getString();
-                let server = new NamirasoftMessageServer(REACT_APP_BASE_URL_MESSAGE, this.props.account.token_manager, console.error);
-                let res = await server.message.GetNewCount();
-                return res.count;
-            }
-        );
-
-        this.cache_master_menu = NSACacheService.getMasterMenuStatus();
-        this.cache_message.onExpired = () => { this.reloadMessageCount(true); };
-
-        // State
-        this.state = {
-            parmas: null,
-            product: null,
-            refresher: 0,
-            message_count: 0,
-            showDeleteDialog: false,
-            delete_ids: [],
-            delete_title: "",
-            showMessageListDialog: false,
-            showAccessListDialog: false,
-            showProductListDialog: false,
-            showWorkspaceListDialog: false,
-            showUserDialog: false,
-            showMasterMenu: false,
-        };
-    }
-    public reloadMessageCount(force: boolean)
-    {
-        if (force)
-            this.cache_message.del();
-        this.cache_message.get().then(count =>
-        {
-            this.setState(prev => ({ ...prev, message_count: count }));
-        }).catch(() => { });
-    }
-
-    private async runDelete(ids: string[], name: string): Promise<void>
-    {
-        if (!this.props.pages?.entity.server.delete)
-            return;
-
-        await new Promise<void>(resolve => this.setState(prev => ({ ...prev, delete_ids: ids, delete_title: `Deleting ${name}` }), resolve));
-
-        const result = await this.NSATaskBar_Ref.current?.run();
-        if (!result)
-            return;
-
-        const deletedIds = result.succeeded;
-
-        if (deletedIds.length === 0)
-            return;
-
-        if (this.props.pages?.list)
-        {
-            let table = this.NSASectionList_Ref.current?.NSATable_Main.current;
-            if (table)
-            {
-                let selected_ids = table.getSelectedIDs().filter(id => !deletedIds.includes(id));
-                let selected_rows = table.getSelectedRows().filter(row => !deletedIds.includes(row.id));
-                table.setSelectedIDs(selected_ids, selected_rows);
-                table.reload(null, null);
-            }
-        }
-        else if (this.props.pages?.edit)
-        {
-            if (this.props.pages.entity.client.getListURL)
-                this.props.url.redirect(this.props.pages.entity.client.getListURL(), {});
-            else if (this.props.pages.entity.client.getViewURL)
-                this.props.url.redirect(this.props.pages.entity.client.getViewURL(deletedIds[0]), {});
-        }
-        else if (this.props.pages?.view)
-        {
-            if (this.props.pages.entity.client.getListURL)
-                this.props.url.redirect(this.props.pages.entity.client.getListURL(), {});
-        }
-    }
-
-    override componentDidMount(): void
-    {
-        this.onDidMounted_Called = false;
-        this.cache_product.get().then(product =>
-        {
-            this.setState(prev => ({ ...prev, product }));
-        })
-
-        this.cache_master_menu.get().then(status =>
-        {
-            this.setState(() => ({ showMasterMenu: status.open }));
-        })
-
-        if (this.isLoggedIn)
-            this.reloadMessageCount(false);
-
-        client.start();
-    }
-    override componentDidUpdate(): void
-    {
-        if (!this.onDidMounted_Called)
-            if (this.onDidMounted_Ready)
-            {
-                this.props.onDidMounted?.();
-                this.onDidMounted_Called = true;
-            }
-    }
-    override componentWillUnmount(): void
-    {
-        client.stop();
-    }
-    override render()
-    {
-        this.onDidMounted_Ready = false;
-        let id = this.props.model?.id ?? null;
-        if (!id)
-        {
-            if (this.state.parmas === null)
-                return <UseParams onLoaded={parmas =>
-                {
-                    this.setState({ parmas });
-                }} />;
-            id = this.state.parmas.id;
-        }
-
-        const hideDeleteDialog = async () => { this.setState(prev => ({ ...prev, showDeleteDialog: false })); };
-        const showDeleteDialog = async () => { this.setState(prev => ({ ...prev, showDeleteDialog: true })); };
-
-        let icons: IHeaderIconProps[] = [];
-
-        if (this.isLoggedIn)
-        {
-            if (this.props.header?.built_in?.message ?? true)
-                icons.push({
-                    src: "https://static.namirasoft.com/image/namirasoft/message/logo/base.png", alt: "Message", onClicked: () =>
-                    {
-                        this.setState(prev => ({ ...prev, showMessageListDialog: true }));
-                        this.reloadMessageCount(true);
-                    },
-                    children: <>
-                        {
-                            (
-                                this.state.showMessageListDialog &&
-                                <NSAMessageListDialog {...this.props}
-                                    onClose={() => { this.setState(prev => ({ ...prev, showMessageListDialog: false })); }}
-                                    onSeenAll={() =>
-                                    {
-                                        this.reloadMessageCount(true);
-                                    }}
-                                    onMessageClick={() =>
-                                    {
-                                        this.reloadMessageCount(true);
-                                    }}
-                                />
-                            )
-                        }
-                    </>,
-                    count: this.state.message_count,
-                    tooltip: "Message"
-                });
-        }
-        if (this.isLoggedIn)
-            if (this.props.header?.built_in?.access ?? true)
-                icons.push({
-                    src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png", alt: "Access", onClicked: () =>
-                    {
-                        this.setState(prev => ({ ...prev, showAccessListDialog: true }));
-                    },
-                    children: <>
-                        {
-                            (this.state.showAccessListDialog) && <NSAAccessListDialog {...this.props} onClose={() =>
-                            {
-                                this.setState(prev => ({ ...prev, showAccessListDialog: false }));
-                            }} />
-                        }
-                    </>,
-                    tooltip: "Access"
-                });
-        if (this.isLoggedIn)
-            if (this.props.header?.built_in?.workspace ?? true)
-                icons.push({
-                    src: "https://static.namirasoft.com/image/namirasoft/workspace/logo/base.png", alt: "Workspace", onClicked: () =>
-                    {
-                        this.setState(prev => ({ ...prev, showWorkspaceListDialog: true }));
-                    },
-                    children: <>
-                        {
-                            (this.state.showWorkspaceListDialog) && <NSAWorkspaceListDialog {...this.props} onClose={() =>
-                            {
-                                this.setState(prev => ({ ...prev, showWorkspaceListDialog: false }));
-                            }} />
-                        }
-                    </>,
-                    tooltip: "Workspace List"
-                });
-        if (this.props.header?.built_in?.product ?? true)
-            icons.push({
-                src: "https://static.namirasoft.com/image/concept/product-list/white.svg", alt: "Product", onClicked: () =>
-                {
-                    this.setState(prev => ({ ...prev, showProductListDialog: true }));
-                },
-                children: <>
-                    {
-                        (this.state.showProductListDialog) && <NSAProductListDialog {...this.props} onClose={() =>
-                        {
-                            this.setState(prev => ({ ...prev, showProductListDialog: false }));
-                        }} >
-                            <></>
-                        </NSAProductListDialog>
-                    }
-                </>,
-                tooltip: "Product List"
-            });
-
-        if (this.isLoggedIn)
-            if (this.props.header?.built_in?.user ?? true)
-                icons.push({
-                    src: "https://static.namirasoft.com/image/concept/user/white.svg",
-                    alt: "User",
-                    onClicked: () =>
-                    {
-                        this.setState(prev => ({ ...prev, showUserDialog: true }));
-                    },
-                    children: <>
-                        {
-                            (this.state.showUserDialog) &&
-                            <NSAUserDialog
-                                {...this.props}
-                                client={client}
-                                onClose={() => this.setState(prev => ({ ...prev, showUserDialog: false }))}
-                            >
-                                <></>
-                            </NSAUserDialog>
-                        }
-                    </>,
-                    tooltip: "User"
-                });
-
-        let name = "";
-        if (this.props.pages)
-            name = NamingConvention.lower_case_underscore.convert(this.props.pages.entity.name, NamingConvention.Pascal_Case_Space);
-
-        let getIDs: (() => string[]) | null = null;
-        let getRows: (() => RowType[]) | null = null;
-        if (this.props.pages?.list)
-        {
-            getIDs = () => { return this.NSASectionList_Ref.current?.getSelectedIDs() ?? []; };
-            getRows = () => { return this.NSASectionList_Ref.current?.getSelectedRows() ?? []; };
-        }
-        if (this.props.pages?.edit)
-        {
-            getIDs = () => [id].filter(id => id) as string[];
-            getRows = () => [this.NSASectionEdit_Ref.current?.getRow()].filter(row => row) as RowType[];
-        }
-        if (this.props.pages?.view)
-        {
-            getIDs = () => [id].filter(id => id) as string[];
-            getRows = () => [this.NSASectionView_Ref.current?.getRow()].filter(row => row) as RowType[];
-        }
-
-        let action: NSBarActionProps | undefined = { title: "", description: "", menus: {} };
-        if (this.props.action?.title)
-            action.title = this.props.action.title;
-        if (this.props.action?.description)
-            action.description = this.props.action.description;
-        if (this.props.action?.menus != null)
-            action.menus = { ...this.props.action?.menus };
-
-        if (getIDs && getRows)
-            if (this.props.pages?.entity.client.getMenus)
-            {
-                let menus = this.props.pages?.entity.client.getMenus(getIDs, getRows);
-                for (let key of Object.keys(menus))
-                {
-                    if (!action.menus)
-                        action.menus = {};
-                    if (!action.menus[key])
-                        action.menus[key] = [];
-                    action.menus[key].push(...menus[key]);
-                }
-            }
-
-        let name_apply = "Apply";
-        let name_actions = "Actions";
-        if (!action.menus)
-            action.menus = {};
-        action.menus[name_apply] = [];
-        action.menus[name_actions] = [];
-
-        if (this.props.pages?.edit)
-        {
-            if (!action.title)
-                action.title = (this.props.pages.edit.isEdit ? "Edit" : "New") + " " + name;
-
-            // Menu
-            if (this.props.pages.edit.ui.action?.menus.apply ?? true)
-                action.menus[name_apply].push(Actions.apply({
-                    action: (onFinished) =>
-                    {
-                        if (this.props.pages?.edit)
-                            this.NSASectionEdit_Ref.current?.onApply(onFinished);
-                    }
-                }));
-        }
-        else if (this.props.pages)
-        {
-            if (this.props.pages.entity.client.getNewURL)
-                if (this.props.pages.entity.server.create)
-                    if (this.props.pages.ui?.action?.menus._new ?? true)
-                        action.menus[name_apply].push(Actions._new(this.props, this.props.pages.entity));
-        }
-
-        if (getIDs)
-            if (this.props.pages)
-            {
-                if (this.props.pages.entity.client.getListURL)
-                    if (this.props.pages.entity.server.list)
-                        if (this.props.pages.ui?.action?.menus.list ?? true)
-                            action.menus[name_actions].push(Actions.list(this.props, this.props.pages.entity));
-
-                if (this.props.pages.entity.client.getViewURL)
-                    if (this.props.pages.entity.server.get)
-                        if (this.props.pages.ui?.action?.menus.view ?? true)
-                            action.menus[name_actions].push(Actions.view(this.props, this.props.pages.entity, getIDs));
-
-                if (this.props.pages.ui?.action?.menus.view_history ?? true)
-                    action.menus[name_actions].push(Actions.viewHistory(getIDs));
-
-                if (this.props.pages.entity.client.getCopyURL)
-                    if (this.props.pages.entity.server.create)
-                        if (this.props.pages.ui?.action?.menus.copy ?? true)
-                            action.menus[name_actions].push(Actions.copy(this.props, this.props.pages.entity, getIDs));
-
-                if (this.props.pages.entity.client.getEditURL)
-                    if (this.props.pages.entity.server.update)
-                        if (this.props.pages.ui?.action?.menus.edit ?? true)
-                            action.menus[name_actions].push(Actions.edit(this.props, this.props.pages.entity, getIDs));
-
-                if (this.props.pages.entity.server.delete)
-                    if (this.props.pages.ui?.action?.menus.delete ?? true)
-                        action.menus[name_actions].push(Actions.delete(getIDs, {
-                            action: showDeleteDialog,
-                            showLoading: false
-                        }));
-            }
-
-        let action_name = "";
-        let content;
-        if (this.props.pages?.list)
-        {
-            action_name = "List";
-            content = <FieldCacheService
-                {...this.props}
-                render={rows =>
-                {
-                    if (this.props.pages?.list)
-                        return <NSASectionList<RowType, RowTypeInput>
-                            ref={this.NSASectionList_Ref}
-                            {...this.props}
-                            {...this.props.pages.list}
-                            entity={this.props.pages.entity}
-                            onIDsChanged={() =>
-                            {
-                                this.setState(prev => ({ ...prev }));
-                                this.props.pages?.list?.onIDsChanged?.();
-                            }}
-                            ctf={{
-                                enabled: this.hasCFT,
-                                rows
-                            }}
-                        >
-                            {this.props.children}
-                        </NSASectionList>;
-                    return <></>;
-                }}
-            />;
-        }
-        else if (this.props.pages?.edit)
-        {
-            if (this.props.pages.edit.isEdit)
-                action_name = "Edit";
-            else
-                action_name = "New";
-            content = <FieldCacheService
-                {...this.props}
-                render={rows =>
-                {
-                    if (this.props.pages?.edit)
-                        return <NSASectionEdit
-                            ref={this.NSASectionEdit_Ref}
-                            {...this.props}
-                            {...this.props.pages.edit}
-                            entity={this.props.pages.entity}
-                            ctf={{
-                                enabled: this.hasCFT,
-                                rows
-                            }}
-                            onRowLoaded={(row) =>
-                            {
-                                this.setState(prev => ({ ...prev }), () =>
-                                {
-                                    this.props.pages?.edit?.onRowLoaded?.(row);
-                                });
-                            }}
-                            model={{
-                                id,
-                                row: null
-                            }}
-                        >
-                            {this.props.children}
-                        </NSASectionEdit>;
-                    return <></>;
-                }}
-            />;
-        }
-        else if (this.props.pages?.view)
-        {
-            action_name = "View";
-
-            content = <FieldCacheService
-                {...this.props}
-                render={rows =>
-                {
-                    if (this.props.pages?.view)
-                        return <NSASectionView
-                            ref={this.NSASectionView_Ref}
-                            {...this.props}
-                            {...this.props.pages.view}
-                            entity={this.props.pages.entity}
-                            ctf={{
-                                enabled: this.hasCFT,
-                                rows
-                            }}
-                            onRowLoaded={(row) =>
-                            {
-                                this.setState(prev => ({ ...prev }), () =>
-                                {
-                                    this.props.pages?.view?.onRowLoaded?.(row);
-                                });
-                            }}
-                            model={{
-                                id,
-                                row: null
-                            }}
-                        >
-                            {this.props.children}
-                        </NSASectionView>;
-                    return <></>;
-                }}
-            />;
-        }
-        else
-            content = this.props.children;
-
-        let fullname = "";
-        if (this.props.pages?.entity.name)
-        {
-            let Name_Pascal_Space = NamingConvention.lower_case_underscore.convert(this.props.pages.entity.name, NamingConvention.Pascal_Case_Space);
-            if (action_name === "List")
-                fullname = Name_Pascal_Space + " " + action_name;
-            else
-                fullname = action_name + " " + Name_Pascal_Space;
-        }
-
-        if (!this.state.product)
-            return <NSLoading title='Loading Namirasoft Product ...' />;
-
-        let action_title = action?.title ?? "";
-        if (!action_title)
-            action_title = fullname;
-        if (!action_title)
-            action_title = this.state.product?.name
-
-        let action_description = action?.description ?? "";
-        if (!action_description)
-            action_description = this.state.product?.description ?? "";
-
-        let scope = this.props.scope ?? `${this.state.product.name} Console`;
-        let logo = this.props.logo ?? this.state.product.logo ?? "";
-        let background = this.props.background?.image ?? this.state.product.background ?? "";
-
-        this.onDidMounted_Ready = true;
-
-        let user_id = this.props.account.token_manager.getUserData(x => x.id, "");
-        let user_first_name = this.props.account.token_manager.getUserData(x => x.first_name, "");
-        let user_last_name = this.props.account.token_manager.getUserData(x => x.last_name, "");
-        let user_email = this.props.account.token_manager.getUserData(x => x.email, "");
-        let user_phone = this.props.account.token_manager.getUserData(x => x.phone ?? "", "");
-        return (
-            <div className="d-flex">
-                {
-                    (this.props.master_menu ?? true) &&
-                    <NSAMasterMenu
-                        {...this.props}
-                        open={this.state.showMasterMenu}
-                        setOpen={(open) =>
-                        {
-                            this.cache_master_menu.set({ open });
-                            this.setState(() => ({ showMasterMenu: open }));
-                        }}
-                    />
-                }
-                <FieldCacheService
-                    {...this.props}
-                    render={(ctf_rows) => (
-                        <NSLayout
-                            {...this.props}
-                            scope={scope}
-                            logo={logo}
-                            background={{ image: background, attachment: this.props.background?.attachment, size: this.props.background?.size }}
-                            header={{
-                                enabled: this.props.header?.enabled,
-                                right: {
-                                    icons: [...icons, ...(this.props.header?.right?.icons ?? [])],
-                                },
-                                left: {
-                                    title: this.props.header?.left?.title
-                                },
-                                mega_menu: this.props.header?.mega_menu,
-                                onCollapse: () =>
-                                {
-                                    this.setState((prev) => ({ showMasterMenu: !prev.showMasterMenu }))
-                                },
-                                filters_postprocessor: (filters) => NSALayout_Field.postprocess(filters, ctf_rows),
-                            }}
-                            action={{
-                                title: action_title,
-                                description: action_description,
-                                menus: action.menus,
-                                children: this.props.action?.children
-                            }}
-                            isLoggedIn={this.props.account?.token_manager?.exists}
-                            notifications={this.props.notifier.getNotifications()}
-                        >
-                            <Helmet>
-                                <meta name="ns-account-user-id" content={user_id} />
-                                <meta name="ns-account-user-first-name" content={user_first_name} />
-                                <meta name="ns-account-user-last-name" content={user_last_name} />
-                                <meta name="ns-account-user-email" content={user_email} />
-                                <meta name="ns-account-user-phone" content={user_phone} />
-                            </Helmet>
-                            {
-                                this.state.showDeleteDialog &&
-                                <NSDialogDelete
-                                    title={"Delete Confirmation"}
-                                    description={
-                                        (getIDs && getIDs().length > 1)
-                                            ? `Are you sure you want to delete ${getIDs().length} ${name}s?`
-                                            : `Are you sure you want to delete ${name}?`
-                                    }
-                                    onClose={hideDeleteDialog}
-                                    onNo={{ action: hideDeleteDialog, showLoading: false }}
-                                    show_as_code={false}
-                                    onYes={{
-                                        showLoading: false,
-                                        action: (onFinished) =>
-                                        {
-                                            try
-                                            {
-                                                let ids = getIDs ? getIDs() : [];
-                                                if (ids.length === 0)
-                                                    throw new Error("Nothing was found to delete.");
-                                                this.runDelete(ids, name);
-                                            }
-                                            catch (error: any)
-                                            {
-                                                this.props.notifier.onError(error);
-                                            }
-                                            this.setState(prev => ({ ...prev, showDeleteDialog: false }));
-                                            onFinished();
-                                        }
-                                    }}
-                                >
-                                    <></>
-                                </NSDialogDelete>}
-                            {
-                                content
-                            }
-                        </NSLayout>
-                    )}
-                />
-                <NSATaskBar<string>
-                    ref={this.NSATaskBar_Ref}
-                    title={this.state.delete_title}
-                    items={this.state.delete_ids}
-                    handler={async (id) =>
-                    {
-                        const del = this.props.pages?.entity.server.delete;
-                        if (del)
-                            await del(id);
-                    }}
-                />
-            </div >
-        );
-    }
+import { NamirasoftAccountClient } from 'namirasoft-account-client';
+import { ProductFullRow } from 'namirasoft-api-product';
+import { CacheService, EnvService, IStorageLocal, NamingConvention } from 'namirasoft-core';
+import { NamirasoftMessageServer } from 'namirasoft-message';
+import { NamirasoftMap } from 'namirasoft-site-map';
+import { IBackgroundProps, IBaseComponentProps, IHeaderIconProps, IHeaderRightProps, NSBarActionProps, NSBarAlertProps, NSBarTitleProps, NSDialogDelete, NSLayout, NSLoading, ProductCacheService } from 'namirasoft-site-react';
+import { IHeaderLeftProps } from 'namirasoft-site-react/dist/props/IHeaderLeftProps';
+import { Component, createRef, ReactElement } from 'react';
+import { Helmet } from 'react-helmet';
+import { NSAAccessListDialog } from '../components/NSAAccessListDialog';
+import NSAMasterMenu from '../components/NSAMasterMenu';
+import { NSAMessageListDialog } from '../components/NSAMessageListDialog';
+import { NSAProductListDialog } from '../components/NSAProductListDialog';
+import { NSATaskBar } from '../components/NSATaskBar';
+import { NSAUserDialog } from '../components/NSAUserDialog';
+import { NSAWorkspaceListDialog } from '../components/NSAWorkspaceListDialog';
+import { FieldCacheService } from '../FieldCacheService';
+import { IEntityInfo } from '../IEntityInfo';
+import { NSACacheService } from '../NSACacheService';
+import { NSARouterMakerResult } from '../NSARouterMakerResult';
+import { UseParams } from '../UseParams';
+import { Actions } from './Actions';
+import { NSALayout_Field } from './NSALayout_Field';
+import { NSASectionEdit, NSASectionEditCustomProps } from './NSASectionEdit';
+import { NSASectionList, NSASectionListCustomProps } from './NSASectionList';
+import { NSASectionView, NSASectionViewCutomProps } from './NSASectionView';
+
+let REACT_APP_BASE_URL_ACCOUNT_CONSOLE = new EnvService("REACT_APP_BASE_URL_ACCOUNT_CONSOLE").getString();
+let client = new NamirasoftAccountClient(REACT_APP_BASE_URL_ACCOUNT_CONSOLE);
+client.onLoggedin = () => { window.location.reload(); };
+client.onLoggedout = () => { window.location.reload(); };
+
+export interface NSALayoutPagesProps<RowType extends { id: string }, RowTypeInput = RowType>
+{
+    entity: IEntityInfo<RowType, RowTypeInput>;
+    ui?: {
+        action?: {
+            menus: {
+                _new?: boolean;
+                list?: boolean;
+                view?: boolean;
+                view_history?: boolean;
+                copy?: boolean;
+                edit?: boolean;
+                delete?: boolean;
+                apply?: boolean;
+            };
+            children?: JSX.Element | JSX.Element[];
+        };
+    }
+    list?: NSASectionListCustomProps<RowType, RowTypeInput>;
+    edit?: NSASectionEditCustomProps<RowType, RowTypeInput> & {
+        ui: {
+            action?: {
+                menus: {
+                    apply?: boolean,
+                }
+            },
+        }
+    };
+    view?: NSASectionViewCutomProps<RowType>;
+}
+export interface NSALayoutCustomProps<RowType extends { id: string }, RowTypeInput = RowType> extends IBaseComponentProps, NSARouterMakerResult
+{
+    action?: NSBarActionProps;
+    title?: NSBarTitleProps;
+    alerts?: NSBarAlertProps[];
+    pages?: NSALayoutPagesProps<RowType, RowTypeInput>;
+    children: ReactElement;
+    onEnterPressed?: () => void;
+    onDidMounted?: () => void;
+}
+export interface NSALayoutProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSALayoutCustomProps<RowType, RowTypeInput>
+{
+    model?: {
+        id: string | null;
+    }
+    scope?: string;
+    logo?: string;
+    master_menu?: boolean;
+    background?: IBackgroundProps;
+    header?: {
+        enabled?: boolean,
+        right?: IHeaderRightProps;
+        left?: IHeaderLeftProps;
+        built_in?: {
+            logout?: boolean;
+            message?: boolean;
+            access?: boolean;
+            workspace?: boolean;
+            product?: boolean;
+            user?: boolean;
+        };
+        mega_menu?: boolean;
+    };
+}
+
+interface NSALayoutState
+{
+    parmas: any | null;
+    product: ProductFullRow | null;
+    refresher: number;
+    message_count: number;
+    showDeleteDialog: boolean;
+    delete_ids: string[];
+    delete_title: string;
+    showMessageListDialog: boolean;
+    showAccessListDialog: boolean;
+    showProductListDialog: boolean;
+    showWorkspaceListDialog: boolean;
+    showUserDialog: boolean;
+    showMasterMenu: boolean;
+}
+
+export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSALayoutProps<RowType, RowTypeInput>, NSALayoutState>
+{
+    private onDidMounted_Called: boolean = false;
+    private onDidMounted_Ready: boolean = false;
+    private hasCFT: boolean;
+    private isLoggedIn: boolean;
+    private cache_product: CacheService<ProductFullRow>;
+    private cache_message: CacheService<number>;
+    private cache_master_menu: CacheService<{ open: boolean }>;
+    NSASectionList_Ref = createRef<NSASectionList<RowType, RowTypeInput>>();
+    NSASectionEdit_Ref = createRef<NSASectionEdit<RowType, RowTypeInput>>();
+    NSASectionView_Ref = createRef<NSASectionView<RowType, RowTypeInput>>();
+    NSATaskBar_Ref = createRef<NSATaskBar<string>>();
+
+    constructor(props: NSALayoutProps<RowType, RowTypeInput>)
+    {
+        super(props);
+
+        // Account
+        this.isLoggedIn = this.props.account?.token_manager?.exists() ?? false;
+
+        // CFT
+        this.hasCFT = false;
+        if (this.props.pages?.entity)
+            try
+            {
+                let namirasoft = new NamirasoftMap(this.props.account.token_manager, props.notifier.onError);
+                let table = namirasoft.getByProductID(this.props.product_id).tables[this.props.pages.entity.name];
+                this.hasCFT = table.hasFieldTables();
+            } catch (error)
+            { }
+
+        // Cache Product
+        this.cache_product = ProductCacheService.get(this.props.product_id, console.error);
+
+        // Cache Message
+        this.cache_message = new CacheService<number>(
+            "ns-messsage-count",
+            new IStorageLocal(),
+            15,
+            async () => "1.0.0",
+            async () =>
+            {
+                let REACT_APP_BASE_URL_MESSAGE = new EnvService("REACT_APP_BASE_URL_MESSAGE", true).getString();
+                let server = new NamirasoftMessageServer(REACT_APP_BASE_URL_MESSAGE, this.props.account.token_manager, console.error);
+                let res = await server.message.GetNewCount();
+                return res.count;
+            }
+        );
+
+        this.cache_master_menu = NSACacheService.getMasterMenuStatus();
+        this.cache_message.onExpired = () => { this.reloadMessageCount(true); };
+
+        // State
+        this.state = {
+            parmas: null,
+            product: null,
+            refresher: 0,
+            message_count: 0,
+            showDeleteDialog: false,
+            delete_ids: [],
+            delete_title: "",
+            showMessageListDialog: false,
+            showAccessListDialog: false,
+            showProductListDialog: false,
+            showWorkspaceListDialog: false,
+            showUserDialog: false,
+            showMasterMenu: false,
+        };
+    }
+    public reloadMessageCount(force: boolean)
+    {
+        if (force)
+            this.cache_message.del();
+        this.cache_message.get().then(count =>
+        {
+            this.setState(prev => ({ ...prev, message_count: count }));
+        }).catch(() => { });
+    }
+
+    private async runDelete(ids: string[], name: string): Promise<void>
+    {
+        if (!this.props.pages?.entity.server.delete)
+            return;
+
+        await new Promise<void>(resolve => this.setState(prev => ({ ...prev, delete_ids: ids, delete_title: `Deleting ${name}` }), resolve));
+
+        const result = await this.NSATaskBar_Ref.current?.run();
+        if (!result)
+            return;
+
+        const deletedIds = result.succeeded;
+
+        if (deletedIds.length === 0)
+            return;
+
+        if (this.props.pages?.list)
+        {
+            let table = this.NSASectionList_Ref.current?.NSATable_Main.current;
+            if (table)
+            {
+                let selected_ids = table.getSelectedIDs().filter(id => !deletedIds.includes(id));
+                let selected_rows = table.getSelectedRows().filter(row => !deletedIds.includes(row.id));
+                table.setSelectedIDs(selected_ids, selected_rows);
+                table.reload(null, null);
+            }
+        }
+        else if (this.props.pages?.edit)
+        {
+            if (this.props.pages.entity.client.getListURL)
+                this.props.url.redirect(this.props.pages.entity.client.getListURL(), {});
+            else if (this.props.pages.entity.client.getViewURL)
+                this.props.url.redirect(this.props.pages.entity.client.getViewURL(deletedIds[0]), {});
+        }
+        else if (this.props.pages?.view)
+        {
+            if (this.props.pages.entity.client.getListURL)
+                this.props.url.redirect(this.props.pages.entity.client.getListURL(), {});
+        }
+    }
+
+    override componentDidMount(): void
+    {
+        this.onDidMounted_Called = false;
+        this.cache_product.get().then(product =>
+        {
+            this.setState(prev => ({ ...prev, product }));
+        })
+
+        this.cache_master_menu.get().then(status =>
+        {
+            this.setState(() => ({ showMasterMenu: status.open }));
+        })
+
+        if (this.isLoggedIn)
+            this.reloadMessageCount(false);
+
+        client.start();
+    }
+    override componentDidUpdate(): void
+    {
+        if (!this.onDidMounted_Called)
+            if (this.onDidMounted_Ready)
+            {
+                this.props.onDidMounted?.();
+                this.onDidMounted_Called = true;
+            }
+    }
+    override componentWillUnmount(): void
+    {
+        client.stop();
+    }
+    override render()
+    {
+        this.onDidMounted_Ready = false;
+        let id = this.props.model?.id ?? null;
+        if (!id)
+        {
+            if (this.state.parmas === null)
+                return <UseParams onLoaded={parmas =>
+                {
+                    this.setState({ parmas });
+                }} />;
+            id = this.state.parmas.id;
+        }
+
+        const hideDeleteDialog = async () => { this.setState(prev => ({ ...prev, showDeleteDialog: false })); };
+        const showDeleteDialog = async () => { this.setState(prev => ({ ...prev, showDeleteDialog: true })); };
+
+        let icons: IHeaderIconProps[] = [];
+
+        if (this.isLoggedIn)
+        {
+            if (this.props.header?.built_in?.message ?? true)
+                icons.push({
+                    src: "https://static.namirasoft.com/image/namirasoft/message/logo/base.png", alt: "Message", onClicked: () =>
+                    {
+                        this.setState(prev => ({ ...prev, showMessageListDialog: true }));
+                        this.reloadMessageCount(true);
+                    },
+                    children: <>
+                        {
+                            (
+                                this.state.showMessageListDialog &&
+                                <NSAMessageListDialog {...this.props}
+                                    onClose={() => { this.setState(prev => ({ ...prev, showMessageListDialog: false })); }}
+                                    onSeenAll={() =>
+                                    {
+                                        this.reloadMessageCount(true);
+                                    }}
+                                    onMessageClick={() =>
+                                    {
+                                        this.reloadMessageCount(true);
+                                    }}
+                                />
+                            )
+                        }
+                    </>,
+                    count: this.state.message_count,
+                    tooltip: "Message"
+                });
+        }
+        if (this.isLoggedIn)
+            if (this.props.header?.built_in?.access ?? true)
+                icons.push({
+                    src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png", alt: "Access", onClicked: () =>
+                    {
+                        this.setState(prev => ({ ...prev, showAccessListDialog: true }));
+                    },
+                    children: <>
+                        {
+                            (this.state.showAccessListDialog) && <NSAAccessListDialog {...this.props} onClose={() =>
+                            {
+                                this.setState(prev => ({ ...prev, showAccessListDialog: false }));
+                            }} />
+                        }
+                    </>,
+                    tooltip: "Access"
+                });
+        if (this.isLoggedIn)
+            if (this.props.header?.built_in?.workspace ?? true)
+                icons.push({
+                    src: "https://static.namirasoft.com/image/namirasoft/workspace/logo/base.png", alt: "Workspace", onClicked: () =>
+                    {
+                        this.setState(prev => ({ ...prev, showWorkspaceListDialog: true }));
+                    },
+                    children: <>
+                        {
+                            (this.state.showWorkspaceListDialog) && <NSAWorkspaceListDialog {...this.props} onClose={() =>
+                            {
+                                this.setState(prev => ({ ...prev, showWorkspaceListDialog: false }));
+                            }} />
+                        }
+                    </>,
+                    tooltip: "Workspace List"
+                });
+        if (this.props.header?.built_in?.product ?? true)
+            icons.push({
+                src: "https://static.namirasoft.com/image/concept/product-list/white.svg", alt: "Product", onClicked: () =>
+                {
+                    this.setState(prev => ({ ...prev, showProductListDialog: true }));
+                },
+                children: <>
+                    {
+                        (this.state.showProductListDialog) && <NSAProductListDialog {...this.props} onClose={() =>
+                        {
+                            this.setState(prev => ({ ...prev, showProductListDialog: false }));
+                        }} >
+                            <></>
+                        </NSAProductListDialog>
+                    }
+                </>,
+                tooltip: "Product List"
+            });
+
+        if (this.isLoggedIn)
+            if (this.props.header?.built_in?.user ?? true)
+                icons.push({
+                    src: "https://static.namirasoft.com/image/concept/user/white.svg",
+                    alt: "User",
+                    onClicked: () =>
+                    {
+                        this.setState(prev => ({ ...prev, showUserDialog: true }));
+                    },
+                    children: <>
+                        {
+                            (this.state.showUserDialog) &&
+                            <NSAUserDialog
+                                {...this.props}
+                                client={client}
+                                onClose={() => this.setState(prev => ({ ...prev, showUserDialog: false }))}
+                            >
+                                <></>
+                            </NSAUserDialog>
+                        }
+                    </>,
+                    tooltip: "User"
+                });
+
+        let name = "";
+        if (this.props.pages)
+            name = NamingConvention.lower_case_underscore.convert(this.props.pages.entity.name, NamingConvention.Pascal_Case_Space);
+
+        let getIDs: (() => string[]) | null = null;
+        let getRows: (() => RowType[]) | null = null;
+        if (this.props.pages?.list)
+        {
+            getIDs = () => { return this.NSASectionList_Ref.current?.getSelectedIDs() ?? []; };
+            getRows = () => { return this.NSASectionList_Ref.current?.getSelectedRows() ?? []; };
+        }
+        if (this.props.pages?.edit)
+        {
+            getIDs = () => [id].filter(id => id) as string[];
+            getRows = () => [this.NSASectionEdit_Ref.current?.getRow()].filter(row => row) as RowType[];
+        }
+        if (this.props.pages?.view)
+        {
+            getIDs = () => [id].filter(id => id) as string[];
+            getRows = () => [this.NSASectionView_Ref.current?.getRow()].filter(row => row) as RowType[];
+        }
+
+        let action: NSBarActionProps | undefined = { title: "", description: "", menus: {} };
+        if (this.props.action?.title)
+            action.title = this.props.action.title;
+        if (this.props.action?.description)
+            action.description = this.props.action.description;
+        if (this.props.action?.menus != null)
+            action.menus = { ...this.props.action?.menus };
+
+        if (getIDs && getRows)
+            if (this.props.pages?.entity.client.getMenus)
+            {
+                let menus = this.props.pages?.entity.client.getMenus(getIDs, getRows);
+                for (let key of Object.keys(menus))
+                {
+                    if (!action.menus)
+                        action.menus = {};
+                    if (!action.menus[key])
+                        action.menus[key] = [];
+                    action.menus[key].push(...menus[key]);
+                }
+            }
+
+        let name_apply = "Apply";
+        let name_actions = "Actions";
+        if (!action.menus)
+            action.menus = {};
+        action.menus[name_apply] = [];
+        action.menus[name_actions] = [];
+
+        if (this.props.pages?.edit)
+        {
+            if (!action.title)
+                action.title = (this.props.pages.edit.isEdit ? "Edit" : "New") + " " + name;
+
+            // Menu
+            if (this.props.pages.edit.ui.action?.menus.apply ?? true)
+                action.menus[name_apply].push(Actions.apply({
+                    action: (onFinished) =>
+                    {
+                        if (this.props.pages?.edit)
+                            this.NSASectionEdit_Ref.current?.onApply(onFinished);
+                    }
+                }));
+        }
+        else if (this.props.pages)
+        {
+            if (this.props.pages.entity.client.getNewURL)
+                if (this.props.pages.entity.server.create)
+                    if (this.props.pages.ui?.action?.menus._new ?? true)
+                        action.menus[name_apply].push(Actions._new(this.props, this.props.pages.entity));
+        }
+
+        if (getIDs)
+            if (this.props.pages)
+            {
+                if (this.props.pages.entity.client.getListURL)
+                    if (this.props.pages.entity.server.list)
+                        if (this.props.pages.ui?.action?.menus.list ?? true)
+                            action.menus[name_actions].push(Actions.list(this.props, this.props.pages.entity));
+
+                if (this.props.pages.entity.client.getViewURL)
+                    if (this.props.pages.entity.server.get)
+                        if (this.props.pages.ui?.action?.menus.view ?? true)
+                            action.menus[name_actions].push(Actions.view(this.props, this.props.pages.entity, getIDs));
+
+                if (this.props.pages.ui?.action?.menus.view_history ?? true)
+                    action.menus[name_actions].push(Actions.viewHistory(getIDs));
+
+                if (this.props.pages.entity.client.getCopyURL)
+                    if (this.props.pages.entity.server.create)
+                        if (this.props.pages.ui?.action?.menus.copy ?? true)
+                            action.menus[name_actions].push(Actions.copy(this.props, this.props.pages.entity, getIDs));
+
+                if (this.props.pages.entity.client.getEditURL)
+                    if (this.props.pages.entity.server.update)
+                        if (this.props.pages.ui?.action?.menus.edit ?? true)
+                            action.menus[name_actions].push(Actions.edit(this.props, this.props.pages.entity, getIDs));
+
+                if (this.props.pages.entity.server.delete)
+                    if (this.props.pages.ui?.action?.menus.delete ?? true)
+                        action.menus[name_actions].push(Actions.delete(getIDs, {
+                            action: showDeleteDialog,
+                            showLoading: false
+                        }));
+            }
+
+        let action_name = "";
+        let content;
+        if (this.props.pages?.list)
+        {
+            action_name = "List";
+            content = <FieldCacheService
+                {...this.props}
+                render={rows =>
+                {
+                    if (this.props.pages?.list)
+                        return <NSASectionList<RowType, RowTypeInput>
+                            ref={this.NSASectionList_Ref}
+                            {...this.props}
+                            {...this.props.pages.list}
+                            entity={this.props.pages.entity}
+                            onIDsChanged={() =>
+                            {
+                                this.setState(prev => ({ ...prev }));
+                                this.props.pages?.list?.onIDsChanged?.();
+                            }}
+                            ctf={{
+                                enabled: this.hasCFT,
+                                rows
+                            }}
+                        >
+                            {this.props.children}
+                        </NSASectionList>;
+                    return <></>;
+                }}
+            />;
+        }
+        else if (this.props.pages?.edit)
+        {
+            if (this.props.pages.edit.isEdit)
+                action_name = "Edit";
+            else
+                action_name = "New";
+            content = <FieldCacheService
+                {...this.props}
+                render={rows =>
+                {
+                    if (this.props.pages?.edit)
+                        return <NSASectionEdit
+                            ref={this.NSASectionEdit_Ref}
+                            {...this.props}
+                            {...this.props.pages.edit}
+                            entity={this.props.pages.entity}
+                            ctf={{
+                                enabled: this.hasCFT,
+                                rows
+                            }}
+                            onRowLoaded={(row) =>
+                            {
+                                this.setState(prev => ({ ...prev }), () =>
+                                {
+                                    this.props.pages?.edit?.onRowLoaded?.(row);
+                                });
+                            }}
+                            model={{
+                                id,
+                                row: null
+                            }}
+                        >
+                            {this.props.children}
+                        </NSASectionEdit>;
+                    return <></>;
+                }}
+            />;
+        }
+        else if (this.props.pages?.view)
+        {
+            action_name = "View";
+
+            content = <FieldCacheService
+                {...this.props}
+                render={rows =>
+                {
+                    if (this.props.pages?.view)
+                        return <NSASectionView
+                            ref={this.NSASectionView_Ref}
+                            {...this.props}
+                            {...this.props.pages.view}
+                            entity={this.props.pages.entity}
+                            ctf={{
+                                enabled: this.hasCFT,
+                                rows
+                            }}
+                            onRowLoaded={(row) =>
+                            {
+                                this.setState(prev => ({ ...prev }), () =>
+                                {
+                                    this.props.pages?.view?.onRowLoaded?.(row);
+                                });
+                            }}
+                            model={{
+                                id,
+                                row: null
+                            }}
+                        >
+                            {this.props.children}
+                        </NSASectionView>;
+                    return <></>;
+                }}
+            />;
+        }
+        else
+            content = this.props.children;
+
+        let fullname = "";
+        if (this.props.pages?.entity.name)
+        {
+            let Name_Pascal_Space = NamingConvention.lower_case_underscore.convert(this.props.pages.entity.name, NamingConvention.Pascal_Case_Space);
+            if (action_name === "List")
+                fullname = Name_Pascal_Space + " " + action_name;
+            else
+                fullname = action_name + " " + Name_Pascal_Space;
+        }
+
+        if (!this.state.product)
+            return <NSLoading title='Loading Namirasoft Product ...' />;
+
+        let action_title = action?.title ?? "";
+        if (!action_title)
+            action_title = fullname;
+        if (!action_title)
+            action_title = this.state.product?.name
+
+        let action_description = action?.description ?? "";
+        if (!action_description)
+            action_description = this.state.product?.description ?? "";
+
+        let scope = this.props.scope ?? `${this.state.product.name} Console`;
+        let logo = this.props.logo ?? this.state.product.logo ?? "";
+        let background = this.props.background?.image ?? this.state.product.background ?? "";
+
+        this.onDidMounted_Ready = true;
+
+        let user_id = this.props.account.token_manager.getUserData(x => x.id, "");
+        let user_first_name = this.props.account.token_manager.getUserData(x => x.first_name, "");
+        let user_last_name = this.props.account.token_manager.getUserData(x => x.last_name, "");
+        let user_email = this.props.account.token_manager.getUserData(x => x.email, "");
+        let user_phone = this.props.account.token_manager.getUserData(x => x.phone ?? "", "");
+        return (
+            <div className="d-flex">
+                {
+                    (this.props.master_menu ?? true) &&
+                    <NSAMasterMenu
+                        {...this.props}
+                        open={this.state.showMasterMenu}
+                        setOpen={(open) =>
+                        {
+                            this.cache_master_menu.set({ open });
+                            this.setState(() => ({ showMasterMenu: open }));
+                        }}
+                    />
+                }
+                <FieldCacheService
+                    {...this.props}
+                    render={(ctf_rows) => (
+                        <NSLayout
+                            {...this.props}
+                            scope={scope}
+                            logo={logo}
+                            background={{ image: background, attachment: this.props.background?.attachment, size: this.props.background?.size }}
+                            header={{
+                                enabled: this.props.header?.enabled,
+                                right: {
+                                    icons: [...icons, ...(this.props.header?.right?.icons ?? [])],
+                                },
+                                left: {
+                                    title: this.props.header?.left?.title
+                                },
+                                mega_menu: this.props.header?.mega_menu,
+                                onCollapse: () =>
+                                {
+                                    this.setState((prev) => ({ showMasterMenu: !prev.showMasterMenu }))
+                                },
+                                filters_postprocessor: (filters) => NSALayout_Field.postprocess(filters, ctf_rows),
+                            }}
+                            action={{
+                                title: action_title,
+                                description: action_description,
+                                menus: action.menus,
+                                children: this.props.action?.children
+                            }}
+                            isLoggedIn={this.props.account?.token_manager?.exists}
+                            notifications={this.props.notifier.getNotifications()}
+                        >
+                            <Helmet>
+                                <meta name="ns-account-user-id" content={user_id} />
+                                <meta name="ns-account-user-first-name" content={user_first_name} />
+                                <meta name="ns-account-user-last-name" content={user_last_name} />
+                                <meta name="ns-account-user-email" content={user_email} />
+                                <meta name="ns-account-user-phone" content={user_phone} />
+                            </Helmet>
+                            {
+                                this.state.showDeleteDialog &&
+                                <NSDialogDelete
+                                    title={"Delete Confirmation"}
+                                    description={
+                                        (getIDs && getIDs().length > 1)
+                                            ? `Are you sure you want to delete ${getIDs().length} ${name}s?`
+                                            : `Are you sure you want to delete ${name}?`
+                                    }
+                                    onClose={hideDeleteDialog}
+                                    onNo={{ action: hideDeleteDialog, showLoading: false }}
+                                    show_as_code={false}
+                                    onYes={{
+                                        showLoading: false,
+                                        action: (onFinished) =>
+                                        {
+                                            try
+                                            {
+                                                let ids = getIDs ? getIDs() : [];
+                                                if (ids.length === 0)
+                                                    throw new Error("Nothing was found to delete.");
+                                                this.runDelete(ids, name);
+                                            }
+                                            catch (error: any)
+                                            {
+                                                this.props.notifier.onError(error);
+                                            }
+                                            this.setState(prev => ({ ...prev, showDeleteDialog: false }));
+                                            onFinished();
+                                        }
+                                    }}
+                                >
+                                    <></>
+                                </NSDialogDelete>}
+                            {
+                                content
+                            }
+                        </NSLayout>
+                    )}
+                />
+                <NSATaskBar<string>
+                    ref={this.NSATaskBar_Ref}
+                    title={this.state.delete_title}
+                    items={this.state.delete_ids}
+                    handler={async (id) =>
+                    {
+                        const del = this.props.pages?.entity.server.delete;
+                        if (del)
+                            await del(id);
+                    }}
+                />
+            </div >
+        );
+    }
 }