From eadf6e715579e7f0827f7c053b88987966515cfd Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Fri, 20 Jun 2025 15:47:01 +0545
Subject: [PATCH 01/18] feat: add toolbar actions

---
 .../demo/src/Views/Ui/components/PageDemo.tsx | 24 +++++++++
 packages/ui/src/Page/Header.tsx               | 15 +++++-
 packages/ui/src/Page/ToolbarActions.tsx       | 54 +++++++++++++++++++
 packages/ui/src/Page/index.tsx                | 19 +++++--
 packages/ui/src/assets/css/page.css           |  3 +-
 5 files changed, 108 insertions(+), 7 deletions(-)
 create mode 100644 packages/ui/src/Page/ToolbarActions.tsx

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index 7f632fe2c..fd608ff21 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -69,6 +69,30 @@ export const PageDemo = () => {
         subtitle={<Tag label={t("page.subTitle.tag")} />}
         children={PageContent}
         breadcrumb={breadcrumb}
+        toolbarActionMenu={{
+          actions: [
+            {
+              label: "View",
+              onClick: () => {
+                console.log("view action");
+              },
+            },
+            {
+              label: "Edit",
+              disabled: true,
+              onClick: () => {
+                console.log("edit action");
+              },
+            },
+            {
+              label: "Delete",
+              className: "danger",
+              onClick: () => {
+                console.log("delete action");
+              },
+            },
+          ],
+        }}
       />
     </>
   );
