Changed the project structure.

app/application/resources/captcha/backgrounds-body/license/license.txt

@@ -0,0 +1,25 @@
+1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg
+
+https://github.com/wenlng/go-captcha/blob/master/LICENSE
+
+MIT License
+
+Copyright (c) 2021 go-captcha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/application/resources/captcha/fonts/license/LICENSE-2.0.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

app/application/resources/captcha/fonts/license/OFL.txt

@@ -0,0 +1 @@
+Copyright (c) <dates>, <Copyright Holder> (<URL|email>),

app/application/resources/captcha/fonts/license/ubuntu-font-licence-1.0.txt

@@ -0,0 +1,96 @@
+-------------------------------
+UBUNTU FONT LICENCE Version 1.0
+-------------------------------
+
+PREAMBLE
+This licence allows the licensed fonts to be used, studied, modified and
+redistributed freely. The fonts, including any derivative works, can be
+bundled, embedded, and redistributed provided the terms of this licence
+are met. The fonts and derivatives, however, cannot be released under
+any other licence. The requirement for fonts to remain under this
+licence does not require any document created using the fonts or their
+derivatives to be published under this licence, as long as the primary
+purpose of the document is not to be a vehicle for the distribution of
+the fonts.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this licence and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Original Version" refers to the collection of Font Software components
+as received under this licence.
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to
+a new environment.
+
+"Copyright Holder(s)" refers to all individuals and companies who have a
+copyright ownership of the Font Software.
+
+"Substantially Changed" refers to Modified Versions which can be easily
+identified as dissimilar to the Font Software by users of the Font
+Software comparing the Original Version with the Modified Version.
+
+To "Propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification and with or without charging
+a redistribution fee), making available to the public, and in some
+countries other activities as well.
+
+PERMISSION & CONDITIONS
+This licence does not grant any rights under trademark law and all such
+rights are reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of the Font Software, to propagate the Font Software, subject to
+the below conditions:
+
+1) Each copy of the Font Software must contain the above copyright
+notice and this licence. These can be included either as stand-alone
+text files, human-readable headers or in the appropriate machine-
+readable metadata fields within text or binary files as long as those
+fields can be easily viewed by the user.
+
+2) The font name complies with the following:
+(a) The Original Version must retain its name, unmodified.
+(b) Modified Versions which are Substantially Changed must be renamed to
+avoid use of the name of the Original Version or similar names entirely.
+(c) Modified Versions which are not Substantially Changed must be
+renamed to both (i) retain the name of the Original Version and (ii) add
+additional naming elements to distinguish the Modified Version from the
+Original Version. The name of such Modified Versions must be the name of
+the Original Version, with "derivative X" where X represents the name of
+the new work, appended to that name.
+
+3) The name(s) of the Copyright Holder(s) and any contributor to the
+Font Software shall not be used to promote, endorse or advertise any
+Modified Version, except (i) as required by this licence, (ii) to
+acknowledge the contribution(s) of the Copyright Holder(s) or (iii) with
+their explicit written permission.
+
+4) The Font Software, modified or unmodified, in part or in whole, must
+be distributed entirely under this licence, and must not be distributed
+under any other licence. The requirement for fonts to remain under this
+licence does not affect any document created using the Font Software,
+except any version of the Font Software extracted from a document
+created using the Font Software may only be distributed under this
+licence.
+
+TERMINATION
+This licence becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF
+COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.

app/application/resources/views/private/_scripts/_click-confirm.blade.php

@@ -0,0 +1,16 @@
+<script>
+    (function() {
+        function clickConfirmAddEventListener(element, index, array) {
+            element.addEventListener('click', (e) => {
+                const result = confirm('{{ $alert }}');
+                if (! result) {
+                    e.preventDefault();
+                }
+            });
+        }
+        let clickConfirm = document.querySelectorAll('.click-confirm');
+        if (clickConfirm.length > 0) {
+            clickConfirm.forEach(clickConfirmAddEventListener);
+        }
+    })();
+</script>

app/application/resources/views/private/captcha_tokens/_from.blade.php

@@ -0,0 +1,5 @@
+@csrf
+<x-private.forms.input :title="__('validation.attributes.title')" name="title" type="text" :value="$captchaToken->title" required autofocus />
+@canany(['create', 'update'], $captchaToken)
+    <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
+@endcanany

app/application/resources/views/private/captcha_tokens/_top.blade.php

@@ -0,0 +1,8 @@
+@can('create', \App\Models\CaptchaToken::class)
+    <div class="mb-4">
+        <a href="{{ route('captcha-tokens.create') }}" class="btn btn-secondary d-inline-flex align-items-center me-2">
+            <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
+            {{ __('Create') }}
+        </a>
+    </div>
+@endcan

app/application/resources/views/private/captcha_tokens/create.blade.php

@@ -0,0 +1,16 @@
+@section('meta_title', __('sections.Captcha tokens'))
+@section('h1', __('sections.Captcha tokens'))
+<x-private.layout>
+    @include('private.captcha_tokens._top')
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('captcha-tokens.store') }}">
+                        @include('private.captcha_tokens._from')
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-private.layout>

app/application/resources/views/private/captcha_tokens/edit.blade.php

@@ -0,0 +1,29 @@
+@section('meta_title', __('sections.Captcha tokens'))
+@section('h1', __('sections.Captcha tokens'))
+<x-private.layout>
+    @include('private.captcha_tokens._top')
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('captcha-tokens.update', $captchaToken) }}">
+                        @method('PUT')
+                        <x-private.forms.input :title="__('validation.attributes.public_token')" name="public_token" type="text" :value="$captchaToken->public_token" disabled />
+                        <x-private.forms.input :title="__('validation.attributes.private_token')" name="private_token" type="text" :value="$captchaToken->private_token" disabled />
+                        @include('private.captcha_tokens._from')
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <p>{{ __('Add code to the site') }}:</p>
+                    <textarea style="width: 100%; height: 75px;"><div class="captcha-service-kor-elf" data-domain="{{ rtrim(asset('/'), '/') }}" data-static-path="{{ asset('captcha') }}" data-token="{{ $captchaToken->public_token }}" data-captcha-verified-name="captcha-verified"></div><script src="{{ asset('captcha/script.js') }}" async></script></textarea>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-private.layout>

app/application/resources/views/private/captcha_tokens/index.blade.php

@@ -0,0 +1,50 @@
+@section('meta_title', __('sections.Captcha tokens'))
+@section('h1', __('sections.Captcha tokens'))
+<x-private.layout>
+    @include('private.captcha_tokens._top')
+    <div class="card border-0 shadow mb-4">
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-centered table-nowrap mb-0 rounded">
+                    <thead class="thead-light">
+                    <tr>
+                        <th class="border-0">{{ __('validation.attributes.title') }}</th>
+                        <th class="border-0 rounded-end" style="width: 150px"></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    @foreach($captchaTokens as $captchaToken)
+                        <tr>
+                            <td>
+                                <a href="{{ route('captcha-tokens.edit', $captchaToken)  }}" class="fw-bold">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="align-text-top" viewBox="0 0 16 16">
+                                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+                                    </svg>
+                                    {{ $captchaToken->title }}
+                                </a>
+                            </td>
+                            <td>
+                                @can('delete', $captchaToken)
+                                    <form method="post" action="{{ route('captcha-tokens.destroy', $captchaToken) }}">
+                                        @csrf
+                                        @method('DELETE')
+                                        <button type="submit" class="btn btn-danger click-confirm">
+                                            {{ __('Delete') }}
+                                        </button>
+                                    </form>
+                                @endcan
+                            </td>
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
+                <div class="card-footer border-0">
+                    {{ $captchaTokens->links() }}
+                </div>
+            </div>
+        </div>
+    </div>
+    @push('scripts')
+        @include('private._scripts._click-confirm', ['alert' => __('Do you want to delete?')])
+    @endpush
+</x-private.layout>

app/application/resources/views/private/components/forms/checkbox.blade.php

@@ -0,0 +1,12 @@
+<div class="form-check">
+    @if(!is_null($notCheckedValue))
+        <input type="hidden" name="{{ $name }}" value="{{ $notCheckedValue }}">
+    @endif
+    <input class="form-check-input @error($requestName) is-invalid @enderror" name="{{ $name }}" type="checkbox" value="{{ $checkboxValue }}" @checked($checkboxValue === $userValue) id="form-checkbox-{{ $requestName }}">
+    <label class="form-check-label" for="form-checkbox-{{ $requestName }}">
+        {{ $title }}
+    </label>
+    @error($name)
+        <span class="invalid-feedback d-block">{{ $message }}</span>
+    @enderror
+</div>

app/application/resources/views/private/components/forms/input.blade.php

@@ -0,0 +1,7 @@
+<div class="mb-4">
+    <label for="form-input-{{ $requestName }}">{{ $title }}</label>
+    <input id="form-input-{{ $requestName }}" class="form-control @error($requestName) is-invalid @enderror" name="{{ $name }}" type="{{ $type }}" @if($type !== 'password') value="{{ $value }}" @endif {{ $attributes }}>
+    @error($name)
+        <span class="invalid-feedback">{{ $message }}</span>
+    @enderror
+</div>

app/application/resources/views/private/components/forms/multi_checkbox.blade.php

@@ -0,0 +1,16 @@
+<div class="mb-4">
+    <div class="h5 pb-3">{{ $title }}</div>
+    @error($requestName)
+        <span class="invalid-feedback d-block pb-3">{{ $message }}</span>
+    @enderror
+    <div class="row">
+        @foreach($list as $elementValue => $elementTitle)
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" name="{{ $name }}" value="{{ $elementValue }}" @checked(array_search($elementValue, $value) !== false) id="form-checkbox-{{ $requestName }}-{{ $loop->index }}">
+                <label class="form-check-label" for="form-checkbox-{{ $requestName }}-{{ $loop->index }}">
+                    {{ $elementTitle }}
+                </label>
+            </div>
+        @endforeach
+    </div>
+</div>

app/application/resources/views/private/components/forms/permissions_for_role.blade.php

@@ -0,0 +1,24 @@
+<div class="pt-3">
+    <div class="h5 pb-3">{{ $title }}</div>
+    @error($requestName)
+        <span class="invalid-feedback d-block pb-3">{{ $message }}</span>
+    @enderror
+    @foreach($permissions as $mainPermission)
+        <div class="row ps-3">
+            <div class="mb-3">
+                <span class="h6 fw-bold">{{ $mainPermission->getTitle() }}</span>
+            </div>
+            <ul>
+                @foreach($mainPermission->getPermissions() as $keyPermission => $permission)
+                    <li class="form-check">
+                        <input class="form-check-input" type="checkbox" value="{{ $mainPermission->formatValue($keyPermission) }}" name="{{ $name }}" @checked($role->is_admin || $value->search($mainPermission->formatValue($keyPermission)) !== false) @disabled($role->is_admin) id="form-permission-{{ $requestName }}-{{ $mainPermission->name }}-{{ $keyPermission }}">
+                        <label class="form-check-label" for="form-permission-{{ $requestName }}-{{ $mainPermission->name }}-{{ $keyPermission }}">
+                            {{ $permission }}
+                        </label>
+                    </li>
+                @endforeach
+            </ul>
+            <hr>
+        </div>
+    @endforeach
+</div>

