Expand account list

app/Api/V2/Controllers/Model/Account/IndexController.php

@@ -0,0 +1,78 @@
+<?php
+/*
+ * IndexController.php
+ * 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/.
+ */
+
+declare(strict_types=1);
+
+namespace FireflyIII\Api\V2\Controllers\Model\Account;
+
+use FireflyIII\Api\V2\Controllers\Controller;
+use FireflyIII\Api\V2\Request\Model\Transaction\InfiniteListRequest;
+use FireflyIII\Repositories\UserGroups\Account\AccountRepositoryInterface;
+use FireflyIII\Transformers\V2\AccountTransformer;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Pagination\LengthAwarePaginator;
+
+class IndexController extends Controller
+{
+    public const string RESOURCE_KEY = 'accounts';
+
+    private AccountRepositoryInterface $repository;
+
+    /**
+     * AccountController constructor.
+     */
+    public function __construct()
+    {
+        parent::__construct();
+        $this->middleware(
+            function ($request, $next) {
+                $this->repository = app(AccountRepositoryInterface::class);
+                // new way of user group validation
+                $userGroup = $this->validateUserGroup($request);
+                if (null !== $userGroup) {
+                    $this->repository->setUserGroup($userGroup);
+                }
+
+                return $next($request);
+            }
+        );
+    }
+
+    public function infiniteList(InfiniteListRequest $request): JsonResponse
+    {
+        $this->repository->resetAccountOrder();
+
+        // get accounts of the specified type, and return.
+        $types = $request->getAccountTypes();
+
+        // get from repository
+        $accounts    = $this->repository->getAccountsInOrder($types, $request->getSortInstructions('accounts'), $request->getStartRow(), $request->getEndRow());
+        $total    = $this->repository->countAccounts($types);
+        $count       = $request->getEndRow() - $request->getStartRow();
+        $paginator   = new LengthAwarePaginator($accounts, $total, $count, $this->parameters->get('page'));
+        $transformer = new AccountTransformer();
+        $transformer->setParameters($this->parameters); // give params to transformer
+
+        return response()
+            ->json($this->jsonApiList(self::RESOURCE_KEY, $paginator, $transformer))
+            ->header('Content-Type', self::CONTENT_TYPE);
+    }
+}

app/Api/V2/Controllers/Transaction/List/TransactionController.php

