New endpoint, fixed logo, better account overview.

app/Api/V2/Controllers/Controller.php

@@ -158,7 +158,8 @@ class Controller extends BaseController
 
         // the transformer, at this point, needs to collect information that ALL items in the collection
         // require, like meta-data and stuff like that, and save it for later.
-        $transformer->collectMetaData($objects);
+        $objects = $transformer->collectMetaData($objects);
+        $paginator->setCollection($objects);
 
         $resource = new FractalCollection($objects, $transformer, $key);
         $resource->setPaginator(new IlluminatePaginatorAdapter($paginator));

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

@@ -62,20 +62,23 @@ class IndexController extends Controller
      */
     public function index(IndexRequest $request): JsonResponse
     {
+
         $this->repository->resetAccountOrder();
         $types        = $request->getAccountTypes();
-        $accounts    = $this->repository->getAccountsByType($types);
+        $instructions = $request->getSortInstructions('accounts');
+        $accounts     = $this->repository->getAccountsByType($types, $instructions);
         $pageSize     = $this->parameters->get('limit');
         $count        = $accounts->count();
         $accounts     = $accounts->slice(($this->parameters->get('page') - 1) * $pageSize, $pageSize);
         $paginator    = new LengthAwarePaginator($accounts, $count, $pageSize, $this->parameters->get('page'));
         $transformer  = new AccountTransformer();
+
+        $this->parameters->set('sort', $instructions);
         $transformer->setParameters($this->parameters); // give params to transformer
 
         return response()
             ->json($this->jsonApiList('accounts', $paginator, $transformer))
-            ->header('Content-Type', self::CONTENT_TYPE)
+            ->header('Content-Type', self::CONTENT_TYPE);
-        ;
     }
 
     public function infiniteList(InfiniteListRequest $request): JsonResponse
@@ -95,7 +98,6 @@ class IndexController extends Controller
 
         return response()
             ->json($this->jsonApiList(self::RESOURCE_KEY, $paginator, $transformer))
-            ->header('Content-Type', self::CONTENT_TYPE)
+            ->header('Content-Type', self::CONTENT_TYPE);
-        ;
     }
 }

app/Api/V2/Request/Model/Account/IndexRequest.php

@@ -27,6 +27,7 @@ use Carbon\Carbon;
 use FireflyIII\Support\Http\Api\AccountFilter;
 use FireflyIII\Support\Request\ChecksLogin;
 use FireflyIII\Support\Request\ConvertsDataTypes;
+use FireflyIII\Support\Request\GetSortInstructions;
 use Illuminate\Foundation\Http\FormRequest;
 
 /**
@@ -39,6 +40,7 @@ class IndexRequest extends FormRequest
     use AccountFilter;
     use ChecksLogin;
     use ConvertsDataTypes;
+    use GetSortInstructions;
 
     /**
      * Get all data from the request.

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

@@ -29,6 +29,7 @@ use FireflyIII\Support\Http\Api\AccountFilter;
 use FireflyIII\Support\Http\Api\TransactionFilter;
 use FireflyIII\Support\Request\ChecksLogin;
 use FireflyIII\Support\Request\ConvertsDataTypes;
+use FireflyIII\Support\Request\GetSortInstructions;
 use Illuminate\Foundation\Http\FormRequest;
 
 /**
@@ -41,6 +42,7 @@ class InfiniteListRequest extends FormRequest
     use ChecksLogin;
     use ConvertsDataTypes;
     use TransactionFilter;
+    use GetSortInstructions;
 
     public function buildParams(): string
     {
@@ -97,30 +99,6 @@ class InfiniteListRequest extends FormRequest
         return 0 === $page || $page > 65536 ? 1 : $page;
     }
 
-    public function getSortInstructions(string $key): array
-    {
-        $allowed = config(sprintf('firefly.sorting.allowed.%s', $key));
-        $set     = $this->get('sorting', []);
-        $result  = [];
-        if (0 === count($set)) {
-            return [];
-        }
-        foreach ($set as $info) {
-            $column          = $info['column'] ?? 'NOPE';
-            $direction       = $info['direction'] ?? 'NOPE';
-            if ('asc' !== $direction && 'desc' !== $direction) {
-                // skip invalid direction
-                continue;
-            }
-            if (false === in_array($column, $allowed, true)) {
-                // skip invalid column
-                continue;
-            }
-            $result[$column] = $direction;
-        }
-
-        return $result;
-    }
 
     public function getTransactionTypes(): array
     {

app/Models/Account.php

@@ -181,8 +181,7 @@ class Account extends Model
         /** @var null|AccountMeta $metaValue */
         $metaValue = $this->accountMeta()
                           ->where('name', 'account_number')