app/application/resources/views/private/components/forms/select.blade.php

@@ -0,0 +1,12 @@
+<div class="mb-4">
+    <label for="form-select-{{ $requestName }}">{{ $title }}</label>
+    <select id="form-select-{{ $requestName }}" aria-label="{{ $title }}" class="form-select @error($requestName) is-invalid @enderror" name="{{ $name }}" {{ $attributes }}>
+        {{ $slot }}
+        @foreach($list as $elementKey => $elementValue)
+            <option value="{{ $elementKey }}" @selected((string) $elementKey === (string) $value)>{{ $elementValue }}</option>
+        @endforeach
+    </select>
+    @error($name)
+        <span class="invalid-feedback">{{ $message }}</span>
+    @enderror
+</div>

app/application/resources/views/private/dashboard/index.blade.php

@@ -0,0 +1,5 @@
+@section('meta_title', __('sections.Dashboard'))
+@section('h1', __('sections.Dashboard'))
+<x-private.layout>
+
+</x-private.layout>

app/application/resources/views/private/layout/_errors.blade.php

@@ -0,0 +1,9 @@
+<div class="alert alert-danger alert-dismissible fade show" role="alert">
+    <span class="fas fa-bullhorn me-1"></span>
+    <ul>
+        @foreach($errors as $error)
+            <li>{{ $error }}</li>
+        @endforeach
+    </ul>
+    <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>

app/application/resources/views/private/layout/_navigation.blade.php

@@ -0,0 +1,63 @@
+<ul class="nav flex-column pt-3 pt-md-0">
+    <li class="nav-item">
+        <a href="{{ route('home') }}" class="nav-link d-flex align-items-center">
+            <span class="sidebar-icon">
+                <img src="{{ Vite::asset('resources/volt/images/brand/dark.png') }}" height="20" width="20" alt="Captcha service Logo">
+            </span>
+            <span class="mt-1 ms-1 sidebar-text">Captcha service</span>
+        </a>
+    </li>
+    <li @class([
+        'nav-item',
+        'active' => request()->route()->named('home')
+    ])>
+        <a href="{{ route('home') }}" class="nav-link">
+            <span class="sidebar-icon">
+                <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
+            </span>
+            <span class="sidebar-text">{{ __('sections.Dashboard') }}</span>
+        </a>
+    </li>
+
+    @can('viewAny', \App\Models\CaptchaToken::class)
+        <li @class([
+            'nav-item',
+             'active' => request()->route()->named('captcha-tokens.*'),
+        ])>
+            <a href="{{ route('captcha-tokens.index') }}" class="nav-link">
+                <span class="sidebar-icon">
+                    <svg class="icon icon-xs me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z"/><path d="M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332c0 .409-.022.816-.066 1.221A.5.5 0 0 1 6 8.447c.04-.37.06-.742.06-1.115V7Zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8Zm-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329Z"/><path d="M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334Zm.3 1.67a.5.5 0 0 1 .449.546 10.72 10.72 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.72 9.72 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z"/><path d="M3.902 4.222a4.996 4.996 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 3.996 3.996 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556Zm6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705ZM3.68 5.842a.5.5 0 0 1 .422.568c-.029.192-.044.39-.044.59 0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.531 6.531 0 0 0 3.058 7c0-.25.019-.496.054-.736a.5.5 0 0 1 .568-.422Zm8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.51 10.51 0 0 0 .584-2.678.5.5 0 0 1 .54-.456Z"/><path d="M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865Zm-.89 1.257a.5.5 0 0 1 .04.706A5.478 5.478 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346Zm12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49Z"/></svg>
+                </span>
+                <span class="sidebar-text">{{ __('sections.Captcha tokens') }}</span>
+            </a>
+        </li>
+    @endcan
+
+    @can('viewAny', \App\Models\User::class)
+        <li @class([
+            'nav-item',
+             'active' => request()->route()->named('users.*'),
+        ])>
+            <a href="{{ route('users.index') }}" class="nav-link">
+                <span class="sidebar-icon">
+                    <svg class="icon icon-xs me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/></svg>
+                </span>
+                <span class="sidebar-text">{{ __('sections.Users') }}</span>
+            </a>
+        </li>
+    @endcan
+
+    @can('viewAny', \App\Models\Role::class)
+        <li @class([
+            'nav-item',
+             'active' => request()->route()->named('roles.*'),
+        ])>
+            <a href="{{ route('roles.index') }}" class="nav-link">
+                <span class="sidebar-icon">
+                    <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
+                </span>
+                <span class="sidebar-text">{{ __('sections.User group') }}</span>
+            </a>
+        </li>
+    @endcan
+</ul>

app/application/resources/views/private/layout/_success.blade.php

@@ -0,0 +1,5 @@
+<div class="alert alert-success alert-dismissible fade show" role="alert">
+    <span class="fas fa-bullhorn me-1"></span>
+    {{ $success }}
+    <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>

app/application/resources/views/private/layout/app.blade.php

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>@yield('meta_title', '')</title>
+    <meta name="keywords" content="@yield('meta_keywords', '')" />
+    <meta name="description" content="@yield('meta_description', '')" />
+
+    @vite('resources/volt/scss/app.scss')
+
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="theme-color" content="#ffffff">
+</head>
+<body>
+    <nav class="navbar navbar-dark navbar-theme-primary px-4 col-12 d-lg-none">
+        <a class="navbar-brand me-lg-5" href="{{ route('home') }}" aria-label="Captcha service">
+            <img class="navbar-brand-dark" src="{{ Vite::asset('resources/volt/images/brand/dark.png') }}" alt="Captcha service Logo" /> <img class="navbar-brand-light" src="{{ Vite::asset('resources/volt/images/brand/light.png') }}" alt="Captcha service Logo" />
+        </a>
+        <div class="d-flex align-items-center">
+            <button class="navbar-toggler d-lg-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+        </div>
+    </nav>
+
+    <nav id="sidebarMenu" class="sidebar d-lg-block bg-gray-800 text-white collapse" data-simplebar>
+        <div class="sidebar-inner px-lg-2 px-4 pt-3">
+            <div class="user-card d-flex d-md-none align-items-center justify-content-between justify-content-md-center pb-4">
+                <div class="d-flex align-items-center">
+                    <div class="avatar-lg me-4">
+                        <svg class="card-img-top rounded-circle border-white" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
+                    </div>
+                    <div class="d-block">
+                        <h2 class="h5 mb-3">{{ __('Hello') }}, {{ auth()->user()->name ?? '' }}</h2>
+                        <form method="post" action="{{ route('logout') }}">
+                            @csrf
+                            <button class="btn btn-secondary btn-sm d-inline-flex align-items-center" type="submit">
+                                <svg class="icon icon-xxs me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
+                                {{ __('Sign Out') }}
+                            </button>
+                        </form>
+                    </div>
+                </div>
+                <div class="collapse-close d-md-none">
+                    <a href="#sidebarMenu" data-bs-toggle="collapse"
+                       data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="true"
+                       aria-label="{{ __('Toggle navigation') }}">
+                        <svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    </a>
+                </div>
+            </div>
+            @include('private.layout._navigation')
+        </div>
+    </nav>
+
+    <main class="content min-vh-100 position-relative pb-7 pb-lg-5">
+        @demo <p style="border: 1px solid #ff1810; color: #ff1810; font-weight: bold; font-size: 18px; padding: 7px; text-align: center;">{{ __('Demo Mode') }}</p> @endif
+        <nav class="navbar navbar-top navbar-expand navbar-dashboard navbar-dark ps-0 pe-2 pb-2 pb-lg-3">
+            <div class="container-fluid px-0">
+                <div class="d-flex justify-content-between w-100" id="navbarSupportedContent">
+                    <div class="d-flex align-items-center">
+                        <h1 class="h3">@yield('h1', '')</h1>
+                    </div>
+                    <!-- Navbar links -->
+                    <ul class="navbar-nav align-items-center">
+                        <li class="nav-item dropdown ms-lg-3">
+                            <a class="nav-link dropdown-toggle pt-1 px-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                <div class="media d-flex align-items-center">
+                                    <svg class="avatar rounded-circle" fill="#000" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
+                                    <div class="media-body ms-2 text-dark align-items-center d-none d-lg-block">
+                                        <span class="mb-0 font-small fw-bold text-gray-900">{{ auth()->user()->name ?? '' }}</span>
+                                    </div>
+                                </div>
+                            </a>
+                            <div class="dropdown-menu dashboard-dropdown dropdown-menu-end mt-2 py-1">
+                                <a class="dropdown-item d-flex align-items-center" href="{{ route('profile.edit') }}">
+                                    <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
+                                    {{ __('My Profile') }}
+                                </a>
+                                <a class="dropdown-item d-flex align-items-center" href="{{ route('profile.settings') }}">
+                                    <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
+                                    {{ __('Settings') }}
+                                </a>
+                                <div role="separator" class="dropdown-divider my-1"></div>
+                                <form method="post" action="{{ route('logout') }}">
+                                    @csrf
+                                    <button class="dropdown-item d-flex align-items-center" type="submit">
+                                        <svg class="dropdown-icon text-danger me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
+                                        {{ __('Logout') }}
+                                    </button>
+                                </form>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        @includeWhen($errors->any(), 'private.layout._errors', ['errors' => $errors->all()])
+        @includeWhen(Session::has('success'), 'private.layout._success', ['success' => Session::get('success')])
+
+        {{ $slot  }}
+
+        <footer class="bg-white shadow p-3 position-absolute start-0 end-0 bottom-0">
+            <div class="row">
+                <div class="col-12 col-md-4 col-xl-6 mb-4 mb-md-0">
+                    <p class="mb-0 text-center text-lg-start">Copyright © 2023-<span class="current-year"></span> <a href="https://git.kor-elf.net/kor-elf/" target="_blank" class="text-gray-700">Leonid Nikitin (kor-elf)</a></p>
+                </div>
+                <div class="col-12 col-md-8 col-xl-6 text-center text-lg-start">
+                    <!-- List -->
+                    <ul class="list-inline list-group-flush list-group-borderless text-md-end mb-0">
+                        <li class="list-inline-item px-0 px-sm-2">
+                            <a class="text-gray-700 fw-normal" href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard" target="_blank">Volt - Bootstrap 5 Dashboard Template</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </footer>
+    </main>
+
+    @vite('resources/volt/js/app.js')
+    @stack('scripts')
+</body>
+</html>

app/application/resources/views/private/profile/profile.blade.php

