From cf1aa103e4133df55a671bf4d5558b779e28813c Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Sat, 21 Sep 2024 15:19:41 +0200
Subject: [PATCH] fix security page

---
 dashboard/components/dashboard/TopSection.vue |  2 +-
 dashboard/layouts/dashboard.vue               |  2 +-
 dashboard/pages/security.vue                  | 66 +++++++++++++------
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/dashboard/components/dashboard/TopSection.vue b/dashboard/components/dashboard/TopSection.vue
index 4816a46..2f7f36c 100644
--- a/dashboard/components/dashboard/TopSection.vue
+++ b/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
     )
 
diff --git a/dashboard/layouts/dashboard.vue b/dashboard/layouts/dashboard.vue
index 885830e..2e65a99 100644
--- a/dashboard/layouts/dashboard.vue
+++ b/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,
diff --git a/dashboard/pages/security.vue b/dashboard/pages/security.vue
index 16220a4..d8782e9 100644
--- a/dashboard/pages/security.vue
+++ b/dashboard/pages/security.vue
@@ -12,34 +12,60 @@ 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 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">
-                    <div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
-                    <UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
-                    <div class="text-lyx-text-dark">
-                        Event date: {{ new Date(entry.data.eventDate).toLocaleString() }}
+        <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">
+                        <div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
+                        <UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
+                        <div class="text-lyx-text-dark">
+                            Event date: {{ new Date(entry.data.eventDate).toLocaleString() }}
+                        </div>
                     </div>
-                </div>
-                <div v-if="entry.type === 'visit'" class="flex gap-2">
-                    <div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
-                    <UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
-                    <div class="text-lyx-text-dark">
-                        Visit date: {{ new Date(entry.data.visitDate).toLocaleString() }}
+                    <div v-if="entry.type === 'visit'" class="flex gap-2">
+                        <div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
+                        <UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
+                        <div class="text-lyx-text-dark">
+                            Visit date: {{ new Date(entry.data.visitDate).toLocaleString() }}
+                        </div>
                     </div>
-                </div>
-                <div v-if="entry.type === 'domain'" class="flex gap-2">
-                    <div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
-                    <UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
-                    <div class="text-lyx-text-dark">
-                        Domain found: {{ entry.data.domain }}
+                    <div v-if="entry.type === 'domain'" class="flex gap-2">
+                        <div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
+                        <UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
+                        <div class="text-lyx-text-dark">
+                            Domain found: {{ entry.data.domain }}
+                        </div>
                     </div>
                 </div>
             </div>