Add new global pinia webcron store to handle webcron requests. The old implementation would add additional intervals for each page request.

resources/js/layouts/AppLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, usePage } from '@inertiajs/vue3'
+import { Head, usePage, } from '@inertiajs/vue3'
 import AppSidebar from '@/components/AppSidebar.vue';
 import { onMounted } from 'vue';
 import 'vue-sonner/style.css'
@@ -9,36 +9,27 @@ import { Button } from '@/components/ui/crm-button'
 import { SidebarProvider } from '@/components/ui/sidebar';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
 import { alertStore } from '@/stores/alertStore';
-import axios from 'axios';
+import { webcronStore } from '@/stores/webcronStore';
 
 const alert = alertStore()
+const webcron = webcronStore()
+
 const props = defineProps<{
     title: string
 }>();
 const isOpen = usePage().props.sidebarOpen;
 const cron = usePage().props.cron
 
-
 onMounted(() => {
     if (navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
         document.body.classList.add('is-mac')
     }
 
     if (cron) {
-        triggerWebcron()
-        setInterval(triggerWebcron, 30000)
+        webcron.start()
     }
 })
 
-const triggerWebcron = async function () {
-    await axios.get('/webcron')
-        .catch(function (response) {
-            if (response.status >= 400) {
-                console.error(response.message)
-            }
-        })
-}
-
 </script>
 
 <template>