@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.10

package/dist/components/core/form/SolidFormActionHeader.tsx

@@ -1,28 +1,28 @@
-import { BackButton } from "../../../components/common/BackButton";
-import { SolidFormHeader } from "../../../components/common/SolidFormHeader";
+import { SolidHeaderRequestStatus } from "../../../components/common/SolidHeaderRequestStatus";
 import { useHandleFormCustomButtonClickaction } from "../../../components/common/useHandleFormCustomButtonClick";
 import { permissionExpression } from "../../../helpers/permissions";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
 import { useSearchParams } from "../../../hooks/useSearchParams";
 import { normalizeSolidFormActionPath } from "../../../helpers/routePaths";
-import { Button } from "primereact/button";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { SolidFormViewNormalHeaderButton } from "./SolidFormViewNormalHeaderButton";
 import { SolidFormViewContextMenuHeaderButton } from "./SolidFormViewContextMenuHeaderButton";
 import { hasAnyRole } from "../../../helpers/rolesHelper";
 import { useSession } from '../../../hooks/useSession'
+import { SolidFormStepper } from "../../../components/common/SolidFormStepper";
+import { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from "../../shad-cn-ui";
+import { SolidIcon, parseSolidIconMeta } from "../../shad-cn-ui/SolidIcon";
 
-export const SolidFormActionHeader = ({ formik, params, actionsAllowed, formViewLayout, solidView, solidFormViewMetaData, initialEntityData, setDeleteDialogVisible, setLayoutDialogVisible, setRedirectToList, viewMode, setViewMode, solidWorkflowFieldValue, setSolidWorkflowFieldValue, internationalisationEnabled, handleDraftPublishWorkFlow, publish, draftEnabled, onStepperUpdate,formData, isSubmitting }: any) => {
+export const SolidFormActionHeader = ({ formik, params, actionsAllowed, formViewLayout, solidView, solidFormViewMetaData, initialEntityData, setDeleteDialogVisible, setLayoutDialogVisible, setRedirectToList, viewMode, setViewMode, solidWorkflowFieldValue, setSolidWorkflowFieldValue, internationalisationEnabled, handleDraftPublishWorkFlow, publish, draftEnabled, onStepperUpdate, formData, isSubmitting, headerRequestStatusLabel }: any) => {
     const handleCustomButtonClick = useHandleFormCustomButtonClickaction();
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
-    const op = useRef(null);
     const [contextMenuHeaderButtons, setContextMenuHeaderButtons] = useState<any>([]);
     const [normalHeaderButtons, setNormalHeaderButtons] = useState<any>([]);
     const [isNavigating, setIsNavigating] = useState(false);
+    const [formActionsMenuOpen, setFormActionsMenuOpen] = useState(false);
     const createHeaderTitle = `Create ${solidView.model.displayName}`;
     const editHeaderTitle = `Edit ${solidView.model.displayName}`;
 
@@ -30,6 +30,7 @@ export const SolidFormActionHeader = ({ formik, params, actionsAllowed, formView
     const user = session?.user;
 
     const isPublished = publish && publish !== 'null';   // record is published if publish has value
+    const activeHeaderRequestStatusLabel = headerRequestStatusLabel || (isNavigating ? "Loading..." : null);
 
     useEffect(() => {
         if (solidView) {
@@ -85,109 +86,113 @@ export const SolidFormActionHeader = ({ formik, params, actionsAllowed, formView
         // router.push(`${pathname}?${params.toString()}`, { scroll: false });
 
     };
+    const menuButtonClassNames = (...parts: Array<string | false | undefined>) => parts.filter(Boolean).join(" ");
+
+    const FormActionMenuButton = ({
+        label,
+        icon,
+        onClick,
+        danger,
+    }: {
+        label: string;
+        icon?: string;
+        onClick: () => void;
+        danger?: boolean;
+    }) => (
+        <button
+            type="button"
+            className={menuButtonClassNames("solid-row-action-button", danger && "solid-row-action-button-danger")}
+            onClick={onClick}
+        >
+            {icon && (() => { const m = parseSolidIconMeta(icon); return m ? <SolidIcon name={m.name} spin={m.spin} className="solid-row-action-button-icon" /> : <i className={`${icon} solid-row-action-button-icon`} />; })()}
+            <span className="solid-row-action-button-label">{label}</span>
+        </button>
+    );
+
     const FormActionDropdown = () => {
         const canPublish = actionsAllowed.includes(permissionExpression(params.modelName, 'publish'));
         const canUnpublish = actionsAllowed.includes(permissionExpression(params.modelName, 'unpublish'));
+        const closeMenu = () => setFormActionsMenuOpen(false);
 
         return (
-            <div>
-                <div>
-                    <Button
-                        outlined
-                        severity="secondary"
-                        type="button"
-                        icon={'pi pi-cog'}
-                        size="small"
-                        className="surface-card solid-icon-button hidden md:flex"
-                        // style={{
-                        //     height: 33.06,
-                        //     width: 33.06
-                        // }}
-                        onClick={(e) =>
-                            // @ts-ignore 
-                            op.current.toggle(e)
-                        }
-                    />
-                    <Button
-                        outlined
-                        type="button"
-                        icon={'pi pi-cog'}
-                        size="small"
-                        className="surface-card solid-icon-button md:hidden"
-                        // style={{
-                        //     height: 33.06,
-                        //     width: 33.06
-                        // }}
-                        onClick={(e) =>
-                            // @ts-ignore 
-                            op.current.toggle(e)
-                        }
-                    />
+            <SolidPopover open={formActionsMenuOpen} onOpenChange={setFormActionsMenuOpen}>
+                <div className="flex gap-2">
+                    <SolidPopoverTrigger asChild>
+                        <SolidButton
+                            variant="outline"
+                            type="button"
+                            icon={'si si-cog'}
+                            size="sm"
+                            className="surface-card solid-icon-button hidden md:flex"
+                        />
+                    </SolidPopoverTrigger>
+                    <SolidPopoverTrigger asChild>
+                        <SolidButton
+                            variant="outline"
+                            type="button"
+                            icon={'si si-cog'}
+                            size="sm"
+                            className="surface-card solid-icon-button md:hidden"
+                        />
+                    </SolidPopoverTrigger>
                 </div>
-                <OverlayPanel ref={op} className="solid-custom-overlay">
-                    <div className="flex flex-column gap-1 p-1">
+                <SolidPopoverContent
+                    side="bottom"
+                    align="end"
+                    className="solid-form-actions-popover"
+                    onClick={(event) => event.stopPropagation()}
+                >
+                    <div className="solid-row-actions-menu solid-form-actions-menu">
                         {params.embeded !== true &&
                             params.id !== "new" &&
                             actionsAllowed.includes(`${permissionExpression(params.modelName, 'delete')}`) &&
                             !isPublished &&
                             solidView?.layout?.attrs?.showDeleteFormButton !== false &&
-                            !formViewLayout.attrs.readonly &&
-                            <Button
-                                text
-                                type="button"
-                                className="w-8rem text-left gap-2"
-                                label="Delete"
-                                size="small"
-                                iconPos="left"
-                                severity="danger"
-                                icon={'pi pi-trash'}
-                                onClick={() => setDeleteDialogVisible(true)}
-                            />
-                        }
-                        <Button
-                            text
-                            type="button"
-                            className="w-8rem text-left gap-2 purple-200"
+                            !formViewLayout.attrs.readonly && (
+                                <FormActionMenuButton
+                                    label="Delete"
+                                    icon="si si-trash"
+                                    danger
+                                    onClick={() => {
+                                        setDeleteDialogVisible(true);
+                                        closeMenu();
+                                    }}
+                                />
+                            )}
+                        <FormActionMenuButton
                             label="Layout"
-                            size="small"
-                            iconPos="left"
-                            severity="contrast"
-                            icon={'pi pi-objects-column'}
-                            onClick={() => setLayoutDialogVisible(true)}
+                            icon="si si-objects-column"
+                            onClick={() => {
+                                setLayoutDialogVisible(true);
+                                closeMenu();
+                            }}
                         />
                         {draftEnabled && params.id !== 'new' && (
                             <>
                                 {!isPublished && canPublish && (
-                                    <Button
-                                        text
-                                        type="button"
-                                        className="w-8rem text-left gap-2 purple-200"
+                                    <FormActionMenuButton
                                         label="Publish"
-                                        size="small"
-                                        iconPos="left"
-                                        severity="contrast"
-                                        icon="pi pi-cloud-upload"
-                                        onClick={() => handleDraftPublishWorkFlow('publish')}
+                                        icon="si si-cloud-upload"
+                                        onClick={() => {
+                                            handleDraftPublishWorkFlow('publish');
+                                            closeMenu();
+                                        }}
                                     />
                                 )}
 
                                 {isPublished && canUnpublish && (
-                                    <Button
-                                        text
-                                        type="button"
-                                        className="w-8rem text-left gap-2 purple-200"
+                                    <FormActionMenuButton
                                         label="Unpublish"
-                                        size="small"
-                                        iconPos="left"
-                                        severity="contrast"
-                                        icon="pi pi-cloud-download"
-                                        onClick={() => handleDraftPublishWorkFlow('unpublish')}
+                                        icon="si si-cloud-download"
+                                        onClick={() => {
+                                            handleDraftPublishWorkFlow('unpublish');
+                                            closeMenu();
+                                        }}
                                     />
                                 )}
                             </>
                         )}
 
-
                         {contextMenuHeaderButtons.map((button: any, index: number) => {
                             return (
                                 <SolidFormViewContextMenuHeaderButton
@@ -198,11 +203,11 @@ export const SolidFormActionHeader = ({ formik, params, actionsAllowed, formView
                                     formData={formData}
                                     solidFormViewMetaData={solidFormViewMetaData}
                                     handleCustomButtonClick={handleCustomButtonClick}
+                                    variant="menu"
+                                    onActionComplete={closeMenu}
                                 />
-
                             )
-                        })
-                        }
+                        })}
                         <div className="lg:hidden flex flex-column gap-1">
                             {normalHeaderButtons.map((button: any, index: number) => {
                                 return (
@@ -214,293 +219,310 @@ export const SolidFormActionHeader = ({ formik, params, actionsAllowed, formView
                                         formData={formData}
                                         solidFormViewMetaData={solidFormViewMetaData}
                                         handleCustomButtonClick={handleCustomButtonClick}
+                                        variant="menu"
+                                        onActionComplete={closeMenu}
                                     />
-
                                 )
-                            })
-                            }
+                            })}
                             {params.embeded !== true && params.draftEnabled &&
                                 !formViewLayout.attrs.readonly && params.publish !== 'null' &&
-                                formik.dirty &&
-                                <div>
-                                    <Button
+                                formik.dirty && (
+                                    <FormActionMenuButton
                                         label="Draft"
-                                        size="small"
-                                        type="button"
+                                        onClick={() => { }}
                                     />
-                                </div>
-                            }
+                                )}
                         </div>
                     </div>
-                </OverlayPanel>
-            </div>
+                </SolidPopoverContent>
+            </SolidPopover>
         )
     }
     return (
         <>
-            <div className="solid-form-header">
-                {params.id === "new" ? (
-                    <>
-                        <div className="flex align-items-center gap-3">
-                            {params.embeded !== true && <BackButton />}
-                            <div className="form-wrapper-title solid-text-wrapper"> {createHeaderTitle}</div>
-                        </div>
-                        <div className="flex solid-header-buttons-wrapper">
-                            <div className="hidden lg:flex solid-header-buttons-wrapper">
-                                {normalHeaderButtons.map((button: any, index: number) => {
-                                    return (
-                                        <SolidFormViewNormalHeaderButton
-                                            key={index}
-                                            button={button}
-                                            params={params}
-                                            formik={formik}
-                                            formData={formData}
-                                            solidFormViewMetaData={solidFormViewMetaData}
-                                            handleCustomButtonClick={handleCustomButtonClick}
-                                        />
-
-                                    )
-                                })
+            <div className="page-header solid-list-toolbar flex-column lg:flex-row">
+                <div className="flex justify-content-between w-full solid-form-toolbar-row">
+                    {params.id === "new" ? (
+                        <>
+                            <div className="flex gap-3 align-items-center solid-form-toolbar-left">
+                                {/* {params.embeded !== true && <BackButton />}*/}
+                                {params.embeded == true &&
+                                    <p className="m-0 view-title solid-text-wrapper">{createHeaderTitle}</p>
+                                }
+                                {params.embeded !== true &&
+                                    <SolidFormStepper
+                                        solidFormViewMetaData={solidFormViewMetaData}
+                                        initialEntityData={initialEntityData}
+                                        modelName={params.modelName}
+                                        id={params.id}
+                                        solidWorkflowFieldValue={solidWorkflowFieldValue}
+                                        setSolidWorkflowFieldValue={setSolidWorkflowFieldValue}
+                                        onStepperUpdate={onStepperUpdate}
+                                    ></SolidFormStepper>
                                 }
                             </div>
-                            {params.embeded !== true &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'create')}`) &&
-                                !formViewLayout.attrs.readonly &&
-                                formik.dirty &&
-                                <div>
-                                    <Button
-                                        label="Save"
-                                        size="small"
-                                        type="submit"
-                                        className="hidden lg:flex"
-                                        loading={isSubmitting}
-                                        disabled={isSubmitting}
-                                    />
-                                    <Button
-                                        size="small"
-                                        type="submit"
-                                        className="lg:hidden solid-icon-button"
-                                        icon="pi pi-check"
-                                        loading={isSubmitting}
-                                        disabled={isSubmitting}
-                                    />
+                            <div className="flex align-items-center solid-header-buttons-wrapper solid-form-toolbar-actions">
+                                <SolidHeaderRequestStatus label={activeHeaderRequestStatusLabel} />
+                                <div className="hidden lg:flex solid-header-buttons-wrapper">
+                                    {normalHeaderButtons.map((button: any, index: number) => {
+                                        return (
+                                            <SolidFormViewNormalHeaderButton
+                                                key={index}
+                                                button={button}
+                                                params={params}
+                                                formik={formik}
+                                                formData={formData}
+                                                solidFormViewMetaData={solidFormViewMetaData}
+                                                handleCustomButtonClick={handleCustomButtonClick}
+                                            />
+
+                                        )
+                                    })
+                                    }
                                 </div>
-                            }
-                            <div className="hidden lg:flex">
-                                {params.embeded !== true && params.draftEnabled &&
-                                    !formViewLayout.attrs.readonly && params.publish !== 'null' &&
+                                {params.embeded !== true &&
+                                    actionsAllowed.includes(`${permissionExpression(params.modelName, 'create')}`) &&
+                                    !formViewLayout.attrs.readonly &&
                                     formik.dirty &&
                                     <div>
-                                        <Button
-                                            label="Draft"
-                                            size="small"
-                                            type="button"
+                                        <SolidButton
+                                            label="Save"
+                                            size="sm"
+                                            type="submit"
+                                            className="hidden lg:flex"
+                                            loading={isSubmitting}
+                                            disabled={isSubmitting}
+                                        />
+                                        <SolidButton
+                                            size="sm"
+                                            type="submit"
+                                            className="lg:hidden solid-icon-button"
+                                            icon="si si-check"
+                                            loading={isSubmitting}
+                                            disabled={isSubmitting}
                                         />
                                     </div>
                                 }
-                            </div>
-                            {params.embeded == true &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'create')}`) &&
-                                !formViewLayout.attrs.readonly &&
-                                formik.dirty &&
-                                <div>
-                                    <Button
-                                        label="Save"
-                                        size="small"
-                                        onClick={() => {
-                                            setRedirectToList(params.redirectToPath ? true : false);
-                                        }}
-                                        type="submit"
-                                        className="hidden lg:flex"
-                                        loading={isSubmitting}
-                                        disabled={isSubmitting}
-                                    />
-                                    <Button
-                                        size="small"
-                                        onClick={() => {
-                                            setRedirectToList(params.redirectToPath ? true : false);
-                                        }}
-                                        type="submit"
-                                        className="lg:hidden solid-icon-button"
-                                        icon="pi pi-check"
-                                        loading={isSubmitting}
-                                        disabled={isSubmitting}
-                                    />
-                                </div>
-                            }
-                            {params.embeded == true &&
-                                <>
-                                    <div className="hidden lg:flex">
+                                <div className="hidden lg:flex">
+                                    {params.embeded !== true && params.draftEnabled &&
+                                        !formViewLayout.attrs.readonly && params.publish !== 'null' &&
+                                        formik.dirty &&
                                         <div>
-                                            <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse ' style={{ minWidth: 66 }} />
+                                            <SolidButton
+                                                label="Draft"
+                                                size="sm"
+                                                type="button"
+                                            />
                                         </div>
+                                    }
+                                </div>
+                                {params.embeded == true &&
+                                    actionsAllowed.includes(`${permissionExpression(params.modelName, 'create')}`) &&
+                                    !formViewLayout.attrs.readonly &&
+                                    formik.dirty &&
+                                    <div>
+                                        <SolidButton
+                                            label="Save"
+                                            size="sm"
+                                            onClick={() => {
+                                                setRedirectToList(params.redirectToPath ? true : false);
+                                            }}
+                                            type="submit"
+                                            className="hidden lg:flex"
+                                            loading={isSubmitting}
+                                            disabled={isSubmitting}
+                                        />
+                                        <SolidButton
+                                            size="sm"
+                                            onClick={() => {
+                                                setRedirectToList(params.redirectToPath ? true : false);
+                                            }}
+                                            type="submit"
+                                            className="lg:hidden solid-icon-button"
+                                            icon="si si-check"
+                                            loading={isSubmitting}
+                                            disabled={isSubmitting}
+                                        />
                                     </div>
-                                    <div className="lg:hidden">
-                                        <Button outlined size="small" type="button" icon="pi pi-times" onClick={() => params.handlePopupClose()} className='bg-primary-reverse solid-icon-button' />
-                                    </div>
-                                </>
-                            }
-                            {/* {params.embeded !== true &&
+                                }
+                                {params.embeded == true &&
+                                    <>
+                                        <div className="hidden lg:flex">
+                                            <div>
+                                                <SolidButton variant="outline" size="sm" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse ' style={{ minWidth: 66 }} />
+                                            </div>
+                                        </div>
+                                        <div className="lg:hidden">
+                                            <SolidButton variant="outline" size="sm" type="button" icon="si si-times" onClick={() => params.handlePopupClose()} className='bg-primary-reverse solid-icon-button' />
+                                        </div>
+                                    </>
+                                }
+                                {/* {params.embeded !== true &&
                                 <SolidCancelButton />
                             } */}
-                            {
-                                formViewLayout?.attrs?.showCogWheelFormButton !== false &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'create')}`) &&
-                                <FormActionDropdown />
-                            }
-                        </div>
-                    </>
-                ) : (
-                    <>
-                        <div className="flex align-items-center gap-3">
-                            {params.embeded !== true && <BackButton />}
-                            <div className="form-wrapper-title solid-text-wrapper"> {viewMode === "edit" ? editHeaderTitle : solidView.model.displayName}</div>
-                        </div>
-
-                        <div className="flex solid-header-buttons-wrapper">
-                            <div className="hidden lg:flex solid-header-buttons-wrapper">
-                                {normalHeaderButtons.map((button: any, index: number) => {
-                                    return (
-                                        // <Button
-                                        //     text
-                                        //     type="button"
-                                        //     className="w-full text-left gap-2"
-                                        //     label={button.attrs.label}
-                                        //     size="small"
-                                        //     iconPos="left"
-                                        //     severity="contrast"
-                                        //     icon={button?.attrs?.className ? button?.attrs?.className : "pi pi-pencil"}
-                                        //     onClick={() => {
-                                        //         const event = {
-                                        //             action: button.attrs.action,
-                                        //             params,
-                                        //             formik,
-                                        //             solidFormViewMetaData: solidFormViewMetaData.data
-                                        //         }
-                                        //         handleCustomButtonClick(button.attrs, event)
-                                        //     }}
-                                        // />
-                                        <SolidFormViewNormalHeaderButton
-                                            key={index}
-                                            button={button}
-                                            params={params}
-                                            formik={formik}
-                                            formData={formData}
-                                            solidFormViewMetaData={solidFormViewMetaData}
-                                            handleCustomButtonClick={handleCustomButtonClick}
-                                        />
-                                    )
-                                })
+                                {
+                                    formViewLayout?.attrs?.showCogWheelFormButton !== false &&
+                                    actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) &&
+                                    actionsAllowed.includes(`${permissionExpression(params.modelName, 'create')}`) &&
+                                    <FormActionDropdown />
                                 }
                             </div>
-                            {
-                                !formViewLayout.attrs.readonly &&
-                                formViewLayout.attrs?.showAddFormButton !== false &&
-                                params.embeded !== true &&
-                                viewMode === "view" &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'create')}`) &&
-                                <>
-                                    <div className="hidden lg:flex">
-                                    <div>
-                                        <Button type="button" label="Add" size='small' onClick={() => {
-                                            setIsNavigating(true);
-                                            router.replace(`${normalizeSolidFormActionPath(pathname, "form")}/new?viewMode=edit`);
-                                        }} loading={isNavigating} disabled={isNavigating} />
-                                    </div>
-                                    </div>
-                                    <div className="lg:hidden">
-                                        <Button type="button" icon="pi pi-plus" size='small' onClick={() => {
-                                            setIsNavigating(true);
-                                            router.replace(`${normalizeSolidFormActionPath(pathname, "form")}/new?viewMode=edit`);
-                                        }} className="p-button-sm solid-icon-button" loading={isNavigating} disabled={isNavigating} />
-                                    </div>
-                                </>
-                            }
-                            {
-                                !formViewLayout.attrs.readonly &&
-                                formViewLayout.attrs?.showEditFormButton !== false &&
-                                params.embeded !== true &&
-                                viewMode === "view" &&
-                                !isPublished &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) &&
-                                <>
-                                    <div className="hidden lg:flex">
-                                        <div>
-                                            <Button label="Edit" size="small" onClick={() => updateViewMode("edit")} type="button" />
+                        </>
+                    ) : (
+                        <>
+                            <div className="flex gap-3 align-items-center solid-form-toolbar-left">
+                                {params.embeded !== true &&
+                                    <SolidFormStepper
+                                        solidFormViewMetaData={solidFormViewMetaData}
+                                        initialEntityData={initialEntityData}
+                                        modelName={params.modelName}
+                                        id={params.id}
+                                        solidWorkflowFieldValue={solidWorkflowFieldValue}
+                                        setSolidWorkflowFieldValue={setSolidWorkflowFieldValue}
+                                        onStepperUpdate={onStepperUpdate}
+                                    ></SolidFormStepper>
+                                }
+                                {/* {params.embeded !== true && <BackButton />} */}
+                                {params.embeded == true &&
+                                    <p className="m-0 view-title solid-text-wrapper">{viewMode === "edit" ? editHeaderTitle : solidView.model.displayName}</p>
+                                }
+                            </div>
+
+                            <div className="flex align-items-center solid-header-buttons-wrapper solid-form-toolbar-actions">
+                                <SolidHeaderRequestStatus label={activeHeaderRequestStatusLabel} />
+                                <div className="hidden lg:flex solid-header-buttons-wrapper">
+                                    {normalHeaderButtons.map((button: any, index: number) => {
+                                        return (
+                                            // <SolidButton
+                                            //     text
+                                            //      type="button"
+                                            //     className="w-full text-left gap-2"
+                                            //     label={button.attrs.label}
+                                            //     size="small"
+                                            //     iconPos="left"
+                                            //     severity="contrast"
+                                            //     icon={button?.attrs?.className ? button?.attrs?.className : "si si-pencil"}
+                                            //     onClick={() => {
+                                            //         const event = {
+                                            //             action: button.attrs.action,
+                                            //             params,
+                                            //             formik,
+                                            //             solidFormViewMetaData: solidFormViewMetaData.data
+                                            //         }
+                                            //         handleCustomButtonClick(button.attrs, event)
+                                            //     }}
+                                            // />
+                                            <SolidFormViewNormalHeaderButton
+                                                key={index}
+                                                button={button}
+                                                params={params}
+                                                formik={formik}
+                                                formData={formData}
+                                                solidFormViewMetaData={solidFormViewMetaData}
+                                                handleCustomButtonClick={handleCustomButtonClick}
+                                            />
+                                        )
+                                    })
+                                    }
+                                </div>
+                                {
+                                    !formViewLayout.attrs.readonly &&
+                                    formViewLayout.attrs?.showAddFormButton !== false &&
+                                    params.embeded !== true &&
+                                    viewMode === "view" &&
+                                    actionsAllowed.includes(`${permissionExpression(params.modelName, 'create')}`) &&
+                                    <>
+                                        <div className="hidden lg:flex">
+                                            <div>
+                                                <SolidButton type="button" label="Add" size='sm' onClick={() => {
+                                                    setIsNavigating(true);
+                                                    router.replace(`${normalizeSolidFormActionPath(pathname, "form")}/new?viewMode=edit`);
+                                                }} loading={isNavigating} disabled={isNavigating} />
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div className="lg:hidden">
-                                        <Button icon="pi pi-pencil" size="small" onClick={() => updateViewMode("edit")} type="button" className="p-button-sm solid-icon-button " />
-                                    </div>
-                                </>
-                            }
+                                        <div className="lg:hidden">
+                                            <SolidButton type="button" icon="si si-plus" size='sm' onClick={() => {
+                                                setIsNavigating(true);
+                                                router.replace(`${normalizeSolidFormActionPath(pathname, "form")}/new?viewMode=edit`);
+                                            }} className="solid-icon-button" loading={isNavigating} disabled={isNavigating} />
+                                        </div>
+                                    </>
+                                }
+                                {
+                                    !formViewLayout.attrs.readonly &&
+                                    formViewLayout.attrs?.showEditFormButton !== false &&
+                                    params.embeded !== true &&
+                                    viewMode === "view" &&
+                                    !isPublished &&
+                                    actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) &&
+                                    <>
+                                        <div className="hidden lg:flex">
+                                            <div>
+                                                <SolidButton label="Edit" size="sm" onClick={() => updateViewMode("edit")} type="button" />
+                                            </div>
+                                        </div>
+                                        <div className="lg:hidden">
+                                            <SolidButton icon="si si-pencil" size="sm" onClick={() => updateViewMode("edit")} type="button" className="solid-icon-button" />
+                                        </div>
+                                    </>
+                                }
 
-                            {
-                                params.embeded !== true &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) &&
-                                !formViewLayout.attrs.readonly &&
-                                formik.dirty &&
+                                {
+                                    params.embeded !== true &&
+                                    actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) &&
+                                    !formViewLayout.attrs.readonly &&
+                                    formik.dirty &&
 
-                                <div>
-                                    <Button label="Save" size="small" type="submit"  className="hidden lg:flex" loading={isSubmitting} disabled={isSubmitting}/>
-                                    <Button  size="small" type="submit" className="lg:hidden solid-icon-button" icon="pi pi-check" loading={isSubmitting} disabled={isSubmitting}/>
-                                </div>
-                            }
+                                    <div>
+                                        <SolidButton label="Save" size="sm" type="submit" className="hidden lg:flex" loading={isSubmitting} disabled={isSubmitting} />
+                                        <SolidButton size="sm" type="submit" className="lg:hidden solid-icon-button" icon="si si-check" loading={isSubmitting} disabled={isSubmitting} />
+                                    </div>
+                                }
 
-                            {/* Inline */}
-                            {
-                                params.embeded == true &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) &&
-                                !formViewLayout.attrs.readonly &&
-                                formik.dirty &&
+                                {/* Inline */}
 
-                                <div>
-                                    <Button label="Save" size="small" type="submit" className="hidden lg:flex" />
-                                    <Button size="small" type="submit" className="lg:hidden solid-icon-button" icon="pi pi-check" />
 
-                                </div>
-                            }
-                            {
-                                params.embeded == true &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'delete')}`) &&
-                                formViewLayout.attrs?.showDeleteFormButton !== false &&
-                                !formViewLayout.attrs.readonly &&
-                                !isPublished &&
-                                <div>
-                                    <Button size="small" type="button" label="Delete" severity="danger" onClick={() => setDeleteDialogVisible(true)} />
-                                </div>
-                            }
-                            {
-                                params.embeded == true &&
-                                <>
-                                    <div className="hidden lg:flex">
-                                        <div>
-                                            <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse ' style={{ minWidth: 66 }} />
-                                        </div>
-                                    </div>
-                                    <div className="lg:hidden">
-                                        <Button outlined size="small" type="button" icon="pi pi-times" onClick={() => params.handlePopupClose()} className='bg-primary-reverse solid-icon-button' />
+                                {
+                                    params.embeded == true &&
+                                    actionsAllowed.includes(`${permissionExpression(params.modelName, 'delete')}`) &&
+                                    formViewLayout.attrs?.showDeleteFormButton !== false &&
+                                    !formViewLayout.attrs.readonly &&
+                                    !isPublished &&
+                                    <div>
+                                        <SolidButton size="sm" type="button" label="Delete" variant="destructive" onClick={() => setDeleteDialogVisible(true)} />
                                     </div>
-                                </>
-                            }
-                            {/* {
+                                }
+                                {
+                                    params.embeded == true &&
+                                    <>
+                                        <div className="hidden lg:flex">
+                                            <div>
+                                                <SolidButton variant="outline" size="sm" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse ' style={{ minWidth: 66 }} />
+                                            </div>
+                                        </div>
+                                        <div className="lg:hidden">
+                                            <SolidButton variant="outline" size="sm" type="button" icon="si si-times" onClick={() => params.handlePopupClose()} className='bg-primary-reverse solid-icon-button' />
+                                        </div>
+                                    </>
+                                }
+                                {/* {
                                 params.embeded !== true &&
 
                                 <SolidCancelButton />
                             } */}
-                            {
-                                formViewLayout?.attrs?.showCogWheelFormButton !== false &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) &&
-                                actionsAllowed.includes(`${permissionExpression(params.modelName, 'create')}`) &&
+                                {
+                                    formViewLayout?.attrs?.showCogWheelFormButton !== false &&
+                                    actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) &&
+                                    actionsAllowed.includes(`${permissionExpression(params.modelName, 'create')}`) &&
 
-                                <FormActionDropdown />
-                            }
-                        </div>
-                    </>
-                )}
+                                    <FormActionDropdown />
+                                }
+                            </div>
+                        </>
+                    )}
+                </div>
             </div>
-            {params.embeded !== true &&
+            {/* {params.embeded !== true &&
                 <SolidFormHeader
                     solidFormViewMetaData={solidFormViewMetaData}
                     initialEntityData={initialEntityData}
@@ -510,7 +532,7 @@ export const SolidFormActionHeader = ({ formik, params, actionsAllowed, formView
                     setSolidWorkflowFieldValue={setSolidWorkflowFieldValue}
                     onStepperUpdate={onStepperUpdate}
                 />
-            }
+            } */}
         </>
     )
 }