namirasoft-account-react 1.5.4 → 1.5.6

package/src/layouts/NSALayout.tsx

@@ -1,740 +1,740 @@
-import { NamirasoftAccountClient } from 'namirasoft-account-client';
-import { ProductFullRow } from 'namirasoft-api-product';
-import { CacheService, EnvService, IStorageLocal, NamingConvention } from 'namirasoft-core';
-import { EntityResolveResponseRow } from 'namirasoft-field';
-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 } 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 { NSARouterMakerProps } from '../NSARouterMakerProps';
-import { UseParams } from '../UseParams';
-import { Actions } from './Actions';
-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, NSARouterMakerProps
-{
-    action?: NSBarActionProps;
-    title?: NSBarTitleProps;
-    alerts?: NSBarAlertProps[];
-    pages?: NSALayoutPagesProps<RowType, RowTypeInput>;
-    children: JSX.Element | JSX.Element[];
-    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;
-    ctf_enabled: boolean;
-    ctf_rows: EntityResolveResponseRow | null;
-}
-
-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_field: CacheService<EntityResolveResponseRow>;
-    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.pages.entity.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 Fields
-        this.cache_field = FieldCacheService.get(this.props.account.token_manager, this.props.pages?.entity.product_id, this.props.pages?.entity.name, props.notifier.onError)
-
-        // 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,
-            ctf_enabled: this.hasCFT,
-            ctf_rows: null
-        };
-    }
-    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.hasCFT)
-            if (this.props.pages?.entity)
-            {
-                this.cache_field.get().then(res =>
-                {
-                    this.setState(prev => { return { ...prev, ctf_rows: res } });
-                });
-            }
-
-        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 = <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.state.ctf_enabled,
-                    rows: this.state.ctf_rows
-                }}
-                deleteFieldCache={() => { this.cache_field.del(); }}
-            >
-                {this.props.children}
-            </NSASectionList>
-        }
-        else if (this.props.pages?.edit)
-        {
-            if (this.props.pages.edit.isEdit)
-                action_name = "Edit";
-            else
-                action_name = "New";
-            content = <>
-                <NSASectionEdit
-                    ref={this.NSASectionEdit_Ref}
-                    {...this.props}
-                    {...this.props.pages.edit}
-                    entity={this.props.pages.entity}
-                    ctf={{
-                        enabled: this.state.ctf_enabled,
-                        rows: this.state.ctf_rows
-                    }}
-                    deleteFieldCache={() => { this.cache_field.del(); }}
-                    onRowLoaded={(row) =>
-                    {
-                        this.setState(prev => ({ ...prev }), () =>
-                        {
-                            this.props.pages?.edit?.onRowLoaded?.(row);
-                        });
-                    }}
-                    model={{
-                        id,
-                        row: null
-                    }}
-                >
-                    {this.props.children}
-                </NSASectionEdit>
-            </>;
-        }
-        else if (this.props.pages?.view)
-        {
-            action_name = "View";
-            content = <NSASectionView
-                ref={this.NSASectionView_Ref}
-                {...this.props}
-                {...this.props.pages.view}
-                entity={this.props.pages.entity}
-                ctf={{
-                    enabled: this.state.ctf_enabled,
-                    rows: this.state.ctf_rows
-                }}
-                deleteFieldCache={() => { this.cache_field.del(); }}
-                onRowLoaded={(row) =>
-                {
-                    this.setState(prev => ({ ...prev }), () =>
-                    {
-                        this.props.pages?.view?.onRowLoaded?.(row);
-                    });
-                }}
-                model={{
-                    id,
-                    row: null
-                }}
-            >
-                {this.props.children}
-            </NSASectionView>
-        }
-        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 />;
-
-        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 }));
-                        }}
-                    />
-                }
-                <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 }))
-                        },
-                    }}
-                    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>}
-                    {
-                        (!this.state.ctf_enabled || (this.state.ctf_rows))
-                            ?
-                            content
-                            :
-                            <NSLoading />
-                    }
-                </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 { EntityResolveResponseRow } from 'namirasoft-field';
+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 } 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 { NSARouterMakerProps } from '../NSARouterMakerProps';
+import { UseParams } from '../UseParams';
+import { Actions } from './Actions';
+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, NSARouterMakerProps
+{
+    action?: NSBarActionProps;
+    title?: NSBarTitleProps;
+    alerts?: NSBarAlertProps[];
+    pages?: NSALayoutPagesProps<RowType, RowTypeInput>;
+    children: JSX.Element | JSX.Element[];
+    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;
+    ctf_enabled: boolean;
+    ctf_rows: EntityResolveResponseRow | null;
+}
+
+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_field: CacheService<EntityResolveResponseRow>;
+    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.pages.entity.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 Fields
+        this.cache_field = FieldCacheService.get(this.props.account.token_manager, this.props.pages?.entity.product_id, this.props.pages?.entity.name, props.notifier.onError)
+
+        // 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,
+            ctf_enabled: this.hasCFT,
+            ctf_rows: null
+        };
+    }
+    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.hasCFT)
+            if (this.props.pages?.entity)
+            {
+                this.cache_field.get().then(res =>
+                {
+                    this.setState(prev => { return { ...prev, ctf_rows: res } });
+                });
+            }
+
+        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 = <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.state.ctf_enabled,
+                    rows: this.state.ctf_rows
+                }}
+                deleteFieldCache={() => { this.cache_field.del(); }}
+            >
+                {this.props.children}
+            </NSASectionList>
+        }
+        else if (this.props.pages?.edit)
+        {
+            if (this.props.pages.edit.isEdit)
+                action_name = "Edit";
+            else
+                action_name = "New";
+            content = <>
+                <NSASectionEdit
+                    ref={this.NSASectionEdit_Ref}
+                    {...this.props}
+                    {...this.props.pages.edit}
+                    entity={this.props.pages.entity}
+                    ctf={{
+                        enabled: this.state.ctf_enabled,
+                        rows: this.state.ctf_rows
+                    }}
+                    deleteFieldCache={() => { this.cache_field.del(); }}
+                    onRowLoaded={(row) =>
+                    {
+                        this.setState(prev => ({ ...prev }), () =>
+                        {
+                            this.props.pages?.edit?.onRowLoaded?.(row);
+                        });
+                    }}
+                    model={{
+                        id,
+                        row: null
+                    }}
+                >
+                    {this.props.children}
+                </NSASectionEdit>
+            </>;
+        }
+        else if (this.props.pages?.view)
+        {
+            action_name = "View";
+            content = <NSASectionView
+                ref={this.NSASectionView_Ref}
+                {...this.props}
+                {...this.props.pages.view}
+                entity={this.props.pages.entity}
+                ctf={{
+                    enabled: this.state.ctf_enabled,
+                    rows: this.state.ctf_rows
+                }}
+                deleteFieldCache={() => { this.cache_field.del(); }}
+                onRowLoaded={(row) =>
+                {
+                    this.setState(prev => ({ ...prev }), () =>
+                    {
+                        this.props.pages?.view?.onRowLoaded?.(row);
+                    });
+                }}
+                model={{
+                    id,
+                    row: null
+                }}
+            >
+                {this.props.children}
+            </NSASectionView>
+        }
+        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 />;
+
+        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 }));
+                        }}
+                    />
+                }
+                <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 }))
+                        },
+                    }}
+                    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>}
+                    {
+                        (!this.state.ctf_enabled || (this.state.ctf_rows))
+                            ?
+                            content
+                            :
+                            <NSLoading />
+                    }
+                </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 >
+        );
+    }
 }