Add list of transactions.

public/build/assets/get-94678769.js

@@ -1 +1 @@
-import{a as s}from"./format-money-e259f5e4.js";let t=class{list(a){return s.get("/api/v2/subscriptions",{params:a})}paid(a){return s.get("/api/v2/subscriptions/sum/paid",{params:a})}unpaid(a){return s.get("/api/v2/subscriptions/sum/unpaid",{params:a})}};class e{list(a){return s.get("/api/v2/piggy-banks",{params:a})}}export{t as G,e as a};
+import{a as s}from"./format-money-43e05102.js";let t=class{list(a){return s.get("/api/v2/subscriptions",{params:a})}paid(a){return s.get("/api/v2/subscriptions/sum/paid",{params:a})}unpaid(a){return s.get("/api/v2/subscriptions/sum/unpaid",{params:a})}};class e{list(a){return s.get("/api/v2/piggy-banks",{params:a})}}export{t as G,e as a};

public/build/assets/get-a29f6df7.js

@@ -1 +1 @@
-import{a as s}from"./format-money-e259f5e4.js";class p{list(a){return s.get("/api/v2/transactions",{params:a})}show(a,t){return s.get("/api/v2/transactions/"+a,{params:t})}}export{p as G};
+import{a as s}from"./format-money-43e05102.js";class p{list(a){return s.get("/api/v2/transactions",{params:a})}show(a,t){return s.get("/api/v2/transactions/"+a,{params:t})}}export{p as G};

public/build/assets/index-8df22335.js

@@ -0,0 +1 @@
+import{d as c,f as d}from"./format-money-43e05102.js";import{f,i as r}from"./vendor-fca45885.js";import{G as p}from"./get-a29f6df7.js";let g=function(){return{notifications:{error:{show:!1,text:"",url:""},success:{show:!1,text:"",url:""},wait:{show:!1,text:""}},transactions:[],totalPages:1,perPage:50,page:1,tableColumns:{description:{enabled:!0},source:{enabled:!0},destination:{enabled:!0},amount:{enabled:!0}},formatMoney(a,i){return d(a,i)},format(a){return f(a,r.t("config.date_time_fns"))},init(){this.notifications.wait.show=!0,this.notifications.wait.text=r.t("firefly.wait_loading_data"),this.getTransactions(this.page)},getTransactions(a){new p().list({page:a}).then(t=>{this.parseTransactions(t.data.data),this.totalPages=t.data.meta.pagination.total_pages,this.perPage=t.data.meta.pagination.per_page,this.page=t.data.meta.pagination.current_page}).catch(t=>{this.notifications.wait.show=!1,this.notifications.error.show=!0,this.notifications.error.text=t.response.data.message})},parseTransactions(a){for(let i in a)if(a.hasOwnProperty(i)){let t=a[i],u=t.attributes.transactions.length>1,s=!0;for(let o in t.attributes.transactions)if(t.attributes.transactions.hasOwnProperty(o)){let e=t.attributes.transactions[o];e.split=u,e.firstSplit=s,e.group_title=t.attributes.group_title,e.id=t.id,e.created_at=t.attributes.created_at,e.updated_at=t.attributes.updated_at,e.user=t.attributes.user,e.user_group=t.attributes.user_group,s=!1,console.log(e),this.transactions.push(e)}}this.notifications.wait.show=!1}}},n={index:g,dates:c};function l(){Object.keys(n).forEach(a=>{console.log(`Loading page component "${a}"`);let i=n[a]();Alpine.data(a,()=>i)}),Alpine.start()}document.addEventListener("firefly-iii-bootstrapped",()=>{console.log("Loaded through event listener."),l()});window.bootstrapped&&(console.log("Loaded through window variable."),l());

public/build/assets/show-61e79d17.js

