From ae444f8761939b3857e7f113903e4e99755686b0 Mon Sep 17 00:00:00 2001
From: Sander Dorigo <git@sanderdorigo.nl>
Date: Wed, 24 Jun 2026 09:26:13 +0200
Subject: [PATCH] New view stuff

---
 app/View/Components/Form/Alpine/Title.php     |  27 ++++
 config/translations.php                       |   1 +
 .../src/components/administrations/Edit.vue   | 112 ---------------
 .../src/components/administrations/Index.vue  |  85 +----------
 .../assets/v1/src/components/form/Title.vue   |  31 +---
 .../v3/js/pages/administrations/edit.js       | 135 ++++++++++++++++++
 .../v3/js/pages/administrations/index.js      |  86 +++++++++++
 resources/assets/v3/vite.config.js            |   4 +
 .../views/administrations/edit.blade.php      |  73 ++++++++++
 resources/views/administrations/edit.twig     |   8 --
 .../views/administrations/index.blade.php     |  66 +++++++++
 resources/views/administrations/index.twig    |   8 --
 .../components/form/alpine/title.blade.php    |  32 +++++
 13 files changed, 426 insertions(+), 242 deletions(-)
 create mode 100644 app/View/Components/Form/Alpine/Title.php
 create mode 100644 resources/assets/v3/js/pages/administrations/edit.js
 create mode 100644 resources/assets/v3/js/pages/administrations/index.js
 create mode 100644 resources/views/administrations/edit.blade.php
 delete mode 100644 resources/views/administrations/edit.twig
 create mode 100644 resources/views/administrations/index.blade.php
 delete mode 100644 resources/views/administrations/index.twig
 create mode 100644 resources/views/components/form/alpine/title.blade.php