-            ->first()
+                          ->first();
-        ;
 
         return null !== $metaValue ? $metaValue->data : '';
     }
@@ -274,6 +273,14 @@ class Account extends Model
         );
     }
 
+    //
+    protected function iban(): Attribute
+    {
+        return Attribute::make(
+            get: static fn($value) => null === $value ? null : trim(str_replace(' ', '', (string)$value)),
+    );
+    }
+
     protected function order(): Attribute
     {
         return Attribute::make(

app/Repositories/UserGroups/Account/AccountRepository.php

@@ -62,8 +62,7 @@ class AccountRepository implements AccountRepositoryInterface
                     $q1->where('account_meta.name', '=', 'account_number');
                     $q1->where('account_meta.data', '=', $json);
                 }
-            )
+            );
-        ;
 
         if (0 !== count($types)) {
             $dbQuery->leftJoin('account_types', 'accounts.account_type_id', '=', 'account_types.id');
@@ -239,6 +238,7 @@ class AccountRepository implements AccountRepositoryInterface
 
     public function getAccountsByType(array $types, ?array $sort = []): Collection
     {
+        $sortable = ['name', 'active']; // TODO yes this is a duplicate array.
         $res      = array_intersect([AccountType::ASSET, AccountType::MORTGAGE, AccountType::LOAN, AccountType::DEBT], $types);
         $query    = $this->userGroup->accounts();
         if (0 !== count($types)) {
@@ -246,9 +246,11 @@ class AccountRepository implements AccountRepositoryInterface
         }
 
         // add sort parameters. At this point they're filtered to allowed fields to sort by:
-        if (0 !== count($sort)) {
+        if (count($sort) > 0) {
-            foreach ($sort as $param) {
+            foreach ($sort as $column => $direction) {
-                $query->orderBy($param[0], $param[1]);
+                if (in_array($column, $sortable, true)) {
+                    $query->orderBy(sprintf('accounts.%s', $column), $direction);
+                }
             }
         }
 
@@ -271,8 +273,7 @@ class AccountRepository implements AccountRepositoryInterface
                                    ->orderBy('accounts.order', 'ASC')
                                    ->orderBy('accounts.account_type_id', 'ASC')
                                    ->orderBy('accounts.name', 'ASC')
-            ->with(['accountType'])
+                                   ->with(['accountType']);
-        ;
         if ('' !== $query) {
             // split query on spaces just in case:
             $parts = explode(' ', $query);

app/Support/Request/GetSortInstructions.php

@@ -0,0 +1,54 @@
+<?php
+/*
+ * GetSortInstructions.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\Support\Request;
+
+trait GetSortInstructions
+{
+
+    final public function getSortInstructions(string $key): array
+    {
+        $allowed = config(sprintf('firefly.sorting.allowed.%s', $key));
+        $set     = $this->get('sorting', []);
+        $result  = [];
+        if (0 === count($set)) {
+            return [];
+        }
+        foreach ($set as $info) {
+            $column          = $info['column'] ?? 'NOPE';
+            $direction       = $info['direction'] ?? 'NOPE';
+            if ('asc' !== $direction && 'desc' !== $direction) {
+                // skip invalid direction
+                continue;
+            }
+            if (false === in_array($column, $allowed, true)) {
+                // skip invalid column
+                continue;
+            }
+            $result[$column] = $direction;
+        }
+
+        return $result;
+    }
+
+}

app/Transformers/V2/AbstractTransformer.php

@@ -37,8 +37,11 @@ abstract class AbstractTransformer extends TransformerAbstract
 
     /**
      * This method is called exactly ONCE from FireflyIII\Api\V2\Controllers\Controller::jsonApiList
+     *
+     * @param Collection $objects
+     * @return Collection
      */
-    abstract public function collectMetaData(Collection $objects): void;
+    abstract public function collectMetaData(Collection $objects): Collection;
 
     final public function getParameters(): ParameterBag
     {

app/Transformers/V2/AccountTransformer.php

@@ -32,6 +32,7 @@ use FireflyIII\Models\AccountType;
 use FireflyIII\Models\TransactionCurrency;
 use FireflyIII\Repositories\UserGroups\Currency\CurrencyRepositoryInterface;
 use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Log;
 
 /**
  * Class AccountTransformer
@@ -48,7 +49,7 @@ class AccountTransformer extends AbstractTransformer
     /**
      * @throws FireflyException
      */
-    public function collectMetaData(Collection $objects): void
+    public function collectMetaData(Collection $objects): Collection
     {
         $this->currencies        = [];
         $this->accountMeta       = [];
@@ -63,10 +64,9 @@ class AccountTransformer extends AbstractTransformer
         // get currencies:
         $accountIds  = $objects->pluck('id')->toArray();
         $meta        = AccountMeta::whereIn('account_id', $accountIds)
-            ->where('name', 'currency_id')
+                                  ->whereIn('name', ['currency_id','account_role','account_number'])
-            ->get(['account_meta.id', 'account_meta.account_id', 'account_meta.name', 'account_meta.data'])
+                                  ->get(['account_meta.id', 'account_meta.account_id', 'account_meta.name', 'account_meta.data']);
-        ;
+        $currencyIds = $meta->where('name','currency_id')->pluck('data')->toArray();
-        $currencyIds             = $meta->pluck('data')->toArray();
 
         $currencies = $repository->getByIds($currencyIds);
         foreach ($currencies as $currency) {
@@ -81,13 +81,45 @@ class AccountTransformer extends AbstractTransformer
         // select accounts.id, account_types.type from account_types left join accounts on accounts.account_type_id = account_types.id;
         $accountTypes = AccountType::leftJoin('accounts', 'accounts.account_type_id', '=', 'account_types.id')
                                    ->whereIn('accounts.id', $accountIds)
-            ->get(['accounts.id', 'account_types.type'])
+                                   ->get(['accounts.id', 'account_types.type']);
-        ;
 
         /** @var AccountType $row */
         foreach ($accountTypes as $row) {
             $this->accountTypes[$row->id] = (string)config(sprintf('firefly.shortNamesByFullName.%s', $row->type));
         }
+
+        // TODO needs separate method.
+        $sort = $this->parameters->get('sort');
+        if (count($sort) > 0) {
+            foreach ($sort as $column => $direction) {
+                // account_number + iban
+                if ('iban' === $column) {
+                    $meta    = $this->accountMeta;
+                    $objects = $objects->sort(function (Account $left, Account $right) use ($meta, $direction) {
+                        $leftIban  = trim(sprintf('%s%s', $left->iban, ($meta[$left->id]['account_number'] ?? '')));
+                        $rightIban = trim(sprintf('%s%s', $right->iban, ($meta[$right->id]['account_number'] ?? '')));
+                        if ('asc' === $direction) {
+                            return strcasecmp($leftIban, $rightIban);
+                        }
+                        return strcasecmp($rightIban, $leftIban);
+                    });
+                }
+                if('balance' === $column) {
+                    $balances    = $this->convertedBalances;
+                    $objects = $objects->sort(function (Account $left, Account $right) use ($balances, $direction) {
+                        $leftBalance = (float)($balances[$left->id]['native_balance'] ?? 0);
+                        $rightBalance = (float)($balances[$right->id]['native_balance'] ?? 0);
+                        if ('asc' === $direction) {
+                            return $leftBalance <=> $rightBalance;
+                        }
+                        return $rightBalance <=> $leftBalance;
+                    });
+                }
+            }
+
+        }
+        //$objects = $objects->sortByDesc('name');
+        return $objects;
     }
 
     private function getDate(): Carbon
@@ -133,7 +165,8 @@ class AccountTransformer extends AbstractTransformer
             'active'                  => $account->active,
             'order'                   => $order,
             'name'                    => $account->name,
-            'iban'                           => '' === $account->iban ? null : $account->iban,
+            'iban'                    => '' === (string)$account->iban ? null : $account->iban,
+            'account_number' => $this->accountMeta[$id]['account_number'] ?? null,
             'type'                    => strtolower($accountType),
             'account_role'            => $accountRole,
             'currency_id'             => (string)$currency->id,

config/firefly.php

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

resources/assets/v2/boot/bootstrap.js

@@ -36,12 +36,16 @@ import {getVariable} from "../store/get-variable.js";
 import {getViewRange} from "../support/get-viewrange.js";
 import {loadTranslations} from "../support/load-translations.js";
 
+import adminlte from 'admin-lte';
+
+
 store.addPlugin(observePlugin);
 
 window.bootstrapped = false;
 window.store = store;
 
 
+
 // always grab the preference "marker" from Firefly III.
 getFreshVariable('lastActivity').then((serverValue) => {
     const localValue = store.get('lastActivity');

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

@@ -51,9 +51,17 @@ let index = function () {
                 enabled: true
             },
         },
-
+        sortingColumn: '',
+        sortDirection: '',
         accounts: [],
 
+        sort(column) {
+            this.sortingColumn = column;
+            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+            this.loadAccounts();
+            return false;
+        },
+
         formatMoney(amount, currencyCode) {
             return formatMoney(amount, currencyCode);
         },
@@ -69,14 +77,29 @@ let index = function () {
         },
 
         loadAccounts() {
+            this.notifications.wait.show = true;
+            this.notifications.wait.text = i18next.t('firefly.wait_loading_data')
+            this.accounts = [];
+            // sort instructions
+            // &sorting[0][column]=description&sorting[0][direction]=asc
+            const sorting = [{column: this.sortingColumn, direction: this.sortDirection}];
             // one page only.
-            (new Get()).index({type: type, page: this.page}).then(response => {
+            (new Get()).index({sorting: sorting, type: type, page: this.page}).then(response => {
                 for (let i = 0; i < response.data.data.length; i++) {
                     if (response.data.data.hasOwnProperty(i)) {
                         let current = response.data.data[i];
                         let account = {
                             id: parseInt(current.id),
+                            active: current.attributes.active,
                             name: current.attributes.name,
+                            type: current.attributes.type,
+                            // role: current.attributes.account_role,
+                            iban: null === current.attributes.iban ? '' : current.attributes.iban.match(/.{1,4}/g).join(' '),
+                            account_number: null === current.attributes.account_number ? '' : current.attributes.account_number,
+                            current_balance: current.attributes.current_balance,
+                            currency_code: current.attributes.currency_code,
+                            native_current_balance: current.attributes.native_current_balance,
+                            native_currency_code: current.attributes.native_currency_code,
                         };
                         this.accounts.push(account);
                     }

resources/assets/v2/sass/adminlte-filtered.scss

@@ -0,0 +1,105 @@
+/*!
+ * adminlte-filteres.scss
+ * 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/.
+ */
+
+
+// less adminlte code because the CSS is massive otherwise.
+// copied from:
+
+/*!
+ *   AdminLTE v4.0.0-alpha2
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+
+// Bootstrap Configuration
+// ---------------------------------------------------
+@import "bootstrap/scss/functions";
+
+// AdminLTE Configuration
+// ---------------------------------------------------
+@import "admin-lte/src/scss/bootstrap-variables"; // little modified are here
+
+// Bootstrap Configuration
+// ---------------------------------------------------
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Bootstrap Layout & components
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+//@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+//@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+//@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+
+// Bootstrap Helpers
+@import "bootstrap/scss/helpers";
+
+// Bootstrap Utilities
+@import "bootstrap/scss/utilities/api";
+
+
+// AdminLTE Configuration
+// ---------------------------------------------------
+@import "admin-lte/src/scss/variables";
+@import "admin-lte/src/scss/variables-dark";
+@import "admin-lte/src/scss/mixins";
+
+// AdiminLTE Parts
+// ---------------------------------------------------
+@import "admin-lte/src/scss/parts/core";
+@import "admin-lte/src/scss/parts/components";
+@import "admin-lte/src/scss/parts/extra-components";
+
+// @import "admin-lte/src/scss/parts/pages";
+@import "admin-lte/src/scss/pages/login_and_register";
+
+@import "admin-lte/src/scss/parts/miscellaneous";
+
+

resources/assets/v2/sass/app.scss

@@ -38,7 +38,7 @@ $success: #64B624 !default;
 // @import "bootstrap/scss/bootstrap";
 
 // admin LTE
-@import "admin-lte/src/scss/adminlte";
+@import "adminlte-filtered";
 
 
 // @import "~bootstrap-sass/assets/stylesheets/bootstrap";

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

@@ -57,11 +57,27 @@
                                 <thead>
                                 <tr>
                                     <td>&nbsp;</td>
-                                    <td>Active?</td>
+                                    <td>
-                                    <td>Name</td>
+                                        <a href="#" x-on:click.prevent="sort('active')">Active?</a>
+                                        <em x-show="sortingColumn === 'active' && sortDirection === 'asc'" class="fa-solid fa-arrow-down-wide-short"></em>
+                                        <em x-show="sortingColumn === 'active' && sortDirection === 'desc'" class="fa-solid fa-arrow-up-wide-short"></em>
+                                    </td>
+                                    <td>
+                                        <a href="#" x-on:click.prevent="sort('name')">Name</a>
+                                            <em x-show="sortingColumn === 'name' && sortDirection === 'asc'" class="fa-solid fa-arrow-down-z-a"></em>
+                                            <em x-show="sortingColumn === 'name' && sortDirection === 'desc'" class="fa-solid fa-arrow-up-z-a"></em>
+                                    </td>
                                     <td>Type</td>
-                                    <td>Account number</td>
+                                    <td>
-                                    <td>Current balance</td>
+                                        <a href="#" x-on:click.prevent="sort('iban')">Account number</a>
+                                        <em x-show="sortingColumn === 'iban' && sortDirection === 'asc'" class="fa-solid fa-arrow-down-z-a"></em>
+                                        <em x-show="sortingColumn === 'iban' && sortDirection === 'desc'" class="fa-solid fa-arrow-up-z-a"></em>
+                                    </td>
+                                    <td>
+                                        <a href="#" x-on:click.prevent="sort('balance')">Current balance</a>
+                                        <em x-show="sortingColumn === 'balance' && sortDirection === 'asc'" class="fa-solid fa-arrow-down-wide-short"></em>
+                                        <em x-show="sortingColumn === 'balance' && sortDirection === 'desc'" class="fa-solid fa-arrow-up-wide-short"></em>
+                                    </td>
                                     <td>Last activity</td>
                                     <td>Balance difference</td>
                                     <td>&nbsp;</td>
@@ -70,20 +86,46 @@
                                 <tbody>
                                 <template x-for="(account, index) in accounts" :key="index">
                                 <tr>
-                                    <td>&nbsp;</td>
+                                    <td>TODO</td>
                                     <td>
-                                        &nbsp;
+                                        <template x-if="account.active">
+                                            <em class="text-success fa-solid fa-check"></em>
+                                        &nbsp;</template>
+                                        <template x-if="!account.active">
+                                            <em class="text-danger fa-solid fa-xmark"></em>
+                                            &nbsp;</template>
                                     </td>
                                     <td>
                                         <a :href="'./accounts/show/' + account.id">
                                             <span x-text="account.name"></span>
                                         </a>
                                     </td>
-                                    <td></td>
+                                    <td>
-                                    <td></td>
+                                        <span x-text="account.type"></span>
-                                    <td></td>
+                                        <span x-text="account.role"></span>
-                                    <td></td>
+                                    </td>
-                                    <td></td>
+                                    <td>
+                                        <!-- IBAN and no account nr -->
+                                        <template x-if="'' === account.account_number && '' !== account.iban">
+                                            <span x-text="account.iban + 'A'"></span>
+                                        </template>
+                                        <!-- no IBAN and account nr -->
+                                        <template x-if="'' !== account.account_number && '' === account.iban">
+                                            <span x-text="account.account_number"></span>
+                                        </template>
+                                        <!-- both -->
+                                        <template x-if="'' !== account.account_number && '' !== account.iban">
+                                            <span>
+                                                <span x-text="account.iban"></span>
+                                                (<span x-text="account.account_number"></span>)
+                                            </span>
+                                        </template>
+                                    </td>
+                                    <td>
+                                        <span x-text="formatMoney(account.current_balance, account.currency_code)"></span>
+                                    </td>
+                                    <td>TODO</td>
+                                    <td>TODO</td>
                                     <td>&nbsp;</td>
                                 </tr>
                                 </template>

resources/views/v2/partials/layout/sidebar.blade.php

@@ -4,7 +4,7 @@
         <!--begin::Brand Link-->
         <a href="{{route('index') }}" class="brand-link">
             <!--begin::Brand Image-->
-            <img src="v2/i/logo.png" alt="Firefly III Logo"
+            <img src="images/logo.png" alt="Firefly III Logo"
                  class="brand-image opacity-75 shadow">
             <!--end::Brand Image-->
             <!--begin::Brand Text-->