Add Dashboard Cards with Aggregate Log Statistics (Parity with arcanedev/logviewer)

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/app.js": "/app.js?id=b5eb6497b80ecd00237a857b35fcc1d6",
-    "/app.css": "/app.css?id=bf9e77abce3da8caacd004d57e4e8429",
+    "/app.js": "/app.js?id=684035dacf3dafb4b6fd1c504f103937",
+    "/app.css": "/app.css?id=339df4ca3bb0fafa56bf2550b7cfd729",
     "/img/log-viewer-128.png": "/img/log-viewer-128.png?id=d576c6d2e16074d3f064e60fe4f35166",
     "/img/log-viewer-32.png": "/img/log-viewer-32.png?id=f8ec67d10f996aa8baf00df3b61eea6d",
     "/img/log-viewer-64.png": "/img/log-viewer-64.png?id=8902d596fc883ca9eb8105bb683568c6"

resources/js/components/FileList.vue

@@ -36,6 +36,8 @@
         <host-selector class="mb-8 mt-6" />
       </template>
 
+      <severity-stats-cards class="mt-6" />
+
       <template v-if="fileStore.fileTypesAvailable && fileStore.fileTypesAvailable.length > 1">
         <file-type-selector class="mb-8 mt-6" />
       </template>
@@ -218,6 +220,7 @@ import SiteSettingsDropdown from './SiteSettingsDropdown.vue';
 import HostSelector from './HostSelector.vue';
 import { handleKeyboardFileNavigation, handleKeyboardFileSettingsNavigation } from '../keyboardNavigation';
 import FileTypeSelector from './FileTypeSelector.vue';
+import SeverityStatsCards from './SeverityStatsCards.vue';
 import DownloadLink from "./DownloadLink.vue";
 
 const router = useRouter();

resources/js/components/LevelButtons.vue

@@ -1,6 +1,32 @@
 <template>
-  <div class="flex items-center">
-    <Menu as="div" class="mr-5 relative log-levels-selector">
+  <div class="flex items-center" :class="verbose ? 'flex-wrap w-full' : ''">
+    <!-- Verbose mode: Individual buttons -->
+    <template v-if="verbose">
+      <!-- All button -->
+      <button
+        @click.stop.prevent="severityStore.selectAllLevels()"
+        class="badge none"
+        :class="severityStore.levelsSelected.length === severityStore.levelsFound.length ? 'active' : ''"
+      >
+        <span class="font-semibold">All</span>
+        <span class="ml-2 opacity-90">{{ severityStore.totalResults.toLocaleString() + (logViewerStore.hasMoreResults ? '+' : '') }}</span>
+      </button>
+
+      <!-- Individual level buttons -->
+      <button
+        v-for="levelCount in severityStore.levelsFound"
+        :key="levelCount.level"
+        @click.stop.prevent="severityStore.selectOnlyLevel(levelCount.level)"
+        class="badge"
+        :class="[levelCount.level_class, levelCount.selected ? 'active' : '']"
+      >
+        <span class="font-semibold">{{ levelCount.level_name }}</span>
+        <span class="ml-2 opacity-90">{{ Number(levelCount.count).toLocaleString() + (logViewerStore.hasMoreResults ? '+' : '') }}</span>
+      </button>
+    </template>
+
+    <!-- Compact mode: Dropdown -->
+    <Menu v-else as="div" class="relative log-levels-selector">
 
       <MenuButton as="button" id="severity-dropdown-toggle" class="dropdown-toggle badge none" :class="severityStore.levelsSelected.length > 0 ? 'active' : ''">
         <template v-if="severityStore.levelsSelected.length > 2">
@@ -76,6 +102,13 @@ import { useLogViewerStore } from '../stores/logViewer.js';
 import { useSeverityStore } from '../stores/severity.js';
 import { watch } from 'vue';
 
+const props = defineProps({
+  verbose: {
+    type: Boolean,
+    default: false
+  }
+});
+
 const logViewerStore = useLogViewerStore();
 const severityStore = useSeverityStore();
 

resources/js/components/LogList.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="h-full w-full py-5 log-list">
     <div class="flex flex-col h-full w-full md:mx-3 mb-4">
-      <div class="md:px-4 mb-4 flex flex-col-reverse lg:flex-row items-start">
-        <div class="flex items-center mr-5 mt-3 md:mt-0" v-if="showLevelsDropdown">
-          <LevelButtons />
+      <div class="md:px-4 mb-4" :class="logViewerStore.verboseLogCount ? 'flex flex-col items-start' : 'flex flex-col-reverse lg:flex-row items-start'">
+        <!-- Level buttons - to the left in normal mode, separate row when verbose mode -->
+        <div class="flex items-center mt-3 md:mt-0" :class="logViewerStore.verboseLogCount ? 'w-full order-2' : 'mr-5'" v-if="showLevelsDropdown">
+          <LevelButtons :verbose="logViewerStore.verboseLogCount" />
         </div>
-        <div class="w-full lg:w-auto flex-1 flex justify-end min-h-[38px]">
+
+        <!-- Search bar and controls - shares row with dropdown in normal mode, full width when verbose mode -->
+        <div class="flex justify-end min-h-[38px]" :class="logViewerStore.verboseLogCount ? 'w-full order-1 mb-3' : 'w-full lg:w-auto flex-1'">
           <SearchInput />
           <div class="hidden md:block ml-5">
             <button @click="logViewerStore.loadLogs()" id="reload-logs-button" title="Reload current results" class="menu-button">