fix: update OpenSearch host configuration and improve code consistency across controllers and components

app/Controllers/Http/Admin/AdminuserController.ts

@@ -85,9 +85,9 @@ export default class AdminuserController {
             // return response.badRequest(error.messages);
             throw error;
         }
-       
+
-        const input: Record<string, any> = request.only(['login', 'email','first_name', 'last_name']);
+        const input: Record<string, any> = request.only(['login', 'email', 'first_name', 'last_name']);
-        input.password = request.input('new_password'); 
+        input.password = request.input('new_password');
         const user = await User.create(input);
         if (request.input('roles')) {
             const roles: Array<number> = request.input('roles');

app/Controllers/Http/Admin/MimetypeController.ts

@@ -33,7 +33,7 @@ export default class MimetypeController {
             //  Step 2 - Validate request body against  the schema
             // await request.validate({ schema: newDatasetSchema, messages: this.messages });
             const validator = vine.compile(newDatasetSchema);
-            validator.messagesProvider = new SimpleMessagesProvider(this.messages);          
+            validator.messagesProvider = new SimpleMessagesProvider(this.messages);
             await request.validateUsing(validator, { messagesProvider: new SimpleMessagesProvider(this.messages) });
         } catch (error) {
             // Step 3 - Handle errors
@@ -168,7 +168,7 @@ export default class MimetypeController {
                 mimetype,
             });
         } catch (error) {
-            if (error.code == 'E_ROW_NOT_FOUND') {
+            if (error.code === 'E_ROW_NOT_FOUND') {
                 session.flash({ warning: 'Mimetype is not found in database' });
             } else {
                 session.flash({ warning: 'general error occured, you cannot delete the mimetype' });

app/Controllers/Http/Admin/mailsettings_controller.ts

@@ -85,15 +85,14 @@ export default class MailSettingsController {
         }
 
         try {
-            await mail.send(
+            await mail.send((message) => {
-                (message) => {
+                message
-                    message
+                    // .from(Config.get('mail.from.address'))
-                        // .from(Config.get('mail.from.address'))
+                    .from('tethys@geosphere.at')
-                        .from('tethys@geosphere.at')
+                    .to(userEmail)
-                        .to(userEmail)
+                    .subject('Test Email')
-                        .subject('Test Email')
+                    .html('<p>If you received this email, the email configuration seems to be correct.</p>');
-                        .html('<p>If you received this email, the email configuration seems to be correct.</p>');
+            });
-                });
 
             return response.json({ success: true, message: 'Test email sent successfully' });
             // return response.flash('Test email sent successfully!', 'message').redirect().back();

config/inertia.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from '@adonisjs/inertia';
 import type { HttpContext } from '@adonisjs/core/http';
-import type { InferSharedProps } from '@adonisjs/inertia/types'
+import type { InferSharedProps } from '@adonisjs/inertia/types';
+import env from '#start/env';
 
 const inertiaConfig = defineConfig({
     /**
@@ -21,6 +22,8 @@ const inertiaConfig = defineConfig({
             return ctx.session?.flashMessages.get('user_id');
         },
 
+        opensearch_host: env.get('OPENSEARCH_HOST'),
+
         flash: (ctx) => {
             return {
                 message: ctx.session?.flashMessages.get('message'),

resources/js/Components/Map/SearchMap.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, Ref, computed } from 'vue';
+import { onMounted, onUnmounted, ref, computed } from 'vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import L, {
     Map as LeafletMap,
@@ -11,63 +11,63 @@ import L, {
     type LatLngBounds,
     type LatLngBoundsExpression,
     type MapOptions,
-    type Renderer,
-    type RendererOptions,
     type LeafletEvent,
+    TileLayer,
 } from 'leaflet';
-import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
+// import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
 import axios from 'axios';
 import DrawControlComponent from '@/Components/Map/draw.component.vue';
 import ZoomControlComponent from '@/Components/Map/zoom.component.vue';
 import { MapService } from '@/Stores/map.service';
 import { OpensearchDocument } from '@/Dataset';
+import { usePage } from '@inertiajs/vue3';
 
 /**
  * Leaflet's internal renderer machinery is not part of the public @types/leaflet
  * surface, so we describe the bits we touch here. This keeps the mixin body typed
  * instead of falling back to `any`.
  */
-interface RendererCapableMap extends LeafletMap {
+// interface RendererCapableMap extends LeafletMap {
-    options: MapOptions & { renderer?: Renderer; preferCanvas?: boolean };
+//     options: MapOptions & { renderer?: Renderer; preferCanvas?: boolean };
-    _renderer?: Renderer;
+//     _renderer?: Renderer;
-    _paneRenderers: Record<string, Renderer | undefined>;
+//     _paneRenderers: Record<string, Renderer | undefined>;
-    _getPaneRenderer(name?: string): Renderer | false;
+//     _getPaneRenderer(name?: string): Renderer | false;
-    _createRenderer(options?: RendererOptions): Renderer;
+//     _createRenderer(options?: RendererOptions): Renderer;
-}
+// }
 
-LeafletMap.include({
+// LeafletMap.include({
-    getRenderer(this: RendererCapableMap, layer: Layer): Renderer {
+//     getRenderer(this: RendererCapableMap, layer: Layer): Renderer {
-        const layerOptions = layer.options as { renderer?: Renderer; pane?: string };
+//         const layerOptions = layer.options as { renderer?: Renderer; pane?: string };
-        let renderer: Renderer | false | undefined =
+//         let renderer: Renderer | false | undefined =
-            layerOptions.renderer || this._getPaneRenderer(layerOptions.pane) || this.options.renderer || this._renderer;
+//             layerOptions.renderer || this._getPaneRenderer(layerOptions.pane) || this.options.renderer || this._renderer;
 
-        if (!renderer) {
+//         if (!renderer) {
-            renderer = this._renderer = this._createRenderer();
+//             renderer = this._renderer = this._createRenderer();
-        }
+//         }
 
-        if (!this.hasLayer(renderer)) {
+//         if (!this.hasLayer(renderer)) {
-            this.addLayer(renderer);
+//             this.addLayer(renderer);
-        }
+//         }
-        return renderer;
+//         return renderer;
-    },
+//     },
 
-    _getPaneRenderer(this: RendererCapableMap, name?: string): Renderer | false {
+//     _getPaneRenderer(this: RendererCapableMap, name?: string): Renderer | false {
-        if (name === 'overlayPane' || name === undefined) {
+//         if (name === 'overlayPane' || name === undefined) {
-            return false;
+//             return false;
-        }
+//         }
 
-        let renderer = this._paneRenderers[name];
+//         let renderer = this._paneRenderers[name];
-        if (renderer === undefined) {
+//         if (renderer === undefined) {
-            renderer = this._createRenderer({ pane: name });
+//             renderer = this._createRenderer({ pane: name });
-            this._paneRenderers[name] = renderer;
+//             this._paneRenderers[name] = renderer;
-        }
+//         }
-        return renderer;
+//         return renderer;
-    },
+//     },
 
-    _createRenderer(this: RendererCapableMap, options?: RendererOptions): Renderer {
+//     _createRenderer(this: RendererCapableMap, options?: RendererOptions): Renderer {
-        return (this.options.preferCanvas && L.canvas(options)) || L.svg(options);
+//         return (this.options.preferCanvas && L.canvas(options)) || L.svg(options);
-    },
+//     },
-});
+// });
 
 const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
 const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
@@ -86,10 +86,10 @@ const props = defineProps({
     },
     // OpenSearch host is provided by the server (prop / shared data), never imported
     // from server-only modules into client code.
-    opensearchHost: {
+    // opensearchHost: {
-        type: String,
+    //     type: String,
-        default: 'localhost',
+    //     default: 'http://localhost:9200',
-    },
+    // },
     mapOptions: {
         type: Object,
         default: () => ({
@@ -101,7 +101,8 @@ const props = defineProps({
     },
 });
 
-const OPENSEARCH_HOST = computed(() => `${window.location.protocol}//${props.opensearchHost}:9200`);
+// const OPENSEARCH_HOST = computed(() => `${props.opensearchHost}`);
+const opensearchHost = computed(() => usePage().props.opensearch_host)
 
 const items = computed<OpensearchDocument[]>({
     get() {
@@ -170,7 +171,7 @@ const initMap = async (): Promise<void> => {
     const attributionControl = new Control.Attribution().addTo(map);
     attributionControl.setPrefix(false);
 
-    const osmGray = tileLayerWMS('https://ows.terrestris.de/osm-gray/service', {
+    const osmGray = new TileLayer.WMS('https://ows.terrestris.de/osm-gray/service', {
         format: 'image/png',
         attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
         layers: 'OSM-WMS',
@@ -199,7 +200,7 @@ const handleDrawEventCreated = async (event: DrawCreatedEvent): Promise<void> =>
         // drop the request body on GET, which would send an empty query.
         const response = await axios<OpenSearchSearchResponse>({
             method: 'POST',
-            url: OPENSEARCH_HOST.value + '/tethys-records/_search',
+            url: opensearchHost.value + '/tethys-records/_search',
             headers: { 'Content-Type': 'application/json' },
             data: {
                 size: 1000,

resources/js/Pages/Dashboard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Head, usePage } from '@inertiajs/vue3';
+import { Head, Link, usePage } from '@inertiajs/vue3';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { MainService } from '@/Stores/main';
 import {
     mdiAccountMultiple,
@@ -11,6 +11,16 @@ import {
     mdiReload,
     mdiChartPie,
     mdiTrendingUp,
+    mdiShieldCrownOutline,
+    mdiClipboardClockOutline,
+    mdiAccountCheckOutline,
+    mdiLightningBoltOutline,
+    mdiHistory,
+    mdiAccountCogOutline,
+    mdiAccountEditOutline,
+    mdiFileDocumentEditOutline,
+    mdiMapSearchOutline,
+    mdiArrowRight,
 } from '@mdi/js';
 import LineChart from '@/Components/Charts/LineChart.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -21,12 +31,24 @@ import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
 import CardBoxDataset from '@/Components/CardBoxDataset.vue';
 import type { User } from '@/Dataset';
+import { stardust } from '@eidellev/adonis-stardust/client';
 
 const mainService = MainService();
 
 const isLoadingChart = ref(false);
+const loadError = ref<string | null>(null);
 
-const fillChartData = async () => {
+const chartData = computed(() => mainService.graphData);
+const authors = computed(() => mainService.authors);
+const datasets = computed(() => mainService.datasets);
+const recentDatasets = computed(() => mainService.datasets.slice(0, 5));
+const submitters = computed(() => mainService.clients);
+const user = computed(() => usePage().props.authUser as User);
+
+// Single source of truth for chart loading, used by both the initial
+// fetch and the manual refresh so the loading state is always shown.
+const loadChart = async () => {
+    if (isLoadingChart.value) return; // guard against overlapping requests
     isLoadingChart.value = true;
     try {
         await mainService.fetchChartData();
@@ -35,35 +57,148 @@ const fillChartData = async () => {
     }
 };
 
-const chartData = computed(() => mainService.graphData);
+// Fetch everything once the component is mounted (avoids running during SSR
-const authors = computed(() => mainService.authors);
+// and as unhandled top-level side effects). Requests run in parallel.
-const datasets = computed(() => mainService.datasets);
+onMounted(async () => {
-const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
+    try {
-const submitters = computed(() => mainService.clients);
+        await Promise.all([
-const user = computed(() => usePage().props.authUser as User);
+            mainService.fetchApi('clients'),
-
+            mainService.fetchApi('authors'),
-// Initialize data
+            mainService.fetchApi('datasets'),
-mainService.fetchApi('clients');
+            loadChart(),
-mainService.fetchApi('authors');
+        ]);
-mainService.fetchApi('datasets');
+    } catch (e) {
-mainService.fetchChartData();
+        loadError.value = 'Failed to load dashboard data. Please try refreshing.';
+    }
+});
 
 // Safe role check: authUser or its roles may be absent depending on auth state
 const userHasRoles = (roleNames: Array<string>): boolean => {
     return user.value?.roles?.some((role) => roleNames.includes(role)) ?? false;
 };
 
-// Greeting that adapts to the time of day
+const isAdmin = computed(() => userHasRoles(['administrator']));
-const greeting = computed(() => {
+
-    const h = new Date().getHours();
+// Evaluated once at setup — these don't need to be reactive for a dashboard
+// that isn't expected to stay open across a time-of-day boundary.
+const now = new Date();
+
+const greeting = (() => {
+    const h = now.getHours();
     if (h < 12) return 'Good morning';
     if (h < 18) return 'Good afternoon';
     return 'Good evening';
+})();
+
+const today = now.toLocaleDateString(undefined, {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
 });
 
-const today = computed(() =>
+// ---------------------------------------------------------------------------
-    new Date().toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }),
+// Admin overview
-);
+// ---------------------------------------------------------------------------
+
+// Derived from data already in the store. `status` is read defensively; if your
+// dataset model doesn't expose it these fall back to 0 — point them at real
+// store fields (e.g. a dedicated `mainService.pendingCount`) when available.
+const pendingCount = computed(() => mainService.datasets.filter((d: any) => d?.status === 'approved').length);
+
+const adminStats = computed(() => [
+    {
+        label: 'Active Submitters',
+        value: submitters.value.length,
+        icon: mdiAccountCheckOutline,
+        border: 'border-emerald-500',
+        iconColor: 'text-emerald-500',
+    },
+    {
+        label: 'Publications',
+        value: datasets.value.length,
+        icon: mdiDatabaseOutline,
+        border: 'border-blue-500',
+        iconColor: 'text-blue-500',
+    },
+    {
+        label: 'Authors',
+        value: authors.value.length,
+        icon: mdiAccountMultiple,
+        border: 'border-purple-500',
+        iconColor: 'text-purple-500',
+    },
+    {
+        label: 'Pending Review',
+        value: pendingCount.value,
+        icon: mdiClipboardClockOutline,
+        border: 'border-amber-500',
+        iconColor: 'text-amber-500',
+    },
+]);
+
+// Ziggy's route() throws for unknown names and may be undefined if Ziggy isn't
+// installed — resolve safely so a missing route never crashes the dashboard.
+const safeRoute = (name: string, params?: any): string => {
+    try {
+        // @ts-ignore - Ziggy global
+        return typeof stardust.route === 'function' ? stardust.route(name, params) : '#';
+    } catch {
+        return '#';
+    }
+};
+
+// Adjust the route names below to match your application's named routes.
+const quickActions = [
+    {
+        label: 'Manage Tethys Accounts',
+        description: 'View and edit Tethys accounts',
+        icon: mdiAccountCogOutline,
+        href: safeRoute('settings.user.index'),
+    },
+    {
+        label: 'Manage Tethys Roles',
+        description: 'Edit Tethys roles',
+        icon: mdiAccountEditOutline,
+        href: safeRoute('settings.role.index'),
+    },
+    {
+        label: 'Review Publications',
+        description: 'Approve or reject submissions',
+        icon: mdiFileDocumentEditOutline,
+        href: safeRoute('editor.dataset.list'),
+    },
+    {
+        label: 'Geographic Search',
+        description: 'Search datasets by location',
+        icon: mdiMapSearchOutline,
+        href: safeRoute('apps.map'),
+    },
+];
+
+type Activity = {
+    id: number | string;
+    description: string;
+    user?: string;
+    created_at: string;
+};
+
+// Reads from the store if your backend provides it; otherwise renders an empty
+// state. Populate via e.g. mainService.fetchApi('activities') in onMounted.
+const recentActivity = computed<Activity[]>(() => (mainService as any).activities ?? []);
+
+const relativeTime = (iso: string): string => {
+    const then = new Date(iso).getTime();
+    if (Number.isNaN(then)) return '';
+    const mins = Math.round((Date.now() - then) / 60000);
+    if (mins < 1) return 'just now';
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.round(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.round(hrs / 24);
+    if (days < 7) return `${days}d ago`;
+    return new Date(iso).toLocaleDateString();
+};
 </script>
 
 <template>
@@ -72,67 +207,63 @@ const today = computed(() =>
 
         <SectionMain>
             <!-- Greeting hero -->
-<div
+            <div
-    class="reveal relative overflow-hidden rounded-2xl mb-8 p-6 md:p-8 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white shadow-xl ring-1 ring-white/5"
+                class="reveal relative overflow-hidden rounded-2xl mb-8 p-6 md:p-8 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white shadow-xl ring-1 ring-white/5"
->
+            >
-    <!-- grüner Akzent-Glow statt weißer Kreise -->
+                <!-- green accent glow -->
-    <div class="absolute -right-10 -top-10 w-48 h-48 rounded-full bg-emerald-500/15 blur-3xl"></div>
+                <div class="absolute -right-10 -top-10 w-48 h-48 rounded-full bg-emerald-500/15 blur-3xl"></div>
-    <div class="absolute -left-8 -bottom-12 w-40 h-40 rounded-full bg-green-400/10 blur-3xl"></div>
+                <div class="absolute -left-8 -bottom-12 w-40 h-40 rounded-full bg-green-400/10 blur-3xl"></div>
-    <!-- schmale Akzentkante links -->
+                <!-- thin accent edge on the left -->
-    <div class="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-green-400 to-emerald-600"></div>
+                <div class="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-green-400 to-emerald-600"></div>
-    <div class="relative">
+                <div class="relative">
-        <p class="text-sm font-medium text-slate-400">{{ today }}</p>
+                    <p class="text-sm font-medium text-slate-400">{{ today }}</p>
-        <h1 class="mt-1 text-2xl md:text-3xl font-bold tracking-tight">
+                    <h1 class="mt-1 text-2xl md:text-3xl font-bold tracking-tight">
-            {{ greeting }}, <span class="text-green-400">{{ user?.login ?? 'there' }}</span>
+                        {{ greeting }}, <span class="text-green-400">{{ user?.login ?? 'there' }}</span>
-        </h1>
+                    </h1>
-        <p class="mt-2 text-sm text-slate-400 max-w-xl">
+                    <p class="mt-2 text-sm text-slate-400 max-w-xl">
-            Here's an overview of authors, publications and submitters across the repository.
+                        Here's an overview of authors, publications and submitters across the repository.
-        </p>
+                    </p>
-    </div>
+                </div>
-</div>
+            </div>
+
+            <!-- Load error banner -->
+            <div
+                v-if="loadError"
+                role="alert"
+                class="reveal mb-8 rounded-xl border-l-4 border-red-500 bg-red-50 dark:bg-red-900/20 p-4 text-sm text-red-700 dark:text-red-300"
+            >
+                {{ loadError }}
+            </div>
 
             <!-- Stats Grid -->
             <div class="reveal reveal-1 grid grid-cols-1 gap-6 lg:grid-cols-3 mb-8">
-                <div class="rounded-xl border-l-4 border-emerald-500 bg-white dark:bg-slate-900/40 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
+                <div
-                    <CardBoxWidget
+                    class="rounded-xl border-l-4 border-emerald-500 bg-white dark:bg-slate-900/40 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
-                        trend="12%"
+                >
-                        trend-type="up"
+                    <CardBoxWidget color="text-emerald-500" :icon="mdiAccountMultiple" :number="authors.length" label="Authors" />
-                        color="text-emerald-500"
-                        :icon="mdiAccountMultiple"
-                        :number="authors.length"
-                        label="Authors"
-                    />
                 </div>
-                <div class="rounded-xl border-l-4 border-blue-500 bg-white dark:bg-slate-900/40 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
+                <div
-                    <CardBoxWidget
+                    class="rounded-xl border-l-4 border-blue-500 bg-white dark:bg-slate-900/40 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
-                        trend-type="info"
+                >
-                        color="text-blue-500"
+                    <CardBoxWidget color="text-blue-500" :icon="mdiDatabaseOutline" :number="datasets.length" label="Publications" />
-                        :icon="mdiDatabaseOutline"
-                        :number="datasets.length"
-                        label="Publications"
-                    />
                 </div>
-                <div class="rounded-xl border-l-4 border-purple-500 bg-white dark:bg-slate-900/40 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
+                <div
-                    <CardBoxWidget
+                    class="rounded-xl border-l-4 border-purple-500 bg-white dark:bg-slate-900/40 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
-                        trend-type="up"
+                >
-                        color="text-purple-500"
+                    <CardBoxWidget color="text-purple-500" :icon="mdiChartTimelineVariant" :number="submitters.length" label="Submitters" />
-                        :icon="mdiChartTimelineVariant"
-                        :number="submitters.length"
-                        label="Submitters"
-                    />
                 </div>
             </div>
 
             <!-- Recent Datasets Section -->
-            <div v-if="datasetBarItems.length > 0" class="reveal reveal-2 mb-8">
+            <div v-if="recentDatasets.length > 0" class="reveal reveal-2 mb-8">
                 <SectionTitleLineWithButton :icon="mdiTrendingUp" title="Recent Publications">
-                    <span class="text-sm text-gray-500 dark:text-gray-400">Latest {{ datasetBarItems.length }} publications</span>
+                    <span class="text-sm text-gray-500 dark:text-gray-400"> Latest {{ recentDatasets.length }} publications </span>
                 </SectionTitleLineWithButton>
 
                 <div class="grid grid-cols-1 gap-4">
                     <CardBoxDataset
-                        v-for="(dataset, index) in datasetBarItems"
+                        v-for="dataset in recentDatasets"
-                        :key="index"
+                        :key="dataset.id"
                         :dataset="dataset"
                         class="hover:shadow-md transition-all duration-300"
                     />
@@ -149,9 +280,9 @@ const today = computed(() =>
                 :icon="mdiFinance"
                 :header-icon="mdiReload"
                 class="reveal reveal-3 mb-6 shadow-lg"
-                @header-icon-click="fillChartData"
+                @header-icon-click="loadChart"
             >
-                <div v-if="isLoadingChart" class="flex items-center justify-center h-96">
+                <div v-if="isLoadingChart" role="status" aria-live="polite" class="flex items-center justify-center h-96">
                     <div class="flex flex-col items-center gap-3">
                         <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
                         <p class="text-sm text-gray-500 dark:text-gray-400">Loading chart data...</p>
@@ -165,12 +296,104 @@ const today = computed(() =>
                 </div>
             </CardBox>
 
-            <!-- Admin Section -->
+            <!-- ============================== Admin ============================== -->
-            <template v-if="userHasRoles(['administrator'])">
+            <template v-if="isAdmin">
-                <SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters Management" class="mt-8">
+                <SectionTitleLineWithButton :icon="mdiShieldCrownOutline" title="Admin Overview" class="mt-10">
                     <span class="text-sm text-gray-500 dark:text-gray-400">Administrator view</span>
                 </SectionTitleLineWithButton>
 
+                <!-- Admin KPI cards -->
+                <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+                    <div
+                        v-for="stat in adminStats"
+                        :key="stat.label"
+                        class="rounded-xl border-l-4 bg-white dark:bg-slate-900/40 shadow-sm p-4 flex items-center gap-4 transition-all duration-300 hover:shadow-md"
+                        :class="stat.border"
+                    >
+                        <span
+                            class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-gray-50 dark:bg-slate-800"
+                            :class="stat.iconColor"
+                        >
+                            <svg viewBox="0 0 24 24" class="w-6 h-6" fill="currentColor" aria-hidden="true">
+                                <path :d="stat.icon" />
+                            </svg>
+                        </span>
+                        <div>
+                            <p class="text-2xl font-bold text-gray-800 dark:text-white leading-none">
+                                {{ stat.value }}
+                            </p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ stat.label }}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Quick actions + Recent activity -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+                    <!-- Quick actions -->
+                    <CardBox :icon="mdiLightningBoltOutline" :show-header-icon="false" title="Quick Actions" class="lg:col-span-1 shadow-lg">
+                        <div class="grid gap-3">
+                            <Link
+                                v-for="action in quickActions"
+                                :key="action.label"
+                                :href="action.href"
+                                class="group flex items-center gap-3 rounded-lg border border-gray-100 dark:border-slate-700 p-3 hover:border-emerald-300 dark:hover:border-emerald-700 hover:bg-emerald-50/50 dark:hover:bg-emerald-900/10 transition-colors"
+                            >
+                                <span
+                                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400"
+                                >
+                                    <svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor" aria-hidden="true">
+                                        <path :d="action.icon" />
+                                    </svg>
+                                </span>
+                                <span class="min-w-0 flex-1">
+                                    <span class="block text-sm font-medium text-gray-800 dark:text-gray-100">
+                                        {{ action.label }}
+                                    </span>
+                                    <span class="block text-xs text-gray-400 truncate">{{ action.description }}</span>
+                                </span>
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    class="w-5 h-5 text-gray-300 group-hover:text-emerald-500 group-hover:translate-x-0.5 transition-all"
+                                    fill="currentColor"
+                                    aria-hidden="true"
+                                >
+                                    <path :d="mdiArrowRight" />
+                                </svg>
+                            </Link>
+                        </div>
+                    </CardBox>
+
+                    <!-- Recent activity feed -->
+                    <CardBox :icon="mdiHistory" :show-header-icon="false" title="Recent Activity" class="lg:col-span-2 shadow-lg">
+                        <ul
+                            v-if="recentActivity.length > 0"
+                            class="relative space-y-5 before:absolute before:left-[7px] before:top-1 before:bottom-1 before:w-px before:bg-gray-200 dark:before:bg-slate-700"
+                        >
+                            <li v-for="item in recentActivity" :key="item.id" class="relative pl-7">
+                                <span
+                                    class="absolute left-0 top-1 w-3.5 h-3.5 rounded-full bg-emerald-500 ring-4 ring-white dark:ring-slate-900"
+                                ></span>
+                                <p class="text-sm text-gray-800 dark:text-gray-200">{{ item.description }}</p>
+                                <p class="text-xs text-gray-400 mt-0.5">
+                                    <span v-if="item.user">{{ item.user }} &middot; </span>
+                                    {{ relativeTime(item.created_at) }}
+                                </p>
+                            </li>
+                        </ul>
+                        <div v-else class="flex flex-col items-center justify-center py-10 text-center text-gray-400 dark:text-gray-500">
+                            <svg viewBox="0 0 24 24" class="w-10 h-10 mb-2 opacity-60" fill="currentColor" aria-hidden="true">
+                                <path :d="mdiHistory" />
+                            </svg>
+                            <p class="text-sm">No recent activity</p>
+                        </div>
+                    </CardBox>
+                </div>
+
+                <!-- Submitters table -->
+                <SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters Management" class="mt-8">
+                    <span class="text-sm text-gray-500 dark:text-gray-400">All registered submitters</span>
+                </SectionTitleLineWithButton>
+
                 <CardBox :icon="mdiMonitorCellphone" title="All Submitters" has-table class="shadow-lg">
                     <TableSampleClients />
                 </CardBox>
@@ -210,4 +433,4 @@ const today = computed(() =>
         animation: none;
     }
 }
-</style>
+</style>

start/env.ts

@@ -35,6 +35,7 @@ export default await Env.create(new URL('../', import.meta.url), {
 
     HASH_DRIVER: Env.schema.enum(['scrypt', 'argon', 'bcrypt', 'laravel', undefined] as const),
     OAI_LIST_SIZE: Env.schema.number(),
+    OPENSEARCH_HOST: Env.schema.string(),
 
     /*
   |----------------------------------------------------------