diff --git a/packages/ui/src/Page/Header.tsx b/packages/ui/src/Page/Header.tsx
index 33ec9468c..91b6c1518 100644
--- a/packages/ui/src/Page/Header.tsx
+++ b/packages/ui/src/Page/Header.tsx
@@ -1,9 +1,14 @@
+import { ToolbarActions } from "./ToolbarActions";
+
+import type { ToolbarActionsMenuProperties } from "./ToolbarActions";
+
 interface IHeaderProperties {
   breadcrumb?: React.ReactNode;
-  titleTag?: string | React.ReactNode;
   subtitle?: React.ReactNode | string;
-  toolbar?: React.ReactNode;
   title?: string | React.ReactNode;
+  titleTag?: string | React.ReactNode;
+  toolbar?: React.ReactNode;
+  toolbarActionMenu?: ToolbarActionsMenuProperties;
 }
 
 export const PageHeader = ({
@@ -12,6 +17,7 @@ export const PageHeader = ({
   subtitle,
   toolbar,
   title,
+  toolbarActionMenu,
 }: IHeaderProperties) => {
   const renderTitle = () => {
     if (!title) return null;
@@ -48,6 +54,11 @@ export const PageHeader = ({
           {toolbar}
         </div>
       )}
+      {toolbarActionMenu && (
+        <div className="dz-page-header-action-menu">
+          <ToolbarActions {...toolbarActionMenu} />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/packages/ui/src/Page/ToolbarActions.tsx b/packages/ui/src/Page/ToolbarActions.tsx
new file mode 100644
index 000000000..996988092
--- /dev/null
+++ b/packages/ui/src/Page/ToolbarActions.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+
+import { Button, DropdownMenu, MenuItem } from "..";
+import { ConfirmationModal, IModalProperties } from "../ConfirmationModal";
+
+export interface ActionsMenuItem extends MenuItem {
+  requireConfirmationModal?: boolean;
+}
+
+export interface ToolbarActionsMenuProperties {
+  actions?: ActionsMenuItem[];
+}
+
+export const ToolbarActions = ({ actions }: ToolbarActionsMenuProperties) => {
+  const [confirmation, setConfirmation] = useState<IModalProperties | null>();
+
+  const renderActions = () => {
+    if (!actions || !actions.length) {
+      return null;
+    }
+
+    const { icon, label, onClick, disabled, ...rest } = actions[0];
+
+    if (actions.length == 1 && icon) {
+      return (
+        <Button
+          variant="textOnly"
+          iconLeft={icon}
+          data-pr-tooltip={label}
+          onClick={onClick}
+          rounded
+          {...rest}
+        />
+      );
+    }
+
+    return (
+      <DropdownMenu
+        label={<i className="pi pi-cog"></i>}
+        menu={actions}
+        hideDropdownIcon
+      />
+    );
+  };
+
+  return (
+    <>
+      {renderActions()}
+      {!!confirmation && (
+        <ConfirmationModal {...confirmation} visible={!!confirmation} />
+      )}
+    </>
+  );
+};
diff --git a/packages/ui/src/Page/index.tsx b/packages/ui/src/Page/index.tsx
index d0fe20710..7f1e74d64 100644
--- a/packages/ui/src/Page/index.tsx
+++ b/packages/ui/src/Page/index.tsx
@@ -3,22 +3,25 @@ import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { PageHeader } from "./Header";
 import LoadingPage, { LoadingPageProperties } from "../LoadingPage";
 
+import type { ToolbarActionsMenuProperties } from "./ToolbarActions";
+
 interface PageProperties
   extends Pick<
     DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
     "aria-orientation"
   > {
   breadcrumb?: React.ReactNode;
+  centered?: boolean;
   children?: React.ReactNode;
   className?: string;
-  centered?: boolean;
   errorMessage?: string;
-  titleTag?: string | React.ReactNode;
   loading?: boolean;
   loadingComponent?: React.ReactElement;
   loadingPageStyle?: LoadingPageProperties;
   subtitle?: React.ReactNode | string;
   title?: string | React.ReactNode;
+  titleTag?: string | React.ReactNode;
+  toolbarActionMenu?: ToolbarActionsMenuProperties;
   toolbar?: React.ReactNode;
 }
 
@@ -35,6 +38,7 @@ const Page: React.FC<PageProperties> = ({
   subtitle,
   title,
   toolbar,
+  toolbarActionMenu,
   ...others
 }) => {
   let child = null;
@@ -60,7 +64,16 @@ const Page: React.FC<PageProperties> = ({
 
   return (
     <div className={_className} data-centered={centered}>
-      <PageHeader {...{ title, titleTag, subtitle, toolbar, breadcrumb }} />
+      <PageHeader
+        {...{
+          breadcrumb,
+          subtitle,
+          title,
+          titleTag,
+          toolbar,
+          toolbarActionMenu,
+        }}
+      />
       <div data-testid="page-content" className="dz-page-content" {...others}>
         {child ? child : children}
       </div>
diff --git a/packages/ui/src/assets/css/page.css b/packages/ui/src/assets/css/page.css
index 0523ab36f..3903e8dd7 100644
--- a/packages/ui/src/assets/css/page.css
+++ b/packages/ui/src/assets/css/page.css
@@ -6,9 +6,8 @@
 }
 
 .dz-page > .dz-page-header {
-  display: grid;
+  display: flex;
   gap: var(--_page-gap);
-  grid-template-columns: 100%;
 }
 
 .dz-page[data-centered="true"] {

From 8a60c39be6a385ab600f7b0fe24d24c44973991b Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Fri, 20 Jun 2025 16:55:02 +0545
Subject: [PATCH 02/18] feat: render toolbar with toolbar action menu

---
 packages/ui/src/Page/Header.tsx         | 23 ++++++++++++++++++-----
 packages/ui/src/Page/ToolbarActions.tsx |  7 +++++--
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/Page/Header.tsx b/packages/ui/src/Page/Header.tsx
index 91b6c1518..0f63357d9 100644
--- a/packages/ui/src/Page/Header.tsx
+++ b/packages/ui/src/Page/Header.tsx
@@ -2,6 +2,8 @@ import { ToolbarActions } from "./ToolbarActions";
 
 import type { ToolbarActionsMenuProperties } from "./ToolbarActions";
 
+import { Button } from "@/Buttons";
+
 interface IHeaderProperties {
   breadcrumb?: React.ReactNode;
   subtitle?: React.ReactNode | string;
@@ -44,7 +46,7 @@ export const PageHeader = ({
           </div>
         )}
       </div>
-      {(breadcrumb || toolbar) && (
+      {/* {(breadcrumb || toolbar) && (
         <div
           data-testid="page-toolbar"
           className="dz-page-toolbar"
@@ -53,11 +55,22 @@ export const PageHeader = ({
           {breadcrumb}
           {toolbar}
         </div>
-      )}
+      )} */}
       {toolbarActionMenu && (
-        <div className="dz-page-header-action-menu">
-          <ToolbarActions {...toolbarActionMenu} />
-        </div>
+        <>
+          <div
+            data-testid="page-toolbar"
+            className="dz-page-toolbar"
+            data-breadcrumb={!!breadcrumb}
+          >
+            {toolbarActionMenu.actions?.map((action) => (
+              <Button key={action.key} {...action} />
+            ))}
+          </div>
+          <div className="dz-page-header-action-menu">
+            <ToolbarActions {...toolbarActionMenu} />
+          </div>
+        </>
       )}
     </div>
   );
diff --git a/packages/ui/src/Page/ToolbarActions.tsx b/packages/ui/src/Page/ToolbarActions.tsx
index 996988092..c3c3c6040 100644
--- a/packages/ui/src/Page/ToolbarActions.tsx
+++ b/packages/ui/src/Page/ToolbarActions.tsx
@@ -1,10 +1,13 @@
 import React, { useState } from "react";
 
-import { Button, DropdownMenu, MenuItem } from "..";
+import { Button, DropdownMenu, IButtonProperties, MenuItem } from "..";
 import { ConfirmationModal, IModalProperties } from "../ConfirmationModal";
 
-export interface ActionsMenuItem extends MenuItem {
+export interface ActionsMenuItem
+  extends Omit<MenuItem, "onClick">,
+    Partial<IButtonProperties> {
   requireConfirmationModal?: boolean;
+  onClick?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
 }
 
 export interface ToolbarActionsMenuProperties {

From b35b75e1bd07300157f3b69456b9bdfafd96f9e3 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Fri, 20 Jun 2025 18:31:13 +0545
Subject: [PATCH 03/18] feat: display cog icon on mobile view

---
 .../demo/src/Views/Ui/components/PageDemo.tsx | 18 +++++------
 packages/ui/src/Page/Header.tsx               | 26 ++++++++-------
 packages/ui/src/assets/css/page.css           | 32 +++++++++++--------
 3 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index fd608ff21..ff4e9c80b 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -72,23 +72,21 @@ export const PageDemo = () => {
         toolbarActionMenu={{
           actions: [
             {
-              label: "View",
-              onClick: () => {
-                console.log("view action");
-              },
+              iconLeft: <i className="pi pi-chevron-left"></i>,
+              variant: "textOnly",
+              label: t("page.breadcrumb.back"),
             },
             {
-              label: "Edit",
-              disabled: true,
+              label: t("page.toolbar.button.label"),
+              severity: "secondary",
               onClick: () => {
-                console.log("edit action");
+                console.log("view action");
               },
             },
             {
-              label: "Delete",
-              className: "danger",
+              label: t("page.toolbar.edit"),
               onClick: () => {
-                console.log("delete action");
+                console.log("edit action");
               },
             },
           ],
diff --git a/packages/ui/src/Page/Header.tsx b/packages/ui/src/Page/Header.tsx
index 0f63357d9..b3ff710f4 100644
--- a/packages/ui/src/Page/Header.tsx
+++ b/packages/ui/src/Page/Header.tsx
@@ -46,17 +46,8 @@ export const PageHeader = ({
           </div>
         )}
       </div>
-      {/* {(breadcrumb || toolbar) && (
-        <div
-          data-testid="page-toolbar"
-          className="dz-page-toolbar"
-          data-breadcrumb={!!breadcrumb}
-        >
-          {breadcrumb}
-          {toolbar}
-        </div>
-      )} */}
-      {toolbarActionMenu && (
+
+      {toolbarActionMenu ? (
         <>
           <div
             data-testid="page-toolbar"
@@ -67,10 +58,21 @@ export const PageHeader = ({
               <Button key={action.key} {...action} />
             ))}
           </div>
-          <div className="dz-page-header-action-menu">
+          <div className="toolbar-action-menu">
             <ToolbarActions {...toolbarActionMenu} />
           </div>
         </>
+      ) : (
+        (breadcrumb || toolbar) && (
+          <div
+            data-testid="page-toolbar"
+            className="dz-page-toolbar"
+            data-breadcrumb={!!breadcrumb}
+          >
+            {breadcrumb}
+            {toolbar}
+          </div>
+        )
       )}
     </div>
   );
diff --git a/packages/ui/src/assets/css/page.css b/packages/ui/src/assets/css/page.css
index 3903e8dd7..378eae52c 100644
--- a/packages/ui/src/assets/css/page.css
+++ b/packages/ui/src/assets/css/page.css
@@ -5,17 +5,17 @@
   flex-direction: column;
 }
 
-.dz-page > .dz-page-header {
-  display: flex;
-  gap: var(--_page-gap);
-}
-
 .dz-page[data-centered="true"] {
   justify-items: center;
   max-width: var(--dz-page-max-width);
   margin: auto;
 }
 
+.dz-page > .dz-page-header {
+  display: flex;
+  flex-direction: space-between;
+}
+
 .dz-page > .dz-page-content > div[role="alert"].error > span {
   color: var(--error-text-color, red);
   font-size: var(--error-font-size, 1rem);
@@ -33,14 +33,6 @@
 }
 
 .dz-page > .dz-page-header > .dz-page-toolbar {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--dz-page-gap);
-  flex-wrap: wrap;
-}
-
-.dz-page-toolbar[data-breadcrumb="true"] > :first-child {
   display: none;
 }
 
@@ -53,10 +45,22 @@
     grid-template-columns: repeat(2, minmax(0, auto));
   }
 
+  .dz-page-toolbar[data-breadcrumb="true"] > :first-child {
+    display: none;
+  }
+
+  .toolbar-action-menu {
+    display: none;
+  }
+
   .dz-page > .dz-page-header > .dz-page-toolbar {
-    margin-left: auto;
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--dz-page-gap);
     height: fit-content;
     justify-content: flex-end;
+    margin-left: auto;
   }
 
   .dz-page > .dz-page-header > .dz-page-title-wrapper > h1 > span {

From 0b61598df27d2b022f70a475ae11de2bad3dd566 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Mon, 23 Jun 2025 09:52:59 +0545
Subject: [PATCH 04/18] feat: add button for cog icon in toolbar

---
 packages/ui/src/Page/ToolbarActions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/Page/ToolbarActions.tsx b/packages/ui/src/Page/ToolbarActions.tsx
index c3c3c6040..006861b0a 100644
--- a/packages/ui/src/Page/ToolbarActions.tsx
+++ b/packages/ui/src/Page/ToolbarActions.tsx
@@ -39,7 +39,7 @@ export const ToolbarActions = ({ actions }: ToolbarActionsMenuProperties) => {
 
     return (
       <DropdownMenu
-        label={<i className="pi pi-cog"></i>}
+        label={<Button iconLeft="pi pi-cog" size="medium" variant="outlined" />}
         menu={actions}
         hideDropdownIcon
       />

From 153c0a82324aaab37eb3d4facd7be85d614b81df Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Thu, 31 Jul 2025 13:40:59 +0545
Subject: [PATCH 05/18] refactor: uncomment the toolbar action menu

---
 .../demo/src/Views/Ui/components/PageDemo.tsx | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index cf0eecf33..b3b21c897 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -69,28 +69,28 @@ export const PageDemo = () => {
         subtitle={<Tag label={t("page.subTitle.tag")} />}
         children={PageContent}
         breadcrumb={breadcrumb}
-        // toolbarActionMenu={{
-        //   actions: [
-        //     {
-        //       iconLeft: <i className="pi pi-chevron-left"></i>,
-        //       variant: "textOnly",
-        //       label: t("page.breadcrumb.back"),
-        //     },
-        //     {
-        //       label: t("page.toolbar.button.label"),
-        //       severity: "secondary",
-        //       onClick: () => {
-        //         console.log("view action");
-        //       },
-        //     },
-        //     {
-        //       label: t("page.toolbar.edit"),
-        //       onClick: () => {
-        //         console.log("edit action");
-        //       },
-        //     },
-        //   ],
-        // }}
+        toolbarActionMenu={{
+          actions: [
+            {
+              iconLeft: <i className="pi pi-chevron-left"></i>,
+              variant: "textOnly",
+              label: t("page.breadcrumb.back"),
+            },
+            {
+              label: t("page.toolbar.button.label"),
+              severity: "secondary",
+              onClick: () => {
+                console.log("view action");
+              },
+            },
+            {
+              label: t("page.toolbar.edit"),
+              onClick: () => {
+                console.log("edit action");
+              },
+            },
+          ],
+        }}
       />
     </>
   );

From 579ff0af0cb4512e23ce134214af20637a0ba077 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Thu, 31 Jul 2025 16:23:10 +0545
Subject: [PATCH 06/18] feat: hide toolbar in mobile view

---
 packages/ui/src/assets/css/page.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/ui/src/assets/css/page.css b/packages/ui/src/assets/css/page.css
index f21e66674..aaf313b7a 100644
--- a/packages/ui/src/assets/css/page.css
+++ b/packages/ui/src/assets/css/page.css
@@ -30,11 +30,7 @@
 }
 
 .dz-page > .dz-page-header > .dz-page-toolbar {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
+  display: none;
 }
 
 .dz-page-toolbar[data-breadcrumb="true"] > :first-child {

From 267a6a580a5bd8f14f2f2e58ca5a168e226a29f6 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Thu, 31 Jul 2025 16:39:23 +0545
Subject: [PATCH 07/18] feat: update alignment

---
 packages/ui/src/assets/css/page.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/assets/css/page.css b/packages/ui/src/assets/css/page.css
index aaf313b7a..812fbd1fe 100644
--- a/packages/ui/src/assets/css/page.css
+++ b/packages/ui/src/assets/css/page.css
@@ -15,7 +15,7 @@
 
 .dz-page > .dz-page-header {
   display: flex;
-  flex-direction: space-between;
+  justify-content: space-between;
 }
 
 .dz-page > .dz-page-content > div[role="alert"].error > span {

From abe6e50eba84dafaac48fbd3c9cdac4c83c74bd9 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Thu, 31 Jul 2025 17:21:23 +0545
Subject: [PATCH 08/18] feat: display icon if there is only one actions menu

---
 packages/ui/src/Page/ToolbarActions.tsx | 33 ++++++++++++++-----------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/Page/ToolbarActions.tsx b/packages/ui/src/Page/ToolbarActions.tsx
index 006861b0a..8b4aabd1c 100644
--- a/packages/ui/src/Page/ToolbarActions.tsx
+++ b/packages/ui/src/Page/ToolbarActions.tsx
@@ -22,26 +22,31 @@ export const ToolbarActions = ({ actions }: ToolbarActionsMenuProperties) => {
       return null;
     }
 
-    const { icon, label, onClick, disabled, ...rest } = actions[0];
-
-    if (actions.length == 1 && icon) {
+    if (actions.length > 1) {
       return (
-        <Button
-          variant="textOnly"
-          iconLeft={icon}
-          data-pr-tooltip={label}
-          onClick={onClick}
-          rounded
-          {...rest}
+        <DropdownMenu
+          label={
+            <Button iconLeft="pi pi-cog" size="medium" variant="outlined" />
+          }
+          menu={actions}
+          hideDropdownIcon
         />
       );
     }
 
+    const [{ icon, iconLeft, iconRight, label, onClick, disabled, ...rest }] =
+      actions;
+
+    const buttonIcon = icon ?? iconLeft ?? iconRight;
+
     return (
-      <DropdownMenu
-        label={<Button iconLeft="pi pi-cog" size="medium" variant="outlined" />}
-        menu={actions}
-        hideDropdownIcon
+      <Button
+        variant="textOnly"
+        iconLeft={buttonIcon}
+        data-pr-tooltip={label}
+        onClick={onClick}
+        rounded
+        {...rest}
       />
     );
   };

From e8dc9848f7b1721bd1a8bb8258adf4f17ef2988b Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Thu, 31 Jul 2025 17:42:16 +0545
Subject: [PATCH 09/18] feat: display label if icon is not provided

---
 packages/ui/src/Page/ToolbarActions.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/Page/ToolbarActions.tsx b/packages/ui/src/Page/ToolbarActions.tsx
index 8b4aabd1c..c873311a0 100644
--- a/packages/ui/src/Page/ToolbarActions.tsx
+++ b/packages/ui/src/Page/ToolbarActions.tsx
@@ -44,6 +44,7 @@ export const ToolbarActions = ({ actions }: ToolbarActionsMenuProperties) => {
         variant="textOnly"
         iconLeft={buttonIcon}
         data-pr-tooltip={label}
+        label={!buttonIcon ? label : undefined}
         onClick={onClick}
         rounded
         {...rest}

From d366ab0b6dedb05d3336dd1b92c12f2fc411e765 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Fri, 1 Aug 2025 09:59:32 +0545
Subject: [PATCH 10/18] feat: update demo page

---
 .../demo/src/Views/Ui/components/PageDemo.tsx | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index b3b21c897..8e50f72f3 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -21,6 +21,15 @@ export const PageDemo = () => {
       <Page
         title={t("page.title.toolbar")}
         toolbar={<Button label={t("page.toolbar.edit")} />}
+        toolbarActionMenu={{
+          actions: [
+            {
+              iconLeft: <i className="pi pi-chevron-left"></i>,
+              variant: "textOnly",
+              label: t("page.breadcrumb.back"),
+            },
+          ],
+        }}
         children={PageContent}
       />
 
@@ -51,6 +60,15 @@ export const PageDemo = () => {
         title={t("page.title.breadcrumb")}
         children={PageContent}
         breadcrumb={breadcrumb}
+        toolbarActionMenu={{
+          actions: [
+            {
+              iconLeft: <i className="pi pi-chevron-left"></i>,
+              variant: "textOnly",
+              label: t("page.breadcrumb.back"),
+            },
+          ],
+        }}
       />
 
       <hr />
@@ -79,15 +97,9 @@ export const PageDemo = () => {
             {
               label: t("page.toolbar.button.label"),
               severity: "secondary",
-              onClick: () => {
-                console.log("view action");
-              },
             },
             {
               label: t("page.toolbar.edit"),
-              onClick: () => {
-                console.log("edit action");
-              },
             },
           ],
         }}

From 445827d071b94d6ecd032fb8f682813f08fb2fcb Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Fri, 1 Aug 2025 11:01:47 +0545
Subject: [PATCH 11/18] feat: decrease the line height of the title

---
 packages/ui/src/assets/css/page.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/ui/src/assets/css/page.css b/packages/ui/src/assets/css/page.css
index 812fbd1fe..deea1e593 100644
--- a/packages/ui/src/assets/css/page.css
+++ b/packages/ui/src/assets/css/page.css
@@ -37,10 +37,18 @@
   display: none;
 }
 
+.dz-page > .dz-page-header > .dz-page-title-wrapper > h1 {
+  line-height: 2rem;
+}
+
 .dz-page > .dz-page-header > .dz-page-title-wrapper > h1 > span {
   margin-left: 0.5rem;
 }
 
+.dz-page > .dz-page-header > .dz-page-title-wrapper > h1 > span > .dz-tag {
+  height: 1.8125rem;
+}
+
 @media (min-width: 576px) {
   .dz-page > .dz-page-header {
     grid-template-columns: repeat(2, minmax(0, auto));

From 6d150ec71eadf1ae317137f5e566de64fa20313b Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Thu, 7 Aug 2025 10:34:20 +0545
Subject: [PATCH 12/18] style: fix coding standard

---
 apps/demo/src/Views/Ui/components/PageDemo.tsx | 11 +++++++----
 packages/ui/src/Page/Header.tsx                |  4 +++-
 packages/ui/src/Page/ToolbarActions.tsx        | 16 +++-------------
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index 8e50f72f3..920ea88b6 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -24,8 +24,8 @@ export const PageDemo = () => {
         toolbarActionMenu={{
           actions: [
             {
-              iconLeft: <i className="pi pi-chevron-left"></i>,
-              variant: "textOnly",
+              icon: "pi pi-chevron-left",
+              variant: "outlined",
               label: t("page.breadcrumb.back"),
             },
           ],
@@ -63,8 +63,9 @@ export const PageDemo = () => {
         toolbarActionMenu={{
           actions: [
             {
-              iconLeft: <i className="pi pi-chevron-left"></i>,
-              variant: "textOnly",
+              iconLeft: <i className="pi pi-trash"></i>,
+              variant: "outlined",
+              severity: "danger",
               label: t("page.breadcrumb.back"),
             },
           ],
@@ -92,6 +93,7 @@ export const PageDemo = () => {
             {
               iconLeft: <i className="pi pi-chevron-left"></i>,
               variant: "textOnly",
+              className: "danger",
               label: t("page.breadcrumb.back"),
             },
             {
@@ -100,6 +102,7 @@ export const PageDemo = () => {
             },
             {
               label: t("page.toolbar.edit"),
+              className: "danger",
             },
           ],
         }}
diff --git a/packages/ui/src/Page/Header.tsx b/packages/ui/src/Page/Header.tsx
index b3ff710f4..e7f0c81ee 100644
--- a/packages/ui/src/Page/Header.tsx
+++ b/packages/ui/src/Page/Header.tsx
@@ -22,7 +22,9 @@ export const PageHeader = ({
   toolbarActionMenu,
 }: IHeaderProperties) => {
   const renderTitle = () => {
-    if (!title) return null;
+    if (!title) {
+      return null;
+    }
 
     if (typeof title === "string") {
       return (
diff --git a/packages/ui/src/Page/ToolbarActions.tsx b/packages/ui/src/Page/ToolbarActions.tsx
index c873311a0..70446e642 100644
--- a/packages/ui/src/Page/ToolbarActions.tsx
+++ b/packages/ui/src/Page/ToolbarActions.tsx
@@ -23,31 +23,21 @@ export const ToolbarActions = ({ actions }: ToolbarActionsMenuProperties) => {
     }
 
     if (actions.length > 1) {
-      return (
-        <DropdownMenu
-          label={
-            <Button iconLeft="pi pi-cog" size="medium" variant="outlined" />
-          }
-          menu={actions}
-          hideDropdownIcon
-        />
-      );
+      return <DropdownMenu menu={actions} hideDropdownIcon />;
     }
 
-    const [{ icon, iconLeft, iconRight, label, onClick, disabled, ...rest }] =
+    const [{ icon, iconLeft, iconRight, label, onClick, disabled, variant }] =
       actions;
 
     const buttonIcon = icon ?? iconLeft ?? iconRight;
 
     return (
       <Button
-        variant="textOnly"
         iconLeft={buttonIcon}
         data-pr-tooltip={label}
         label={!buttonIcon ? label : undefined}
         onClick={onClick}
-        rounded
-        {...rest}
+        variant={variant}
       />
     );
   };

From 850aa641aa4822280e13cd29548229770bcf44c9 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 12 Aug 2025 16:08:12 +0545
Subject: [PATCH 13/18] refactor: remove redundant code

---
 .../demo/src/Views/Ui/components/PageDemo.tsx |  1 -
 packages/ui/src/Page/ToolbarActions.tsx       | 47 +++++++------------
 2 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index 920ea88b6..23e24a3d6 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -93,7 +93,6 @@ export const PageDemo = () => {
             {
               iconLeft: <i className="pi pi-chevron-left"></i>,
               variant: "textOnly",
-              className: "danger",
               label: t("page.breadcrumb.back"),
             },
             {
diff --git a/packages/ui/src/Page/ToolbarActions.tsx b/packages/ui/src/Page/ToolbarActions.tsx
index 70446e642..a2d476762 100644
--- a/packages/ui/src/Page/ToolbarActions.tsx
+++ b/packages/ui/src/Page/ToolbarActions.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { Button, DropdownMenu, IButtonProperties, MenuItem } from "..";
-import { ConfirmationModal, IModalProperties } from "../ConfirmationModal";
 
 export interface ActionsMenuItem
   extends Omit<MenuItem, "onClick">,
@@ -15,39 +14,25 @@ export interface ToolbarActionsMenuProperties {
 }
 
 export const ToolbarActions = ({ actions }: ToolbarActionsMenuProperties) => {
-  const [confirmation, setConfirmation] = useState<IModalProperties | null>();
+  if (!actions || actions.length === 0) {
+    return null;
+  }
 
-  const renderActions = () => {
-    if (!actions || !actions.length) {
-      return null;
-    }
+  if (actions.length > 1) {
+    return <DropdownMenu menu={actions} hideDropdownIcon />;
+  }
 
-    if (actions.length > 1) {
-      return <DropdownMenu menu={actions} hideDropdownIcon />;
-    }
+  const [{ icon, iconLeft, iconRight, label, onClick, variant }] = actions;
 
-    const [{ icon, iconLeft, iconRight, label, onClick, disabled, variant }] =
-      actions;
-
-    const buttonIcon = icon ?? iconLeft ?? iconRight;
-
-    return (
-      <Button
-        iconLeft={buttonIcon}
-        data-pr-tooltip={label}
-        label={!buttonIcon ? label : undefined}
-        onClick={onClick}
-        variant={variant}
-      />
-    );
-  };
+  const buttonIcon = icon ?? iconLeft ?? iconRight;
 
   return (
-    <>
-      {renderActions()}
-      {!!confirmation && (
-        <ConfirmationModal {...confirmation} visible={!!confirmation} />
-      )}
-    </>
+    <Button
+      iconLeft={buttonIcon}
+      data-pr-tooltip={label}
+      label={!buttonIcon ? label : undefined}
+      onClick={onClick}
+      variant={variant}
+    />
   );
 };

From 50ac817d296256f9c9c99ccd17710d9ce97ca943 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 12 Aug 2025 17:43:57 +0545
Subject: [PATCH 14/18] feat: update page documentation

---
 .../demo/src/Views/Ui/components/PageDemo.tsx | 338 +++++++++++++-----
 apps/demo/src/locales/en/ui.json              |  23 +-
 apps/demo/src/locales/fr/ui.json              |  23 +-
 3 files changed, 294 insertions(+), 90 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index 23e24a3d6..a5fed4ba0 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -1,10 +1,96 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Button, Page, Tag } from "@prefabs.tech/react-ui";
+import { Button, Page, Tag, TDataTable } from "@prefabs.tech/react-ui";
+import { useNavigate } from "react-router-dom";
+
+import { CodeBlock, Section } from "../../../components/Demo";
 
 export const PageDemo = () => {
   const [t] = useTranslation("ui");
+  const navigate = useNavigate();
+
+  const propertiesData = [
+    {
+      default: "-",
+      description: t("page.propertiesDescription.breadcrumb"),
+      prop: "breadcrumb",
+      type: "React.ReactNode",
+    },
+    {
+      default: "false",
+      description: t("page.propertiesDescription.centered"),
+      prop: "centered",
+      type: "boolean",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.children"),
+      prop: "children",
+      type: "React.ReactNode",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.className"),
+      prop: "className",
+      type: "string",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.errorMessage"),
+      prop: "errorMessage",
+      type: "string",
+    },
+    {
+      default: "false",
+      description: t("page.propertiesDescription.loading"),
+      prop: "loading",
+      type: "boolean",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.loadingComponent"),
+      prop: "loadingComponent",
+      type: "React.ReactElement",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.loadingPageStyle"),
+      prop: "loadingPageStyle",
+      type: "LoadingPageProperties",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.subtitle"),
+      prop: "subtitle",
+      type: "string | React.ReactNode",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.title"),
+      prop: "title",
+      type: "string | React.ReactNode",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.titleTag"),
+      prop: "titleTag",
+      type: "string | React.ReactNode",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.toolbarActionMenu"),
+      prop: "toolbarActionMenu",
+      type: "ToolbarActionsMenuProperties",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.toolbar"),
+      prop: "toolbar",
+      type: "React.ReactNode",
+    },
+  ];
+
+  const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
 
-  const PageContent = <div style={{ height: "20vh" }}>{t("page.content")}</div>;
   const breadcrumb = (
     <Button
       iconLeft={<i className="pi pi-chevron-left"></i>}
@@ -15,97 +101,189 @@ export const PageDemo = () => {
 
   return (
     <>
-      <Page title={t("page.title.basic")}>{PageContent}</Page>
-
-      <hr />
       <Page
-        title={t("page.title.toolbar")}
-        toolbar={<Button label={t("page.toolbar.edit")} />}
-        toolbarActionMenu={{
-          actions: [
-            {
-              icon: "pi pi-chevron-left",
-              variant: "outlined",
-              label: t("page.breadcrumb.back"),
-            },
-          ],
-        }}
-        children={PageContent}
-      />
+        title={t("page.title")}
+        subtitle={t("page.subtitle")}
+        toolbar={
+          <Button
+            label={t("buttons.back")}
+            variant="textOnly"
+            iconLeft={<i className="pi pi-chevron-left"></i>}
+            onClick={() => navigate("..")}
+          />
+        }
+      ></Page>
+      <Section title={t("headers.usage")}>
+        <p>{t("common.usage", { component: "Page" })}</p>
+        <CodeBlock exampleCode='import { Page } from "@prefabs.tech/react-ui"' />
+      </Section>
 
-      <hr />
-      <Page
-        title={t("page.title.centerAligned")}
-        toolbar={<Button label={t("page.toolbar.edit")} />}
-        children={PageContent}
-        centered={true}
-      />
+      <Section title={t("page.usage.basic")}>
+        <Page
+          title={"Basic page title"}
+          toolbarActionMenu={{
+            actions: [
+              {
+                icon: "pi pi-chevron-left",
+                variant: "textOnly",
+                label: "Back",
+              },
+            ],
+          }}
+          children={pageContent}
+        />
+        <CodeBlock
+          exampleCode='const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
 
-      <hr />
-      <Page
-        title={t("page.title.stringSubtitle")}
-        subtitle={t("page.subTitle.title")}
-        children={PageContent}
-      />
+<Page
+  title={"Basic page title"}
+  toolbarActionMenu={{
+    actions: [
+      {
+        icon: "pi pi-chevron-left",
+        variant: "outlined",
+        label: "Back",
+      },
+    ],
+  }}
+  children={pageContent}
+/>'
+        />
+      </Section>
 
-      <hr />
-      <Page
-        title={t("page.title.componentSubtitle")}
-        subtitle={<Tag label={t("page.subTitle.tag")} />}
-        children={PageContent}
-      />
+      <Section title={t("page.usage.toolbar")}>
+        <Page
+          title={"Page title"}
+          children={pageContent}
+          breadcrumb={breadcrumb}
+          toolbarActionMenu={{
+            actions: [
+              {
+                iconLeft: <i className="pi pi-chevron-left"></i>,
+                variant: "textOnly",
+                label: "Back",
+              },
+              {
+                label: "Click",
+                severity: "secondary",
+              },
+              {
+                label: "Delete",
+                className: "danger",
+              },
+            ],
+          }}
+        />
+        <CodeBlock
+          exampleCode='const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
 
-      <hr />
-      <Page
-        title={t("page.title.breadcrumb")}
-        children={PageContent}
-        breadcrumb={breadcrumb}
-        toolbarActionMenu={{
-          actions: [
+<Page
+  title={"Page title"}
+  children={pageContent}
+  breadcrumb={breadcrumb}
+  toolbarActionMenu={{
+    actions: [
+      {
+        iconLeft: <i className="pi pi-chevron-left"></i>,
+        variant: "textOnly",
+        label: "Back",
+      },
+      {
+        label: "Click",
+        severity: "secondary",
+      },
+      {
+        label: "Delete",
+        className: "danger",
+      },
+    ],
+  }}
+/>'
+        />
+      </Section>
+
+      <Section title={t("page.usage.complete")}>
+        <Page
+          title={"Page header title"}
+          titleTag={<Tag label={"Heading tag"} />}
+          subtitle={<Tag label={"Subtitle tag"} />}
+          children={pageContent}
+          toolbarActionMenu={{
+            actions: [
+              {
+                iconLeft: <i className="pi pi-chevron-left"></i>,
+                variant: "textOnly",
+                label: "Back",
+              },
+              {
+                label: "Edit",
+                severity: "secondary",
+              },
+              {
+                label: "Delete",
+                className: "danger",
+              },
+            ],
+          }}
+        />
+
+        <CodeBlock
+          exampleCode='const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
+
+<Page
+  title={"Page header title"}
+  titleTag={<Tag label={"Heading tag"} />}
+  subtitle={<Tag label={"Subtitle tag"} />}
+  children={pageContent}
+  toolbarActionMenu={{
+    actions: [
+      {
+        iconLeft: <i className="pi pi-chevron-left"></i>,
+        variant: "textOnly",
+        label: "Back",
+      },
+      {
+        label: "Edit",
+        severity: "secondary",
+      },
+      {
+        label: "Delete",
+        className: "danger",
+      },
+    ],
+  }}
+/>'
+        />
+      </Section>
+
+      <Section
+        title={t("headers.propertiesValue", {
+          value: "PageProperties",
+        })}
+      >
+        <TDataTable
+          columns={[
             {
-              iconLeft: <i className="pi pi-trash"></i>,
-              variant: "outlined",
-              severity: "danger",
-              label: t("page.breadcrumb.back"),
+              accessorKey: "prop",
+              header: t("propertiesTable.header.properties"),
             },
-          ],
-        }}
-      />
-
-      <hr />
-      <Page
-        title={t("page.title.complete")}
-        titleTag={<Tag label={t("page.heading.tag")} />}
-        toolbar={
-          <>
-            <Button
-              severity="secondary"
-              label={t("page.toolbar.button.label")}
-            />
-            <Button label={t("page.toolbar.edit")} />
-          </>
-        }
-        subtitle={<Tag label={t("page.subTitle.tag")} />}
-        children={PageContent}
-        breadcrumb={breadcrumb}
-        toolbarActionMenu={{
-          actions: [
             {
-              iconLeft: <i className="pi pi-chevron-left"></i>,
-              variant: "textOnly",
-              label: t("page.breadcrumb.back"),
+              accessorKey: "type",
+              header: t("propertiesTable.header.type"),
             },
             {
-              label: t("page.toolbar.button.label"),
-              severity: "secondary",
+              accessorKey: "default",
+              header: t("propertiesTable.header.default"),
             },
             {
-              label: t("page.toolbar.edit"),
-              className: "danger",
+              accessorKey: "description",
+              header: t("propertiesTable.header.description"),
             },
-          ],
-        }}
-      />
+          ]}
+          data={propertiesData}
+          paginated={false}
+        />
+      </Section>
     </>
   );
 };
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index bcb2a94f5..a89951a05 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -332,7 +332,9 @@
     "title": "Textarea"
   },
   "page": {
-    "title": {
+    "title": "Page",
+    "subtitle": "The Page component renders a structured layout with a header, optional loading and error states, and customizable content areas for flexible page composition.",
+    "usage": {
       "menu": "Page",
       "basic": "Page demo basic",
       "centerAligned": "Page with center aligned contents",
@@ -342,10 +344,6 @@
       "breadcrumb": "Page with breadcrumb",
       "complete": "Page with every component"
     },
-    "subTitle": {
-      "title": "Page subtitle",
-      "tag": "Subtitle tag"
-    },
     "heading": {
       "tag": "Heading tag"
     },
@@ -358,6 +356,21 @@
         "label": "Click"
       }
     },
+    "propertiesDescription": {
+      "breadcrumb": "Displays a breadcrumb navigation element at the top of the page, typically used to show page hierarchy.",
+      "centered": "If true, applies centered alignment styling to the page content.",
+      "children": "The main content of the page. Rendered after the header and within the page content area.",
+      "className": "Additional CSS class to apply custom styling to the page container.",
+      "errorMessage": "Displays an error message when set. Overrides `children` and `loading`.",
+      "loading": "If true, displays a loading state instead of the page content.",
+      "loadingComponent": "Optional custom loading component to display when `loading` is true. Overrides the default loading component.",
+      "loadingPageStyle": "Props passed to the default `LoadingPage` component to customize its appearance and behavior.",
+      "subtitle": "Text or React node to display as the page subtitle, below the main title.",
+      "title": "Text or React node to display as the main title of the page.",
+      "titleTag": "Custom element or string to use as the semantic tag for the title (e.g., h1, h2).",
+      "toolbarActionMenu": "Props for configuring a toolbar action menu component next to the title.",
+      "toolbar": "Additional toolbar content to be rendered alongside the header elements."
+    },
     "content": "Page content."
   },
   "tag": {
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index f556b9310..6ca0cf542 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -332,7 +332,9 @@
     "title": "Textarea (fr)"
   },
   "page": {
-    "title": {
+    "title": "Page (fr)",
+    "subtitle": "The Page component renders a structured layout with a header, optional loading and error states, and customizable content areas for flexible page composition. (fr)",
+    "usage": {
       "menu": "Page (fr)",
       "basic": "Page demo basic (fr)",
       "centerAligned": "Page with center aligned contents (fr)",
@@ -342,10 +344,6 @@
       "breadcrumb": "Page with breadcrumb (fr)",
       "complete": "Page with every component (fr)"
     },
-    "subTitle": {
-      "title": "Page subtitle (fr)",
-      "tag": "Subtitle tag (fr)"
-    },
     "heading": {
       "tag": "Heading tag (fr)"
     },
@@ -358,6 +356,21 @@
         "label": "Click (fr)"
       }
     },
+    "propertiesDescription": {
+      "breadcrumb": "Displays a breadcrumb navigation element at the top of the page, typically used to show page hierarchy. (fr)",
+      "centered": "If true, applies centered alignment styling to the page content. (fr)",
+      "children": "The main content of the page. Rendered after the header and within the page content area. (fr)",
+      "className": "Additional CSS class to apply custom styling to the page container. (fr)",
+      "errorMessage": "Displays an error message when set. Overrides `children` and `loading`. (fr)",
+      "loading": "If true, displays a loading state instead of the page content. (fr)",
+      "loadingComponent": "Optional custom loading component to display when `loading` is true. Overrides the default loading component. (fr)",
+      "loadingPageStyle": "Props passed to the default `LoadingPage` component to customize its appearance and behavior. (fr)",
+      "subtitle": "Text or React node to display as the page subtitle, below the main title. (fr)",
+      "title": "Text or React node to display as the main title of the page. (fr)",
+      "titleTag": "Custom element or string to use as the semantic tag for the title (e.g., h1, h2). (fr)",
+      "toolbarActionMenu": "Props for configuring a toolbar action menu component next to the title. (fr)",
+      "toolbar": "Additional toolbar content to be rendered alongside the header elements. (fr)"
+    },
     "content": "Page content. (fr)"
   },
   "tag": {

From 02d85e54d945730ded7905a9697c169495b666ff Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 13 Aug 2025 09:28:31 +0545
Subject: [PATCH 15/18] feat: update menu title

---
 apps/demo/src/Views/Ui/components/PageDemo.tsx | 4 ++--
 apps/demo/src/Views/Ui/pages.tsx               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index a5fed4ba0..6718ffd82 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -124,7 +124,7 @@ export const PageDemo = () => {
           toolbarActionMenu={{
             actions: [
               {
-                icon: "pi pi-chevron-left",
+                iconLeft: "pi pi-chevron-left",
                 variant: "textOnly",
                 label: "Back",
               },
@@ -140,7 +140,7 @@ export const PageDemo = () => {
   toolbarActionMenu={{
     actions: [
       {
-        icon: "pi pi-chevron-left",
+        iconLeft: "pi pi-chevron-left",
         variant: "outlined",
         label: "Back",
       },
diff --git a/apps/demo/src/Views/Ui/pages.tsx b/apps/demo/src/Views/Ui/pages.tsx
index 4bc5f454a..9bd2bd592 100644
--- a/apps/demo/src/Views/Ui/pages.tsx
+++ b/apps/demo/src/Views/Ui/pages.tsx
@@ -212,7 +212,7 @@ const MISC_ROUTES = [
   },
   {
     path: UI_ROUTES.PAGE_DEMO,
-    key: "page.title.menu",
+    key: "page.title",
     element: <PageDemo />,
   },
   {

From f0006de683f21278c21d6c41de83e86a69d28a4d Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 13 Aug 2025 11:23:04 +0545
Subject: [PATCH 16/18] feat: support display icon only in the button

---
 apps/demo/src/Views/Ui/components/PageDemo.tsx | 12 ++++++++++++
 packages/ui/src/DropdownMenu/Menu.tsx          | 14 ++++++++++----
 packages/ui/src/Page/Header.tsx                | 14 +++++++++++---
 packages/ui/src/Page/ToolbarActions.tsx        |  2 +-
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index 6718ffd82..133e789e6 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -220,8 +220,14 @@ export const PageDemo = () => {
                 severity: "secondary",
               },
               {
+                iconLeft: "pi pi-trash",
                 label: "Delete",
+                variant: "outlined",
                 className: "danger",
+                onClick: () => {
+                  console.log("Event clicked");
+                },
+                iconOnly: true,
               },
             ],
           }}
@@ -247,8 +253,14 @@ export const PageDemo = () => {
         severity: "secondary",
       },
       {
+        iconLeft: "pi pi-trash",
         label: "Delete",
+        variant: "outlined",
         className: "danger",
+        onClick: () => {
+          console.log("Event clicked");
+        },
+        iconOnly: true,
       },
     ],
   }}
diff --git a/packages/ui/src/DropdownMenu/Menu.tsx b/packages/ui/src/DropdownMenu/Menu.tsx
index e8ba79a2a..8a5736b74 100644
--- a/packages/ui/src/DropdownMenu/Menu.tsx
+++ b/packages/ui/src/DropdownMenu/Menu.tsx
@@ -7,6 +7,8 @@ export interface MenuItem {
   key?: string;
   label?: string;
   icon?: React.ReactNode;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
   onClick?: () => void;
 }
 
@@ -28,12 +30,16 @@ const Menu: React.FC<MenuProperties> = ({
           className,
           disabled,
           icon,
+          iconLeft,
+          iconRight,
           onClick,
           display = true,
           key,
           label,
         } = item;
 
+        const menuIcon = icon || iconLeft || iconRight;
+
         return display ? (
           <li
             key={key || `menu-item-${index}`}
@@ -45,11 +51,11 @@ const Menu: React.FC<MenuProperties> = ({
               renderOption(item)
             ) : (
               <span className="menu-item">
-                {icon ? (
-                  typeof icon === "string" ? (
-                    <i className={icon}></i>
+                {menuIcon ? (
+                  typeof menuIcon === "string" ? (
+                    <i className={menuIcon}></i>
                   ) : (
-                    icon
+                    menuIcon
                   )
                 ) : null}
                 {label}
diff --git a/packages/ui/src/Page/Header.tsx b/packages/ui/src/Page/Header.tsx
index e7f0c81ee..05fb51cd6 100644
--- a/packages/ui/src/Page/Header.tsx
+++ b/packages/ui/src/Page/Header.tsx
@@ -56,9 +56,17 @@ export const PageHeader = ({
             className="dz-page-toolbar"
             data-breadcrumb={!!breadcrumb}
           >
-            {toolbarActionMenu.actions?.map((action) => (
-              <Button key={action.key} {...action} />
-            ))}
+            {toolbarActionMenu.actions?.map((action) => {
+              const { iconOnly, key, label, ...rest } = action;
+
+              return (
+                <Button
+                  key={key}
+                  label={iconOnly ? undefined : label}
+                  {...rest}
+                />
+              );
+            })}
           </div>
           <div className="toolbar-action-menu">
             <ToolbarActions {...toolbarActionMenu} />
diff --git a/packages/ui/src/Page/ToolbarActions.tsx b/packages/ui/src/Page/ToolbarActions.tsx
index a2d476762..f2da0af7f 100644
--- a/packages/ui/src/Page/ToolbarActions.tsx
+++ b/packages/ui/src/Page/ToolbarActions.tsx
@@ -5,7 +5,7 @@ import { Button, DropdownMenu, IButtonProperties, MenuItem } from "..";
 export interface ActionsMenuItem
   extends Omit<MenuItem, "onClick">,
     Partial<IButtonProperties> {
-  requireConfirmationModal?: boolean;
+  iconOnly?: boolean;
   onClick?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
 }
 

From d1edc837158ab63e2aef5d3540c6253cff248b07 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 13 Aug 2025 13:15:22 +0545
Subject: [PATCH 17/18] feat: update page document

---
 .../demo/src/Views/Ui/components/PageDemo.tsx | 77 ++++++++++---------
 apps/demo/src/locales/en/ui.json              |  2 +-
 apps/demo/src/locales/fr/ui.json              |  2 +-
 packages/ui/src/Page/Header.tsx               |  2 +-
 packages/ui/src/assets/css/page.css           | 16 +++-
 5 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index 133e789e6..cc1829163 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -121,41 +121,6 @@ export const PageDemo = () => {
       <Section title={t("page.usage.basic")}>
         <Page
           title={"Basic page title"}
-          toolbarActionMenu={{
-            actions: [
-              {
-                iconLeft: "pi pi-chevron-left",
-                variant: "textOnly",
-                label: "Back",
-              },
-            ],
-          }}
-          children={pageContent}
-        />
-        <CodeBlock
-          exampleCode='const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
-
-<Page
-  title={"Basic page title"}
-  toolbarActionMenu={{
-    actions: [
-      {
-        iconLeft: "pi pi-chevron-left",
-        variant: "outlined",
-        label: "Back",
-      },
-    ],
-  }}
-  children={pageContent}
-/>'
-        />
-      </Section>
-
-      <Section title={t("page.usage.toolbar")}>
-        <Page
-          title={"Page title"}
-          children={pageContent}
-          breadcrumb={breadcrumb}
           toolbarActionMenu={{
             actions: [
               {
@@ -173,14 +138,13 @@ export const PageDemo = () => {
               },
             ],
           }}
+          children={pageContent}
         />
         <CodeBlock
           exampleCode='const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
 
 <Page
-  title={"Page title"}
-  children={pageContent}
-  breadcrumb={breadcrumb}
+  title={"Basic page title"}
   toolbarActionMenu={{
     actions: [
       {
@@ -198,6 +162,43 @@ export const PageDemo = () => {
       },
     ],
   }}
+  children={pageContent}
+/>'
+        />
+      </Section>
+
+      <Section title={t("page.usage.toolbarAndBreadcrumb")}>
+        <Page
+          title={"Page title"}
+          children={pageContent}
+          breadcrumb={breadcrumb}
+          toolbar={
+            <>
+              <Button severity="secondary" label={"Edit"} />
+              <Button severity="danger" label={"Delete"} />
+            </>
+          }
+        />
+        <CodeBlock
+          exampleCode='const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
+const breadcrumb = (
+  <Button
+    iconLeft={<i className="pi pi-chevron-left"></i>}
+    variant="textOnly"
+    label={t("page.breadcrumb.back")}
+  />
+);
+
+<Page
+  title={"Page title"}
+  children={pageContent}
+  breadcrumb={breadcrumb}
+  toolbar={
+    <>
+      <Button severity="secondary" label={"Edit"} />
+      <Button severity="danger" label={"Delete"} />
+    </>
+  }
 />'
         />
       </Section>
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index a89951a05..baee5f090 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -338,7 +338,7 @@
       "menu": "Page",
       "basic": "Page demo basic",
       "centerAligned": "Page with center aligned contents",
-      "toolbar": "Page with toolbar",
+      "toolbarAndBreadcrumb": "Page with toolbar and breadcrumb",
       "stringSubtitle": "Page with subtitle string",
       "componentSubtitle": "Page with subtitle component",
       "breadcrumb": "Page with breadcrumb",
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index 6ca0cf542..0652e0972 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -338,7 +338,7 @@
       "menu": "Page (fr)",
       "basic": "Page demo basic (fr)",
       "centerAligned": "Page with center aligned contents (fr)",
-      "toolbar": "Page with toolbar (fr)",
+      "toolbarAndBreadcrumb": "Page with toolbar and breadcrumb (fr)",
       "stringSubtitle": "Page with subtitle string (fr)",
       "componentSubtitle": "Page with subtitle component (fr)",
       "breadcrumb": "Page with breadcrumb (fr)",
diff --git a/packages/ui/src/Page/Header.tsx b/packages/ui/src/Page/Header.tsx
index 05fb51cd6..037cd3bd6 100644
--- a/packages/ui/src/Page/Header.tsx
+++ b/packages/ui/src/Page/Header.tsx
@@ -53,7 +53,7 @@ export const PageHeader = ({
         <>
           <div
             data-testid="page-toolbar"
-            className="dz-page-toolbar"
+            className="toolbar-action-wrapper"
             data-breadcrumb={!!breadcrumb}
           >
             {toolbarActionMenu.actions?.map((action) => {
diff --git a/packages/ui/src/assets/css/page.css b/packages/ui/src/assets/css/page.css
index deea1e593..787e77f47 100644
--- a/packages/ui/src/assets/css/page.css
+++ b/packages/ui/src/assets/css/page.css
@@ -30,6 +30,14 @@
 }
 
 .dz-page > .dz-page-header > .dz-page-toolbar {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.dz-page > .dz-page-header > .toolbar-action-wrapper {
   display: none;
 }
 
@@ -63,10 +71,16 @@
   }
 
   .dz-page > .dz-page-header > .dz-page-toolbar {
+    margin-left: auto;
+    height: fit-content;
+    justify-content: flex-end;
+  }
+
+  .dz-page > .dz-page-header > .toolbar-action-wrapper {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--dz-page-gap);
+    gap: 0.5rem;
     height: fit-content;
     justify-content: flex-end;
     margin-left: auto;

From 5312f8e7e6b7f2a7a9bfc5ad0591a76a2e06b7cf Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 13 Aug 2025 13:49:56 +0545
Subject: [PATCH 18/18] feat: update description and add types

---
 apps/demo/src/Views/Ui/components/PageDemo.tsx | 16 ++++++++++++++++
 apps/demo/src/locales/en/ui.json               | 18 +++++++++---------
 apps/demo/src/locales/fr/ui.json               | 18 +++++++++---------
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index cc1829163..664f5efba 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -297,6 +297,22 @@ const breadcrumb = (
           paginated={false}
         />
       </Section>
+
+      <Section title={t("headers.types")}>
+        <CodeBlock
+          exampleCode='
+interface ActionsMenuItem
+  extends Omit<MenuItem, "onClick">,
+    Partial<IButtonProperties> {
+  iconOnly?: boolean;
+  onClick?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
+}
+
+interface ToolbarActionsMenuProperties {
+actions?: ActionsMenuItem[];
+}'
+        />
+      </Section>
     </>
   );
 };
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index baee5f090..74f551c8d 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -357,17 +357,17 @@
       }
     },
     "propertiesDescription": {
-      "breadcrumb": "Displays a breadcrumb navigation element at the top of the page, typically used to show page hierarchy.",
-      "centered": "If true, applies centered alignment styling to the page content.",
-      "children": "The main content of the page. Rendered after the header and within the page content area.",
+      "breadcrumb": "Displays a breadcrumb element at the top of the page.",
+      "centered": "Align the page content in the center.",
+      "children": "The main content of the page.",
       "className": "Additional CSS class to apply custom styling to the page container.",
-      "errorMessage": "Displays an error message when set. Overrides `children` and `loading`.",
-      "loading": "If true, displays a loading state instead of the page content.",
+      "errorMessage": "Displays an error message when set.",
+      "loading": "Displays a loading state instead of the page content.",
       "loadingComponent": "Optional custom loading component to display when `loading` is true. Overrides the default loading component.",
-      "loadingPageStyle": "Props passed to the default `LoadingPage` component to customize its appearance and behavior.",
-      "subtitle": "Text or React node to display as the page subtitle, below the main title.",
-      "title": "Text or React node to display as the main title of the page.",
-      "titleTag": "Custom element or string to use as the semantic tag for the title (e.g., h1, h2).",
+      "loadingPageStyle": "Props passed to the default `LoadingPage` component to customize its style.",
+      "subtitle": "Text to display as the page subtitle, below the main title.",
+      "title": "Text to display as the main title of the page.",
+      "titleTag": "Custom element or string to use as the semantic tag for the title.",
       "toolbarActionMenu": "Props for configuring a toolbar action menu component next to the title.",
       "toolbar": "Additional toolbar content to be rendered alongside the header elements."
     },
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index 0652e0972..2768708c8 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -357,17 +357,17 @@
       }
     },
     "propertiesDescription": {
-      "breadcrumb": "Displays a breadcrumb navigation element at the top of the page, typically used to show page hierarchy. (fr)",
-      "centered": "If true, applies centered alignment styling to the page content. (fr)",
-      "children": "The main content of the page. Rendered after the header and within the page content area. (fr)",
+      "breadcrumb": "Displays a breadcrumb element at the top of the page. (fr)",
+      "centered": "Align the page content in the center. (fr)",
+      "children": "The main content of the page. (fr)",
       "className": "Additional CSS class to apply custom styling to the page container. (fr)",
-      "errorMessage": "Displays an error message when set. Overrides `children` and `loading`. (fr)",
-      "loading": "If true, displays a loading state instead of the page content. (fr)",
+      "errorMessage": "Displays an error message when set. (fr)",
+      "loading": "Displays a loading state instead of the page content. (fr)",
       "loadingComponent": "Optional custom loading component to display when `loading` is true. Overrides the default loading component. (fr)",
-      "loadingPageStyle": "Props passed to the default `LoadingPage` component to customize its appearance and behavior. (fr)",
-      "subtitle": "Text or React node to display as the page subtitle, below the main title. (fr)",
-      "title": "Text or React node to display as the main title of the page. (fr)",
-      "titleTag": "Custom element or string to use as the semantic tag for the title (e.g., h1, h2). (fr)",
+      "loadingPageStyle": "Props passed to the default `LoadingPage` component to customize its style. (fr)",
+      "subtitle": "Text to display as the page subtitle, below the main title. (fr)",
+      "title": "Text to display as the main title of the page. (fr)",
+      "titleTag": "Custom element or string to use as the semantic tag for the title. (fr)",
       "toolbarActionMenu": "Props for configuring a toolbar action menu component next to the title. (fr)",
       "toolbar": "Additional toolbar content to be rendered alongside the header elements. (fr)"
     },