dev-demo: add system tests tab

Author: yaroslav8765

dev-demo/custom/AfComponents.vue

@@ -376,27 +376,8 @@
       ]" 
       :expandDepth="2" 
     />
-
-    <Button @click="createJob">
-      Create Job
-    </Button>
-
-    <Button @click="callHelloWorldApi">
-      Call API
-    </Button>
-
-    <Button @click="callHelloWorldApi">
-      Refresh badge
-    </Button>
-
-    <Button @click="doTest2faCall">
-      Test 2FA API Call
-    </Button>
   </div>
-
-
   </div>
-
 </template>
 
 <script setup lang="ts">
@@ -508,15 +489,6 @@ function doSmth(){
   adminforth.alert({message: 'You clicked the button!', variant: 'success' })
 }
 
-async function createJob() {
-  try {
-    const res = await callApi({path: '/api/create-job/', method: 'POST'});
-    console.log('Job created successfully:', res);
-  } catch (error) {
-    console.error('Error creating job:', error);
-  }
-}
-
 async function loadPageData(data) {  
   const { offset, limit } = data;
   // in real app do await callAdminForthApi or await fetch to get date, use offset and limit value to slice data
@@ -538,20 +510,4 @@ watch(textInput, (newVal) => {
   console.log('Text input changed:', newVal, typeof newVal);
 });
 
-async function callHelloWorldApi() {
-  try {
-    const response = await callApi({ path: '/api/hello/', method: 'GET' });
-    console.log('API response:', response);
-  } catch (error) {
-    console.error('API error:', error);
-  }
-}
-
-async function doTest2faCall() {
-  try {
-    const response = await callApi({ path: '/api/test2faCall/', method: 'GET' });
-  } catch (error) {
-    console.error('2FA API error:', error);
-  }
-}
 </script>

dev-demo/custom/SystemTest.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex flex-col max-w-[200px] m-10 mt-20 gap-10">
+    <Button @click="createJob">
+      Create Job
+    </Button>
+
+    <Button @click="callHelloWorldApi">
+      Call API
+    </Button>
+
+    <Button @click="callHelloWorldApi">
+      Refresh badge
+    </Button>
+
+    <Button @click="doTest2faCall">
+      Test 2FA API Call
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Button } from '@/afcl'
+import { useAdminforth } from '@/adminforth';
+import { callApi } from '@/utils';
+
+
+const { alert } = useAdminforth();
+import adminforth  from '@/adminforth';
+
+
+const valueStart = ref()
+
+watch(valueStart, (newVal) => {
+  console.log('New start value:', newVal);
+});
+
+async function createJob() {
+  try {
+    const res = await callApi({path: '/api/create-job/', method: 'POST'});
+    console.log('Job created successfully:', res);
+  } catch (error) {
+    console.error('Error creating job:', error);
+  }
+}
+
+async function callHelloWorldApi() {
+  try {
+    const response = await callApi({ path: '/api/hello/', method: 'GET' });
+    console.log('API response:', response);
+  } catch (error) {
+    console.error('API error:', error);
+  }
+}
+
+async function doTest2faCall() {
+  try {
+    const response = await callApi({ path: '/api/test2faCall/', method: 'GET' });
+  } catch (error) {
+    console.error('2FA API error:', error);
+  }
+}
+</script>

dev-demo/index.ts

@@ -198,6 +198,12 @@ export const admin = new AdminForth({
     {
       type: 'gap'
     },
+    {
+      label: 'System tests',
+      icon: 'flowbite:shield-solid',
+      component: '@@/SystemTest.vue',
+      path: '/system-tests',
+    },
     {
       label: 'Users',
       icon: 'flowbite:user-solid',