@@ -79,7 +79,7 @@ class TransactionController extends Controller
     public function infiniteList(InfiniteListRequest $request): JsonResponse
     {
         // get sort instructions
-        $instructions = $request->getSortInstructions();
+        $instructions = $request->getSortInstructions('transactions');
 
         // collect transactions:
         /** @var GroupCollectorInterface $collector */

app/Api/V2/Request/Model/Transaction/InfiniteListRequest.php

@@ -25,6 +25,7 @@ declare(strict_types=1);
 namespace FireflyIII\Api\V2\Request\Model\Transaction;
 
 use Carbon\Carbon;
+use FireflyIII\Support\Http\Api\AccountFilter;
 use FireflyIII\Support\Http\Api\TransactionFilter;
 use FireflyIII\Support\Request\ChecksLogin;
 use FireflyIII\Support\Request\ConvertsDataTypes;
@@ -36,6 +37,7 @@ use Illuminate\Foundation\Http\FormRequest;
  */
 class InfiniteListRequest extends FormRequest
 {
+    use AccountFilter;
     use ChecksLogin;
     use ConvertsDataTypes;
     use TransactionFilter;
@@ -88,9 +90,9 @@ class InfiniteListRequest extends FormRequest
         return 0 === $page || $page > 65536 ? 1 : $page;
     }
 
-    public function getSortInstructions(): array
+    public function getSortInstructions(string $key): array
     {
-        $allowed = config('firefly.sorting.allowed.transactions');
+        $allowed = config(sprintf('firefly.sorting.allowed.%s', $key));
         $set     = $this->get('sorting', []);
         $result  = [];
         if (0 === count($set)) {
@@ -120,6 +122,13 @@ class InfiniteListRequest extends FormRequest
         return $this->mapTransactionTypes($type);
     }
 
+    public function getAccountTypes(): array
+    {
+        $type = (string)$this->get('type', 'default');
+
+        return $this->mapAccountTypes($type);
+    }
+
     public function rules(): array
     {
         return [

app/Helpers/Collector/GroupCollector.php

@@ -792,6 +792,7 @@ class GroupCollector implements GroupCollectorInterface
             $this->setLimit(50);
         }
         if (null !== $this->startRow && null !== $this->endRow) {
+            /** @var int $total */
             $total = $this->endRow - $this->startRow;
 
             return new LengthAwarePaginator($set, $this->total, $total, 1);

app/Repositories/UserGroups/Account/AccountRepository.php

@@ -226,4 +226,66 @@ class AccountRepository implements AccountRepositoryInterface
 
         return $dbQuery->take($limit)->get(['accounts.*']);
     }
+
+    public function resetAccountOrder(): void
+    {
+        $sets = [
+            [AccountType::DEFAULT, AccountType::ASSET],
+            [AccountType::LOAN, AccountType::DEBT, AccountType::CREDITCARD, AccountType::MORTGAGE],
+        ];
+        foreach ($sets as $set) {
+            $list  = $this->getAccountsByType($set);
+            $index = 1;
+            foreach ($list as $account) {
+                if (false === $account->active) {
+                    $account->order = 0;
+
+                    continue;
+                }
+                if ($index !== (int)$account->order) {
+                    app('log')->debug(sprintf('Account #%d ("%s"): order should %d be but is %d.', $account->id, $account->name, $index, $account->order));
+                    $account->order = $index;
+                    $account->save();
+                }
+                ++$index;
+            }
+        }
+    }
+
+    /**
+     * @inheritDoc
+     */
+    #[\Override] public function getAccountsInOrder(array $types, array $sort, int $startRow, int $endRow): Collection
+    {
+        $query = $this->userGroup->accounts();
+        if (0 !== count($types)) {
+            $query->accountTypeIn($types);
+        }
+        $query->skip($startRow);
+        $query->take($endRow - $startRow);
+
+        // add sort parameters. At this point they're filtered to allowed fields to sort by:
+        if (0 !== count($sort)) {
+            foreach ($sort as $label => $direction) {
+                $query->orderBy(sprintf('accounts.%s', $label), $direction);
+            }
+        }
+
+        if (0 === count($sort)) {
+            $query->orderBy('accounts.order', 'ASC');
+            $query->orderBy('accounts.active', 'DESC');
+            $query->orderBy('accounts.name', 'ASC');
+        }
+
+        return $query->get(['accounts.*']);
+    }
+
+    #[\Override] public function countAccounts(array $types): int
+    {
+        $query = $this->userGroup->accounts();
+        if (0 !== count($types)) {
+            $query->accountTypeIn($types);
+        }
+        return $query->count();
+    }
 }

app/Repositories/UserGroups/Account/AccountRepositoryInterface.php

@@ -49,6 +49,20 @@ interface AccountRepositoryInterface
 
     public function getAccountsByType(array $types, ?array $sort = []): Collection;
 
+    public function countAccounts(array $types): int;
+
+    /**
+     * Used in the infinite accounts list.
+     *
+     * @param array $types
+     * @param array $sort
+     * @param int   $startRow
+     * @param int   $endRow
+     *
+     * @return Collection
+     */
+public function getAccountsInOrder(array $types,  array $sort, int $startRow, int $endRow): Collection;
+
     public function getActiveAccountsByType(array $types): Collection;
 
     /**
@@ -61,4 +75,9 @@ interface AccountRepositoryInterface
     public function setUser(User $user): void;
 
     public function setUserGroup(UserGroup $userGroup): void;
+
+    /**
+     * Reset order types of the mentioned accounts.
+     */
+    public function resetAccountOrder(): void;
 }

app/Support/Repositories/Recurring/CalculateXOccurrencesSince.php

@@ -79,13 +79,14 @@ trait CalculateXOccurrencesSince
         while ($total < $count) {
             $domCorrected = min($dayOfMonth, $mutator->daysInMonth);
             $mutator->day = $domCorrected;
+            app('log')->debug(sprintf('Mutator is now %s', $mutator->format('Y-m-d')));
             if (0 === $attempts % $skipMod && $mutator->gte($afterDate)) {
+                app('log')->debug('Is added to the list.');
                 $return[] = clone $mutator;
                 ++$total;
             }
             ++$attempts;
             $mutator      = $mutator->endOfMonth()->addDay();
-            app('log')->debug(sprintf('Mutator is now %s', $mutator->format('Y-m-d')));
         }
 
         return $return;

app/Transformers/V2/AccountTransformer.php

@@ -114,7 +114,7 @@ class AccountTransformer extends AbstractTransformer
 
         // no currency? use default
         $currency      = $this->default;
-        if (0 !== (int)$this->accountMeta[$id]['currency_id']) {
+        if (array_key_exists($id, $this->accountMeta) && 0 !== (int)$this->accountMeta[$id]['currency_id']) {
             $currency = $this->currencies[(int)$this->accountMeta[$id]['currency_id']];
         }
         // amounts and calculation.

config/firefly.php

@@ -917,6 +917,7 @@ return [
     'sorting'                      => [
         'allowed' => [
             'transactions' => ['description', 'amount'],
+            'accounts' => ['name'],
         ],
     ],
 ];

resources/assets/v2/api/v2/model/account/get.js

@@ -29,7 +29,7 @@ export default class Get {
      * @param date
      * @returns {Promise<AxiosResponse<any>>}
      */
-    get(identifier, date) {
+    list(identifier, date) {
         let params = {date: format(date, 'y-MM-dd').slice(0, 10)};
         if (!date) {
             return api.get('/api/v2/accounts/' + identifier);
@@ -37,6 +37,10 @@ export default class Get {
         return api.get('/api/v2/accounts/' + identifier, {params: params});
     }
 
+    infiniteList(params) {
+        return api.get('/api/v2/infinite/accounts', {params: params});
+    }
+
     /**
      *
      * @param identifier

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

@@ -0,0 +1,210 @@
+/*
+ * 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 Put from "../../api/v2/model/transaction/put.js";
+
+import {createGrid, ModuleRegistry} from "@ag-grid-community/core";
+
+import '@ag-grid-community/styles/ag-grid.css';
+import '@ag-grid-community/styles/ag-theme-alpine.css';
+import '../../css/grid-ff3-theme.css';
+
+import AmountEditor from "../../support/ag-grid/AmountEditor.js";
+
+import AccountDataSource from "../../support/ag-grid/AccountDataSource.js";
+import {InfiniteRowModelModule} from '@ag-grid-community/infinite-row-model';
+import DateTimeEditor from "../../support/ag-grid/DateTimeEditor.js";
+
+const ds = new AccountDataSource();
+
+// set type from URL
+const urlParts = window.location.href.split('/');
+const type = urlParts[urlParts.length - 1];
+ds.setType(type);
+
+document.addEventListener('cellEditRequest', () => {
+    console.log('Loaded through event listener.');
+    //loadPage();
+});
+let rowImmutableStore = [];
+
+let dataTable;
+const editableFields = ['description', 'amount', 'date'];
+
+const onCellEditRequestMethod = (event) => {
+    console.log('onCellEditRequestMethod');
+    const data = event.data;
+    const field = event.colDef.field;
+    let newValue = event.newValue;
+    if (!editableFields.includes(field)) {
+        console.log('Field ' + field + ' is not editable.');
+        return;
+    }
+
+    // this needs to be better
+    if ('amount' === field) {
+        newValue = event.newValue.amount;
+        console.log('New value is now' + newValue);
+    }
+
+    console.log('New value for field "' + field + '" in transaction journal #' + data.transaction_journal_id + ' of group #' + data.id + ' is "' + newValue + '"');
+    data[field] = newValue;
+    let rowNode = dataTable.getRowNode(String(event.rowIndex));
+    rowNode.updateData(data);
+
+    // then push update to Firefly III over API:
+    let submission = {
+        transactions: [
+            {
+                transaction_journal_id: data.transaction_journal_id,
+            }
+        ]
+    };
+    submission.transactions[0][field] = newValue;
+
+    // let putter = new Put();
+    // putter.put(submission, {id: data.id});
+
+
+};
+
+document.addEventListener('cellValueChanged', () => {
+    console.log('I just realized a cell value has changed.');
+});
+document.addEventListener('onCellValueChanged', () => {
+    console.log('I just realized a cell value has changed.');
+});
+
+let doOnCellValueChanged = function (e) {
+    console.log('I just realized a cell value has changed.');
+};
+
+const gridOptions = {
+    rowModelType: 'infinite',
+    datasource: ds,
+    onCellEditRequest: onCellEditRequestMethod,
+    readOnlyEdit: true,
+    cacheOverflowSize: 1,
+    cacheBlockSize: 20,
+    // Row Data: The data to be displayed.
+    // rowData: [
+    // { description: "Tesla", model: "Model Y", price: 64950, electric: true },
+    // { description: "Ford", model: "F-Series", price: 33850, electric: false },
+    // { description: "Toyota", model: "Corolla", price: 29600, electric: false },
+    // ],
+    // Column Definitions: Defines & controls grid columns.
+    columnDefs: [
+        {
+            field: "icon",
+            editable: false,
+            headerName: '',
+            sortable: false,
+            width: 40,
+            cellRenderer: function (params) {
+                if (params.getValue()) {
+                    return '<a href="./transactions/show/' + parseInt(params.value.id) + '"><em class="' + params.value.classes + '"></em></a>';
+                }
+                return '';
+            }
+        },
+        {
+            field: "name",
+            cellDataType: 'text',
+            editable: true,
+            cellRenderer: function (params) {
+                if (params.getValue()) {
+                    return '<a href="./accounts/show/' + parseInt(params.data.id) + '">'+params.getValue() +'</a>';
+                }
+                return '';
+            }
+
+        }
+    ]
+};
+
+
+ModuleRegistry.registerModules([InfiniteRowModelModule]);
+let index = function () {
+    return {
+        // notifications
+        notifications: {
+            error: {
+                show: false, text: '', url: '',
+            }, success: {
+                show: false, text: '', url: '',
+            }, wait: {
+                show: false, text: '',
+
+            }
+        },
+        totalPages: 1,
+        page: 1,
+        // available columns:
+        tableColumns: {
+            name: {
+                enabled: true
+            },
+        },
+
+        table: null,
+
+        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')
+
+            // Your Javascript code to create the grid
+            dataTable = createGrid(document.querySelector('#grid'), gridOptions);
+
+        },
+    }
+}
+
+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/pages/transactions/index.js

@@ -44,12 +44,6 @@ const urlParts = window.location.href.split('/');
 const type = urlParts[urlParts.length - 1];
 ds.setType(type);
 
-document.addEventListener('cellEditRequest', () => {
-    console.log('Loaded through event listener.');
-    //loadPage();
-});
-let rowImmutableStore = [];
-
 let dataTable;
 const editableFields = ['description', 'amount', 'date'];
 
@@ -90,22 +84,18 @@ const onCellEditRequestMethod = (event) => {
 
 };
 
-document.addEventListener('cellValueChanged', () => {
-    console.log('I just realized a cell value has changed.');
-});
-document.addEventListener('onCellValueChanged', () => {
-    console.log('I just realized a cell value has changed.');
-});
-
-let doOnCellValueChanged = function (e) {
-    console.log('I just realized a cell value has changed.');
-};
-
 const gridOptions = {
     rowModelType: 'infinite',
     datasource: ds,
+    cacheOverflowSize: 1,
+    cacheBlockSize: 20,
     onCellEditRequest: onCellEditRequestMethod,
     readOnlyEdit: true,
+    getRowId: function (params) {
+        console.log('getRowId', params.data.id);
+        return params.data.id;
+    },
+
     // Row Data: The data to be displayed.
     // rowData: [
     // { description: "Tesla", model: "Model Y", price: 64950, electric: true },

resources/assets/v2/support/ag-grid/AccountDataSource.js

@@ -0,0 +1,90 @@
+/*
+ * TransactionDataSource.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 Get from "../../api/v2/model/account/get.js";
+
+export default class AccountDataSource {
+    constructor() {
+        this.type = 'all';
+        this.rowCount = null;
+        this.sortModel = null;
+    }
+
+
+    rowCount() {
+        console.log('The row count is: ', this.rowCount);
+        return this.rowCount;
+    }
+
+    getRows(params) {
+        console.log('The sort model used is: ', params.sortModel);
+        let sorting = [];
+
+        for (let i in params.sortModel) {
+            if (params.sortModel.hasOwnProperty(i)) {
+                let sort = params.sortModel[i];
+                sorting.push({column: sort.colId, direction: sort.sort});
+            }
+        }
+
+        let getter = new Get();
+
+        getter.infiniteList({
+            start_row: params.startRow,
+            end_row: params.endRow,
+            type: this.type,
+            sorting: sorting
+        }).then(response => {
+            this.parseAccounts(response.data.data, params.successCallback);
+
+            // set meta data
+            this.rowCount = response.data.meta.pagination.total;
+            console.log('The row count is: ', this.rowCount);
+        }).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;
+            console.log(error);
+        });
+    }
+
+    parseAccounts(data, callback) {
+        let accounts = [];
+        // no parse, just save
+        for (let i in data) {
+            if (data.hasOwnProperty(i)) {
+                let current = data[i];
+                let entry = {};
+                entry.id = current.id;
+                entry.name = current.attributes.name;
+                accounts.push(entry);
+            }
+        }
+        console.log('accounts length = ', accounts.length);
+        callback(accounts, false);
+        return accounts;
+    }
+
+    setType(type) {
+        this.type = type;
+    }
+
+}

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

@@ -0,0 +1,75 @@
+@extends('layout.v2')
+@section('vite')
+    @vite(['resources/assets/v2/sass/app.scss', 'resources/assets/v2/pages/accounts/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-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                    <div class="card mb-3">
+                        <div class="card-header">
+                            <div class="row">
+                                <div class="col">
+                                    <h3 class="card-title">Accounts</h3>
+                                </div>
+                                <div class="col text-end">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card-body p-0">
+                            <div id="grid" class="ag-theme-alpine-auto-dark ag-theme-firefly-iii" style="height: 500px;">
+
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col">
+                    Nav
+                </div>
+            </div>
+        </div>
+    </div>
+
+@endsection

routes/api.php

@@ -172,8 +172,19 @@ Route::group(
     }
 );
 
+// infinite accounts list:
+Route::group(
+    [
+        'namespace' => 'FireflyIII\Api\V2\Controllers\Model\Account',
+        'prefix'    => 'v2/infinite/accounts',
+        'as'        => 'api.v2.infinite.accounts.',
+    ],
+    static function (): void {
+        Route::get('', ['uses' => 'IndexController@infiniteList', 'as' => 'list']);
+    }
+);
+
 // V2 API route for budgets and budget limits:
-// TODO Validate from here down.
 Route::group(
     [
         'namespace' => 'FireflyIII\Api\V2\Controllers\Model',

routes/web.php

@@ -1204,11 +1204,11 @@ Route::group(
         // show groups:
         // TODO improve these routes
         Route::get('{what}/all', ['uses' => 'Transaction\IndexController@indexAll', 'as' => 'index.all'])->where(
-            ['what' => 'withdrawal|deposit|transfers|transfer']
+            ['what' => 'withdrawal|deposit|transfers|transfer|all']
         );
 
         Route::get('{what}/{start_date?}/{end_date?}', ['uses' => 'Transaction\IndexController@index', 'as' => 'index'])->where(
-            ['what' => 'withdrawal|deposit|transfers|transfer']
+            ['what' => 'withdrawal|deposit|transfers|transfer|all']
         )->where(['start_date' => DATEFORMAT])
             ->where(['end_date' => DATEFORMAT])
         ;

vite.config.js

@@ -44,11 +44,15 @@ export default defineConfig({
                 'resources/assets/v2/sass/app.scss',
                 'resources/assets/v2/pages/dashboard/dashboard.js',
 
+                // accounts
+                'resources/assets/v2/pages/accounts/index.js',
+
                 // transactions
                 '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,
         }),