added settings Page and components

pages/maintenanceVisits.vue

@@ -25,15 +25,15 @@
       </router-link>
     </div>
     <div id="content-body">
-      <ClientSearch />
-      <MaintenanceVisitsTemplateTable />
-      <MaintenanceVisitsTemplateTableNoClient />
-      <MaintenanceVisitsTemplate />
-      <TemplateChecklist />
-      <TemplateSearch />
-      <MaintenanceVisitsInstanceTable />
-      <MaintenanceVisitsInstance />
-      <InstanceChecklist />
+      <ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
+      <MaintenanceVisitsTemplateTable v-if="onTemplatelist"/>
+      <MaintenanceVisitsTemplateTableNoClient v-if="onCustomerTemplatelist"/>
+      <MaintenanceVisitsTemplate v-if="onTemplate"/>
+      <TemplateChecklist v-if="onTemplate"/>
+      <TemplateSearch v-if="onInstancelist"/>
+      <MaintenanceVisitsInstanceTable v-if="onInstancelist"/>
+      <MaintenanceVisitsInstance v-if="onInstance"/>
+      <InstanceChecklist v-if="onInstance"/>
     </div>
   </section>
 </template>
@@ -57,6 +57,13 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
+
+// to render the right components
+const onTemplatelist = ref(true)
+const onCustomerTemplatelist = ref(false)
+const onTemplate = ref(false)
+const onInstancelist = ref(false)
+const onInstance = ref(false)
 </script>
     
 <script>