fix security page

dashboard/components/dashboard/TopSection.vue

@@ -21,7 +21,7 @@ function showAnomalyInfoAlert() {
          attack or simply higher traffic due to good performance. Additionally, it can detect if someone is
          stealing parts of your website and hosting a duplicate version—an unfortunately common practice.
          Litlyx will notify you via email with actionable advices`,
-        'far fa-bug',
+        'far fa-shield',
         10000
     )
 

dashboard/layouts/dashboard.vue

@@ -18,10 +18,10 @@ const sections: Section[] = [
             { label: 'Dashboard', to: '/', icon: 'fal fa-table-layout' },
             { label: 'Events', to: '/events', icon: 'fal fa-square-bolt' },
             { label: 'AI Analyst', to: '/analyst', icon: 'fal fa-sparkles' },
+            { label: 'Security', to: '/security', icon: 'fal fa-shield' },
             { label: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true },
             { label: 'Links (soon)', to: '#', icon: 'fal fa-globe-pointer', disabled: true },
             { label: 'Integrations (soon)', to: '#', icon: 'fal fa-cube', disabled: true },
-            { label: 'Security', to: '/security', icon: 'fal fa-lock' },
             { label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
             {
                 grow: true,

dashboard/pages/security.vue

@@ -12,13 +12,38 @@ const headers = computed(() => {
 
 const reportList = useFetch(`/api/security/list`, { headers });
 
+const { createAlert } = useAlert();
+
+function showAnomalyInfoAlert() {
+    createAlert('AI Anomaly Detector info',
+        `Anomaly detector is running. It helps you detect a spike in visits or events, it could mean an
+         attack or simply higher traffic due to good performance. Additionally, it can detect if someone is
+         stealing parts of your website and hosting a duplicate version—an unfortunately common practice.
+         Litlyx will notify you via email with actionable advices`,
+        'far fa-shield',
+        10000
+    )
+}
+
 </script>
 
 
 <template>
 
-    <div class="home w-full h-full px-10 lg:px-0 pt-6 overflow-y-auto">
+    <div class="home w-full h-full px-10 pt-6 overflow-y-auto">
 
+        <div class="flex gap-2 items-center text-text/90 justify-end">
+            <div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
+            <div class="poppins font-regular text-[1rem]"> AI Anomaly Detector </div>
+            <div class="flex items-center">
+                <i class="far fa-info-circle text-[.9rem] hover:text-lyx-primary cursor-pointer"
+                    @click="showAnomalyInfoAlert"></i>
+            </div>
+        </div>
+
+
+
+        <div class="w-full h-full py-8 px-12">
             <div v-if="reportList.data.value" class="flex flex-col gap-2">
                 <div v-for="entry of reportList.data.value">
                     <div v-if="entry.type === 'event'" class="flex gap-2">
@@ -44,6 +69,7 @@ const reportList = useFetch(`/api/security/list`, { headers });
                     </div>
                 </div>
             </div>
+        </div>
 
     </div>