mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 15:58:38 +01:00
103 lines
4.3 KiB
Vue
103 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
|
|
definePageMeta({ layout: 'dashboard' });
|
|
|
|
const reportList = useFetch(`/api/security/list`, { headers: useComputedHeaders({ useSnapshotDates: false }) });
|
|
|
|
const { createAlert } = useAlert();
|
|
|
|
const rows = computed(() => reportList.data.value || [])
|
|
|
|
const columns = [
|
|
{ key: 'scan', label: 'Scan date' },
|
|
{ key: 'type', label: 'Type' },
|
|
{ key: 'data', label: 'Data' },
|
|
];
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
|
<div class="home w-full h-full px-10 pt-6 overflow-y-auto">
|
|
|
|
<!-- <div class="flex gap-2 items-center text-lyx-lightmode-text dark: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="pb-[10rem]">
|
|
<UTable :rows="rows" :columns="columns">
|
|
|
|
|
|
<template #scan-data="{ row }">
|
|
<div class="text-lyx-lightmode-text dark:text-lyx-text-dark">
|
|
{{ new Date(row.data.created_at).toLocaleString() }}
|
|
</div>
|
|
</template>
|
|
|
|
<template #type-data="{ row }">
|
|
<UBadge color="white" class="w-[4rem] flex justify-center">
|
|
{{ row.type }}
|
|
</UBadge>
|
|
</template>
|
|
|
|
<template #data-data="{ row }">
|
|
<div class="text-lyx-lightmode-text dark:text-lyx-text-dark">
|
|
<div v-if="row.type === 'domain'">
|
|
{{ row.data.domain }}
|
|
</div>
|
|
<div v-if="row.type === 'visit'">
|
|
{{ row.data.visit }}
|
|
</div>
|
|
<div v-if="row.type === 'event'">
|
|
{{ row.data.event }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- <template #actions-data="{ row }">
|
|
<UDropdown :items="items(row)">
|
|
<UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
|
|
</UDropdown>
|
|
</template> -->
|
|
|
|
</UTable>
|
|
</div>
|
|
|
|
<!-- <div class="w-full py-8 px-12 pb-[10rem]">
|
|
<div v-if="reportList.data.value" class="flex flex-col gap-2">
|
|
<div v-for="entry of reportList.data.value" class="flex flex-col gap-4">
|
|
<div v-if="entry.type === 'event'" class="flex gap-2 flex-col lg:flex-row items-center lg:items-start">
|
|
<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 v-if="entry.type === 'visit'" class="flex gap-2 flex-col lg:flex-row items-center lg:items-start">
|
|
<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 v-if="entry.type === 'domain'" class="flex gap-2 flex-col py-2 lg:flex-row items-center lg:items-start">
|
|
<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">
|
|
{{ entry.data.domain }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
</template>
|