Fixed top header to more dynamic

frontend/src/app/projects/page.jsx

@@ -171,7 +171,11 @@ const ProjectsPage = () => {
       <SuccessToast message="Project successfully added!" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Create Project" topbarTitle="Project" />
+          <TopHeader
+            buttonText="Create Project"
+            topbarTitle="Project"
+            requiredButtons={["title", "add", "search"]}
+          />
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead>

frontend/src/app/projects/view/[servicesId]/page.jsx

@@ -42,6 +42,7 @@ const AddServices = () => {
             cancelButtonText="Cancel"
             state="view"
             topbarTitle="View Services"
+            requiredButtons={["back", "title", "edit", "download"]}
           />
           <div className={styles.contentContainer}>
             <div className={styles.fieldsContainerCreateNew}>

frontend/src/app/projects/view/add-from-scratch/page.jsx

@@ -34,6 +34,7 @@ const AddServices = () => {
             cancelButtonText="Cancel"
             state="add"
             topbarTitle="Create New Services"
+            requiredButtons={["title", "save"]}
           />
           <div className={styles.contentContainer}>
             <div className={styles.fieldsContainerCreateNew}>

frontend/src/app/projects/view/page.jsx

@@ -99,6 +99,13 @@ const AddProject = () => {
               topbarTitle="Services"
               trigger={setTriggerAddServicesModal}
               triggerState={triggerAddServicesModal}
+              requiredButtons={[
+                "title",
+                "back",
+                "add-services",
+                "search",
+                "services-drop-down",
+              ]}
             />
             <div className={styles.tableContainer}>
               <table className={styles.table}>