From a49554193a28c91cba7870cddbb49acb3838233b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 7 Jan 2026 11:18:19 -0300
Subject: [PATCH 1/5] Move logs logic from email start event package. Add base
 logs ui for Agents

---
 .../Http/Controllers/Admin/LogsController.php |  20 ++
 .../Http/Middleware/GenerateMenus.php         |   8 +
 .../components/Logs/BaseTable/BaseTable.vue   |  61 ++++++
 .../logs/components/Logs/BaseTable/index.js   |   3 +
 .../components/Logs/HeaderBar/HeaderBar.vue   | 122 ++++++++++++
 .../logs/components/Logs/HeaderBar/index.js   |   3 +
 .../Logs/LogContainer/LogContainer.vue        | 104 +++++++++++
 .../components/Logs/LogContainer/index.js     |   3 +
 .../components/Logs/LogTable/LogTable.vue     | 176 ++++++++++++++++++
 .../logs/components/Logs/LogTable/index.js    |   3 +
 .../components/Logs/Pagination/Pagination.vue |  89 +++++++++
 .../logs/components/Logs/Pagination/index.js  |   3 +
 .../logs/components/Logs/Sidebar/Sidebar.vue  | 173 +++++++++++++++++
 .../logs/components/Logs/Sidebar/index.js     |   3 +
 .../js/admin/logs/components/Logs/routes.js   |  41 ++++
 resources/js/admin/logs/index.js              |  26 +++
 resources/js/admin/logs/utils/date.js         |  74 ++++++++
 resources/views/admin/logs/index.blade.php    |  28 +++
 routes/web.php                                |   7 +
 webpack.mix.js                                |   1 +
 20 files changed, 948 insertions(+)
 create mode 100644 ProcessMaker/Http/Controllers/Admin/LogsController.php
 create mode 100644 resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
 create mode 100644 resources/js/admin/logs/components/Logs/BaseTable/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
 create mode 100644 resources/js/admin/logs/components/Logs/HeaderBar/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
 create mode 100644 resources/js/admin/logs/components/Logs/LogContainer/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
 create mode 100644 resources/js/admin/logs/components/Logs/LogTable/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/Pagination/Pagination.vue
 create mode 100644 resources/js/admin/logs/components/Logs/Pagination/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
 create mode 100644 resources/js/admin/logs/components/Logs/Sidebar/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/routes.js
 create mode 100644 resources/js/admin/logs/index.js
 create mode 100644 resources/js/admin/logs/utils/date.js
 create mode 100644 resources/views/admin/logs/index.blade.php

diff --git a/ProcessMaker/Http/Controllers/Admin/LogsController.php b/ProcessMaker/Http/Controllers/Admin/LogsController.php
new file mode 100644
index 0000000000..37ef170c8c
--- /dev/null
+++ b/ProcessMaker/Http/Controllers/Admin/LogsController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers\Admin;
+
+use Illuminate\Http\Request;
+use ProcessMaker\Http\Controllers\Controller;
+
+class LogsController extends Controller
+{
+    /**
+     * Display the logs index page.
+     * This view loads log components from installed packages (package-email-start-event, package-ai).
+     *
+     * @return \Illuminate\Contracts\View\View
+     */
+    public function index()
+    {
+        return view('admin.logs.index');
+    }
+}
diff --git a/ProcessMaker/Http/Middleware/GenerateMenus.php b/ProcessMaker/Http/Middleware/GenerateMenus.php
index f714b52ac5..4ffa3153e6 100644
--- a/ProcessMaker/Http/Middleware/GenerateMenus.php
+++ b/ProcessMaker/Http/Middleware/GenerateMenus.php
@@ -128,6 +128,14 @@ public function handle(Request $request, Closure $next)
                     'file' => "data:image/svg+xml;base64,{$devlinkIcon}",
                 ]);
             }