diff --git a/app/View/Components/Form/Alpine/Title.php b/app/View/Components/Form/Alpine/Title.php
new file mode 100644
index 0000000000..a99f91987b
--- /dev/null
+++ b/app/View/Components/Form/Alpine/Title.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace FireflyIII\View\Components\Form\Alpine;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Title extends Component
+{
+    public string $value;
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(string $value)
+    {
+        $this->value= $value;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.form.alpine.title');
+    }
+}
diff --git a/config/translations.php b/config/translations.php
index 1e3e886137..c385b365c6 100644
--- a/config/translations.php
+++ b/config/translations.php
@@ -61,6 +61,7 @@ return [
                 'interest_calc_yearly',
                 'loading',
                 'exchange_rates_from_to',
+                'administrations_page_edit_sub_title_js',
                 'errors_upload',
                 'updated_journal_js',
                 'upload_too_large',
diff --git a/resources/assets/v1/src/components/administrations/Edit.vue b/resources/assets/v1/src/components/administrations/Edit.vue
index 24890c96ea..eff0ff8656 100644
--- a/resources/assets/v1/src/components/administrations/Edit.vue
+++ b/resources/assets/v1/src/components/administrations/Edit.vue
@@ -19,71 +19,7 @@
   -->
 
 <template>
-    <div>
-        <form accept-charset="UTF-8" class="form-horizontal" enctype="multipart/form-data">
-            <input name="_token" type="hidden" value="xxx">
 
-            <div v-if="error_message !== ''" class="row">
-                <div class="col-lg-12">
-                    <div class="alert alert-danger alert-dismissible" role="alert">
-                        <button class="close" data-dismiss="alert" type="button" v-bind:aria-label="$t('firefly.close')"><span
-                            aria-hidden="true">&times;</span></button>
-                        <strong>{{ $t("firefly.flash_error") }}</strong> {{ error_message }}
-                    </div>
-                </div>
-            </div>
-
-            <div v-if="success_message !== ''" class="row">
-                <div class="col-lg-12">
-                    <div class="alert alert-success alert-dismissible" role="alert">
-                        <button class="close" data-dismiss="alert" type="button" v-bind:aria-label="$t('firefly.close')"><span
-                            aria-hidden="true">&times;</span></button>
-                        <strong>{{ $t("firefly.flash_success") }}</strong> <span v-html="success_message"></span>
-                    </div>
-                </div>
-            </div>
-
-        <div class="row">
-            <div class="col-lg-12 col-md-12 col-sm-12">
-                <div class="box">
-                    <div class="box-header with-border">
-                        <h3 class="box-title">
-                            {{ $t('firefly.administrations_page_edit_sub_title_js', {title: this.pageTitle}) }}
-                        </h3>
-                    </div>
-                    <div class="box-body">
-                        {{ $t('firefly.temp_administrations_introduction') }}
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-lg-8 col-lg-offset-2 col-md-12 col-sm-12">
-                <div class="box">
-                    <div class="box-header with-border">
-                        <h3 class="box-title">
-                            {{ $t('firefly.administrations_page_edit_sub_title_js', {title: this.pageTitle}) }}
-                        </h3>
-                    </div>
-                    <div class="box-body">
-                        <Title :value=administration.title :error="errors.title" v-on:input="administration.title = $event"></Title>
-                        <UserGroupCurrency :value=administration.currency_id :error="errors.currency_id"
-                                        v-on:input="administration.currency_id = $event"></UserGroupCurrency>
-                    </div>
-                    <div class="box-footer">
-                        <div class="btn-group">
-                            <button id="submitButton" ref="submitButton" class="btn btn-success" @click="submit">
-                                {{ $t('firefly.submit') }}
-                            </button>
-                        </div>
-                        <p class="text-success" v-html="success_message"></p>
-                        <p class="text-danger" v-html="error_message"></p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        </form>
-    </div>
 </template>
 
 <script>
@@ -115,55 +51,7 @@ export default {
         this.downloadAdministration(administrationId);
     },
     methods: {
-        downloadAdministration: function (id) {
-            axios.get("./api/v1/user-groups/" + id).then((response) => {
-                let current = response.data.data;
-                this.administration = {
-                    id: current.id,
-                    title: current.attributes.title,
-                    currency_id: parseInt(current.attributes.primary_currency_id),
-                    currency_code: current.attributes.primary_currency_code,
-                    currency_name: current.attributes.primary_currency_name,
-                };
-                this.pageTitle = this.administration.title;
-            });
-        },
-        submit: function (e) {
-            // reset messages
-            this.error_message = '';
-            this.success_message = '';
-            this.errors = {
-                title: [],
-                currency_id: [],
-            };
 
-            // disable button
-            $('#submitButton').prop("disabled", true);
-
-            // collect data
-            let data = {
-                title: this.administration.title,
-                primary_currency_id: parseInt(this.administration.currency_id),
-            };
-
-            // post!
-            axios.put('./api/v1/user-groups/' + this.administration.id, data).then((response) => {
-                let administrationId = parseInt(response.data.data.id);
-                window.location.href = './administrations?user_group_id=' + administrationId + '&message=updated';
-            }).catch((error) => {
-
-                this.error_message = error.response.data.message;
-                this.errors.title = error.response.data.errors.title;
-                this.errors.primary_currency_id = error.response.data.errors.primary_currency_id;
-
-                // enable button again
-                $('#submitButton').prop("disabled", false);
-
-            });
-            if (e) {
-                e.preventDefault();
-            }
-        }
     }
 }
 </script>
diff --git a/resources/assets/v1/src/components/administrations/Index.vue b/resources/assets/v1/src/components/administrations/Index.vue
index 2a394e47cd..acf3a6e98c 100644
--- a/resources/assets/v1/src/components/administrations/Index.vue
+++ b/resources/assets/v1/src/components/administrations/Index.vue
@@ -19,66 +19,7 @@
   -->
 
 <template>