@@ -1 +1 @@
-import{d,f as p}from"./format-money-e259f5e4.js";import{f as c,i as o}from"./vendor-fca45885.js";import{G as l}from"./get-3bb14de5.js";import{p as f}from"./parse-downloaded-splits-4afea167.js";import"./create-empty-split-fb5bda92.js";let h=function(){return{notifications:{error:{show:!1,text:"",url:""},success:{show:!1,text:"",url:""},wait:{show:!1,text:""}},groupProperties:{id:0,transactionType:"",transactionTypeTranslated:"",title:"",date:new Date},dateFields:["book_date","due_date","interest_date","invoice_date","payment_date","process_date"],metaFields:["external_id","internal_reference","sepa_batch_id","sepa_ct_id","sepa_ct_op","sepa_db","sepa_country","sepa_cc","sepa_ep","sepa_ci","external_url"],amounts:{},entries:[],pageProperties:{},formatMoney(e,s){return p(e,s)},format(e){return c(e,o.t("config.date_time_fns"))},init(){this.notifications.wait.show=!0,this.notifications.wait.text=o.t("firefly.wait_loading_data");const e=window.location.href.split("/"),s=parseInt(e[e.length-1]);new l().show(s,{}).then(t=>{const i=t.data.data;this.groupProperties.id=parseInt(i.id),this.groupProperties.transactionType=i.attributes.transactions[0].type,this.groupProperties.transactionTypeTranslated=o.t("firefly."+i.attributes.transactions[0].type),this.groupProperties.title=i.attributes.title??i.attributes.transactions[0].description,this.entries=f(i.attributes.transactions),this.notifications.wait.show=!1}).then(()=>{for(let t in this.entries)if(this.entries.hasOwnProperty(t)){const i=this.entries[t].currency_code,a=this.entries[t].foreign_currency_code;this.amounts[i]===void 0&&(this.amounts[i]=0,this.amounts[i]+=parseFloat(this.entries[t].amount)),a!==null&&a!==""&&this.amounts[a]===void 0&&(this.amounts[a]=0,this.amounts[a]+=parseFloat(this.entries[t].foreign_amount)),parseInt(t)===0&&(this.groupProperties.date=this.entries[t].date)}}).catch(t=>{this.notifications.error.show=!0,this.notifications.error.text=t.message})}}},r={show:h,dates:d};function n(){Object.keys(r).forEach(e=>{console.log(`Loading page component "${e}"`);let s=r[e]();Alpine.data(e,()=>s)}),Alpine.start()}document.addEventListener("firefly-iii-bootstrapped",()=>{console.log("Loaded through event listener."),n()});window.bootstrapped&&(console.log("Loaded through window variable."),n());
+import{d,f as p}from"./format-money-43e05102.js";import{f as c,i as o}from"./vendor-fca45885.js";import{G as l}from"./get-a29f6df7.js";import{p as f}from"./parse-downloaded-splits-4afea167.js";import"./create-empty-split-fb5bda92.js";let h=function(){return{notifications:{error:{show:!1,text:"",url:""},success:{show:!1,text:"",url:""},wait:{show:!1,text:""}},groupProperties:{id:0,transactionType:"",transactionTypeTranslated:"",title:"",date:new Date},dateFields:["book_date","due_date","interest_date","invoice_date","payment_date","process_date"],metaFields:["external_id","internal_reference","sepa_batch_id","sepa_ct_id","sepa_ct_op","sepa_db","sepa_country","sepa_cc","sepa_ep","sepa_ci","external_url"],amounts:{},entries:[],pageProperties:{},formatMoney(e,s){return p(e,s)},format(e){return c(e,o.t("config.date_time_fns"))},init(){this.notifications.wait.show=!0,this.notifications.wait.text=o.t("firefly.wait_loading_data");const e=window.location.href.split("/"),s=parseInt(e[e.length-1]);new l().show(s,{}).then(t=>{const i=t.data.data;this.groupProperties.id=parseInt(i.id),this.groupProperties.transactionType=i.attributes.transactions[0].type,this.groupProperties.transactionTypeTranslated=o.t("firefly."+i.attributes.transactions[0].type),this.groupProperties.title=i.attributes.title??i.attributes.transactions[0].description,this.entries=f(i.attributes.transactions),this.notifications.wait.show=!1}).then(()=>{for(let t in this.entries)if(this.entries.hasOwnProperty(t)){const i=this.entries[t].currency_code,a=this.entries[t].foreign_currency_code;this.amounts[i]===void 0&&(this.amounts[i]=0,this.amounts[i]+=parseFloat(this.entries[t].amount)),a!==null&&a!==""&&this.amounts[a]===void 0&&(this.amounts[a]=0,this.amounts[a]+=parseFloat(this.entries[t].foreign_amount)),parseInt(t)===0&&(this.groupProperties.date=this.entries[t].date)}}).catch(t=>{this.notifications.error.show=!0,this.notifications.error.text=t.message})}}},r={show:h,dates:d};function n(){Object.keys(r).forEach(e=>{console.log(`Loading page component "${e}"`);let s=r[e]();Alpine.data(e,()=>s)}),Alpine.start()}document.addEventListener("firefly-iii-bootstrapped",()=>{console.log("Loaded through event listener."),n()});window.bootstrapped&&(console.log("Loaded through window variable."),n());