@@ -0,0 +1,34 @@
+@section('meta_title', __('My Profile'))
+@section('h1', __('My Profile'))
+<x-private.layout>
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('profile.update') }}">
+                        @csrf
+                        @method('PUT')
+                        <x-private.forms.input :title="__('validation.attributes.email')" name="email" type="email" :value="$user->email" disabled required />
+                        <x-private.forms.input :title="__('validation.attributes.name')" name="name" type="text" :value="$user->name" required autofocus />
+                        <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('profile.update-password') }}">
+                        @csrf
+                        @method('PUT')
+                        <x-private.forms.input :title="__('validation.attributes.password')" name="password" type="password" required />
+                        <x-private.forms.input :title="__('validation.attributes.password_confirmation')" name="password_confirmation" type="password" required />
+                        <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-private.layout>

app/application/resources/views/private/profile/settings.blade.php

@@ -0,0 +1,23 @@
+@section('meta_title', __('Settings'))
+@section('h1', __('Settings'))
+<x-private.layout>
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('profile.update-settings') }}">
+                        @csrf
+                        @method('PUT')
+                        <x-private.forms.select :title="__('validation.attributes.lang')" name="lang" :list="$languages" :value="$user->lang?->value">
+                            <option value="">{{ __('Default') }}</option>
+                        </x-private.forms.select>
+                        <x-private.forms.select :title="__('validation.attributes.timezone')" name="timezone" :list="$timezone" :value="$user->timezone">
+                            <option value="">{{ __('Default') }}</option>
+                        </x-private.forms.select>
+                        <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-private.layout>

app/application/resources/views/private/roles/_from.blade.php

@@ -0,0 +1,7 @@
+@csrf
+<x-private.forms.input :title="__('validation.attributes.name')" name="name" type="text" :value="$role->name" required autofocus />
+<x-private.forms.permissions_for_role :title="__('validation.attributes.permissions')" name="permissions[]" :value="$role->permissions->pluck('permission')->toArray()" :role="$role" />
+<x-private.forms.input :title="__('validation.attributes.code')" name="code" type="text" :value="$role->code" :disabled="!empty($role->id)" required />
+@canany(['create', 'update'], $role)
+    <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
+@endcanany

app/application/resources/views/private/roles/_top.blade.php

@@ -0,0 +1,8 @@
+@can('create', \App\Models\Role::class)
+    <div class="mb-4">
+        <a href="{{ route('roles.create') }}" class="btn btn-secondary d-inline-flex align-items-center me-2">
+            <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
+            {{ __('Create') }}
+        </a>
+    </div>
+@endcan

app/application/resources/views/private/roles/create.blade.php

@@ -0,0 +1,16 @@
+@section('meta_title', __('sections.User group'))
+@section('h1', __('sections.User group'))
+<x-private.layout>
+    @include('private.roles._top')
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('roles.store') }}">
+                        @include('private.roles._from')
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-private.layout>

app/application/resources/views/private/roles/edit.blade.php

@@ -0,0 +1,17 @@
+@section('meta_title', __('sections.User group'))
+@section('h1', __('sections.User group'))
+<x-private.layout>
+    @include('private.roles._top')
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('roles.update', $role) }}">
+                        @method('PUT')
+                        @include('private.roles._from')
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-private.layout>

app/application/resources/views/private/roles/index.blade.php

@@ -0,0 +1,54 @@
+@section('meta_title', __('sections.User group'))
+@section('h1', __('sections.User group'))
+<x-private.layout>
+    @include('private.roles._top')
+    <div class="card border-0 shadow mb-4">
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-centered table-nowrap mb-0 rounded">
+                    <thead class="thead-light">
+                    <tr>
+                        <th class="border-0">{{ __('validation.attributes.name') }}</th>
+                        <th class="border-0">{{ __('validation.attributes.code') }}</th>
+                        <th class="border-0 rounded-end" style="width: 150px"></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    @foreach($roles as $role)
+                        <tr>
+                            <td>
+                                <a href="{{ route('roles.edit', $role)  }}" class="fw-bold">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="align-text-top" viewBox="0 0 16 16">
+                                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+                                    </svg>
+                                    {{ $role->name }}
+                                </a>
+                            </td>
+                            <td>{{ $role->code }}</td>
+                            <td>
+                                @if($role->is_remove)
+                                    @can('delete', $role)
+                                        <form method="post" action="{{ route('roles.destroy', $role) }}">
+                                            @csrf
+                                            @method('DELETE')
+                                            <button type="submit" class="btn btn-danger click-confirm">
+                                                {{ __('Delete') }}
+                                            </button>
+                                        </form>
+                                    @endcan
+                                @endif
+                            </td>
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
+                <div class="card-footer border-0">
+                    {{ $roles->links() }}
+                </div>
+            </div>
+        </div>
+    </div>
+    @push('scripts')
+        @include('private._scripts._click-confirm', ['alert' => __('Do you want to delete?')])
+    @endpush
+</x-private.layout>

app/application/resources/views/private/users/_from.blade.php

@@ -0,0 +1,13 @@
+@csrf
+<x-private.forms.checkbox :title="__('validation.attributes.is_active')" name="is_active" checkboxValue="1" notCheckedValue="0" :userValue="(string) $user->is_active" />
+<x-private.forms.input :title="__('validation.attributes.name')" name="name" type="text" :value="$user->name" required autofocus />
+<x-private.forms.input :title="__('validation.attributes.email')" name="email" type="email" :value="$user->email" required />
+@if (empty($user->id))
+    <x-private.forms.input :title="__('validation.attributes.password')" name="password" type="password" value="" required autocomplete="off" />
+@endif
+<hr>
+<x-private.forms.multi_checkbox :title="__('validation.attributes.roles')" name="roles[]" :list="$roles" :value="$userRoles" />
+<hr>
+@canany(['create', 'update'], $user)
+    <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
+@endcanany

app/application/resources/views/private/users/_top.blade.php

@@ -0,0 +1,8 @@
+@can('create', \App\Models\User::class)
+    <div class="mb-4">
+        <a href="{{ route('users.create') }}" class="btn btn-secondary d-inline-flex align-items-center me-2">
+            <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
+            {{ __('Create') }}
+        </a>
+    </div>
+@endcan

app/application/resources/views/private/users/create.blade.php

@@ -0,0 +1,16 @@
+@section('meta_title', __('sections.Users'))
+@section('h1', __('sections.Users'))
+<x-private.layout>
+    @include('private.users._top')
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('users.store') }}">
+                        @include('private.users._from')
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-private.layout>

app/application/resources/views/private/users/edit.blade.php

@@ -0,0 +1,34 @@
+@section('meta_title', __('sections.Users'))
+@section('h1', __('sections.Users'))
+<x-private.layout>
+    @include('private.users._top')
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('users.update', $user) }}">
+                        @method('PUT')
+                        @include('private.users._from')
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    @can('update', $user)
+        <div class="row">
+            <div class="col-12 mb-4">
+                <div class="card border-0 shadow components-section">
+                    <div class="card-body">
+                        <form method="post" action="{{ route('users.update-password', $user) }}">
+                            @method('PUT')
+                            @csrf
+                            <x-private.forms.input :title="__('validation.attributes.password')" name="password" type="password" value="" required autocomplete="off" />
+                            <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endcan
+</x-private.layout>

app/application/resources/views/private/users/index.blade.php

@@ -0,0 +1,60 @@
+@section('meta_title', __('sections.Users'))
+@section('h1', __('sections.Users'))
+<x-private.layout>
+    @include('private.users._top')
+    <div class="card border-0 shadow mb-4">
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-centered table-nowrap mb-0 rounded">
+                    <thead class="thead-light">
+                    <tr>
+                        <th class="border-0">{{ __('validation.attributes.name') }}</th>
+                        <th class="border-0">{{ __('validation.attributes.email') }}</th>
+                        <th class="border-0">{{ __('validation.attributes.is_active') }}</th>
+                        <th class="border-0 rounded-end" style="width: 150px"></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    @foreach($users as $user)
+                        <tr>
+                            <td>
+                                <a href="{{ route('users.edit', $user)  }}" class="fw-bold">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="align-text-top" viewBox="0 0 16 16">
+                                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+                                    </svg>
+                                    {{ $user->name }}
+                                </a>
+                            </td>
+                            <td>{{ $user->email }}</td>
+                            <td>
+                                @if($user->is_active)
+                                    {{ __('yes') }}
+                                @else
+                                    {{ __('no') }}
+                                @endif
+                            </td>
+                            <td>
+                                @can('delete', $user)
+                                    <form method="post" action="{{ route('users.destroy', $user) }}">
+                                        @csrf
+                                        @method('DELETE')
+                                        <button type="submit" class="btn btn-danger click-confirm">
+                                            {{ __('Delete') }}
+                                        </button>
+                                    </form>
+                                @endcan
+                            </td>
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
+                <div class="card-footer border-0">
+                    {{ $users->links() }}
+                </div>
+            </div>
+        </div>
+    </div>
+    @push('scripts')
+        @include('private._scripts._click-confirm', ['alert' => __('Do you want to delete?')])
+    @endpush
+</x-private.layout>

app/application/resources/views/public/layout/app.blade.php

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>@yield('meta_title', '')</title>
+    <meta name="keywords" content="@yield('meta_keywords', '')" />
+    <meta name="description" content="@yield('meta_description', '')" />
+
+    @vite('resources/volt/scss/app.scss')
+
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="theme-color" content="#ffffff">
+</head>
+<body>
+    <main>
+        <!-- Section -->
+        <section class="vh-lg-100 mt-5 mt-lg-0 bg-soft d-flex align-items-center">
+            <div class="container">
+                {{ $slot }}
+            </div>
+        </section>
+    </main>
+
+    @vite('resources/volt/js/app.js')
+</body>
+</html>

app/application/resources/views/public/login.blade.php

@@ -0,0 +1,61 @@
+@section('meta_title', __('Sign in to our platform'))
+<x-public.layout>
+    <div class="row justify-content-center form-bg-image" data-background-lg="{{ Vite::asset('resources/volt/images/illustrations/signin.svg') }}">
+        <div class="col-12 d-flex align-items-center justify-content-center">
+            <div class="bg-white shadow border-0 rounded border-light p-4 p-lg-5 w-100 fmxw-500">
+                @demo <p style="border: 1px solid #ff1810; color: #ff1810; font-weight: bold; font-size: 18px; padding: 7px; text-align: center;">{{ __('Demo Mode') }}</p> @endif
+                <div class="text-center text-md-center mb-4 mt-md-0">
+                    <h1 class="mb-0 h3">{{ __('Sign in to our platform') }}</h1>
+                </div>
+                @if ($errors->any())
+                    <div class="alert alert-danger">
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+                <form action="{{ route('authorization') }}" class="mt-4" method="post">
+                    @csrf
+                    <!-- Form -->
+                    <div class="form-group mb-4">
+                        <label for="email">{{ __('Your Email') }}</label>
+                        <div class="input-group">
+                            <span class="input-group-text" id="basic-addon1">
+                                <svg class="icon icon-xs text-gray-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
+                            </span>
+                            <input type="email" name="email" class="form-control" placeholder="example@company.com" @demo value="{{ config('app.demo_email', null) }}" @endif id="email" autofocus required>
+                        </div>
+                    </div>
+                    <!-- End of Form -->
+                    <div class="form-group">
+                        <!-- Form -->
+                        <div class="form-group mb-4">
+                            <label for="password">{{ __('Your Password') }}</label>
+                            <div class="input-group">
+                                <span class="input-group-text" id="basic-addon2">
+                                    <svg class="icon icon-xs text-gray-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
+                                </span>
+                                <input type="password" name="password" placeholder="Password" @demo value="{{ config('app.demo_password', null) }}" @endif class="form-control" id="password" required>
+                            </div>
+                        </div>
+                        <!-- End of Form -->
+                        <div class="d-flex justify-content-between align-items-top mb-4">
+                            <div class="form-check">
+                                <input name="remember" type="hidden" value="0">
+                                <input class="form-check-input" name="remember" type="checkbox" value="1" id="remember">
+                                <label class="form-check-label mb-0" for="remember">
+                                    {{ __('Remember me') }}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="d-grid">
+                        <button type="submit" class="btn btn-gray-800">{{ __('Sign in') }}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</x-public.layout>