-    <div>
-        <div class="row">
-            <div class="col-lg-12 col-md-12 col-sm-12">
-                <div class="box">
-                    <div class="box-header with-border">
-                        <h3 class="box-title">
-                            {{ $t('firefly.administrations_index_menu') }}
-                        </h3>
-                    </div>
-                    <div class="box-body">
-                        {{ $t('firefly.temp_administrations_introduction') }}
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-lg-12 col-md-12 col-sm-12">
-                <div class="box">
-                    <div class="box-header with-border">
-                        <h3 class="box-title">
-                            {{ $t('firefly.table') }}
-                        </h3>
-                    </div>
-                    <div class="box-body no-padding">
-                        <table class="table table-responsive table-hover" v-if="administrations.length > 0"
-                               aria-label="A table.">
-                            <thead>
-                            <tr>
-                                <th>{{ $t('list.title') }}</th>
-                                <th>{{ $t('list.primary_currency') }}</th>
-                                <th class="hidden-sm hidden-xs">&nbsp;</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                            <tr v-for="administration in administrations" :key="administration.id">
-                                <td>
-                                    <span v-text="administration.title"></span>
-                                </td>
-                                <td>
-                                    <span v-text="administration.currency_name"></span> (<span v-text="administration.currency_code"></span>)
-                                </td>
-                                <td class="hidden-sm hidden-xs">
-                                    <div class="btn-group btn-group-xs pull-right">
-                                        <button type="button" class="btn btn-default dropdown-toggle"
-                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                            {{ $t('firefly.actions') }} <span class="caret"></span></button>
-                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
-                                            <li><a :href="'./administrations/edit/' + administration.id"><span class="fa fa-fw fa-pencil"></span>
-                                                {{ $t('firefly.edit') }}</a></li>
-                                        </ul>
-                                    </div>
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+
 </template>
 
 <script>
@@ -93,31 +34,7 @@ export default {
         this.getAdministrations();
     },
     methods: {
-        getAdministrations: function () {
-            this.administrations = [];
-            this.downloadAdministrations(1);
-        },
 
-        downloadAdministrations: function (page) {
-            axios.get("./api/v1/user-groups?page=" + page).then((response) => {
-                for (let i in response.data.data) {
-                    if (response.data.data.hasOwnProperty(i)) {
-                        let current = response.data.data[i];
-                        let administration = {
-                            id: current.id,
-                            title: current.attributes.title,
-                            currency_code: current.attributes.primary_currency_code,
-                            currency_name: current.attributes.primary_currency_name,
-                        };
-                        this.administrations.push(administration);
-                    }
-                }
-
-                if (response.data.meta.pagination.current_page < response.data.meta.pagination.total_pages) {
-                    this.downloadAdministrations(response.data.meta.pagination.current_page + 1);
-                }
-            });
-        },
     }
 }
 </script>
diff --git a/resources/assets/v1/src/components/form/Title.vue b/resources/assets/v1/src/components/form/Title.vue
index e4c6b23874..661e65e98e 100644
--- a/resources/assets/v1/src/components/form/Title.vue
+++ b/resources/assets/v1/src/components/form/Title.vue
@@ -19,36 +19,7 @@
   -->
 
 <template>
-  <div class="form-group" v-bind:class="{ 'has-error': hasError()}">
-    <label class="col-sm-4 control-label">
-      {{ $t('form.title') }}
-    </label>
-    <div class="col-sm-8">
-      <div class="input-group">
-        <input
-            ref="title"
-            :title="$t('form.title')"
-            v-model=title
-            autocomplete="off"
-            class="form-control"
-            name="title"
-            type="text"
-            @input="handleInput"
-            v-bind:placeholder="$t('form.title')"
-        >
-        <span class="input-group-btn">
-            <button
-                class="btn btn-default"
-                tabIndex="-1"
-                type="button"
-                v-on:click="clearTitle"><i class="fa fa-trash-o"></i></button>
-        </span>
-      </div>
-      <ul v-for="error in this.error" class="list-unstyled">
-        <li class="text-danger">{{ error }}</li>
-      </ul>
-    </div>
-  </div>
+
 </template>
 
 <script>
