added settings Page and components

pages/productionOrders.vue

@@ -25,15 +25,15 @@
             </router-link>
         </div>
         <div id="content-body">
-            <ClientSearch />
-            <ProductionOrdersTemplateTable />
-            <ProductionOrdersTemplateTableNoClient />
-            <ProductionOrdersTemplate />
-            <TemplateChecklist />
-            <TemplateSearch />
-            <ProductionOrdersInstanceTable />
-            <ProductionOrdersInstance />
-            <InstanceChecklist />
+            <ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
+            <ProductionOrdersTemplateTable v-if="onTemplatelist"/>
+            <ProductionOrdersTemplateTableNoClient v-if="onCustomerTemplatelist"/>
+            <ProductionOrdersTemplate v-if="onTemplate"/>
+            <TemplateChecklist v-if="onTemplate"/>
+            <TemplateSearch v-if="onInstancelist"/>
+            <ProductionOrdersInstanceTable v-if="onInstancelist"/>
+            <ProductionOrdersInstance 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>