app/application/resources/volt/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2021 Themesberg (Crafty Dwarf LLC)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

app/application/resources/volt/js/app.js

@@ -0,0 +1,5 @@
+import.meta.glob([
+    '../images/**',
+]);
+import './bootstrap';
+import './volt.js';

app/application/resources/volt/js/bootstrap.js

@@ -0,0 +1,32 @@
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+import axios from 'axios';
+window.axios = axios;
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
+//     wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+//     enabledTransports: ['ws', 'wss'],
+// });

app/application/resources/volt/js/volt.js

@@ -0,0 +1,364 @@
+/*
+
+=========================================================
+* Volt Pro - Premium Bootstrap 5 Dashboard
+=========================================================
+
+* Product Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
+* Copyright 2021 Themesberg (https://www.themesberg.com)
+
+* Designed and coded by https://themesberg.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it.
+
+*/
+
+"use strict";
+const d = document;
+
+import * as bootstrap from 'bootstrap';
+import Swal from 'sweetalert2';
+import SmoothScroll from 'smooth-scroll';
+import Chartist from 'chartist';
+import 'chartist-plugin-tooltips';
+
+d.addEventListener("DOMContentLoaded", function(event) {
+
+    const swalWithBootstrapButtons = Swal.mixin({
+        customClass: {
+            confirmButton: 'btn btn-primary me-3',
+            cancelButton: 'btn btn-gray'
+        },
+        buttonsStyling: false
+    });
+
+    var themeSettingsEl = document.getElementById('theme-settings');
+    var themeSettingsExpandEl = document.getElementById('theme-settings-expand');
+
+    if(themeSettingsEl) {
+
+        var themeSettingsCollapse = new bootstrap.Collapse(themeSettingsEl, {
+            show: true,
+            toggle: false
+        });
+
+        if (window.localStorage.getItem('settings_expanded') === 'true') {
+            themeSettingsCollapse.show();
+            themeSettingsExpandEl.classList.remove('show');
+        } else {
+            themeSettingsCollapse.hide();
+            themeSettingsExpandEl.classList.add('show');
+        }
+
+        themeSettingsEl.addEventListener('hidden.bs.collapse', function () {
+            themeSettingsExpandEl.classList.add('show');
+            window.localStorage.setItem('settings_expanded', false);
+        });
+
+        themeSettingsExpandEl.addEventListener('click', function () {
+            themeSettingsExpandEl.classList.remove('show');
+            window.localStorage.setItem('settings_expanded', true);
+            setTimeout(function() {
+                themeSettingsCollapse.show();
+            }, 300);
+        });
+    }
+
+    // options
+    const breakpoints = {
+        sm: 540,
+        md: 720,
+        lg: 960,
+        xl: 1140
+    };
+
+    var sidebar = document.getElementById('sidebarMenu')
+    if(sidebar && d.body.clientWidth < breakpoints.lg) {
+        sidebar.addEventListener('shown.bs.collapse', function () {
+            document.querySelector('body').style.position = 'fixed';
+        });
+        sidebar.addEventListener('hidden.bs.collapse', function () {
+            document.querySelector('body').style.position = 'relative';
+        });
+    }
+
+    var iconNotifications = d.querySelector('.notification-bell');
+    if (iconNotifications) {
+        iconNotifications.addEventListener('shown.bs.dropdown', function () {
+            iconNotifications.classList.remove('unread');
+        });
+    }
+
+    [].slice.call(d.querySelectorAll('[data-background]')).map(function(el) {
+        el.style.background = 'url(' + el.getAttribute('data-background') + ')';
+    });
+
+    [].slice.call(d.querySelectorAll('[data-background-lg]')).map(function(el) {
+        if(document.body.clientWidth > breakpoints.lg) {
+            el.style.background = 'url(' + el.getAttribute('data-background-lg') + ')';
+        }
+    });
+
+    [].slice.call(d.querySelectorAll('[data-background-color]')).map(function(el) {
+        el.style.background = 'url(' + el.getAttribute('data-background-color') + ')';
+    });
+
+    [].slice.call(d.querySelectorAll('[data-color]')).map(function(el) {
+        el.style.color = 'url(' + el.getAttribute('data-color') + ')';
+    });
+
+    //Tooltips
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl)
+    })
+
+
+    // Popovers
+    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+      return new bootstrap.Popover(popoverTriggerEl)
+    })
+
+
+    // Datepicker
+    var datepickers = [].slice.call(d.querySelectorAll('[data-datepicker]'))
+    var datepickersList = datepickers.map(function (el) {
+        return new Datepicker(el, {
+            buttonClass: 'btn'
+          });
+    })
+
+    if(d.querySelector('.input-slider-container')) {
+        [].slice.call(d.querySelectorAll('.input-slider-container')).map(function(el) {
+            var slider = el.querySelector(':scope .input-slider');
+            var sliderId = slider.getAttribute('id');
+            var minValue = slider.getAttribute('data-range-value-min');
+            var maxValue = slider.getAttribute('data-range-value-max');
+
+            var sliderValue = el.querySelector(':scope .range-slider-value');
+            var sliderValueId = sliderValue.getAttribute('id');
+            var startValue = sliderValue.getAttribute('data-range-value-low');
+
+            var c = d.getElementById(sliderId),
+                id = d.getElementById(sliderValueId);
+
+            noUiSlider.create(c, {
+                start: [parseInt(startValue)],
+                connect: [true, false],
+                //step: 1000,
+                range: {
+                    'min': [parseInt(minValue)],
+                    'max': [parseInt(maxValue)]
+                }
+            });
+        });
+    }
+
+    if (d.getElementById('input-slider-range')) {
+        var c = d.getElementById("input-slider-range"),
+            low = d.getElementById("input-slider-range-value-low"),
+            e = d.getElementById("input-slider-range-value-high"),
+            f = [d, e];
+
+        noUiSlider.create(c, {
+            start: [parseInt(low.getAttribute('data-range-value-low')), parseInt(e.getAttribute('data-range-value-high'))],
+            connect: !0,
+            tooltips: true,
+            range: {
+                min: parseInt(c.getAttribute('data-range-value-min')),
+                max: parseInt(c.getAttribute('data-range-value-max'))
+            }
+        }), c.noUiSlider.on("update", function (a, b) {
+            f[b].textContent = a[b]
+        });
+    }
+
+    //Chartist
+
+    if(d.querySelector('.ct-chart-sales-value')) {
+        //Chart 5
+          new Chartist.Line('.ct-chart-sales-value', {
+            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            series: [
+                [0, 10, 30, 40, 80, 60, 100]
+            ]
+          }, {
+            low: 0,
+            showArea: true,
+            fullWidth: true,
+            plugins: [
+              Chartist.plugins.tooltip()
+            ],
+            axisX: {
+                // On the x-axis start means top and end means bottom
+                position: 'end',
+                showGrid: true
+            },
+            axisY: {
+                // On the y-axis start means left and end means right
+                showGrid: false,
+                showLabel: false,
+                labelInterpolationFnc: function(value) {
+                    return '$' + (value / 1) + 'k';
+                }
+            }
+        });
+    }
+
+    if(d.querySelector('.ct-chart-ranking')) {
+        var chart = new Chartist.Bar('.ct-chart-ranking', {
+            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+            series: [
+              [1, 5, 2, 5, 4, 3],
+              [2, 3, 4, 8, 1, 2],
+            ]
+          }, {
+            low: 0,
+            showArea: true,
+            plugins: [
+              Chartist.plugins.tooltip()
+            ],
+            axisX: {
+                // On the x-axis start means top and end means bottom
+                position: 'end'
+            },
+            axisY: {
+                // On the y-axis start means left and end means right
+                showGrid: false,
+                showLabel: false,
+                offset: 0
+            }
+            });
+
+          chart.on('draw', function(data) {
+            if(data.type === 'line' || data.type === 'area') {
+              data.element.animate({
+                d: {
+                  begin: 2000 * data.index,
+                  dur: 2000,
+                  from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
+                  to: data.path.clone().stringify(),
+                  easing: Chartist.Svg.Easing.easeOutQuint
+                }
+              });
+            }
+        });
+    }
+
+    if(d.querySelector('.ct-chart-traffic-share')) {
+        var data = {
+            series: [70, 20, 10]
+          };
+
+          var sum = function(a, b) { return a + b };
+
+          new Chartist.Pie('.ct-chart-traffic-share', data, {
+            labelInterpolationFnc: function(value) {
+              return Math.round(value / data.series.reduce(sum) * 100) + '%';
+            },
+            low: 0,
+            high: 8,
+            donut: true,
+            donutWidth: 20,
+            donutSolid: true,
+            fullWidth: false,
+            showLabel: false,
+            plugins: [
+              Chartist.plugins.tooltip()
+            ],
+        });
+    }
+
+    if (d.getElementById('loadOnClick')) {
+        d.getElementById('loadOnClick').addEventListener('click', function () {
+            var button = this;
+            var loadContent = d.getElementById('extraContent');
+            var allLoaded = d.getElementById('allLoadedText');
+
+            button.classList.add('btn-loading');
+            button.setAttribute('disabled', 'true');
+
+            setTimeout(function () {
+                loadContent.style.display = 'block';
+                button.style.display = 'none';
+                allLoaded.style.display = 'block';
+            }, 1500);
+        });
+    }
+
+    var scroll = new SmoothScroll('a[href*="#"]', {
+        speed: 500,
+        speedAsDuration: true
+    });
+
+    if(d.querySelector('.current-year')){
+        d.querySelector('.current-year').textContent = new Date().getFullYear();
+    }
+
+    // Glide JS
+
+    if (d.querySelector('.glide')) {
+        new Glide('.glide', {
+            type: 'carousel',
+            startAt: 0,
+            perView: 3
+          }).mount();
+    }
+
+    if (d.querySelector('.glide-testimonials')) {
+        new Glide('.glide-testimonials', {
+            type: 'carousel',
+            startAt: 0,
+            perView: 1,
+            autoplay: 2000
+          }).mount();
+    }
+
+    if (d.querySelector('.glide-clients')) {
+        new Glide('.glide-clients', {
+            type: 'carousel',
+            startAt: 0,
+            perView: 5,
+            autoplay: 2000
+          }).mount();
+    }
+
+    if (d.querySelector('.glide-news-widget')) {
+        new Glide('.glide-news-widget', {
+            type: 'carousel',
+            startAt: 0,
+            perView: 1,
+            autoplay: 2000
+          }).mount();
+    }
+
+    if (d.querySelector('.glide-autoplay')) {
+        new Glide('.glide-autoplay', {
+            type: 'carousel',
+            startAt: 0,
+            perView: 3,
+            autoplay: 2000
+          }).mount();
+    }
+
+    // Pricing countup
+    var billingSwitchEl = d.getElementById('billingSwitch');
+    if(billingSwitchEl) {
+        const countUpStandard = new countUp.CountUp('priceStandard', 99, { startVal: 199 });
+        const countUpPremium = new countUp.CountUp('pricePremium', 199, { startVal: 299 });
+
+        billingSwitchEl.addEventListener('change', function() {
+            if(billingSwitch.checked) {
+                countUpStandard.start();
+                countUpPremium.start();
+            } else {
+                countUpStandard.reset();
+                countUpPremium.reset();
+            }
+        });
+    }
+
+});