public/build/manifest.json

@@ -1,13 +1,4 @@
 {
-  "_autocomplete-functions-ac0d2cb1.js": {
-    "file": "assets/autocomplete-functions-ac0d2cb1.js",
-    "imports": [
-      "_format-money-e259f5e4.js",
-      "_get-da167d5b.js",
-      "_vendor-fca45885.js"
-    ],
-    "integrity": "sha384-ylbI7yXfy5qc0QwMwNSdc4QMHKM1eXXR6R2zLxLUSccW3OCkFCc5pEm1ZpCDbdXh"
-  },
   "_create-empty-split-fb5bda92.js": {
     "file": "assets/create-empty-split-fb5bda92.js",
     "imports": [
@@ -15,26 +6,26 @@
     ],
     "integrity": "sha384-hhKUcZf3xSLJgwkzufZGpLjOUeD5gulL71KQu72SoGIUVLPU3EIBT+ICT/znc01b"
   },
-  "_format-money-e259f5e4.js": {
-    "file": "assets/format-money-e259f5e4.js",
+  "_format-money-43e05102.js": {
+    "file": "assets/format-money-43e05102.js",
     "imports": [
       "_vendor-fca45885.js"
     ],
-    "integrity": "sha384-zfi6/58+Nb5L5Ryx5WARPOstXPNq+qioNeeQB0XP4V9ZAPg4Bi9bdC3+fVmNsE/M"
+    "integrity": "sha384-/lP2o0Yj4DAtc93ChQvqF5ctDGjH6jakuIZcEQBICvDn/YtSDaPr7PzrZd4w53jV"
   },
-  "_get-3bb14de5.js": {
-    "file": "assets/get-3bb14de5.js",
+  "_get-94678769.js": {
+    "file": "assets/get-94678769.js",
     "imports": [
-      "_format-money-e259f5e4.js"
+      "_format-money-43e05102.js"
     ],
-    "integrity": "sha384-ZgD+gbjUNu1QpP5ZH5WE8+bJmZsLQOx73UT9vPxPRzBwxtGignJ2BC8h9WYdJxU3"
+    "integrity": "sha384-/nzI9V1buTN8n1p1uL9UOxOasx6+q6kTpiwDCaZZHBCVrrnFqWSCQCHAPQFcqYGB"
   },
-  "_get-da167d5b.js": {
-    "file": "assets/get-da167d5b.js",
+  "_get-a29f6df7.js": {
+    "file": "assets/get-a29f6df7.js",
     "imports": [
-      "_format-money-e259f5e4.js"
+      "_format-money-43e05102.js"
     ],
-    "integrity": "sha384-ADxhKsFImio/UdUojkpvUHQ9lKqGcHbhsvCj5TEYLNuefhUlz0RIyWX/0/cFcasS"
+    "integrity": "sha384-QRZtv6rXwaf1k9JOU1p1T42Nn2t5En83j/8rbh00dJ+1sSoNLD0maS8FkPKVRbpE"
   },
   "_parse-downloaded-splits-4afea167.js": {
     "file": "assets/parse-downloaded-splits-4afea167.js",
@@ -44,6 +35,15 @@
     ],
     "integrity": "sha384-rTgD6HzwbdSD/qoN3b4vipowqanriBYLYnORI3F23R+uFbr1kyZIE1AHYA9oe2qO"
   },
+  "_splice-errors-into-transactions-9c9b99c0.js": {
+    "file": "assets/splice-errors-into-transactions-9c9b99c0.js",
+    "imports": [
+      "_format-money-43e05102.js",
+      "_get-94678769.js",
+      "_vendor-fca45885.js"
+    ],
+    "integrity": "sha384-6QHZSbNE9w8hPmdvtcEi1wqimo8+lyJWXBaYaX7/c8qoveRKX5A2WZVhqb7bMRkV"
+  },
   "_vendor-fca45885.js": {
     "assets": [
       "assets/layers-1dbbe9d0.png",
@@ -102,57 +102,68 @@
     "integrity": "sha384-wg83fCOXjBtqzFAWhTL9Sd9vmLUNhfEEzfmNUX9zwv2igKlz/YQbdapF4ObdxF+R"
   },
   "resources/assets/v2/pages/dashboard/dashboard.js": {
-    "file": "assets/dashboard-d274a3dc.js",
+    "file": "assets/dashboard-2ad8d866.js",
     "imports": [
-      "_format-money-e259f5e4.js",
+      "_format-money-43e05102.js",
       "_vendor-fca45885.js",
-      "_get-3bb14de5.js",
-      "_get-da167d5b.js"
+      "_get-a29f6df7.js",
+      "_get-94678769.js"
     ],
     "isEntry": true,
     "src": "resources/assets/v2/pages/dashboard/dashboard.js",
-    "integrity": "sha384-yhbUCvDl5ePrqXSXJu1jJ6eGLWzC137n7Ee3gHZDaO9kOKqtajG3KbILBpYlM5u9"
+    "integrity": "sha384-drEV1+zgjVGIfpdo1BovDls72a22l303XFZq/n0BE9VMTuydOYDBBgEqjM1GgwQD"
   },
   "resources/assets/v2/pages/transactions/create.js": {
-    "file": "assets/create-9af1982c.js",
+    "file": "assets/create-46b63de1.js",
     "imports": [
-      "_format-money-e259f5e4.js",
+      "_format-money-43e05102.js",
       "_create-empty-split-fb5bda92.js",
-      "_autocomplete-functions-ac0d2cb1.js",
+      "_splice-errors-into-transactions-9c9b99c0.js",
       "_vendor-fca45885.js",
-      "_get-da167d5b.js"
+      "_get-94678769.js"
     ],
     "isEntry": true,
     "src": "resources/assets/v2/pages/transactions/create.js",
-    "integrity": "sha384-f1FX2idAuYuItQyu41hCRa1AtE+65Pqky4Dwn2+u+5Vmsm2gw1uoZp2sODAfpiS5"
+    "integrity": "sha384-qacGHBXX2jXhiYdstJdUk5SBbdF1y8uj9RTdWetpmATLMNSjetRemPMk4PJoGxgZ"
   },
   "resources/assets/v2/pages/transactions/edit.js": {
-    "file": "assets/edit-4a0660ed.js",
+    "file": "assets/edit-b45ed381.js",
     "imports": [
-      "_format-money-e259f5e4.js",
-      "_get-3bb14de5.js",
+      "_format-money-43e05102.js",
+      "_get-a29f6df7.js",
       "_parse-downloaded-splits-4afea167.js",
-      "_autocomplete-functions-ac0d2cb1.js",
+      "_splice-errors-into-transactions-9c9b99c0.js",
       "_vendor-fca45885.js",
       "_create-empty-split-fb5bda92.js",
-      "_get-da167d5b.js"
+      "_get-94678769.js"
     ],
     "isEntry": true,
     "src": "resources/assets/v2/pages/transactions/edit.js",
-    "integrity": "sha384-RPpIOYVoXcKosf6gEb0H1RpeEVWHSfPfr8/wwG1X2dJQ/AA1qBCIdisog0bryCgS"
+    "integrity": "sha384-CoTAYJsk4/69IMBbgV50+i5mK+pANKXl0hLH9nqErgit1WDdBK6U4VimDsq5fvMf"
+  },
+  "resources/assets/v2/pages/transactions/index.js": {
+    "file": "assets/index-8df22335.js",
+    "imports": [
+      "_format-money-43e05102.js",
+      "_vendor-fca45885.js",
+      "_get-a29f6df7.js"
+    ],
+    "isEntry": true,
+    "src": "resources/assets/v2/pages/transactions/index.js",
+    "integrity": "sha384-UcghdFUsV8Bp01abyYn4u6sI/mWjXuY677vyQ76p1gVaMl9pVMGjdPa8Cd9Lg6M5"
   },
   "resources/assets/v2/pages/transactions/show.js": {
-    "file": "assets/show-9f0eb3b4.js",
+    "file": "assets/show-61e79d17.js",
     "imports": [
-      "_format-money-e259f5e4.js",
+      "_format-money-43e05102.js",
       "_vendor-fca45885.js",
-      "_get-3bb14de5.js",
+      "_get-a29f6df7.js",
       "_parse-downloaded-splits-4afea167.js",
       "_create-empty-split-fb5bda92.js"
     ],
     "isEntry": true,
     "src": "resources/assets/v2/pages/transactions/show.js",
-    "integrity": "sha384-MFgnhVMItZ2xoPPjfYAj+0uYCqL31JMZSdS9or8muf/YECi7R6Cz0CmJB+kPrehe"
+    "integrity": "sha384-JBLT+bepNQ1x9TTUWy1H/ekjto18Jzudb4suKq+rF1YvqeSpouHzJU2l1YeObQ7y"
   },
   "resources/assets/v2/sass/app.scss": {
     "file": "assets/app-fb7b26ec.css",

resources/assets/v2/pages/transactions/index.js

@@ -0,0 +1,148 @@
+/*
+ * show.js
+ * Copyright (c) 2024 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 dates from "../shared/dates.js";
+import i18next from "i18next";
+import {format} from "date-fns";
+import formatMoney from "../../util/format-money.js";
+import Get from "../../api/v2/model/transaction/get.js";
+
+
+let index = function () {
+    return {
+        // notifications
+        notifications: {
+            error: {
+                show: false, text: '', url: '',
+            }, success: {
+                show: false, text: '', url: '',
+            }, wait: {
+                show: false, text: '',
+
+            }
+        },
+        transactions: [],
+        totalPages: 1,
+        perPage: 50,
+        page: 1,
+        // available columns:
+        tableColumns: {
+            description: {
+                enabled: true
+            },
+            source: {
+                enabled: true
+            },
+            destination: {
+                enabled: true
+            },
+            amount: {
+                enabled: true
+            },
+        },
+
+        formatMoney(amount, currencyCode) {
+            return formatMoney(amount, currencyCode);
+        },
+        format(date) {
+            return format(date, i18next.t('config.date_time_fns'));
+        },
+        init() {
+            this.notifications.wait.show = true;
+            this.notifications.wait.text = i18next.t('firefly.wait_loading_data')
+            // TODO need date range.
+            // TODO handle page number
+            this.getTransactions(this.page);
+        },
+        getTransactions(page) {
+            let getter = new Get();
+
+            getter.list({page: page}).then(response => {
+                this.parseTransactions(response.data.data)
+
+                // set meta data
+                this.totalPages = response.data.meta.pagination.total_pages;
+                this.perPage = response.data.meta.pagination.per_page;
+                this.page = response.data.meta.pagination.current_page;
+            }).catch(error => {
+                // todo this is auto generated
+                this.notifications.wait.show = false;
+                this.notifications.error.show = true;
+                this.notifications.error.text = error.response.data.message;
+            });
+        },
+        parseTransactions(data) {
+            // no parse, just save
+            for (let i in data) {
+                if (data.hasOwnProperty(i)) {
+                    let current = data[i];
+                    let isSplit = current.attributes.transactions.length > 1;
+                    let firstSplit = true;
+
+                    // foreach on transactions, no matter how many.
+                    for (let ii in current.attributes.transactions) {
+                        if (current.attributes.transactions.hasOwnProperty(ii)) {
+                            let transaction = current.attributes.transactions[ii];
+                            transaction.split = isSplit;
+                            transaction.firstSplit = firstSplit;
+                            transaction.group_title = current.attributes.group_title;
+                            transaction.id = current.id;
+                            transaction.created_at = current.attributes.created_at;
+                            transaction.updated_at = current.attributes.updated_at;
+                            transaction.user = current.attributes.user;
+                            transaction.user_group = current.attributes.user_group;
+
+                            // set firstSplit = false for next run if applicable.
+                            firstSplit = false;
+                            console.log(transaction);
+                            this.transactions.push(transaction);
+                        }
+                    }
+                }
+            }
+            // only now, disable wait thing.
+            this.notifications.wait.show = false;
+
+        },
+    }
+}
+
+let comps = {index, dates};
+
+function loadPage() {
+    Object.keys(comps).forEach(comp => {
+        console.log(`Loading page component "${comp}"`);
+        let data = comps[comp]();
+        Alpine.data(comp, () => data);
+    });
+    Alpine.start();
+}
+
+// wait for load until bootstrapped event is received.
+document.addEventListener('firefly-iii-bootstrapped', () => {
+    console.log('Loaded through event listener.');
+    loadPage();
+});
+// or is bootstrapped before event is triggered.
+if (window.bootstrapped) {
+    console.log('Loaded through window variable.');
+    loadPage();
+}

resources/assets/v2/support/load-translations.js

@@ -24,33 +24,30 @@ import ChainedBackend from "i18next-chained-backend";
 import HttpBackend from "i18next-http-backend";
 import LocalStorageBackend from "i18next-localstorage-backend";
 
-
-
-
 let loaded = false;
 
 function loadTranslations(locale) {
     if (false === loaded) {
         const replacedLocale = locale.replace('-', '_');
         loaded = true;
-        console.log(import.meta.env.MODE);
         const expireTime = import.meta.env.MODE === 'development' ? 1 : 7 * 24 * 60 * 60 * 1000;
+        console.log('Will load language "'+replacedLocale+'"');
         return i18next
             .use(ChainedBackend)
             .init({
-                fallbackLng: "en_US",
+                load: 'languageOnly',
+                fallbackLng: "en",
                 lng: replacedLocale,
                 debug: import.meta.env.MODE === 'development',
-                // ... your i18next config
                 backend: {
                     backends: [
                         LocalStorageBackend,
                         HttpBackend
                     ],
                     backendOptions: [{
+                        load: 'languageOnly',
                         expirationTime: expireTime
                     }, {
-                        //         const response = await fetch(`./v2/i18n/${locale}.json`);
                         loadPath: './v2/i18n/{{lng}}.json'
                     }]
                 }

resources/views/v2/transactions/index.blade.php

@@ -0,0 +1,167 @@
+@extends('layout.v2')
+@section('vite')
+    @vite(['resources/assets/v2/sass/app.scss', 'resources/assets/v2/pages/transactions/index.js'])
+@endsection
+@section('content')
+    <div class="app-content">
+        <div class="container-fluid" x-data="index">
+            <x-messages></x-messages>
+            <div class="row mb-3">
+                <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Info</h3>
+                        </div>
+                        <div class="card-body">
+                            some chart
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Info</h3>
+                        </div>
+                        <div class="card-body">
+                            Same
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Info</h3>
+                        </div>
+                        <div class="card-body">
+                            Same
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col">
+                    Nav
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col-xl-10 col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Info</h3>
+                        </div>
+                        <div class="card-body p-0">
+                            <table class="table table-hover table-striped">
+                                <thead>
+                                <tr>
+                                    <th>
+                                        Icon
+                                    </th>
+                                    <template x-if="tableColumns.description.enabled">
+                                        <th>Description</th>
+                                    </template>
+                                    <template x-if="tableColumns.source.enabled">
+                                        <th>From</th>
+                                    </template>
+                                    <template x-if="tableColumns.destination.enabled">
+                                        <th>To</th>
+                                    </template>
+                                    <template x-if="tableColumns.amount.enabled">
+                                        <th>Amount</th>
+                                    </template>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <template x-for="transaction in transactions">
+                                    <tr>
+                                        <td>
+                                            <template x-if="'withdrawal' === transaction.type">
+                                                <em class="fa fa-solid fa-arrow-left"
+                                                    title="TODO TRANSLATION"></em>
+                                            </template>
+
+                                            <template x-if="'deposit' === transaction.type">
+                                                <em class="fa-solid fa-arrow-right"
+                                                    :title="transaction.typeTranslated"></em>
+                                            </template>
+
+                                            <template x-if="'transfer' === transaction.type">
+                                                <em class="fa-solid fa-rotate"
+                                                    :title="transaction.typeTranslated"></em>
+                                            </template>
+                                            <template
+                                                x-if="'transfer' !== transaction.type && 'deposit' !== transaction.type && 'withdrawal' !== transaction.type">
+                                                <span>TODO missing ICON</span>
+                                            </template>
+                                        </td>
+                                        <template x-if="tableColumns.description.enabled">
+                                            <td>
+                                                <template x-if="transaction.split">
+                                                    <span>I AM SPLIT</span>
+                                                </template>
+                                                <template x-if="transaction.split && transaction.firstSplit">
+                                                    <span>I AM FIRST SPLIT</span>
+                                                </template>
+                                                <a :href="'./transactions/show/' + transaction.id" x-text="transaction.description"></a>
+                                            </td>
+                                        </template>
+                                        <template x-if="tableColumns.source.enabled">
+                                            <td>
+                                                <a :href="'./accounts/show/' + transaction.source_id"
+                                                   x-text="transaction.source_name"></a>
+                                            </td>
+                                        </template>
+                                        <template x-if="tableColumns.destination.enabled">
+                                            <td>
+                                                <a :href="'./accounts/show/' + transaction.destination_id"
+                                                   x-text="transaction.destination_name"></a>
+                                            </td>
+                                        </template>
+                                        <template x-if="tableColumns.amount.enabled">
+                                            <td>
+
+                                                <template x-if="'withdrawal' === transaction.type">
+                                                    <span class="text-danger" x-text="formatMoney(transaction.amount*-1, transaction.currency_code)"></span>
+                                                </template>
+
+
+                                                <template x-if="'deposit' === transaction.type">
+                                                    <span class="text-success" x-text="formatMoney(transaction.amount, transaction.currency_code)"></span>
+                                                </template>
+
+                                                <template x-if="'transfer' === transaction.type">
+                                                    <span class="text-info" x-text="formatMoney(transaction.amount, transaction.currency_code)"></span>
+                                                </template>
+                                                <template
+                                                    x-if="'transfer' !== transaction.type && 'deposit' !== transaction.type && 'withdrawal' !== transaction.type">
+                                                    <span>TODO PARSE MISSING AMOUNT</span>
+                                                </template>
+                                            </td>
+                                        </template>
+                                    </tr>
+                                </template>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-xl-2 col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Sidebar</h3>
+                        </div>
+                        <div class="card-body">
+                            I like sidebar
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col">
+                    Nav
+                </div>
+            </div>
+        </div>
+    </div>
+
+@endsection

resources/views/v2/transactions/show.blade.php

@@ -224,7 +224,7 @@
                                     </template>
                                     <tr>
                                         <th>recurring things</th>
-                                        <td>meta</td>
+                                        <td>TODO meta</td>
                                     </tr>
                                     <template x-if="entry.tags.length > 0">
                                         <tr>
@@ -248,28 +248,28 @@
                         </div>
                         <div class="card mb-3">
                             <div class="card-header">
-                                <h3 class="card-title">Transaction links</h3>
+                                <h3 class="card-title">Transaction links TODO</h3>
                             </div>
                             <div class="card-body p-0">
                             </div>
                         </div>
                         <div class="card mb-3">
                             <div class="card-header">
-                                <h3 class="card-title">Piggy bank events.</h3>
+                                <h3 class="card-title">Piggy bank events TODO</h3>
                             </div>
                             <div class="card-body p-0">
                             </div>
                         </div>
                         <div class="card mb-3">
                             <div class="card-header">
-                                <h3 class="card-title">Attachments</h3>
+                                <h3 class="card-title">Attachments TODO</h3>
                             </div>
                             <div class="card-body p-0">
                             </div>
                         </div>
                         <div class="card mb-3">
                             <div class="card-header">
-                                <h3 class="card-title">Audit log entries</h3>
+                                <h3 class="card-title">Audit log entries TODO</h3>
                             </div>
                             <div class="card-body p-0">
                             </div>

vite.config.js

@@ -48,6 +48,7 @@ export default defineConfig({
                 'resources/assets/v2/pages/transactions/create.js',
                 'resources/assets/v2/pages/transactions/edit.js',
                 'resources/assets/v2/pages/transactions/show.js',
+                'resources/assets/v2/pages/transactions/index.js',
             ],
             refresh: true,
         }),