Fixed top header to more dynamic

frontend/src/app/users/[usersId]/page.jsx

@@ -28,7 +28,12 @@ const Page = () => {
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="" topbarTitle="View" state="view" />
+          <TopHeader
+            buttonText=""
+            topbarTitle="View"
+            state="view"
+            requiredButtons={["back", "title", "edit", "download"]}
+          />
           <div className={editUserStyle.addUserContainer}>
             {/* Input fields Container  */}
             <div className={editUserStyle.inputFieldContainer}>

frontend/src/app/users/add/page.jsx

@@ -14,6 +14,7 @@ const page = () => {
             cancelButtonText="Cancel"
             topbarTitle="Add User"
             state="add"
+            requiredButtons={["title", "save"]}
           />
           <div className={addUserStyle.addUserContainer}>
             {/* Input fields Container  */}

frontend/src/app/users/page.jsx

@@ -36,8 +36,11 @@ const UsersPage = () => {
       <SuccessToast message="New User added successfully" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Add User" topbarTitle="Users" />
-          {/* Users Table */}
+          <TopHeader
+            buttonText="Add User"
+            topbarTitle="Users"
+            requiredButtons={["title", "add", "search"]}
+          />
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead className={styles.tableHeader}>