diff --git a/resources/assets/v3/js/pages/administrations/edit.js b/resources/assets/v3/js/pages/administrations/edit.js
new file mode 100644
index 0000000000..fbe8fc68cb
--- /dev/null
+++ b/resources/assets/v3/js/pages/administrations/edit.js
@@ -0,0 +1,135 @@
+/*
+ * 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/>.
+ */
+
+// CSS
+import '../../boot/bootstrap.js';
+import sidebar from '../../pages/shared/sidebar.js';
+import dates from '../shared/dates.js';
+import i18next from "i18next";
+
+let edit = function () {
+    return {
+        i18next: null,
+        pageTitle: '',
+        administration: {
+            title: '',
+            currency_id: 0,
+        },
+        errors: {
+            title: [],
+            currency_id: [],
+        },
+        error_message: '',
+        success_message: '',
+
+        init() {
+            this.i18next = i18next;
+            const page = window.location.href.split('/');
+            const administrationId = parseInt(page[page.length - 1]);
+            this.downloadAdministration(administrationId);
+        },
+        downloadAdministration: function (id) {
+            axios.get("./api/v1/user-groups/" + id).then((response) => {
+                let current = response.data.data;
+                this.administration = {
+                    id: current.id,
+                    title: current.attributes.title,
+                    currency_id: parseInt(current.attributes.primary_currency_id),
+                    currency_code: current.attributes.primary_currency_code,
+                    currency_name: current.attributes.primary_currency_name,
+                };
+                this.pageTitle = this.administration.title;
+            });
+        },
+        submit: function (e) {
+            // reset messages
+            this.error_message = '';
+            this.success_message = '';
+            this.errors = {
+                title: [],
+                currency_id: [],
+            };
+
+            // disable button
+            $('#submitButton').prop("disabled", true);
+
+            // collect data
+            let data = {
+                title: this.administration.title,
+                primary_currency_id: parseInt(this.administration.currency_id),
+            };
+
+            // post!
+            axios.put('./api/v1/user-groups/' + this.administration.id, data).then((response) => {
+                let administrationId = parseInt(response.data.data.id);
+                window.location.href = './administrations?user_group_id=' + administrationId + '&message=updated';
+            }).catch((error) => {
+
+                this.error_message = error.response.data.message;
+                this.errors.title = error.response.data.errors.title;
+                this.errors.primary_currency_id = error.response.data.errors.primary_currency_id;
+
+                // enable button again
+                $('#submitButton').prop("disabled", false);
+
+            });
+            if (e) {
+                e.preventDefault();
+            }
+        },
+        hasError: function () {
+            return this.errors.title.length > 0;
+        },
+        clearTitle: function () {
+            this.administration.title = '';
+        },
+        handleInput() {
+            // this.$emit('input', this.administration.title);
+        },
+    }
+};
+
+
+const comps = {
+    edit,
+    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);
+}
diff --git a/resources/assets/v3/js/pages/administrations/index.js b/resources/assets/v3/js/pages/administrations/index.js
new file mode 100644
index 0000000000..5ff05ff6e5
--- /dev/null
+++ b/resources/assets/v3/js/pages/administrations/index.js
@@ -0,0 +1,86 @@
+/*
+ * 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/>.
+ */
+
+// CSS
+import '../../boot/bootstrap.js';
+import sidebar from '../../pages/shared/sidebar.js';
+import dates from '../shared/dates.js';
+
+let index = function () {
+    return {
+        administrations: [],
+        init() {
+            this.getAdministrations();
+        },
+        getAdministrations: function () {
+            this.administrations = [];
+            this.downloadAdministrations(1);
+        },
+
+        downloadAdministrations: function (page) {
+            axios.get("./api/v1/user-groups?page=" + page).then((response) => {
+                for (let i in response.data.data) {
+                    if (response.data.data.hasOwnProperty(i)) {
+                        let current = response.data.data[i];
+                        let administration = {
+                            id: current.id,
+                            title: current.attributes.title,
+                            currency_code: current.attributes.primary_currency_code,
+                            currency_name: current.attributes.primary_currency_name,
+                        };
+                        this.administrations.push(administration);
+                    }
+                }
+
+                if (response.data.meta.pagination.current_page < response.data.meta.pagination.total_pages) {
+                    this.downloadAdministrations(response.data.meta.pagination.current_page + 1);
+                }
+            });
+        },
+    }
+};
+
+
+const comps = {
+    index,
+    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);
+}
diff --git a/resources/assets/v3/vite.config.js b/resources/assets/v3/vite.config.js
index 6c05aff4d1..3afad4d8a4 100644
--- a/resources/assets/v3/vite.config.js
+++ b/resources/assets/v3/vite.config.js
@@ -52,6 +52,10 @@ export default defineConfig(({command, mode, isSsrBuild, isPreview}) => {
                     'js/pages/accounts/show.js',
                     'js/pages/accounts/reconcile/index.js',
 
+                    // administrations
+                    'js/pages/administrations/index.js',
+                    'js/pages/administrations/edit.js',
+
                     // categories
                     'js/pages/categories/index.js',
 
diff --git a/resources/views/administrations/edit.blade.php b/resources/views/administrations/edit.blade.php
new file mode 100644
index 0000000000..e95b0da9ae
--- /dev/null
+++ b/resources/views/administrations/edit.blade.php
@@ -0,0 +1,73 @@
+@extends('layout.v3.session')
+@section('content')
+    <div x-data="edit">
+        <form accept-charset="UTF-8" class="form-horizontal" enctype="multipart/form-data">
+            <input name="_token" type="hidden" value="xxx">
+
+            <template x-if="error_message !== ''">
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="alert alert-danger alert-dismissible" role="alert">
+                        <button class="close" data-dismiss="alert" type="button" aria-label="{{ __('firefly.close') }}"><span
+                                aria-hidden="true">&times;</span></button>
+                        <strong>{{ __("firefly.flash_error") }}</strong> <span x-text="error_message"></span>
+                    </div>
+                </div>
+            </div>
+            </template>
+
+            <template x-if="success_message !== ''">
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="alert alert-success alert-dismissible" role="alert">
+                        <button class="close" data-dismiss="alert" type="button" aria-label="{{ __('firefly.close') }}"><span aria-hidden="true">&times;</span></button>
+                        <strong>{{ __("firefly.flash_success") }}</strong> <span x-html="success_message"></span>
+                    </div>
+                </div>
+            </div>
+            </template>
+
+            <div class="row">
+                <div class="col-lg-12 col-md-12 col-sm-12">
+                    <div class="card mb-2">
+                        <div class="card-header">
+                            <h3 class="box-title" x-text="i18next.t('firefly.administrations_page_edit_sub_title_js', {title: this.pageTitle})">
+
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            {{ __('firefly.temp_administrations_introduction') }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-8 offset-lg-2 col-md-12 col-sm-12">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title" x-text="i18next.t('firefly.administrations_page_edit_sub_title_js', {title: this.pageTitle})"></h3>
+                        </div>
+                        <div class="card-body">
+                            <x-form.alpine.title value="administration.title" />
+                            <Title :value=administration.title :error="errors.title" v-on:input="administration.title = $event"></Title>
+                            <UserGroupCurrency :value=administration.currency_id :error="errors.currency_id"
+                                               v-on:input="administration.currency_id = $event"></UserGroupCurrency>
+                        </div>
+                        <div class="card-footer">
+                            <div class="text-end">
+                                <button id="submitButton" ref="submitButton" class="btn btn-success" @click="submit">
+                                    {{ __('firefly.submit') }}
+                                </button>
+                            </div>
+                            <p class="text-success" x-html="success_message"></p>
+                            <p class="text-danger" x-html="error_message"></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+@endsection
+@section('scripts')
+    @vite(['js/pages/administrations/edit.js'])
+@endsection
diff --git a/resources/views/administrations/edit.twig b/resources/views/administrations/edit.twig
deleted file mode 100644
index edd6650ab9..0000000000
--- a/resources/views/administrations/edit.twig
+++ /dev/null
@@ -1,8 +0,0 @@
-{% set VUE_SCRIPT_NAME = 'administrations/edit' %}
-@extends('layout.v3.session')
-{% block breadcrumbs %}
-    {{ Breadcrumbs.render }}
-@endsection
-@section('content')
-    <div id="administrations_edit"></div>
-@endsection
diff --git a/resources/views/administrations/index.blade.php b/resources/views/administrations/index.blade.php
new file mode 100644
index 0000000000..e0f3eaa302
--- /dev/null
+++ b/resources/views/administrations/index.blade.php
@@ -0,0 +1,66 @@
+@extends('layout.v3.session')
+@section('content')
+    <div x-data="index">
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="card mb-2">
+                    <div class="card-header">
+                        <h3 class="box-title">
+                            {{ __('firefly.administrations_index_menu') }}
+                        </h3>
+                    </div>
+                    <div class="card-body">
+                        {{ __('firefly.temp_administrations_introduction') }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-12 col-md-12 col-sm-12">
+                <div class="card mb-2">
+                    <div class="card-header">
+                        <h3 class="box-title">
+                            {{ __('firefly.table') }}
+                        </h3>
+                    </div>
+                    <div class="card-body p-0">
+                        <template x-if="administrations.length > 0">
+                        <table class="table table-responsive table-hover" aria-label="A table.">
+                            <thead>
+                            <tr>
+                                <th>{{ __('list.title') }}</th>
+                                <th>{{ __('list.primary_currency') }}</th>
+                                <th class="hidden-sm hidden-xs">&nbsp;</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <template x-for="administration in administrations" :key="administration.id">
+                            <tr>
+                                <td>
+                                    <span x-text="administration.title"></span>
+                                </td>
+                                <td>
+                                    <span x-text="administration.currency_name"></span> (<span x-text="administration.currency_code"></span>)
+                                </td>
+                                <td class="hidden-sm hidden-xs">
+                                    <button class="btn btn-sm btn-secondary-outline dropdown-toggle" type="button" :id="'card_header_' + administration.id" data-bs-toggle="dropdown" aria-expanded="false">
+                                            {{ __('firefly.actions') }} <span class="caret"></span></button>
+                                    <ul class="dropdown-menu" :aria-labelledby="'card_header_' + administration.id">
+                                            <li><a class="dropdown-item" :href="'./administrations/edit/' + administration.id"><span class="bi bi-pencil"></span>
+                                                    {{ __('firefly.edit') }}</a></li>
+                                        </ul>
+                                </td>
+                            </tr>
+                            </template>
+                            </tbody>
+                        </table>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+@section('scripts')
+    @vite(['js/pages/administrations/index.js'])
+@endsection
diff --git a/resources/views/administrations/index.twig b/resources/views/administrations/index.twig
deleted file mode 100644
index 62df04d9e5..0000000000
--- a/resources/views/administrations/index.twig
+++ /dev/null
@@ -1,8 +0,0 @@
-{% set VUE_SCRIPT_NAME = 'administrations/index' %}
-@extends('layout.v3.session')
-{% block breadcrumbs %}
-    {{ Breadcrumbs.render }}
-@endsection
-@section('content')
-    <div id="administrations_index"></div>
-@endsection
diff --git a/resources/views/components/form/alpine/title.blade.php b/resources/views/components/form/alpine/title.blade.php
new file mode 100644
index 0000000000..898ed927f7
--- /dev/null
+++ b/resources/views/components/form/alpine/title.blade.php
@@ -0,0 +1,32 @@
+<div class="form-group" x-bind:class="{ 'has-error': hasError()}">
+    <label class="col-sm-4 control-label">
+        {{ __('form.title') }}
+    </label>
+    <div class="col-sm-8">
+        <div class="input-group">
+            <input
+                ref="title"
+                title="{{ __('form.title') }}"
+                x-model={{ $value }}
+                autocomplete="off"
+                class="form-control"
+                name="title"
+                type="text"
+                @input="handleInput"
+                placeholder="{{ __('form.title') }}"
+            >
+            <span class="input-group-btn">
+            <button
+                class="btn btn-default"
+                tabIndex="-1"
+                type="button"
+                x-on:click="clearTitle"><i class="fa fa-trash-o"></i></button>
+        </span>
+        </div>
+        <template x-for="error in this.error">
+            <ul class="list-unstyled">
+                <li class="text-danger" x-text="error"></li>
+            </ul>
+        </template>
+    </div>
+</div>