Slowly replace show form, so it can contain location as well.

config/translations.php

@@ -64,6 +64,7 @@ return [
                 'you_create_transfer',
                 'you_create_withdrawal',
                 'you_create_deposit',
+                'wait_loading_page',
                 'inactive',
                 'liability_direction_debit_short',
                 'liability_direction_credit_short',

resources/assets/v3/js/pages/transactions/show.js

@@ -0,0 +1,82 @@
+/*
+ * dashboard.js
+ * Copyright (c) 2026 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import '../../boot/bootstrap.js';
+import sidebar from '../../pages/shared/sidebar.js';
+import dates from '../shared/dates.js';
+import i18next from "i18next";
+import Get from '../../api/model/transaction/get.js';
+
+let show = function () {
+    return {
+        i18next: null,
+        group: {
+            id: 0,
+            group_title: '',
+            transactions: [],
+
+        },
+        loading: true,
+        id: 0,
+        init() {
+            this.i18next = i18next;
+            const page = window.location.href.split('/');
+            this.group.id = parseInt(page[page.length - 1]);
+            this.downloadTransactionGroup();
+            // console.log('Generic JS for page with few features.');
+        },
+        downloadTransactionGroup() {
+            (new Get()).show(this.group.id).then((response) => {
+                const info = response.data.data;
+                this.group.transactions = info.attributes.transactions;
+                this.loading = false;
+            });
+        }
+    }
+
+};
+
+
+const comps = {
+    show,
+    sidebar,
+    dates
+};
+
+function loadPage(comps) {
+    // console.log('loadPage');
+    Object.keys(comps).forEach(comp => {
+        let data = comps[comp]();
+        Alpine.data(comp, () => data);
+        // console.log(comp);
+    });
+    Alpine.start();
+}
+
+// wait for load until bootstrapped event is received.
+document.addEventListener('firefly-iii-bootstrapped', () => {
+    // console.log('Loaded through event listener.');
+    loadPage(comps);
+});
+// or is bootstrapped before event is triggered.
+if (window.bootstrapped) {
+    // console.log('Loaded through window variable.');
+    loadPage(comps);
+}

resources/assets/v3/vite.config.js

@@ -82,6 +82,7 @@ export default defineConfig(({command, mode, isSsrBuild, isPreview}) => {
                     // transactions
                     'js/pages/transactions/create.js',
                     'js/pages/transactions/edit.js',
+                    'js/pages/transactions/show.js',
 
                     // tags
 

resources/lang/en_US/firefly.php

@@ -2122,6 +2122,7 @@ return [
 
     // transactions:
     'wait_loading_transaction'                            => 'Please wait for the form to load',
+    'wait_loading_page'                            => 'Please wait a moment for the page to load',
     'wait_loading_data'                                   => 'Please wait for your information to load...',
     'wait_attachments'                                    => 'Please wait for the attachments to upload.',
     'errors_upload'                                       => 'The upload has failed. Please check your browser console for the error.',

resources/views/transactions/show.blade.php

@@ -1,5 +1,15 @@
 @extends('layout.v3.session')
 @section('content')
+    <div x-data="show">
+        <template x-if="loading">
+            <div class="alert alert-info alert-dismissible fade show" role="alert">
+                <div class="spinner-border spinner-border-sm" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <span x-text="i18next.t('firefly.wait_loading_page')"></span>
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ __('firefly.close') }}"></button>
+            </div>
+        </template>
     <div class="row">
         <div class="col-lg-6">
             <div class="card mb-2">
@@ -60,20 +70,21 @@
                         <tbody>
                         <tr>
                             <td class="forty">{{ trans('list.id') }}</td>
-                            <td>#{{ $transactionGroup->id }}</td>
+                            <td>#<span x-text="group.id"></span></td>
                         </tr>
                         <tr>
                             <td class="forty">{{ trans('list.type') }}</td>
-                            <td>{{ __($first['transaction_type_type']) }}</td>
+                            <td><span x-text="i18next.t('firefly.' + (group.transactions[0] ? group.transactions[0].type : ''))"></span></td>d>
                         </tr>
                         <tr>
                             <td>{{ trans('list.description') }}</td>
                             <td>
-                                @if(1 === $splits)
-                                    {{ $first['description'] }}
-                                @else
-                                    {{ $transactionGroup->title }}
-                                @endif
+                                <template x-if="1 === group.transactions.length">
+                                    <span x-text="group.transactions[0].description"></span>
+                                </template>
+                                <template x-if="group.transactions.length > 1">
+                                    <span x-text="group.group_title"></span>
+                                </template>
                             </td>
                         </tr>
                         <tr>
@@ -539,9 +550,11 @@
     {{-- modal for linking journals. Will be filled by AJAX --}}
     <div class="modal fade" tabindex="-1" role="dialog" id="linkJournalModal">
     </div>
+    </div>
+
 @endsection
 @section('scripts')
-    @vite(['js/pages/generic.js'])
+    @vite(['js/pages/transactions/show.js'])
     <script type="text/javascript" nonce="{{ $JS_NONCE }}">
         var modalDialogURL = '{{ route('transactions.link.modal', ['%JOURNAL%']) }}';
         var acURL = '{{ route('api.v1.autocomplete.transactions-with-id') }}';