app/application/resources/volt/scss/_variables.scss

@@ -0,0 +1 @@
+$primary: #0d6efd;

app/application/resources/volt/scss/app.scss

@@ -0,0 +1,89 @@
+/*
+
+=========================================================
+* Volt - Free Bootstrap 5 Dashboard
+=========================================================
+
+* Product Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
+* Copyright 2021 Themesberg (https://www.themesberg.com)
+
+* Designed and coded by https://themesberg.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it.
+
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+// update variables here
+@import "variables";
+
+@import "bootstrap/scss/functions";
+@import "volt/variables";
+
+// Third party
+@import 'vanillajs-datepicker/sass/datepicker.scss';
+@import "chartist/dist/scss/chartist.scss";
+
+// Bootstrap
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Modify utilities here
+@import "volt/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";
+
+// Helpers
+@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+// scss-docs-end import-stack
+
+// volt mixins & functions
+@import "volt/mixins";
+@import "volt/functions";
+
+// Layout
+@import "volt/layout";
+
+// Components
+@import "volt/components";
+
+// Forms
+@import "volt/forms";
+
+// write your custom styles here!

app/application/resources/volt/scss/volt/_components.scss

@@ -0,0 +1,30 @@
+@import "components/body";
+@import "components/accordions";
+@import "components/animations";
+@import "components/alerts";
+@import "components/avatars";
+@import "components/badge";
+@import "components/buttons";
+@import "components/breadcrumb";
+@import "components/card";
+@import "components/carousel";
+@import "components/close";
+@import "components/custom-forms";
+@import "components/charts";
+@import "components/dropdown";
+@import "components/icons";
+@import "components/images";
+@import "components/list-group";
+@import "components/modal";
+@import "components/nav";
+@import "components/pagination";
+@import "components/popover";
+@import "components/progress";
+@import "components/shapes";
+@import "components/datepicker";
+@import "components/steps";
+@import "components/tables";
+@import "components/type";
+@import "components/timelines";
+@import "components/tooltip";
+@import "components/scrollbar";

app/application/resources/volt/scss/volt/_forms.scss

@@ -0,0 +1,4 @@
+@import "forms/form-control";
+@import "forms/form-check";
+@import "forms/input-group";
+@import "forms/form-select";

app/application/resources/volt/scss/volt/_functions.scss

@@ -0,0 +1,23 @@
+// Retrieve color Sass maps
+
+@function section-color($key: "primary") {
+	@return map-get($section-colors, $key);
+}
+
+// Lines colors
+
+@function shapes-primary-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-primary-colors, $key);
+}
+
+@function shapes-default-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-default-colors, $key);
+}
+
+@function lines-light-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-light-colors, $key);
+}
+
+@function shapes-dark-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-dark-colors, $key);
+}

app/application/resources/volt/scss/volt/_layout.scss

@@ -0,0 +1,5 @@
+@import "layout/navbar";
+@import "layout/section";
+@import "layout/footer";
+@import "layout/sidebar";
+@import "layout/sidenav";

app/application/resources/volt/scss/volt/_mixins.scss

@@ -0,0 +1,7 @@
+@import "mixins/animations"; 
+@import "mixins/background-variant";
+@import "mixins/icon"; 
+@import "mixins/modals";
+@import "mixins/popover";
+@import "mixins/transform"; 
+@import "mixins/utilities";

app/application/resources/volt/scss/volt/_utilities.scss

@@ -0,0 +1,95 @@
+// check docs https://v5.getbootstrap.com/docs/5.0/utilities/api/
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "blur": (
+      property: backdrop-filter,
+      class: blur,
+      values: (
+        0: blur(0),
+        1: blur(1px),
+        2: blur(2px),
+        3: blur(3px),
+        4: blur(4px),
+        5: blur(5px),
+        6: blur(6px),
+        7: blur(7px),
+        8: blur(8px),
+        9: blur(91px),
+        10: blur(10px),
+        11: blur(11px),
+        12: blur(12px),
+        13: blur(13px),
+        14: blur(14px),
+      ),
+    ),
+    "opacity": (
+      property: opacity,
+      class: o,
+      values: (
+        0: 0,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    ),
+    "z-index": (
+      property: z-index,
+      class: z,
+      values: (
+        0: 0,
+        1: 1,
+        2: 2,
+        3: 3,
+        999: 999,
+      ),
+    ),
+    "viewport-height": (
+      property: height,
+      class: vh,
+      responsive: true,
+      values: (
+        100: 100vh,
+      ),
+    ),
+    "font-weight": (
+      property: font-weight,
+      class: fw,
+      values: (
+        light: $font-weight-light,
+        lighter: $font-weight-lighter,
+        normal: $font-weight-normal,
+        bold: $font-weight-bold,
+        bolder: $font-weight-bolder,
+        extrabold: $font-weight-extrabold,
+        black: $font-weight-black,
+      ),
+    ),
+    "max-width": (
+      property: max-width,
+      class: fmxw,
+      values: (
+        100: 100px,
+        200: 200px,
+        300: 300px,
+        400: 400px,
+        500: 500px,
+        999: 999px,
+      ),
+    ),
+    "min-height": (
+      property: min-height,
+      class: fmxh,
+      values: (
+        100: 100px,
+        200: 200px,
+        300: 300px,
+        400: 400px,
+        500: 500px,
+        999: 999px,
+      ),
+    ),
+  )
+);

app/application/resources/volt/scss/volt/_vendor.scss

@@ -0,0 +1,6 @@
+// Vendor
+@import "vendor/headroom";
+@import "vendor/nouislider";
+@import "vendor/prism";
+@import "vendor/chartist/chartist";
+@import "vendor/datepicker";

app/application/resources/volt/scss/volt/components/_accordions.scss

@@ -0,0 +1,52 @@
+/**
+ * = Accordions
+*/
+
+
+.accordion-button {
+    text-align: left;
+    &:not(.collapsed) {
+        &::after {
+          background-image: none;
+          @include transform(rotateZ(45deg));
+        }
+    }
+
+    // Accordion icon
+    &::after {
+        background-image: none;
+        content: '\f067';
+        font-family: $font-awesome-5;
+        font-size: $font-size-base;
+        font-weight: 900;
+    }
+
+    &:hover{
+        background-color: $gray-200;
+    }
+}
+  
+  
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+    .accordion-button {
+        background-color: transparent;
+        &:not(.collapsed) {
+            color: $tertiary;
+        }
+        &:focus {
+            border-color: $gray-300;
+            box-shadow: none;
+        }
+    }
+    .accordion-collapse {
+        border: 0;
+    }
+}
+
+
+
+

app/application/resources/volt/scss/volt/components/_alerts.scss

@@ -0,0 +1,10 @@
+.alert-heading{
+    font-weight: $font-weight-bold;
+}
+
+.alert-icon{
+    margin-bottom: .5rem;
+    span{
+        font-size: $alert-icon-font-size;
+    }
+}

app/application/resources/volt/scss/volt/components/_animations.scss