+            if (\Auth::user()->canAny('view-settings|edit-settings') &&
+                (hasPackage('package-email-start-event') || hasPackage('package-ai'))) {
+                $submenu->add(__('Logs'), [
+                    'route' => 'admin.logs',
+                    'icon' => 'fa-bars',
+                    'id' => 'admin-logs',
+                ]);
+            }
         });
         Menu::make('sidebar_task', function ($menu) {
             $submenu = $menu->add(__('Tasks'));
diff --git a/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
new file mode 100644
index 0000000000..120ae42de4
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="
+      tw-flex-1 tw-overflow-auto tw-rounded-xl tw-border tw-border-gray-200
+      tw-shadow-md tw-shadow-zinc-200
+    "
+  >
+    <table class="tw-w-full tw-text-left tw-text-sm">
+      <thead class="tw-bg-gray-50 tw-text-zinc-400">
+        <tr>
+          <th
+            v-for="column in columns"
+            :key="column.key"
+            class="tw-px-6 tw-py-4 tw-font-medium tw-whitespace-nowrap"
+          >
+            {{ column.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(item, idx) in data"
+          :key="idx"
+          class="tw-border-t tw-border-zinc-200"
+        >
+          <td
+            v-for="column in columns"
+            :key="column.key"
+            class="tw-px-6 tw-py-4 tw-text-gray-600 tw-border-b tw-border-gray-200 tw-whitespace-nowrap"
+          >
+            {{ getItemValue(item, column) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    columns: { type: Array, required: true },
+    data: { type: Array, required: true },
+  },
+  methods: {
+    getItemValue(item, column) {
+      // if key is a dot-separated string, get the nested value from the item
+      if (column.key.includes('.')) {
+        return column.key.split('.').reduce((val, part) => (val != null ? val[part] : undefined), item);
+      }
+
+      if (typeof column.format === 'function') {
+        return column.format(item[column.key]);
+      }
+
+      return item[column.key];
+    },
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/BaseTable/index.js b/resources/js/admin/logs/components/Logs/BaseTable/index.js
new file mode 100644
index 0000000000..f8430fb194
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/BaseTable/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as BaseTable } from './BaseTable.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
new file mode 100644
index 0000000000..d33b721828
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="tw-flex tw-flex-row tw-gap-x-8 tw-justify-between tw-w-full sm:tw-flex-row">
+    <!-- Email log type tabs - only shown for email category -->
+    <div
+      v-if="isEmailCategory"
+      class="tw-flex tw-items-center tw-gap-2 tw-bg-gray-100 tw-rounded-lg tw-p-1"
+    >
+      <RouterLink
+        to="/email/errors"
+        class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
+        :class="tabClasses('errors')"
+      >
+        Error Logs
+      </RouterLink>
+      <RouterLink
+        to="/email/matched"
+        class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
+        :class="tabClasses('matched')"
+      >
+        Matched Logs
+      </RouterLink>
+      <RouterLink
+        to="/email/total"
+        class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
+        :class="tabClasses('total')"
+      >
+        Total Logs
+      </RouterLink>
+    </div>
+
+    <!-- Agents category tabs -->
+    <div
+      v-else-if="isAgentsCategory"
+      class="tw-flex tw-items-center tw-gap-2 tw-bg-gray-100 tw-rounded-lg tw-p-1"
+    >
+      <RouterLink
+        to="/agents/design"
+        class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
+        :class="tabClasses('design')"
+      >
+        Design Mode Logs
+      </RouterLink>
+      <RouterLink
+        to="/agents/execution"
+        class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
+        :class="tabClasses('execution')"
+      >
+        Execution Logs
+      </RouterLink>
+    </div>
+
+    <!-- Empty placeholder for other categories -->
+    <div v-else />
+
+    <div class="tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-w-auto tw-border tw-border-zinc-200 tw-rounded-lg tw-p-1 tw-px-3">
+      <div class="tw-relative tw-w-full tw-flex tw-items-center tw-gap-1">
+        <i class="fas fa-search" />
+        <input
+          ref="searchInput"
+          type="text"
+          class="
+            tw-h-8
+            tw-w-full
+            tw-pl-3
+            tw-pr-3
+            tw-text-sm
+            tw-outline-none
+            tw-ring-0
+            placeholder:tw-text-zinc-400
+          "
+          placeholder="Search here"
+          :value="value"
+          @input="onInput"
+          @keypress="onKeypress"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: String, default: '' },
+  },
+  computed: {
+    isEmailCategory() {
+      return this.$route.path.startsWith('/email');
+    },
+    isAgentsCategory() {
+      return this.$route.path.startsWith('/agents');
+    },
+  },
+  watch: {
+    '$route.path': {
+      handler() {
+        // reset input value in search when route changes
+        this.$emit('input', '');
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    tabClasses(tab) {
+      const currentRoute = this.$route.params.logType;
+
+      return currentRoute === tab
+        ? 'tw-bg-white tw-font-semibold tw-text-zinc-900'
+        : 'tw-text-zinc-700 hover:tw-bg-zinc-50';
+    },
+    onInput(event) {
+      this.$emit('input', event.target.value);
+    },
+    onKeypress(event) {
+      if (event.charCode === 13) {
+        this.$emit('search');
+      }
+    },
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/HeaderBar/index.js b/resources/js/admin/logs/components/Logs/HeaderBar/index.js
new file mode 100644
index 0000000000..c2176bf01c
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/HeaderBar/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as HeaderBar } from './HeaderBar.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
new file mode 100644
index 0000000000..1fd434353c
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="tw-flex tw-gap-6">
+    <sidebar />
+
+    <section class="tw-flex-1 tw-overflow-hidden">
+      <div class="tw-flex tw-flex-col tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white tw-h-screen">
+        <header-bar
+          v-model="search"
+          @search="onHandleSearch"
+        />
+
+        <div class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0">
+          <div class="tw-flex tw-items-center tw-justify-between tw-my-8 tw-shrink-0">
+            <h2 class="tw-text-2xl tw-font-semibold tw-text-zinc-900">
+              {{ title }}
+            </h2>
+            <div v-if="showExportButton">
+              <a
+                :href="getExportUrl"
+                target="_blank"
+                class="
+                  tw-inline-flex
+                  tw-items-center
+                  tw-gap-2
+                  tw-rounded-lg
+                  tw-bg-blue-500
+                  tw-px-3
+                  tw-py-2
+                  tw-text-sm
+                  tw-font-normal
+                  tw-text-white
+                "
+              >
+                <i class="fas fa-download" />
+                <span>{{ $t('Export to CSV') }}</span>
+              </a>
+            </div>
+          </div>
+
+          <RouterView ref="routerView" class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0" />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { Sidebar } from '../Sidebar';
+import { HeaderBar } from '../HeaderBar';
+
+export default {
+  components: {
+    Sidebar,
+    HeaderBar,
+  },
+  data() {
+    return {
+      search: '',
+    };
+  },
+  computed: {
+    isEmailCategory() {
+      return this.$route.path.startsWith('/email');
+    },
+    isAgentsCategory() {
+      return this.$route.path.startsWith('/agents');
+    },
+    logType() {
+      return this.$route.params.logType;
+    },
+    title() {
+      if (this.isAgentsCategory) {
+        const agentTitles = {
+          design: 'Design Mode Logs',
+          execution: 'Execution Logs',
+        };
+        return agentTitles[this.logType] ?? 'FlowGenie Agents Logs';
+      }
+
+      const titles = {
+        errors: 'Error Logs',
+        matched: 'Matched Logs',
+        total: 'Total Logs',
+      };
+      return titles[this.logType] ?? '';
+    },
+    showExportButton() {
+      // Only show export button for email category (has export endpoint)
+      return this.isEmailCategory;
+    },
+    getExportUrl() {
+      return `/admin/logs/export/csv?type=${this.logType}&search=${this.search}`;
+    },
+  },
+  methods: {
+    onHandleSearch() {
+      if (this.$refs.routerView) {
+        this.$refs.routerView.refresh({ search: this.search });
+      }
+    },
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/LogContainer/index.js b/resources/js/admin/logs/components/Logs/LogContainer/index.js
new file mode 100644
index 0000000000..d0ad929b7e
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/LogContainer/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as LogContainer } from './LogContainer.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue b/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
new file mode 100644
index 0000000000..dc688bbbd7
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0">
+    <base-table
+      :columns="columns"
+      :data="data"
+    />
+    <pagination
+      class="tw-mt-3 tw-shrink-0"
+      :page="page"
+      :total-pages="totalPages"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
+
+<script>
+import { BaseTable } from '../BaseTable';
+import { Pagination } from '../Pagination';
+import { dateFormatter } from '../../../utils/date';
+
+export default {
+  components: {
+    BaseTable,
+    Pagination,
+  },
+  props: {
+    category: {
+      type: String,
+      default: 'email',
+    },
+    logType: {
+      type: String,
+      default: 'errors',
+    },
+  },
+  data() {
+    return {
+      data: [],
+      page: 1,
+      totalPages: 1,
+      perPage: 15,
+    };
+  },
+  computed: {
+    columns() {
+      // Email log columns
+      const emailColumns = {
+        errors: [
+          { key: 'id', label: this.$t('ID') },
+          { key: 'imap_server', label: this.$t('IMAP Server') },
+          { key: 'email', label: this.$t('User Email') },
+          { key: 'from.email', label: this.$t('Email From') },
+          { key: 'error_code', label: this.$t('Error Code') },
+          { key: 'error_description', label: this.$t('Description') },
+          { key: 'date', label: this.$t('Date'), format: dateFormatter },
+        ],
+        matched: [
+          { key: 'id', label: this.$t('ID') },
+          { key: 'imap_server', label: this.$t('IMAP Server') },
+          { key: 'email', label: this.$t('User Email') },
+          { key: 'from.email', label: this.$t('Email From') },
+          { key: 'subject', label: this.$t('Subject') },
+          { key: 'body', label: this.$t('Body') },
+          { key: 'date_email', label: this.$t('Date Email'), format: dateFormatter },
+          { key: 'process_name', label: this.$t('Process') },
+          { key: 'process_request_id', label: this.$t('Request ID') },
+          { key: 'user_fullname', label: this.$t('User') },
+          { key: 'files_attached', label: this.$t('Files Attached') },
+          { key: 'created_at', label: this.$t('Created At'), format: dateFormatter },
+        ],
+        total: [
+          { key: 'execution_id', label: this.$t('ID') },
+          { key: 'imap_server', label: this.$t('IMAP Server') },
+          { key: 'email', label: this.$t('User Email') },
+          { key: 'total_emails', label: this.$t('Total Emails') },
+          { key: 'total_matched', label: this.$t('Total Matches') },
+          { key: 'created_at', label: this.$t('Date'), format: dateFormatter },
+        ],
+      };
+
+      // FlowGenie Agents log columns
+      const agentColumns = {
+        design: [
+          { key: 'flow_genie_name', label: this.$t('FlowGenie Name') },
+          { key: 'user_name', label: this.$t('User') },
+          { key: 'status', label: this.$t('Status') },
+          { key: 'duration', label: this.$t('Execution Time') },
+          { key: 'tools', label: this.$t('Tools') },
+          { key: 'tokens_used', label: this.$t('Tokens Used') },
+          { key: 'created_at', label: this.$t('Date'), format: dateFormatter },
+        ],
+        execution: [
+          { key: 'process_request_id', label: this.$t('Request ID') },
+          { key: 'node_id', label: this.$t('Node ID') },
+          { key: 'flow_genie_name', label: this.$t('FlowGenie Name') },
+          { key: 'user_name', label: this.$t('User') },
+          { key: 'status', label: this.$t('Status') },
+          { key: 'duration', label: this.$t('Execution Time') },
+          { key: 'tools', label: this.$t('Tools') },
+          { key: 'tokens_used', label: this.$t('Tokens Used') },
+          { key: 'created_at', label: this.$t('Date'), format: dateFormatter },
+        ],
+      };
+
+      if (this.category === 'agents') {
+        return agentColumns[this.logType] ?? agentColumns.design;
+      }
+
+      return emailColumns[this.logType] ?? [];
+    },
+    apiEndpoint() {
+      if (this.category === 'agents') {
+        // Map logType to API endpoint for agents
+        const agentEndpoints = {
+          design: '/api/1.0/flow-genie/logs/design',
+          execution: '/api/1.0/flow-genie/logs/execution',
+        };
+        return agentEndpoints[this.logType] ?? agentEndpoints.design;
+      }
+      return `/api/1.1/email-start-event/logs/${this.logType}`;
+    },
+  },
+  watch: {
+    category: {
+      handler() {
+        this.resetAndFetch();
+      },
+    },
+    logType: {
+      handler() {
+        this.resetAndFetch();
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    resetAndFetch() {
+      this.page = 1;
+      this.perPage = 15;
+      this.totalPages = 1;
+      this.fetchData();
+    },
+    async fetchData(params = {}) {
+      try {
+        const response = await ProcessMaker.apiClient.get(this.apiEndpoint, {
+          params: {
+            page: this.page,
+            per_page: this.perPage,
+            ...params,
+          },
+        });
+        const { data, ...pagination } = response.data;
+
+        this.data = data;
+        // Pagination data
+        this.totalPages = pagination.last_page;
+        this.page = pagination.current_page;
+        this.perPage = pagination.per_page;
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+        this.data = [];
+      }
+    },
+    handlePageChange(newPage) {
+      this.page = newPage;
+      this.fetchData();
+    },
+    refresh(params = {}) {
+      this.page = 1;
+      this.fetchData(params);
+    },
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/LogTable/index.js b/resources/js/admin/logs/components/Logs/LogTable/index.js
new file mode 100644
index 0000000000..d07b1072e7
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/LogTable/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as LogTable } from './LogTable.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/Pagination/Pagination.vue b/resources/js/admin/logs/components/Logs/Pagination/Pagination.vue
new file mode 100644
index 0000000000..33b47377b4
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/Pagination/Pagination.vue
@@ -0,0 +1,89 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="tw-flex tw-items-center tw-justify-start">
+    <nav class="tw-inline-flex tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
+      <button
+        type="button"
+        class="tw-px-3 tw-py-1.5 tw-text-sm tw-text-black tw-font-semibold"
+        :disabled="page === 1"
+        @click="handlePrev"
+      >
+        Previous
+      </button>
+      <button
+        v-for="(p, idx) in displayPages"
+        :key="`p-${idx}-${p}`"
+        type="button"
+        class="tw-border-l tw-border-zinc-300 tw-px-3 tw-py-1.5 tw-text-sm tw-text-black tw-font-semibold"
+        :class="
+          typeof p === 'number'
+            ? (p === page ? 'tw-bg-zinc-100 tw-text-zinc-900' : 'tw-text-zinc-700 hover:tw-bg-zinc-50')
+            : 'tw-text-zinc-400'
+        "
+        :disabled="p === '...'"
+        @click="typeof p === 'number' && handleGo(p)"
+      >
+        {{ p }}
+      </button>
+      <button
+        type="button"
+        class="tw-border-l tw-border-zinc-300 tw-px-3 tw-py-1.5 tw-text-sm tw-text-black tw-font-semibold"
+        :disabled="page === totalPages"
+        @click="handleNext"
+      >
+        Next
+      </button>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    page: { type: Number, required: true },
+    totalPages: { type: Number, required: true },
+  },
+  computed: {
+    displayPages() {
+      const pages = [];
+      const current = this.page;
+      const total = this.totalPages;
+      if (total <= 7) {
+        for (let i = 1; i <= total; i += 1) pages.push(i);
+        return pages;
+      }
+
+      const add = (val) => {
+        if (pages[pages.length - 1] !== val) pages.push(val);
+      };
+
+      add(1);
+      if (current > 3) add('...');
+
+      const start = Math.max(2, current - 1);
+      const end = Math.min(total - 1, current + 1);
+      for (let i = start; i <= end; i += 1) add(i);
+
+      if (current < total - 2) add('...');
+      add(total);
+      return pages;
+    },
+  },
+  methods: {
+    handleGo(pageNumber) {
+      this.$emit('page-change', pageNumber);
+    },
+    handlePrev() {
+      if (this.page > 1) {
+        this.$emit('page-change', this.page - 1);
+      }
+    },
+    handleNext() {
+      if (this.page < this.totalPages) {
+        this.$emit('page-change', this.page + 1);
+      }
+    },
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/Pagination/index.js b/resources/js/admin/logs/components/Logs/Pagination/index.js
new file mode 100644
index 0000000000..d2d0ae6aa6
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/Pagination/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Pagination } from './Pagination.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
new file mode 100644
index 0000000000..b47e9561f2
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
@@ -0,0 +1,173 @@
+<template>
+  <aside class="tw-w-72 tw-shrink-0">
+    <div class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-3 tw-bg-white tw-h-screen">
+      <div class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-uppercase tw-text-zinc-500">
+        Logs
+      </div>
+      <nav class="tw-mt-1">
+        <!-- Email Category -->
+        <div class="tw-mt-3">
+          <button
+            v-b-toggle.collapse-email
+            class="
+              tw-w-full
+              tw-flex
+              tw-items-center
+              tw-justify-between
+              tw-rounded-lg
+              tw-px-3
+              tw-py-2
+              tw-text-sm
+              tw-font-medium
+              tw-text-zinc-700
+              hover:tw-bg-zinc-50
+              tw-cursor-pointer
+              tw-transition-colors
+            "
+          >
+            <span class="tw-inline-flex tw-items-center tw-gap-2">
+              <i class="fas fa-envelope" />
+              Email
+            </span>
+            <i
+              class="fas fa-chevron-right tw-w-4 tw-h-4 tw-transition-transform"
+              :class="{ 'tw-rotate-90': collapseStates.email }"
+            />
+          </button>
+
+          <!-- Email Logs Subcategory -->
+          <b-collapse
+            id="collapse-email"
+            class="tw-ml-4 tw-mt-1"
+            :visible="isEmailActive"
+          >
+            <RouterLink
+              to="/email/errors"
+              class="
+                tw-mt-1
+                tw-flex
+                tw-items-center
+                tw-justify-between
+                tw-rounded-lg
+                tw-px-3
+                tw-py-2
+                tw-text-base
+                tw-cursor-pointer
+              "
+              :class="isEmailActive ? 'tw-bg-blue-50 tw-font-semibold tw-text-blue-500' : 'tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50'"
+            >
+              <span class="tw-inline-flex tw-items-center tw-gap-2">Email Start Event</span>
+            </RouterLink>
+          </b-collapse>
+        </div>
+
+        <!-- Agents Category -->
+        <div class="tw-mt-3">
+          <button
+            v-b-toggle.collapse-agents
+            class="
+              tw-w-full
+              tw-flex
+              tw-items-center
+              tw-justify-between
+              tw-rounded-lg
+              tw-px-3
+              tw-py-2
+              tw-text-sm
+              tw-font-medium
+              tw-text-zinc-700
+              hover:tw-bg-zinc-50
+              tw-cursor-pointer
+              tw-transition-colors
+            "
+          >
+            <span class="tw-inline-flex tw-items-center tw-gap-2">
+              <i class="fas fa-robot" />
+              FlowGenie Agents
+            </span>
+            <i
+              class="fas fa-chevron-right tw-w-4 tw-h-4 tw-transition-transform"
+              :class="{ 'tw-rotate-90': collapseStates.agents }"
+            />
+          </button>
+
+          <!-- Agents Logs Subcategory -->
+          <b-collapse
+            id="collapse-agents"
+            class="tw-ml-4 tw-mt-1"
+            :visible="isAgentsActive"
+          >
+            <RouterLink
+              to="/agents"
+              class="
+                tw-mt-1
+                tw-flex
+                tw-items-center
+                tw-justify-between
+                tw-rounded-lg
+                tw-px-3
+                tw-py-2
+                tw-text-base
+                tw-cursor-pointer
+              "
+              :class="isAgentsActive ? 'tw-bg-blue-50 tw-font-semibold tw-text-blue-500' : 'tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50'"
+            >
+              <span class="tw-inline-flex tw-items-center tw-gap-2">FlowGenie Agents logs</span>
+            </RouterLink>
+          </b-collapse>
+        </div>
+      </nav>
+    </div>
+  </aside>
+</template>
+
+<script>
+export default {
+  name: 'LogsSidebar',
+  data() {
+    return {
+      collapseStates: {
+        email: this.$route.path.startsWith('/email'),
+        agents: this.$route.path.startsWith('/agents'),
+      },
+    };
+  },
+  computed: {
+    isEmailActive() {
+      return this.$route.path.startsWith('/email');
+    },
+    isAgentsActive() {
+      return this.$route.path.startsWith('/agents');
+    },
+  },
+  watch: {
+    // Auto-expand the category when navigating to it
+    '$route.path': {
+      handler(path) {
+        if (path.startsWith('/agents') && !this.collapseStates.agents) {
+          this.$root.$emit('bv::toggle::collapse', 'collapse-agents');
+        }
+        if (path.startsWith('/email') && !this.collapseStates.email) {
+          this.$root.$emit('bv::toggle::collapse', 'collapse-email');
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    // Listen for collapse events to update icon rotation
+    this.$root.$on('bv::collapse::state', (id, state) => {
+      if (id === 'collapse-email') {
+        this.collapseStates.email = state;
+      } else if (id === 'collapse-agents') {
+        this.collapseStates.agents = state;
+      }
+    });
+  },
+  beforeDestroy() {
+    // Clean up event listener
+    this.$root.$off('bv::collapse::state');
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/Sidebar/index.js b/resources/js/admin/logs/components/Logs/Sidebar/index.js
new file mode 100644
index 0000000000..a4f8b5ce94
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/Sidebar/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Sidebar } from './Sidebar.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/routes.js b/resources/js/admin/logs/components/Logs/routes.js
new file mode 100644
index 0000000000..cee148dcc5
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/routes.js
@@ -0,0 +1,41 @@
+import { LogTable } from './LogTable';
+
+export default {};
+
+export const routes = [
+  {
+    name: 'logs.index',
+    path: '/',
+    redirect: '/email/errors',
+  },
+  // Email logs routes
+  {
+    name: 'logs.email',
+    path: '/email/:logType',
+    component: LogTable,
+    props(route) {
+      return {
+        category: 'email',
+        logType: route.params.logType,
+      };
+    },
+  },
+  // FlowGenie Agents logs routes
+  {
+    name: 'logs.agents.redirect',
+    path: '/agents',
+    redirect: '/agents/design',
+  },
+  {
+    name: 'logs.agents',
+    path: '/agents/:logType',
+    component: LogTable,
+    props(route) {
+      return {
+        category: 'agents',
+        logType: route.params.logType,
+      };
+    },
+  },
+];
+
diff --git a/resources/js/admin/logs/index.js b/resources/js/admin/logs/index.js
new file mode 100644
index 0000000000..bdf9dc220b
--- /dev/null
+++ b/resources/js/admin/logs/index.js
@@ -0,0 +1,26 @@
+import { LogContainer } from './components/Logs/LogContainer';
+import { routes } from './components/Logs/routes';
+
+// eslint-disable-next-line no-undef
+Vue.use(VueRouter);
+
+// eslint-disable-next-line no-undef
+const router = new VueRouter({
+  mode: 'history',
+  base: '/admin/logs',
+  routes,
+});
+
+window.Vue.component('admin-logs', LogContainer);
+
+document.addEventListener('DOMContentLoaded', () => {
+  new window.Vue({
+    el: '#admin-logs-main',
+    router,
+    components: {
+      LogContainer,
+    },
+    render: (h) => h(LogContainer),
+  });
+});
+
diff --git a/resources/js/admin/logs/utils/date.js b/resources/js/admin/logs/utils/date.js
new file mode 100644
index 0000000000..491fa1a8d8
--- /dev/null
+++ b/resources/js/admin/logs/utils/date.js
@@ -0,0 +1,74 @@
+/* eslint-disable import/prefer-default-export */
+import { DateTime } from 'luxon';
+
+/**
+ * Convert PHP/moment date format to Luxon format
+ * @param {string} format - PHP/moment format string
+ * @returns {string} - Luxon format string
+ */
+const convertToLuxonFormat = (format) => {
+  // Common conversions from PHP/moment to Luxon
+  const replacements = {
+    YYYY: 'yyyy',
+    YY: 'yy',
+    MM: 'LL',
+    M: 'L',
+    DD: 'dd',
+    D: 'd',
+    HH: 'HH',
+    hh: 'hh',
+    H: 'H',
+    h: 'h',
+    mm: 'mm',
+    m: 'm',
+    ss: 'ss',
+    s: 's',
+    A: 'a',
+    a: 'a',
+  };
+
+  let luxonFormat = format;
+  Object.entries(replacements).forEach(([from, to]) => {
+    luxonFormat = luxonFormat.replace(new RegExp(from, 'g'), to);
+  });
+
+  return luxonFormat;
+};
+
+/**
+ * Format date to user's date format
+ * @param {string} value - The date to format
+ * @returns {string} - The formatted date
+ */
+export const dateFormatter = (value) => {
+  let datetimeConfig = 'dd/LL/yyyy hh:mm';
+  let timezoneConfig = 'UTC';
+
+  if (
+    typeof ProcessMaker !== 'undefined'
+    && ProcessMaker.user
+    && ProcessMaker.user.datetime_format
+  ) {
+    timezoneConfig = ProcessMaker.user.timezone;
+    datetimeConfig = convertToLuxonFormat(ProcessMaker.user.datetime_format);
+  }
+
+  if (value) {
+    const date = DateTime.fromISO(value, { zone: 'utc' }).setZone(timezoneConfig);
+
+    if (date.isValid) {
+      return date.toFormat(datetimeConfig);
+    }
+
+    // Try parsing as SQL format
+    const sqlDate = DateTime.fromSQL(value, { zone: 'utc' }).setZone(timezoneConfig);
+    if (sqlDate.isValid) {
+      return sqlDate.toFormat(datetimeConfig);
+    }
+
+    return value;
+  }
+
+  return '-';
+};
+
diff --git a/resources/views/admin/logs/index.blade.php b/resources/views/admin/logs/index.blade.php
new file mode 100644
index 0000000000..9a7ca90a61
--- /dev/null
+++ b/resources/views/admin/logs/index.blade.php
@@ -0,0 +1,28 @@
+@extends('layouts.layout')
+
+@section('title')
+    {{__('Logs')}}
+@endsection
+
+@section('sidebar')
+    @include('layouts.sidebar', ['sidebar'=> Menu::get('sidebar_admin')])
+@endsection
+
+@section('breadcrumbs')
+    @include('shared.breadcrumbs', ['routes' => [
+        __('Admin') => route('admin.index'),
+        __('Logs') => null,
+    ]])
+@endsection
+
+@section('content')
+    <div class="page-content px-3 mb-0" id="admin-logs-main"></div>
+@endsection
+
+@section('js')
+    <script>
+        const permission = @json(\Auth::user()->hasPermissionsFor('settings'));
+    </script>
+    <script src="{{mix('js/admin/logs/index.js')}}"></script>
+@endsection
+
diff --git a/routes/web.php b/routes/web.php
index 30f1cdaa35..589cb3995f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -8,6 +8,7 @@
 use ProcessMaker\Http\Controllers\Admin\DevLinkController;
 use ProcessMaker\Http\Controllers\Admin\GroupController;
 use ProcessMaker\Http\Controllers\Admin\LdapLogsController;
+use ProcessMaker\Http\Controllers\Admin\LogsController;
 use ProcessMaker\Http\Controllers\Admin\QueuesController;
 use ProcessMaker\Http\Controllers\Admin\ScriptExecutorController;
 use ProcessMaker\Http\Controllers\Admin\SettingsController;
@@ -81,6 +82,12 @@
         // temporary, should be removed
         Route::get('security-logs/download/all', [ProcessMaker\Http\Controllers\Api\SecurityLogController::class, 'downloadForAllUsers'])->middleware('can:view-security-logs');
         Route::get('security-logs/download/{user}', [ProcessMaker\Http\Controllers\Api\SecurityLogController::class, 'downloadForUser'])->middleware('can:view-security-logs');
+
+        // Logs - available when package-email-start-event or package-ai is installed
+        if (hasPackage('package-email-start-event') || hasPackage('package-ai')) {
+            Route::get('logs', [LogsController::class, 'index'])->name('admin.logs')->middleware('can:view-settings');
+            Route::get('logs/{any}', [LogsController::class, 'index'])->name('admin.logs-any')->middleware('can:view-settings')->where('any', '.*');
+        }
     });
 
     Route::get('admin', [AdminController::class, 'index'])->name('admin.index');
diff --git a/webpack.mix.js b/webpack.mix.js
index 01253ace95..c93f125c10 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -104,6 +104,7 @@ mix
   .js("resources/js/admin/cssOverride/edit.js", "public/js/admin/cssOverride/edit.js")
   .js("resources/js/admin/script-executors/index.js", "public/js/admin/script-executors/index.js")
   .js("resources/js/admin/tenant-queues/index.js", "public/js/admin/tenant-queues/index.js")
+  .js("resources/js/admin/logs/index.js", "public/js/admin/logs/index.js")
 
   .js("resources/js/processes/index.js", "public/js/processes")
   .js("resources/js/processes/edit.js", "public/js/processes")

From 7be12fb221750302c5e203b5b1580a1b36f80dc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 7 Jan 2026 11:27:17 -0300
Subject: [PATCH 2/5] Add translation strings

---
 .../logs/components/Logs/HeaderBar/HeaderBar.vue     | 12 ++++++------
 .../components/Logs/LogContainer/LogContainer.vue    |  2 +-
 resources/lang/en.json                               |  6 ++++++
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
index d33b721828..4085475684 100644
--- a/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
+++ b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
@@ -10,21 +10,21 @@
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('errors')"
       >
-        Error Logs
+        {{ $t('Error Logs') }}
       </RouterLink>
       <RouterLink
         to="/email/matched"
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('matched')"
       >
-        Matched Logs
+        {{ $t('Matched Logs') }}
       </RouterLink>
       <RouterLink
         to="/email/total"
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('total')"
       >
-        Total Logs
+        {{ $t('Total Logs') }}
       </RouterLink>
     </div>
 
@@ -38,14 +38,14 @@
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('design')"
       >
-        Design Mode Logs
+        {{ $t('Design Mode Logs') }}
       </RouterLink>
       <RouterLink
         to="/agents/execution"
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('execution')"
       >
-        Execution Logs
+        {{ $t('Execution Logs') }}
       </RouterLink>
     </div>
 
@@ -68,7 +68,7 @@
             tw-ring-0
             placeholder:tw-text-zinc-400
           "
-          placeholder="Search here"
+          :placeholder="$t('Search here')"
           :value="value"
           @input="onInput"
           @keypress="onKeypress"
diff --git a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
index 1fd434353c..3aa08d07ca 100644
--- a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
+++ b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
@@ -12,7 +12,7 @@
         <div class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0">
           <div class="tw-flex tw-items-center tw-justify-between tw-my-8 tw-shrink-0">
             <h2 class="tw-text-2xl tw-font-semibold tw-text-zinc-900">
-              {{ title }}
+              {{ $t(title) }}
             </h2>
             <div v-if="showExportButton">
               <a
diff --git a/resources/lang/en.json b/resources/lang/en.json
index e580e5b49b..f95ae63b21 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -656,6 +656,7 @@
   "Description": "Description",
   "Design Screen": "Design Screen",
   "Design": "Design",
+  "Design Mode Logs": "Design Mode Logs",
   "Designer": "Designer",
   "Destination Screen": "Destination Screen",
   "Destination": "Destination",
@@ -899,6 +900,7 @@
   "Error Name": "Error Name",
   "Error": "Error",
   "Errors": "Errors",
+  "Error Logs": "Error Logs",
   "Event Based Gateway": "Event Based Gateway",
   "Event has multiple event definitions": "Event has multiple event definitions",
   "Event-based Gateway": "Event-based Gateway",
@@ -906,6 +908,7 @@
   "Event": "Event",
   "Exclusive Gateway": "Exclusive Gateway",
   "Execution Error": "Execution Error",
+  "Execution Logs": "Execution Logs",
   "Execution Log": "Execution Log",
   "Executor Successfully Built. You can now close this window. ": "Executor Successfully Built. You can now close this window. ",
   "Existing Array": "Existing Array",
@@ -979,6 +982,7 @@
   "Flow splits implicitly": "Flow splits implicitly",
   "Flow Variable": "Flow Variable",
   "FlowGenies": "FlowGenies",
+  "FlowGenie Agents Logs": "FlowGenie Agents Logs",
   "FolderCreated": "Folder Created",
   "FolderUpdated": "Folder Updated",
   "Font Size": "Font Size",
@@ -1255,6 +1259,7 @@
   "Manually Complete Request": "Manually Complete Request",
   "Manually reconfigure the dashboard using an existing one in the environment.": "Manually reconfigure the dashboard using an existing one in the environment.",
   "Mark as Priority": "Mark as Priority",
+  "Matched Logs": "Matched Logs",
   "Max Input": "Max Input",
   "Max Length": "Max Length",
   "Max": "Max",
@@ -2407,6 +2412,7 @@
   "Top Right": "Top Right",
   "Top": "Top",
   "Total Elements": "Total Elements",
+  "Total Logs": "Total Logs",
   "Translate into multiple languages.": "Translate into multiple languages.",
   "Translate process screens to a desired language": "Translate process screens to a desired language",
   "Translation in progress": "Translation in progress",

From 10229751aeb923343845911a9f698a161309925b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 7 Jan 2026 12:50:14 -0300
Subject: [PATCH 3/5] Fix routes issue

---
 routes/web.php | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/routes/web.php b/routes/web.php
index 589cb3995f..11287a4a62 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -86,6 +86,12 @@
         // Logs - available when package-email-start-event or package-ai is installed
         if (hasPackage('package-email-start-event') || hasPackage('package-ai')) {
             Route::get('logs', [LogsController::class, 'index'])->name('admin.logs')->middleware('can:view-settings');
+            // Export route must be before the wildcard route
+            if (hasPackage('package-email-start-event')) {
+                Route::get('logs/export/csv', [ProcessMaker\Package\PackageEmailStartEvent\Http\Controllers\EmailListenerLogController::class, 'exportToCsv'])
+                    ->name('admin.logs.export.csv')
+                    ->middleware('can:view-settings');
+            }
             Route::get('logs/{any}', [LogsController::class, 'index'])->name('admin.logs-any')->middleware('can:view-settings')->where('any', '.*');
         }
     });

From d43dc69dc80a1c7a44fd61ee1c701e03ef652a9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 7 Jan 2026 13:28:59 -0300
Subject: [PATCH 4/5] Add validation to check if packages are installed

---
 .../logs/components/Logs/Sidebar/Sidebar.vue  | 65 ++++++++++-----
 .../js/admin/logs/components/Logs/routes.js   | 79 +++++++++++++++----
 2 files changed, 109 insertions(+), 35 deletions(-)

diff --git a/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
index b47e9561f2..9b93c63759 100644
--- a/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
+++ b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
@@ -5,8 +5,11 @@
         Logs
       </div>
       <nav class="tw-mt-1">
-        <!-- Email Category -->
-        <div class="tw-mt-3">
+        <!-- Email Category - Only show if email package is installed -->
+        <div
+          v-if="hasEmailPackage"
+          class="tw-mt-3"
+        >
           <button
             v-b-toggle.collapse-email
             class="
@@ -54,15 +57,18 @@
                 tw-text-base
                 tw-cursor-pointer
               "
-              :class="isEmailActive ? 'tw-bg-blue-50 tw-font-semibold tw-text-blue-500' : 'tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50'"
+              :class="emailLinkClasses"
             >
               <span class="tw-inline-flex tw-items-center tw-gap-2">Email Start Event</span>
             </RouterLink>
           </b-collapse>
         </div>
 
-        <!-- Agents Category -->
-        <div class="tw-mt-3">
+        <!-- Agents Category - Only show if AI package is installed -->
+        <div
+          v-if="hasAiPackage"
+          class="tw-mt-3"
+        >
           <button
             v-b-toggle.collapse-agents
             class="
@@ -110,7 +116,7 @@
                 tw-text-base
                 tw-cursor-pointer
               "
-              :class="isAgentsActive ? 'tw-bg-blue-50 tw-font-semibold tw-text-blue-500' : 'tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50'"
+              :class="agentsLinkClasses"
             >
               <span class="tw-inline-flex tw-items-center tw-gap-2">FlowGenie Agents logs</span>
             </RouterLink>
@@ -122,33 +128,51 @@
 </template>
 
 <script>
+import { hasEmailPackage, hasAiPackage } from "../routes";
+
 export default {
-  name: 'LogsSidebar',
+  name: "LogsSidebar",
   data() {
     return {
       collapseStates: {
-        email: this.$route.path.startsWith('/email'),
-        agents: this.$route.path.startsWith('/agents'),
+        email: this.$route.path.startsWith("/email"),
+        agents: this.$route.path.startsWith("/agents"),
       },
     };
   },
   computed: {
+    hasEmailPackage() {
+      return hasEmailPackage();
+    },
+    hasAiPackage() {
+      return hasAiPackage();
+    },
     isEmailActive() {
-      return this.$route.path.startsWith('/email');
+      return this.$route.path.startsWith("/email");
     },
     isAgentsActive() {
-      return this.$route.path.startsWith('/agents');
+      return this.$route.path.startsWith("/agents");
+    },
+    emailLinkClasses() {
+      return this.isEmailActive
+        ? "tw-bg-blue-50 tw-font-semibold tw-text-blue-500"
+        : "tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50";
+    },
+    agentsLinkClasses() {
+      return this.isAgentsActive
+        ? "tw-bg-blue-50 tw-font-semibold tw-text-blue-500"
+        : "tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50";
     },
   },
   watch: {
     // Auto-expand the category when navigating to it
-    '$route.path': {
+    "$route.path": {
       handler(path) {
-        if (path.startsWith('/agents') && !this.collapseStates.agents) {
-          this.$root.$emit('bv::toggle::collapse', 'collapse-agents');
+        if (path.startsWith("/agents") && !this.collapseStates.agents) {
+          this.$root.$emit("bv::toggle::collapse", "collapse-agents");
         }
-        if (path.startsWith('/email') && !this.collapseStates.email) {
-          this.$root.$emit('bv::toggle::collapse', 'collapse-email');
+        if (path.startsWith("/email") && !this.collapseStates.email) {
+          this.$root.$emit("bv::toggle::collapse", "collapse-email");
         }
       },
       immediate: true,
@@ -156,18 +180,17 @@ export default {
   },
   mounted() {
     // Listen for collapse events to update icon rotation
-    this.$root.$on('bv::collapse::state', (id, state) => {
-      if (id === 'collapse-email') {
+    this.$root.$on("bv::collapse::state", (id, state) => {
+      if (id === "collapse-email") {
         this.collapseStates.email = state;
-      } else if (id === 'collapse-agents') {
+      } else if (id === "collapse-agents") {
         this.collapseStates.agents = state;
       }
     });
   },
   beforeDestroy() {
     // Clean up event listener
-    this.$root.$off('bv::collapse::state');
+    this.$root.$off("bv::collapse::state");
   },
 };
 </script>
-
diff --git a/resources/js/admin/logs/components/Logs/routes.js b/resources/js/admin/logs/components/Logs/routes.js
index cee148dcc5..398d462193 100644
--- a/resources/js/admin/logs/components/Logs/routes.js
+++ b/resources/js/admin/logs/components/Logs/routes.js
@@ -1,41 +1,92 @@
-import { LogTable } from './LogTable';
+import { LogTable } from "./LogTable";
 
 export default {};
 
+/**
+ * Check if a package is installed
+ * @param {string} packageName - The package name to check
+ * @returns {boolean}
+ */
+const isPackageInstalled = (packageName) => window.ProcessMaker?.packages?.includes(packageName);
+
+/**
+ * Check if email start event package is installed
+ * @returns {boolean}
+ */
+export const hasEmailPackage = () => isPackageInstalled("package-email-start-event");
+
+/**
+ * Check if AI package is installed
+ * @returns {boolean}
+ */
+export const hasAiPackage = () => isPackageInstalled("package-ai");
+
+/**
+ * Determine the default redirect path based on installed packages
+ * @returns {string}
+ */
+const getDefaultRedirectPath = () => {
+  if (hasEmailPackage()) {
+    return "/email/errors";
+  }
+  if (hasAiPackage()) {
+    return "/agents/design";
+  }
+  // Fallback - shouldn't happen if menu visibility is correct
+  return "/email/errors";
+};
+
 export const routes = [
   {
-    name: 'logs.index',
-    path: '/',
-    redirect: '/email/errors',
+    name: "logs.index",
+    path: "/",
+    beforeEnter: (to, from, next) => {
+      next(getDefaultRedirectPath());
+    },
   },
   // Email logs routes
   {
-    name: 'logs.email',
-    path: '/email/:logType',
+    name: "logs.email",
+    path: "/email/:logType",
     component: LogTable,
     props(route) {
       return {
-        category: 'email',
+        category: "email",
         logType: route.params.logType,
       };
     },
+    beforeEnter: (to, from, next) => {
+      if (!hasEmailPackage()) {
+        // Redirect to agents if email package not installed
+        next(hasAiPackage() ? "/agents/design" : "/");
+      } else {
+        next();
+      }
+    },
   },
   // FlowGenie Agents logs routes
   {
-    name: 'logs.agents.redirect',
-    path: '/agents',
-    redirect: '/agents/design',
+    name: "logs.agents.redirect",
+    path: "/agents",
+    redirect: "/agents/design",
   },
   {
-    name: 'logs.agents',
-    path: '/agents/:logType',
+    name: "logs.agents",
+    path: "/agents/:logType",
     component: LogTable,
     props(route) {
       return {
-        category: 'agents',
+        category: "agents",
         logType: route.params.logType,
       };
     },
+    beforeEnter: (to, from, next) => {
+      if (!hasAiPackage()) {
+        // Redirect to email if AI package not installed
+        next(hasEmailPackage() ? "/email/errors" : "/");
+      } else {
+        next();
+      }
+    },
   },
 ];
-

From 5f65a785b8199989484428470b0e56af5cd862c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 7 Jan 2026 13:32:45 -0300
Subject: [PATCH 5/5] Fix issue with nested properties

---
 .../logs/components/Logs/BaseTable/BaseTable.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
index 120ae42de4..9559740635 100644
--- a/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
+++ b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
@@ -44,18 +44,18 @@ export default {
   },
   methods: {
     getItemValue(item, column) {
-      // if key is a dot-separated string, get the nested value from the item
-      if (column.key.includes('.')) {
-        return column.key.split('.').reduce((val, part) => (val != null ? val[part] : undefined), item);
-      }
+      // Get value - handle dot-separated keys for nested properties
+      const value = column.key.includes(".")
+        ? column.key.split(".").reduce((val, part) => (val == null ? undefined : val[part]), item)
+        : item[column.key];
 
-      if (typeof column.format === 'function') {
-        return column.format(item[column.key]);
+      // Apply format function if provided
+      if (typeof column.format === "function") {
+        return column.format(value);
       }
 
-      return item[column.key];
+      return value;
     },
   },
 };
 </script>
-