added settings Page and components

pages/solutions.vue

@@ -4,11 +4,11 @@
       <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
     </div>
     <div id="content-body">
-      <ClientSearch />
-      <SolutionTable />
-      <SolutionTableNoClient />
-      <Solution />
-      <SolutionChecklist />
+      <ClientSearch v-if="onSolutionlist || onCustomerSolutionlist"/>
+      <SolutionTable v-if="onSolutionlist"/>
+      <SolutionTableNoClient v-if="onCustomerSolutionlist"/>
+      <Solution v-if="onSolution"/>
+      <SolutionChecklist v-if="onSolution"/>
     </div>
   </section>
 </template>
@@ -28,6 +28,11 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
+
+// to render the right components
+const onSolutionlist = ref(true)
+const onCustomerSolutionlist = ref(false)
+const onSolution = ref(false)
 </script>
 
 <script>