@@ -0,0 +1,234 @@
+
+/**
+ * = Animations
+ */
+
+ @for $size from 1 to 10 {
+    .animate-up-#{$size},
+    .animate-right-#{$size},
+    .animate-down-#{$size},
+    .animate-left-#{$size},
+    .scale-up-#{$size},
+    .scale-down-#{$size} {
+        transition: $transition-base;
+    }
+
+    .scale-up-#{$size} {
+        &:hover {
+            transform: scale($size * 0.5555555556);
+        }
+    }
+
+    .scale-up-hover-#{$size} {
+        &:hover {
+            & .scale {
+                transform: scale($size * 0.5555555556);
+            }
+        }
+    }
+
+    .scale-down-#{$size} {
+        &:hover {
+            transform: scale($size * 0.4);
+        }
+    }
+
+    .animate-up-#{$size} {
+        &:hover,
+        .animate-hover:hover & {
+            @include translate(0, -#{$size}px);
+        }
+    }
+    .animate-right-#{$size} {
+        &:hover,
+        .animate-hover:hover & {
+            @include translate(#{$size}px, 0);
+        }
+    }
+    .animate-down-#{$size} {
+        &:hover,
+        .animate-hover:hover & {
+            @include translate(0, #{$size}px);
+        }
+    }
+    .animate-left-#{$size} {
+        &:hover,
+        .animate-hover:hover & {
+            @include translate(-#{$size}px, 0);
+        }
+    }
+}
+
+// Keyframes
+@keyframes show-navbar-collapse {
+    0% {
+        opacity: 0;
+        transform: scale(.95);
+        transform-origin: 100% 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    } 
+}
+
+@keyframes hide-navbar-collapse {
+    from {
+        opacity: 1;
+        transform: scale(1);
+        transform-origin: 100% 0;
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(.95);
+    } 
+}
+
+@keyframes show-navbar-dropdown {
+    0% {
+        opacity: 0;
+        transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
+        transition: visibility 0.45s, opacity 0.45s, transform 0.45s;
+    }
+
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    } 
+}
+
+@keyframes hide-navbar-dropdown {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate(0, 10px);
+    } 
+}
+
+@keyframes show-dropdown {
+    0% {
+        opacity: 0;
+        transform-origin: perspective(200px) rotateX(-2deg);
+        transition: visibility 0.45s, opacity .5s;
+    }
+
+    100% {
+        opacity: 1;
+    } 
+}
+
+
+@keyframes hide-dropdown {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate(0, 10px);
+    } 
+}
+
+.bell-shake {
+    &.shaking {
+        animation: bellshake .5s cubic-bezier(.36,.07,.19,.97) both;
+        backface-visibility: hidden;
+        transform-origin: top right;
+    }
+}
+
+:root {
+    --animate-duration: 1s;
+    --animate-delay: 1s;
+    --animate-repeat: 1;
+  }
+
+.animate__animated {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-duration: var(--animate-duration);
+    animation-duration: var(--animate-duration);
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+
+.animate__jackInTheBox {
+    -webkit-animation-name: jackInTheBox;
+    animation-name: jackInTheBox;
+}
+
+@keyframes bellshake {
+    0% { transform: rotate(0); }
+    15% { transform: rotate(5deg); }
+    30% { transform: rotate(-5deg); }
+    45% { transform: rotate(4deg); }
+    60% { transform: rotate(-4deg); }
+    75% { transform: rotate(2deg); }
+    85% { transform: rotate(-2deg); }
+    92% { transform: rotate(1deg); }
+    100% { transform: rotate(0); }
+}
+
+@-webkit-keyframes jackInTheBox {
+    from {
+      opacity: 0;
+      -webkit-transform: scale(0.1) rotate(30deg);
+      transform: scale(0.1) rotate(30deg);
+      -webkit-transform-origin: center bottom;
+      transform-origin: center bottom;
+    }
+  
+    50% {
+      -webkit-transform: rotate(-10deg);
+      transform: rotate(-10deg);
+    }
+  
+    70% {
+      -webkit-transform: rotate(3deg);
+      transform: rotate(3deg);
+    }
+  
+    to {
+      opacity: 1;
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+  @keyframes jackInTheBox {
+    from {
+      opacity: 0;
+      -webkit-transform: scale(0.1) rotate(30deg);
+      transform: scale(0.1) rotate(30deg);
+      -webkit-transform-origin: center bottom;
+      transform-origin: center bottom;
+    }
+  
+    50% {
+      -webkit-transform: rotate(-10deg);
+      transform: rotate(-10deg);
+    }
+  
+    70% {
+      -webkit-transform: rotate(3deg);
+      transform: rotate(3deg);
+    }
+  
+    to {
+      opacity: 1;
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+  .animate__jackInTheBox {
+    -webkit-animation-name: jackInTheBox;
+    animation-name: jackInTheBox;
+  }
+
+[class*=shadow] {
+    transition: all .2s ease;
+}

app/application/resources/volt/scss/volt/components/_avatars.scss

@@ -0,0 +1,102 @@
+/**
+ * = Avatars
+ */
+
+ .avatar + .avatar-content {
+    display: inline-block;
+    margin-left: 0.75rem;
+}
+
+.avatar-sm {
+    width: $avatar-sm-y;
+    height: $avatar-sm-x;
+
+    img {
+        width: $avatar-sm-y;
+        height: $avatar-sm-x;
+    }
+}
+
+.avatar {
+    width: $avatar-y;
+    height: $avatar-x;
+
+    img {
+        width: $avatar-y;
+        height: $avatar-x;
+    }
+}
+
+.avatar-md {
+    width: $avatar-md-y;
+    height: $avatar-md-x;
+
+    img {
+        width: $avatar-md-y;
+        height: $avatar-md-x;
+    }
+}
+
+.avatar-lg {
+    width: $avatar-lg-y;
+    height: $avatar-lg-x;
+
+    img {
+        width: $avatar-lg-y;
+        height: $avatar-lg-x;
+    }
+}
+
+.avatar-xl {
+    width: $avatar-xl-y;
+    height: $avatar-xl-x;
+
+    @include media-breakpoint-down(lg) {
+        width: $avatar-lg-y;
+        height: $avatar-lg-x;
+    }
+
+}
+
+
+.avatar-offline,
+.avatar-online {
+    &::before {
+        position: absolute;
+        border: 2px solid $white;
+        background-color: $success;
+        display: block;
+        top: 2px;
+        left: 39px;
+        content: "";
+        border-radius: 50%;
+        height: 10px;
+        width: 10px;
+    }
+}
+
+.avatar-offline {
+    &::before {
+        background-color: $danger;
+    }
+}
+
+// Overlapped avatars
+.avatar-group {
+    .avatar {
+        position: relative;
+        z-index: 0;
+
+        img {
+            border: 2px solid $white;
+        }
+
+        &:hover {
+            z-index: 3;
+        }
+    }
+
+    .avatar + .avatar {
+        margin-left: -1rem;
+    }
+}

app/application/resources/volt/scss/volt/components/_badge.scss

@@ -0,0 +1,98 @@
+/**
+ * = Badges
+ */
+
+.badge {
+    font-size:$badge-font-size;
+    font-weight: $badge-font-weight;
+
+    a {
+        color: $white;
+    }
+
+    &.super-badge{
+        vertical-align: super;
+    }
+}
+
+// Variations
+.badge-pill {
+    padding-right: $badge-pill-padding-x;
+    padding-left: $badge-pill-padding-x;
+}
+
+// Multiple inline badges
+.badge-inline {
+    margin-right: .625rem;
+
+    & + span {
+        top: 2px;
+        position: relative;
+
+        & > a {
+            text-decoration: underline;
+        }
+    }
+}
+
+// Sizes
+.badge-sm {
+    padding: .2rem .6rem;
+}
+
+.badge-lg {
+    font-size: $font-size-lg;
+    padding: .35rem .85rem;
+}
+
+//button badges
+
+.btn{
+    .badge-corner{
+        position: absolute;
+        top: -50%;
+        right: .5rem;
+        transform: translate(50%,50%);
+        margin: 0;
+        border: 3px solid;
+        padding-left: .5rem;
+        padding-right: .5rem;
+    }
+}
+//Tags 
+.wi-tags{
+    a {
+        display: inline-block;
+        padding: 0.125rem 0.875rem;
+        margin: 0.25rem;
+        line-height: 2;
+        font-size: $font-size-sm;
+        box-shadow: $box-shadow-sm;
+        background-color: $white;
+    }
+}
+
+.pixel-pro-badge{
+    position: relative;
+    font-size: $font-size-sm;
+    text-transform: uppercase;
+    font-weight: $font-weight-bold;
+    right: -11px;
+    padding: 4px 12px;
+    top: -30px;
+    background: $white;
+    @include border-radius($border-radius-sm);
+    @include box-shadow($box-shadow-sm);
+    @include media-breakpoint-down(sm){
+        font-size: $font-size-base;
+        right: -13px;
+        padding: 5px 10px;
+        top: -23px;
+    }
+}
+
+.subscription-badge {
+    top: -19px;
+    right: -12px;
+    font-size: .75rem;
+}

app/application/resources/volt/scss/volt/components/_body.scss

@@ -0,0 +1,31 @@
+iframe {
+    border: 0;
+}
+
+figcaption,
+figure,
+main {
+    display: block;
+    margin: 0;
+}
+
+main {
+	overflow: hidden;
+}
+
+img {
+    max-width: 100%;
+}
+
+strong{
+    font-weight: $font-weight-bold;
+}
+
+button:focus {
+    outline: 0;
+}
+
+label {
+    font-weight: $font-weight-bold;
+    margin-bottom:.5rem;
+}

app/application/resources/volt/scss/volt/components/_breadcrumb.scss

@@ -0,0 +1,56 @@
+/**
+ * = Breadcrumbs
+ */
+
+.breadcrumb-item {
+  font-size: $font-size-xs;
+  &, a {
+    color: $breadcrumb-item-color;
+    font-weight: $breadcrumb-font-weight;
+    font-size: $font-size-xs;
+    @include media-breakpoint-up(sm){
+      font-size: $font-size-sm;
+    }
+  }
+
+  &.active {
+    font-weight: $breadcrumb-active-font-weight;
+  }
+
+}
+
+.breadcrumb-transparent {
+  background: transparent;
+  padding: 0;
+}
+
+@each $color, $value in $theme-colors {
+  .breadcrumb-#{$color}  {
+      background: $value;
+      .breadcrumb-item{
+          &.active {
+              color: $white;
+          }
+      }
+      &.breadcrumb-transparent {
+        background: transparent;
+        .breadcrumb-item {
+          &.active {
+            color: $value;
+          }
+        }
+      }
+  }
+}
+
+.breadcrumb-text-light {
+  .breadcrumb-item {
+    &, a {
+      color: $breadcrumb-item-light-color;
+    }
+
+    &:before {
+      color: $breadcrumb-divider-light-color;
+    }
+  }
+}

app/application/resources/volt/scss/volt/components/_buttons.scss

@@ -0,0 +1,86 @@
+/*
+* = Buttons
+*/
+
+.btn {
+    &.btn-circle {
+        border-radius: $circle-radius;
+    }
+	&.btn-md{
+        padding: 0.65rem 1.25rem;
+    }
+    &.btn-xs{
+        padding: .2rem 0.35rem;
+        font-size: 0.55rem;
+        box-shadow: none;
+    }
+    &.large-form-btn{
+        padding: 1.2rem 1rem;
+    }
+    &.dashed-outline {
+        border-style: dashed;
+    }
+}
+
+
+.btn-icon-only {
+    width: 2.575rem;
+    height: 2.575rem;
+    padding: 0;
+    @include display-flex();
+    @include justify-content(center);
+    @include align-items(center);
+
+    &.btn-xs {
+        width: 1.7rem;
+        height: 1.7rem;
+    }
+    &.btn-sm {
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
+.btn-upgrade-pro {
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+    width: 190px;
+
+    @include media-breakpoint-up(md) {
+        left: 35px;
+    }
+}
+
+// Fix for darken background color
+@each $color, $value in $theme-colors {
+    .btn-#{$color} {
+        &:hover{
+           background-color:  darken( $value, 5% );
+           border-color: darken( $value, 5% );
+        }
+    }   
+}
+
+// Brand (social) buttons 
+@each $color, $value in $brand-colors {
+    .btn-#{$color} {
+        @include button-variant($value, $value);
+
+		&.btn-link {
+			color: $value;
+			background: transparent;
+			box-shadow: none;
+            border:0;
+            border-style: none;
+			&:hover,
+			&:focus,
+			&.active {
+                background-color: transparent !important;
+                box-shadow: none;
+                border: 0;
+				color: $value;
+			}
+		}
+    }
+}

app/application/resources/volt/scss/volt/components/_card.scss

@@ -0,0 +1,149 @@
+/**
+ * = Cards
+ */
+
+.card {
+    position: relative;
+    .card-header{
+        background: transparent;
+    }
+
+    &.hover-state{
+        &:hover {
+            background-color: $soft;
+        }
+    }
+
+    .profile-cover{
+        @include background-image(no-repeat, cover); 
+        height: 200px;
+    }
+
+}
+
+.message-wrapper,
+.task-wrapper{
+    .card{
+        border:0;
+    }
+}
+
+.customer-testimonial {
+    .content-wrapper{
+        &:before {
+            content: "";
+            position: absolute;
+            top: 25px;
+            left: -1px;
+            margin-left: .75rem;
+            border: 8px solid $black;
+            border-color: transparent #e0e6ec #e0e6ec transparent;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            -webkit-transform-origin: 0 0;
+            transform-origin: 0 0;
+            @include transform(rotate(135deg));
+            @include box-shadow($box-shadow);
+        }
+    }
+}
+
+.card-footer{
+    background-color:transparent;
+}
+
+.card-stats{
+    padding-left:1.9rem;
+}
+
+
+// Card with blockquotes
+
+.card {
+    .card-blockquote {
+        position: relative;
+        padding: 2rem;
+
+        .svg-bg {
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 95px;
+            top: -94px;
+            left: 0;
+        }
+    }
+}
+
+// Animated cards
+
+
+.page-preview {
+
+    display: block;
+    position: relative;
+
+    .show-on-hover {
+        position: absolute;
+        bottom: -0;
+        background: rgba($dark, .85);
+        padding: 10px 0;
+        width: 100%;
+        left: 0;
+        opacity: 0;
+        @include transition(.2s);
+    }
+
+    &:hover {
+        z-index: 1;
+        
+        .show-on-hover {
+            opacity: 1;
+        }
+    }
+}
+
+.theme-settings {
+    z-index: 99;
+    position: fixed;
+    right: 15px;
+    bottom: 0;
+    
+    &, .card-body {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+.theme-settings-close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: .65rem;
+}
+
+.btn-close {
+
+    &.theme-settings-close{
+        background: transparent escape-svg($btn-close-bg-white) center / $btn-close-width auto no-repeat; // include transparent for button elements
+        border: 0; // for button elements
+        @include border-radius();
+        opacity: $btn-close-opacity;
+    }
+}
+
+.theme-settings-expand {
+    right: 15px;
+    bottom: 0;
+    height: 0;
+    @include transition(.3s height);
+
+    &.show {
+        height: 40px;
+    }
+
+    &:hover {
+        background: $gray-600;
+        cursor: pointer;
+    }
+}

app/application/resources/volt/scss/volt/components/_carousel.scss

@@ -0,0 +1,52 @@
+/**
+ * = Bootstrap carousels
+ */
+
+.carousel-caption {
+    &, h5 {
+        color: $white;
+    }
+}
+
+//Indicators
+
+.carousel-indicators {
+    li {
+        height: 10px;
+        width:10px;
+        border-radius:$circle-radius;
+        background:transparent;
+        border:2px solid $white;
+    }
+    .active {
+        opacity: 1;
+        background: $white;
+    }
+}
+
+//Carousel Controls 
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  width: auto;
+  height: auto;
+  font-weight: 900;
+}
+
+.carousel-control-prev-icon {
+    background-image: none;
+    &::before{
+        content: '\f060';
+        font-family: $font-awesome-5;
+        font-size: $font-size-xxl;
+    }
+}
+
+.carousel-control-next-icon {
+    background-image: none;
+    &:before{
+        font-family: $font-awesome-5;
+        content: "\f061";
+        font-size: $font-size-xxl;
+    }
+}

app/application/resources/volt/scss/volt/components/_charts.scss

@@ -0,0 +1,52 @@
+.ct-bar {
+    stroke-linecap: round;
+    stroke-width: 10px;
+}
+.ct-label {
+    fill: $body-color;
+    color: $body-color;
+    font-size: 0.75rem;
+    margin-top: 6px;
+    font-weight: $font-weight-bold;
+}
+
+.ct-slice-pie {
+    stroke: $white;
+    stroke-width: 3px;
+}
+
+.ct-chart-donut .ct-series {
+    stroke: $white;
+    stroke-width: 3px;
+}
+
+.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
+    font-size: 0.75rem;
+    font-weight: $font-weight-bold;
+}
+
+.small-chart{
+    margin-left:-1rem;
+}
+
+//Label color Fix for pie chart
+
+.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
+    color: #ffffff;
+    fill: #ffffff;
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+}
+
+.ct-series-g{
+    .ct-grid {
+        stroke: #F8BD7A;
+        stroke-width: 2px;
+        stroke-dasharray: 2px;
+    }
+    .ct-label.ct-horizontal.ct-end {
+        margin-left:-9px;
+        margin-top:10px;
+        color: $primary;      
+    }
+}

app/application/resources/volt/scss/volt/components/_close.scss

@@ -0,0 +1,33 @@
+/**
+ * = Close
+ */
+
+.close { 
+    @if $enable-transitions {
+        transition: $transition-base;
+    } 
+    &>span:not(.sr-only) {
+        display: block;
+        height: 1.25rem;
+        width: 1.25rem; 
+        background-color: $close-bg;
+        color: $close-color;
+        line-height: 17px;
+        border-radius: 50%;
+        font-size: 1.25rem;
+        @if $enable-transitions {
+            transition: $transition-base;
+        } 
+    } 
+
+    &:hover,
+    &:focus {
+        background-color: $close-hover-bg;
+        color: $close-hover-color;
+        outline: none;
+        
+        span:not(.sr-only) {
+            background-color: $close-hover-bg;
+        }
+    }
+}

app/application/resources/volt/scss/volt/components/_custom-forms.scss

@@ -0,0 +1,103 @@
+/**
+ * = Custom forms
+ */
+
+ .custom-control-label {
+    // Background-color and (when enabled) gradient
+    &:before {
+        box-shadow: $custom-control-box-shadow;
+        @if $enable-transitions {
+            transition: $input-transition;
+        } 
+    }
+
+    span {
+        position: relative;
+        top: 2px;
+    }
+} 
+
+.custom-control-label {
+    margin-bottom: 0;
+}
+
+.custom-control-input {
+    &:active~.custom-control-label::before {
+        border-color: $custom-control-indicator-active-border-color;
+    }
+}
+
+// Custom File Input
+
+.custom-file-label {
+    background-color: #f3f3f5;
+  
+    &::after {
+
+      background-color: #f3f3f5;
+    }
+}
+
+
+//Select
+.custom-select{
+    font-size: $input-btn-font-size;
+    box-shadow:none;
+
+    &.custom-select-shadow {
+        box-shadow: $input-box-shadow;
+        transition: box-shadow .15s ease;
+    
+        &:focus {
+            box-shadow: $shadow-input-focus;
+        }
+    }
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+// Inbox star
+.rating-star {
+    &.star-lg{
+        label{
+            margin-bottom: .5rem;
+            &::before{
+                font-size: $font-size-xl;
+            }
+        }
+    }
+	label {
+		position: relative;
+		margin-bottom: 0;
+		cursor: pointer;
+        color: $light;
+        &:before {
+			content: "\f005";
+			font-family: "Font Awesome 5 Free";
+			font-weight: 900;
+			transition: all .2s ease;
+			font-size: 1.0625rem;
+		}
+	}
+	input {
+		position: absolute;
+		z-index: -1;
+		opacity: 0;
+    }
+
+    >input:checked~label {
+        color: $warning;
+    }
+
+	>label {
+		&:hover {
+			color: $warning;
+		}
+		&:hover~label {
+			color: $warning;
+		}
+	}
+}
+

app/application/resources/volt/scss/volt/components/_datepicker.scss

@@ -0,0 +1,13 @@
+/**
+ * = Datepickers
+ */
+
+ .datepicker {
+
+    .datepicker-cell.selected,
+    .datepicker-cell.selected:hover {
+      background: $primary;
+    }
+  
+  }
+  

app/application/resources/volt/scss/volt/components/_dropdown.scss

@@ -0,0 +1,68 @@
+.dropdown-menu {
+    .dropdown-header,
+    .dropdown-item {
+        padding: .5rem 1rem;
+        font-size: $dropdown-font-size;
+        .dropdown-icon{
+            height: 1.25rem;
+            width:  1.25rem;
+        }
+    }
+
+    .dropdown-header {
+        color: $dropdown-header-color;
+        font-weight: $dropdown-header-font-weight;
+    }
+
+    .dropdown-item {
+        transition: $transition-base;
+        font-weight: $dropdown-item-font-weight;
+
+    }
+
+    .show & {
+        animation: show-dropdown .2s ease forwards;
+    }
+
+    &.dropdown-menu-xs {
+        min-width: 120px;
+        max-width: 120px;
+        @include box-shadow($box-shadow-sm);
+    }
+
+}
+
+// Dropown sizes
+.dropdown-menu-sm {
+    min-width: 100px;
+    border: $border-radius-lg;
+}
+
+.dropdown-menu-md {
+    min-width: 180px;
+    border: $border-radius-lg;
+}
+
+.dropdown-menu-lg {
+    min-width: 350px;
+    border-radius: $border-radius-lg;
+    @include media-breakpoint-down(sm) {
+        min-width: 300px;
+    }
+}
+
+
+
+// this helps when not only the button should toggle a dropdown
+[data-toggle]:hover {
+    cursor: pointer;
+}
+
+// remove the caret from Bootstrap by default
+.dropdown-toggle {
+    &:after, .dropend &:after, .dropstart &:before, .dropup &:after {
+        display: none;
+    }
+}
+
+

app/application/resources/volt/scss/volt/components/_icons.scss

@@ -0,0 +1,202 @@
+/**
+ * = Icon boxes
+ */
+
+ .icon {
+	height: $icon-size;
+
+	&.icon-xxs {
+		height: $icon-size-xxs;
+	}
+
+	&.icon-xs {
+		height: $icon-size-xs;
+	}
+	&.icon-sm {
+		height: $icon-size-sm;
+	}
+	&.icon-lg {
+		height: $icon-size-lg;
+	}
+	&.icon-xl {
+		height: $icon-size-xl;
+	}
+	&.icon-xxl {
+		height: $icon-size-xxl;
+	}
+
+	&.active-dot {
+		svg {
+			height: 0.7rem;
+		}
+	}
+}
+
+// Icons included in shapes
+.icon-shape {
+	width: $icon-shape;
+	height: $icon-shape;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	svg {
+		height: $icon-size;
+	}
+
+	&.icon-xxs {
+		width: $icon-shape-xxs;
+		height: $icon-shape-xxs;
+		svg {
+			height: $icon-size-xxs;
+		}
+	}
+
+	&.icon-xs {
+		width: $icon-shape-xs;
+		height: $icon-shape-xs;
+		svg {
+			height: $icon-size-xs;
+		}
+	}
+
+	&.icon-sm {
+		width: $icon-shape-sm;
+		height: $icon-shape-sm;
+		svg {
+			height: $icon-size-sm;
+		}
+	}
+
+	&.icon-lg {
+		width: $icon-shape-lg;
+		height: $icon-shape-lg;
+		svg {
+			height: $icon-size-lg;
+		}
+	}
+
+	&.icon-xl {
+		width: $icon-shape-xl;
+		height: $icon-shape-xl;
+		svg {
+			height: $icon-size-xl;
+		}
+	}
+
+	&.icon-xxl {
+		width: $icon-shape-xxl;
+		height: $icon-shape-xxl;
+		svg {
+			height: $icon-size-xxl;
+		}
+	}
+}
+
+// Inbox star Icons
+.rating-star {
+	&:hover {
+		cursor: pointer;
+		color: $warning;
+	}
+}
+
+.toggle-icon {
+	height: 1.875rem;
+}
+
+//Icons inside table fixed width
+.w--20 {
+	width: 20px;
+}
+
+//Calendar Icon
+
+.calendar {
+	width: 3.125rem;
+	line-height: 1;
+	flex-direction: column;
+	text-align: center;
+	border-radius: $border-radius;
+	.calendar-month {
+		background-color: $danger;
+		color: $white;
+		border-radius: $border-radius $border-radius 0 0;
+		padding: 0.275rem;
+		font-weight: $font-weight-bold;
+	}
+	.calendar-day {
+		font-size: $font-size-xl;
+		padding: 0.25rem;
+		background-color: $gray-100;
+		border-top: 0;
+		border-radius: 0 0 $border-radius $border-radius;
+		color: $dark;
+		font-weight: $font-weight-bold;
+	}
+}
+
+//Legend dot
+
+.dot {
+	width: 12px;
+	height: 12px;
+}
+
+//Bell notification dot
+.bell-dot {
+	display: inline-block;
+	position: absolute;
+	top: -11px;
+	right: 6px;
+	height: 10px;
+	width: 10px;
+	border: 2px solid $gray-100;
+}
+
+.notification-bell.unread {
+	&::before {
+		position: absolute;
+		content: "";
+		background-color: $danger;
+		right: 12px;
+		top: 7px;
+		height: 0.75rem;
+		width: 0.75rem;
+		border-radius: 50%;
+		border: 2px solid $gray-100;
+	}
+}
+
+//Index Big Icon
+.bootstrap-big-icon {
+	position: absolute;
+	opacity: 0.05;
+	transform: rotate(17deg);
+	@include media-breakpoint-up(lg) {
+		right: -20%;
+		bottom: 6%;
+	}
+
+	@include media-breakpoint-up(xl) {
+		right: -10%;
+		bottom: 6%;
+	}
+}
+
+.github-big-icon {
+	position: absolute;
+	right: 80px;
+	svg {
+		color: $gray-400;
+		height:800px;
+		opacity: 0.2;
+	}
+}
+
+//Colors for icons, shapes and svg's
+@each $color, $value in $theme-colors {
+	.icon-shape-#{$color} {
+		@include icon-shape-variant($value);
+	}
+}

app/application/resources/volt/scss/volt/components/_images.scss

@@ -0,0 +1,67 @@
+/**
+ * = Images
+ */
+ .image-xl {
+    height: 20rem;
+    img{
+        height: 20rem;
+    }
+}
+
+.image-lg {
+    height: 12rem;
+    img{
+        height: 12rem;
+    }
+}
+
+.image-md{
+    height: 5.5rem;
+    img{
+        height: 5.5rem;
+    }
+}
+
+.image-sm {
+    height: 3rem;
+    img{
+        height: 3rem;
+    }
+}
+
+.image-xs {
+    height: 1.5rem;
+    img{
+        height: 1.5rem;
+    }
+}
+
+.image-small {
+    height: 1rem;
+    img{
+        height: 1rem;
+    }
+}
+
+.full-image{
+    height:100%;
+}
+
+
+.language-flag{
+    width: auto;
+    height: 1rem;
+    margin-right: 0.4rem;
+    position: relative;
+    top: -2px;
+}
+
+.home-pattern{
+    fill: $gray-100;
+}
+
+.form-bg-image {
+    background-repeat: no-repeat!important;
+    background-position: top center!important;
+}
+

app/application/resources/volt/scss/volt/components/_list-group.scss

@@ -0,0 +1,96 @@
+/**
+ * = List groups
+ */
+
+// Space list items
+.list-group-space {
+    .list-group-item {
+        margin-bottom: 1.5rem;
+        @include border-radius($list-group-border-radius);
+    }
+}
+
+
+// List group components
+.list-group-item{
+    border:0;
+    &.active {
+        z-index: 2; // Place active items above their siblings for proper border styling
+        color: $list-group-active-color;
+        background-color: $list-group-active-bg;
+        border-color: $list-group-active-border-color;
+    }
+
+    i{
+        width: 1rem;
+    }
+}
+
+.list-group-img {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    vertical-align: top;
+    margin: -.1rem 1.2rem 0 -.2rem;
+}
+.list-group-content {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    min-width: 0;
+
+    > p {
+        color: $gray-500;
+        line-height: 1.5;
+        margin: .2rem 0 0;
+    }
+}
+.list-group-heading {
+    font-size: $font-size-base;
+    color: $gray-800;
+
+    > small {
+        float: right;
+        color: $gray-500;
+        font-weight: 500;
+    }
+}
+
+
+.list-group{
+    &.simple-list{
+        .list-group-item{
+            background: transparent;
+            border: none;
+            padding: 0.375rem 0.125rem;
+            i{
+                vertical-align: middle;
+                width: 35px;
+                display: inline-block;
+            }
+        }
+    }
+
+}
+
+
+//News list for widgets
+
+.news-list{
+	.row{
+		> [class*='col']{
+	  		padding: 0 $spacer/4;
+		}
+	}
+
+	> li{
+		&:not(:last-child){
+		  margin-bottom: .75rem;
+		}
+	}
+
+	img{
+		min-height: 100%;
+		object-fit: cover;
+	}
+}

app/application/resources/volt/scss/volt/components/_modal.scss

@@ -0,0 +1,36 @@
+/**
+ * = Modals
+ */
+
+.modal{
+    &.static-example{
+        position: relative;
+        display: block;
+    }
+}
+
+.modal-content {
+    border: 0;
+    @if $enable-rounded {
+        border-radius: $modal-content-border-radius;
+    } @else {
+        border-radius: 0;
+    }
+}
+
+.modal-fluid {
+    .modal-dialog {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .modal-content {
+        border-radius: 0;
+    }
+}
+
+@each $color, $value in $theme-colors {
+    .modal-#{$color} {
+        @include modal-variant($value);
+    }
+}
+

app/application/resources/volt/scss/volt/components/_nav.scss

@@ -0,0 +1,256 @@
+/**
+ * = Navs
+ */
+
+.nav-link {
+    color: $nav-link-color;
+
+    &:hover,
+    &.active {
+        color: $nav-link-hover-color;
+
+        img {
+            opacity   : inherit;
+            transition: $transition-base;
+        }
+    }
+
+    span {
+        position: relative;
+    }
+}
+
+//Tabs 
+
+.nav-tabs {
+    .nav-item {
+        margin-bottom: 0;
+    }
+
+    .nav-link {
+        border          : 0;
+        padding         : 1rem 1rem;
+        background-color: $white;
+
+        &.active {
+            color           : $white;
+            background-color: $primary;
+        }
+    }
+
+    &.nav-dark {
+        .nav-link {
+            &.active {
+                color           : $white;
+                background-color: #12358a;
+            }
+        }
+    }
+
+    &.nav-light {
+        .nav-link {
+            &.active {
+                color           : $black;
+                background-color: $light;
+            }
+
+            &:hover {
+                color: $black;
+            }
+        }
+    }
+}
+
+// Pills 
+
+.nav-pills {
+    .nav-item:not(:last-child) {
+        padding-right: $nav-pills-space-x;
+    }
+
+    .nav-link {
+        padding   : $nav-pills-padding-y $nav-pills-padding-x;
+        transition: $transition-base;
+        box-shadow: $nav-link-shadow;
+        border    : $nav-pills-border-width solid $nav-pills-border-color;
+
+        &.avatar-link {
+            border: 0;
+        }
+
+        &:hover {
+            color: $nav-pills-link-hover-color;
+        }
+    }
+
+    .nav-link.active,
+    .show>.nav-link {
+        color           : $nav-pills-link-active-color;
+        background-color: $nav-pills-link-active-bg;
+        border-color    : $nav-pills-link-active-color;
+    }
+
+    &.rounded {
+        .nav-link {
+            border-radius: 30px;
+        }
+
+        &.vertical-tab {
+            .nav-link {
+                margin-bottom: .625rem;
+                min-width    : 100px;
+            }
+
+            .nav-item:not(:last-child) {
+                padding-right: 0;
+            }
+        }
+    }
+
+    &.bordered-pill-md {
+        .nav-link {
+            border     : $border-width-md solid $gray-200;
+            font-weight: $font-weight-bold;
+        }
+    }
+
+    &.vertical-tab {
+        .nav-link {
+            margin-bottom: .625rem;
+        }
+
+        .nav-item:not(:last-child) {
+            padding-right: 0;
+        }
+    }
+
+    @include media-breakpoint-down(xs) {
+        .nav-item {
+            margin-bottom: $spacer;
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .nav-pills:not(.nav-pills-circle) {
+        .nav-item {
+            padding-right: 0;
+        }
+    }
+}
+
+
+// Navs circle
+
+.nav-pill-circle {
+    .nav-link {
+        @include display-flex();
+        text-align     : center;
+        height         : 80px;
+        width          : 80px;
+        padding        : 0;
+        box-shadow     : $nav-link-shadow;
+        border-radius  : $nav-pills-border-circle;
+        align-items    : center;
+        justify-content: center;
+
+        &.avatar-link {
+            box-shadow: none;
+        }
+    }
+
+    &.vertical-tab {
+        .nav-link-icon {
+
+            i,
+            svg {
+                font-size: 1.5rem;
+            }
+        }
+
+        .nav-item:not(:last-child) {
+            padding-right: 0;
+        }
+    }
+
+    .nav-link-icon {
+
+        i,
+        svg {
+            font-size: 1.25rem;
+            margin   : 0;
+            display  : block;
+        }
+    }
+}
+
+// Navs square
+
+.nav-pill-square {
+    .nav-link {
+        text-align: center;
+        min-width : 80px;
+        box-shadow: $nav-link-shadow;
+        @include display-flex();
+        align-items    : center;
+        justify-content: center;
+    }
+
+    &.vertical-tab {
+        .nav-link {
+            margin-bottom: .625rem;
+            min-width    : 100px;
+        }
+
+        .nav-item:not(:last-child) {
+            padding-right: 0;
+        }
+    }
+
+    .nav-link-icon {
+
+        i,
+        svg {
+            font-size  : 1.25rem;
+            margin     : 0;
+            display    : block;
+            line-height: 50px;
+        }
+    }
+}
+
+// Nav wrapper 
+.nav-wrapper {
+    padding: 1rem 0;
+    @include border-top-radius($card-border-radius);
+
+    +.card {
+        @include border-top-radius(0);
+        @include border-bottom-radius($card-border-radius);
+    }
+}
+
+// Tabbable tabs
+//
+// Hide tabbable panes to start, show them when `.active`
+
+.tab-content {
+    >.tab-pane {
+        display: none;
+
+        pre {
+            padding: 0;
+            margin : 0;
+        }
+    }
+
+    >.active {
+        display: block;
+    }
+}
+
+.nav-pills .nav-item {
+    @include media-breakpoint-up(lg) {
+        margin-bottom: 0;
+    }
+}

app/application/resources/volt/scss/volt/components/_pagination.scss

@@ -0,0 +1,16 @@
+/**
+ * = Paginations
+ */
+ .circle-pagination{
+    .page-link,
+    span{
+        @include display-flex();
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        padding: 0;
+        @include border-radius($circle-radius);
+    }
+}
+