update base

app/Http/Controllers/Auth/Logout.php

@@ -14,6 +14,6 @@ public function __invoke(Request $request): RedirectResponse
         $request->session()->invalidate();
         $request->session()->regenerateToken();
 
-        return redirect('/');
+       return redirect()->route('login');
     }
 }

app/Http/Controllers/StudentController.php

+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Student;
+use Illuminate\Http\Request;
+
+class StudentController extends Controller
+{
+    public function index()
+    {
+        $students = Student::all();
+        return view('students.index', compact('students'));
+    }
+
+    public function create()
+    {
+        return view('students.create');
+    }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'name' => 'required|string|max:255',
+        ]);
+
+        Student::create($request->only('name'));
+
+        return redirect()->route('students.index')->with('success', 'Student berjaya ditambah!');
+    }
+}

app/Livewire/Table/StudentTable.php

+<?php
+
+namespace App\Livewire\Table;
+
+use Livewire\Component;
+use Livewire\WithPagination;
+use App\Models\Student;
+
+class StudentTable extends Component
+{
+    use WithPagination;
+
+    public $search = '';
+    public $sortField = 'id';
+    public $sortDirection = 'asc';
+
+    protected $updatesQueryString = ['search', 'sortField', 'sortDirection'];
+
+    public function sortBy($field)
+    {
+        if ($this->sortField === $field) {
+            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
+        } else {
+            $this->sortField = $field;
+            $this->sortDirection = 'asc';
+        }
+    }
+
+    public function updatingSearch()
+    {
+        $this->resetPage();
+    }
+
+    public function render()
+    {
+        $students = Student::query()
+            ->where(function($query){
+                $query->where('name', 'like', '%' . $this->search . '%')
+                      ->orWhere('status', 'like', '%' . $this->search . '%');
+            })
+            ->orderBy($this->sortField, $this->sortDirection)
+            ->paginate(10);
+
+        return view('livewire.table.student-table', [
+            'students' => $students,
+        ]);
+    }
+}

app/Providers/AppServiceProvider.php

@@ -13,7 +13,7 @@ class AppServiceProvider extends ServiceProvider
      *
      * @var string
      */
-    public const HOME = '/home';
+    public const HOME = '/dashboard';
 
     /**
      * Register any application services.

database/migrations/2025_09_04_120000_create_training_relations.php

@@ -42,6 +42,7 @@ public function up(): void
         Schema::create('students', function (Blueprint $table) {
             $table->id();
             $table->string('name');
+            $table->string('status');
             $table->timestamps();
         });
 

database/seeders/StudentSeeder.php

@@ -10,9 +10,27 @@ class StudentSeeder extends Seeder
     public function run(): void
     {
         DB::table('students')->insert([
-            ['name' => 'Ali'],
-            ['name' => 'Siti'],
-            ['name' => 'John'],
+            ['name' => 'Ali', 'status' => 'active'],
+            ['name' => 'Siti', 'status' => 'active'],
+            ['name' => 'John', 'status' => 'active'],
+            ['name' => 'Aminah', 'status' => 'active'],
+            ['name' => 'Hafiz', 'status' => 'active'],
+            ['name' => 'Farah', 'status' => 'active'],
+            ['name' => 'Kumar', 'status' => 'active'],
+            ['name' => 'Ravi', 'status' => 'active'],
+            ['name' => 'Nurul', 'status' => 'active'],
+            ['name' => 'Zahra', 'status' => 'active'],
+            ['name' => 'Daniel', 'status' => 'active'],
+            ['name' => 'Sophia', 'status' => 'active'],
+            ['name' => 'Adam', 'status' => 'active'],
+            ['name' => 'Maria', 'status' => 'active'],
+            ['name' => 'Hakim', 'status' => 'active'],
+
+            ['name' => 'Imran', 'status' => 'inactive'],
+            ['name' => 'Sarah', 'status' => 'inactive'],
+            ['name' => 'Lina', 'status' => 'inactive'],
+            ['name' => 'Michael', 'status' => 'inactive'],
+            ['name' => 'Jenny', 'status' => 'inactive'],
         ]);
     }
 }

public/vendor/livewire/manifest.json

+
+{"/livewire.js":"df3a17f2"}

resources/views/livewire/table/student-table.blade.php

+<div>
+    <h1>Senarai Student</h1>
+
+    <div class="ui action input mb-3">
+        <input type="text" placeholder="Search..." wire:model.debounce.300ms="search">
+    </div>
+
+    <table class="ui celled table">
+        <thead>
+            <tr>
+                <th wire:click="sortBy('name')" style="cursor:pointer">
+                    Nama
+                    @if($sortField === 'name')
+                        @if($sortDirection === 'asc') ▲ @else ▼ @endif
+                    @endif
+                </th>
+                <th wire:click="sortBy('status')" style="cursor:pointer">
+                    Status
+                    @if($sortField === 'status')
+                        @if($sortDirection === 'asc') ▲ @else ▼ @endif
+                    @endif
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            @forelse($students as $student)
+                <tr>
+                    <td>{{ $student->name }}</td>
+                    <td>
+                        @if($student->status === 'active')
+                            <span class="ui green label">Active</span>
+                        @else
+                            <span class="ui red label">Inactive</span>
+                        @endif
+                    </td>
+                </tr>
+            @empty
+                <tr>
+                    <td colspan="2" class="text-center">No students found.</td>
+                </tr>
+            @endforelse
+        </tbody>
+    </table>
+
+    <div class="ui pagination menu mt-3">
+        @if ($students->onFirstPage() === false)
+            <a class="item" wire:click.prevent="previousPage">Previous</a>
+        @endif
+
+        @foreach (range(1, $students->lastPage()) as $page)
+            <a class="item {{ $students->currentPage() === $page ? 'active' : '' }}"
+               wire:click.prevent="gotoPage({{ $page }})">{{ $page }}</a>
+        @endforeach
+
+        @if ($students->hasMorePages())
+            <a class="item" wire:click.prevent="nextPage">Next</a>
+        @endif
+    </div>
+
+
+</div>

resources/views/students/create.blade.php

+<x-volt-app title="Students">
+    <h2 class="ui header">Tambah Student</h2>
+
+    <form method="POST" action="{{ route('students.store') }}" class="ui form">
+        @csrf
+        <div class="field">
+            <label>Nama</label>
+            <input type="text" name="name" placeholder="Contoh: Ali">
+        </div>
+        <button type="submit" class="ui primary button">Simpan</button>
+        <a href="{{ route('students.index') }}" class="ui button">Kembali</a>
+    </form>
+</x-volt-app>

resources/views/students/index.blade.php

+<x-volt-app title="Students">
+    <a href="{{ route('students.create') }}" class="ui primary button">+ Add Student</a>
+
+    <livewire:table.student-table />
+</x-volt-app>

resources/views/vendor/laravolt/account/edit.blade.php

+@extends('laravolt::users.edit', ['tab' => 'account'])
+
+@section('content-user-edit')
+
+    {!! form()->bind($user)->open()->put()->action(route('epicentrum::account.update', $user['id']))->horizontal() !!}
+
+    {!! form()->text('name')->label(__('laravolt::users.name')) !!}
+    {!! form()->text('email')->label(__('laravolt::users.email')) !!}
+    {!! form()->dropdown('status', $statuses)->label(__('laravolt::users.status')) !!}
+    {!! form()->dropdown('timezone', $timezones)->label(__('laravolt::users.timezone')) !!}
+
+    @if($multipleRole)
+        {!! form()->checkboxGroup('roles', $roles)->label(trans('laravolt::users.roles'))->addClassIf(!$roleEditable, 'disabled') !!}
+    @else
+        {!! form()->radioGroup('roles', $roles)->label(trans('laravolt::users.roles'))->addClassIf(!$roleEditable, 'disabled') !!}
+    @endif
+
+
+    @unless($roleEditable)
+        <div class="field">
+            <label for="">&nbsp;</label>
+            <div class="ui message m-t-0">Editing role are disabled by system configuration.</div>
+        </div>
+    @endif
+
+
+    {!! form()->action(form()->submit(__('laravolt::action.save')), form()->link(__('laravolt::action.back'), route('epicentrum::users.index'))) !!}
+    {!! form()->close() !!}
+
+
+    <div class="ui divider section"></div>
+
+    <div class="ui red segment p-2">
+        <h4 class="ui header">@lang('laravolt::users.delete_account')</h4>
+
+        @if($user['id'] == auth()->id())
+            <div class="ui message warning">@lang('laravolt::message.cannot_delete_yourself')</div>
+        @else
+            {!! form()->open()->delete()->action(route('epicentrum::users.destroy', $user['id'])) !!}
+            <p>Menghapus pengguna dan semua data yang berhubungan dengan pengguna ini.
+                <br>
+                Aksi ini tidak bisa dibatalkan.</p>
+            <x-volt-button class="red" value="1">
+                @lang('laravolt::action.delete') {{ $user->name }}
+            </x-volt-button>
+            {!! form()->close() !!}
+        @endif
+    </div>
+
+@endsection

resources/views/vendor/laravolt/auto-crud/create.blade.php

+<x-volt-app :title="$config['label']">
+    <x-slot name="actions">
+        <x-volt-backlink url="{{ route('auto-crud::resource.index', $config['key']) }}">Kembali ke Index
+        </x-volt-backlink>
+    </x-slot>
+
+    <x-volt-panel title="Tambah {{ $config['label'] }}">
+        {!! form()->post(route('auto-crud::resource.store', $config['key'])) !!}
+
+        {!! form()->make($fields)->bindValues(request()->old() + request()->all())->render() !!}
+
+        {!! form()->action([
+            form()->submit(__('Save')),
+            form()->link(__('Cancel'), route('auto-crud::resource.index', $config['key']))
+        ]) !!}
+
+
+        {!! form()->close() !!}
+    </x-volt-panel>
+
+
+</x-volt-app>

resources/views/vendor/laravolt/auto-crud/edit.blade.php

+<x-volt-app :title="$config['label']">
+    <x-slot name="actions">
+        <x-volt-backlink url="{{ route('auto-crud::resource.index', $config['key']) }}">Kembali ke Index
+        </x-volt-backlink>
+    </x-slot>
+
+    <x-volt-panel title="Edit {{ $config['label'] }}">
+        {!! form()->put(route('auto-crud::resource.update', [$config['key'], $model->getKey()]))->attribute('up-layer', 'root') !!}
+
+        {!! form()->make($fields)->bindValues(request()->query() + $model->toArray())->render() !!}
+
+        {!! form()->action([
+            form()->submit(__('Save')),
+            form()->link(__('Cancel'), route('auto-crud::resource.index', $config['key']))->attribute('up-dismiss', true)
+        ]) !!}
+
+        {!! form()->close() !!}
+    </x-volt-panel>
+
+
+</x-volt-app>

resources/views/vendor/laravolt/auto-crud/index.blade.php

+<x-volt-app :title="$config['label']">
+    <x-slot name="actions">
+        <x-volt-link-button
+                :label="__('Tambah')"
+                url="{{ route('auto-crud::resource.create', $config['key']) }}"
+                up-mode="modal"
+                icon="plus">
+        </x-volt-link-button>
+    </x-slot>
+
+    @livewire(
+        $config['table'] ?? 'laravolt::auto-crud.resource.table',
+        ['resource' => $config]
+    )
+
+</x-volt-app>

resources/views/vendor/laravolt/auto-crud/show.blade.php

+<x-volt-app :title="$config['label']">
+    <x-slot name="actions">
+        <x-volt-backlink url="{{ route('auto-crud::resource.index', $config['key']) }}">Kembali ke Index
+        </x-volt-backlink>
+    </x-slot>
+
+    <x-volt-panel title="Detail {{ $config['label'] }} #{{ $model->getKey() }}">
+        {!! form()->make($fields)->bindValues($model->toArray())->display() !!}
+    </x-volt-panel>
+
+
+</x-volt-app>

resources/views/vendor/laravolt/components/backlink.blade.php

+<div class="item">
+    <a themed href="{{ $url }}" class="ui basic button b-0">
+        <i class="icon long alternate left arrow"></i>
+        {{ $label ?? 'Kembali ke index' }}
+    </a>
+</div>

resources/views/vendor/laravolt/components/brand-image.blade.php

+<div data-role="x-brand-image" {{ $attributes }}>
+    @if($isSvg)
+        {!! $brandImage !!}
+    @else
+        <img
+                src="{{ asset($brandImage) }}"
+                alt=""
+                class="ui image small centered"
+        >
+    @endif
+</div>

resources/views/vendor/laravolt/components/brand-inline.blade.php

+<div data-role="brand" class="ui segment basic p-2 m-b-0">
+    <h4 class="ui header">
+        {{ config('laravolt.ui.brand_name') }}
+    </h4>
+</div>

resources/views/vendor/laravolt/components/brand.blade.php

+<div class="text-center" data-role="">
+    @if(strlen(config('laravolt.ui.brand_image')) > 0)
+        <img src="{{ config('laravolt.ui.brand_image') }}" alt="" class="ui image centered {{ $class ?? 'tiny' }}">
+    @endif
+
+    <h1 class="m-0 ui header">
+        {{ config('laravolt.ui.brand_name') }}
+        <div class="sub header">{{ config('laravolt.ui.brand_description') }}</div>
+    </h1>
+</div>

resources/views/vendor/laravolt/components/breadcrumb.blade.php

+@section('breadcrumb')
+<div class="ui breadcrumb">
+    {!! $slot !!}
+</div>
+@endsection

resources/views/vendor/laravolt/components/button.blade.php

+<button {{ $attributes->merge(['class' => 'ui button '.$class]) }}>
+    @if($icon)
+        <i class="icon {{ $icon }}"></i>
+    @endif
+    {{ $label ?? $slot }}
+</button>

resources/views/vendor/laravolt/components/card-footer.blade.php

+<div class="extra content x-card__footer">
+    <span class="left floated">
+        {!! $left !!}
+    </span>
+    <span class="right floated">
+        {!! $right !!}
+    </span>
+</div>

resources/views/vendor/laravolt/components/card.blade.php

+@isset($url)
+    <a href="{{ $url }}" class="ui card segments panel x-card shadow" style="overflow: hidden">
+@else
+    <div class="ui card segments panel x-card shadow-md p-1">
+@endisset
+
+    @if($attributes['cover'])
+        <div class="image">
+            <img src="{{ $attributes['cover'] }}" alt="">
+        </div>
+    @endif
+
+    @if($title or $content or $attributes['meta.before'] or $attributes['meta.after'])
+    <div class="content x-card__header">
+
+        @if($attributes['meta.before'])
+        <div class="meta x-card__meta--before">{!! $attributes['meta.before'] !!}</div>
+        @endif
+
+        @if($title)
+        <div class="header">{{ $title }}</div>
+        @endif
+
+        @if($attributes['meta.after'])
+        <div class="meta x-card__meta--after">{!! $attributes['meta.after'] !!}</div>
+        @endif
+
+        @if($content)
+        <div class="description">
+            {{ $content }}
+        </div>
+        @endif
+
+    </div>
+    @endif
+
+    {{ $body ?? null }}
+
+    {{ $slot }}
+
+@isset($url)
+    </a>
+@else
+    </div>
+@endisset
+

resources/views/vendor/laravolt/components/col.blade.php

+<div class="column">
+    {{ $slot }}
+</div>

resources/views/vendor/laravolt/components/flash.blade.php

+@if (!empty($bags))
+    <script>
+        @foreach($bags as $bag)
+        $('body').toast({!! json_encode($bag) !!});
+        @endforeach
+    </script>
+@endif

resources/views/vendor/laravolt/components/grid.blade.php

+<div class="ui stackable equal width grid">
+    {{ $slot }}
+</div>

resources/views/vendor/laravolt/components/inspire.blade.php

+{!! \Illuminate\Foundation\Inspiring::quote() !!}

resources/views/vendor/laravolt/components/link-button.blade.php

+<a {{ $attributes->merge(['href' => $url, 'themed' => true])->class(['ui button', $class]) }}>
+    @if($icon)
+        <i class="icon {{ $icon }}"></i>
+    @endif
+        {{ $label ?? $slot }}
+</a>

resources/views/vendor/laravolt/components/link.blade.php

+<a href="{{ $url }}" class="ui button link {{ $class ?? '' }}" themed>
+    @if($icon)
+        <i class="icon {{ $icon }}"></i>
+    @endif
+        {{ $label ?? $slot }}
+</a>

resources/views/vendor/laravolt/components/media-library.blade.php

+<table class="ui table unstackable responsive">
+    <thead>
+    <tr>
+        <th class="center aligned">@lang('laravolt::components/media-library.type')</th>
+        <th>@lang('laravolt::components/media-library.filename')</th>
+        <th>@lang('laravolt::components/media-library.filesize')</th>
+        <th>&nbsp;</th>
+    </tr>
+    </thead>
+    <tbody>
+    @foreach($collection as $media)
+        <tr>
+            <td class="center aligned">
+                <div class="ui label {{ $convertExtensionToColor($media->extension) }}">{{ $media->extension }}</div>
+            </td>
+            <td><a target="_blank" href="{{ $media->getUrl() }}">{{ $media->file_name }}</a></td>
+            <td>{{ $media->human_readable_size }}</td>
+            <td>
+                @if($delete)
+                    {!! form()->delete(route('media::destroy', $media->getKey())) !!}
+                    {!! form()->button("<i class='icon trash'></i>")->addClass('icon secondary red')->type('submit')->onclick('return confirm("Berkas akan dihapus secara permanen. Anda yakin?")') !!}
+                    {!! form()->close() !!}
+                @endif
+            </td>
+        </tr>
+    @endforeach
+    </tbody>
+</table>

resources/views/vendor/laravolt/components/modal.blade.php

+<div class="ui modal small visible active top aligned transition scale in"
+     x-show="activeModal == '{{ $this->key }}'"
+     x-ref="{{ $this->key }}"
+>
+    <i class="close icon" @click="close()"></i>
+    {{ $slot }}
+</div>

resources/views/vendor/laravolt/components/panel.blade.php

+@php($icon = $icon ?? false)
+
+<div {{ $attributes->merge(['class' => 'ui segments panel']) }}>
+    @if($title or $icon)
+        <div class="ui segment panel__header {{ $attributes['headerClass'] ?? '' }}">
+            <div class="ui menu secondary borderless m-0 p-0" style="min-height: 0">
+                @if($icon)
+                    <div class="panel__icon item p-0 p-l-xs m-0">
+                        <x-volt-icon :name="$icon" :class="$iconClass"/>
+                    </div>
+                @endif
+
+                @if($title)
+                    <div class="item p-0 m-0">
+                        <h4 class="panel__title ui header p-x-sm p-y-0">
+                            {!! $title !!}
+                            @if($description)
+                            <div class="sub header">{!! $description !!}</div>
+                            @endif
+                        </h4>
+                    </div>
+                @endif
+
+                @if(isset($action))
+                <div class="menu right">
+                    <div class="item p-0">
+                        {!! $action !!}
+                    </div>
+                </div>
+                @endif
+
+            </div>
+        </div>
+    @endif
+
+    <div class="ui segment {{ $attributes['contentClass'] ?? 'p-3' }}">
+        {!! $slot !!}
+    </div>
+
+    @if(isset($footer))
+        <div class="ui segment">
+            {!! $footer !!}
+        </div>
+    @endif
+</div>

resources/views/vendor/laravolt/components/row.blade.php

+<div class="row">
+    {{ $slot }}
+</div>

resources/views/vendor/laravolt/components/tab-content.blade.php

+@push('tab.titles.'.\Laravolt\Platform\Components\Tab::getActiveTab())
+    <a {{ $attributes->merge(['class' => "item $activeClass"]) }} data-tab="{{ $key }}">{!! $title !!}</a>
+@endpush
+
+@push('tab.contents.'.\Laravolt\Platform\Components\Tab::getActiveTab())
+    <div {{ $attributes->merge(['class' => "ui bottom attached tab segment $activeClass"]) }} data-tab="{{ $key }}">
+        {!! $slot !!}
+    </div>
+@endpush

resources/views/vendor/laravolt/components/tab.blade.php

+<div themed class="x-tab">
+    <div class="ui top attached secondary pointing tabular menu">
+        @stack("tab.titles.$key")
+    </div>
+
+    @stack("tab.contents.$key")
+</div>
+
+@once
+    @push('script')
+        <script>
+            $('.x-tab .menu .item').tab();
+        </script>
+    @endpush
+@endonce
+

resources/views/vendor/laravolt/components/titlebar.blade.php

+@section('page.title', $title)
+
+@section('page.actions')
+    {{ $slot }}
+@endsection

resources/views/vendor/laravolt/emails/account-activation.blade.php

+@component('laravolt::mail.body')
+    @component('laravolt::mail.headline')
+        Aktivasi Akun
+    @endcomponent
+
+    @component('laravolt::mail.message')
+        Untuk melakukan aktivasi akun, silakan klik tombol di bawah ini:
+    @endcomponent
+
+
+    @component('laravolt::mail.button', ['url' => route('auth::activate', $token)])
+        Aktivasi Akun
+    @endcomponent
+
+    @component('laravolt::mail.info')
+        Jika Anda tidak merasa melakukan pendaftaran di <strong>{{ config('app.url') }}</strong>, abaikan email ini.
+    @endcomponent
+
+@endcomponent

resources/views/vendor/laravolt/emails/account_information.blade.php

+<ul>
+    <li>Nama: {{ $user['name'] }}</li>
+    <li>Email: {{ $user['email'] }}</li>
+    <li>Password: {{ $plainPassword }}</li>
+    <li>Status: {{ $user['status'] }}</li>
+</ul>

resources/views/vendor/laravolt/emails/new-password-information.blade.php

+@component('laravolt::mail.body')
+    @component('laravolt::mail.headline')
+        Perubahan Password
+    @endcomponent
+
+    @component('laravolt::mail.message')
+        Admin telah mengubah password Anda menjadi:
+        <br>
+        <h3 style="font-size: 72px; font-family: serif; font-weight: 400">{{ $password }}</h3>
+        Silakan gunakan password baru tersebut untuk login di <strong>{{ config('app.url') }}</strong>.
+    @endcomponent
+@endcomponent

resources/views/vendor/laravolt/emails/reset-password-link.blade.php

+@component('laravolt::mail.body')
+    @component('laravolt::mail.headline')
+        Reset Password
+    @endcomponent
+
+    @component('laravolt::mail.message')
+        Anda baru saja melakukan
+        <br> permintaan reset password di <strong>{{ config('app.url') }}</strong>.
+        <br> Untuk melanjutkan proses, silakan klik tombol di bawah ini:
+    @endcomponent
+
+    @component('laravolt::mail.button', ['url' => route('auth::reset.show', compact('token', 'email'))])
+        Reset Password
+    @endcomponent
+
+    @component('laravolt::mail.info')
+        Jika Anda tidak merasa melakukan permintaan reset password, abaikan email ini.
+    @endcomponent
+
+@endcomponent

resources/views/vendor/laravolt/layout/app.blade.php

+<x-volt-base :title="$title">
+    <div class="layout--app">
+
+        @include('laravolt::menu.topbar')
+        @include('laravolt::menu.sidebar')
+
+        <div class="content" up-main="root">
+            <div class="content__inner">
+                @include('laravolt::menu.actionbar')
+
+                <main class="ui container-fluid content__body p-3"
+                      up-main="modal"
+                      data-font-size="{{ config('laravolt.ui.font_size') }}"
+                      data-theme="{{ config('laravolt.ui.theme') }}"
+                      data-accent-color="{{ config('laravolt.ui.color') }}"
+                      data-sidebar-density="{{ config('laravolt.ui.sidebar_density') }}"
+                >
+                    {{-- Livewire Styles --}}
+                    @livewireStyles
+
+                    {{ $slot }}
+                    @stack('main')
+
+                    {{-- Livewire Scripts --}}
+                    @livewireScripts
+                </main>
+            </div>
+        </div>
+    </div>
+</x-volt-base>

resources/views/vendor/laravolt/layout/auth.blade.php

+<x-volt-base>
+    <div class="layout--auth is-{!! config('laravolt.ui.login_layout') !!}">
+        <div class="layout--auth__container">
+            <div class="x-inspire"
+                 style="background-image: url('{!! config('laravolt.ui.login_background') !!}')"
+            >
+                <div class="x-inspire__content">
+                    <div class="x-inspire__text">
+                        <x-volt-inspire/>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="x-auth">
+                <main class="x-auth__content" up-main="root">
+                    <div class="p-2">
+                        <x-volt-brand-image/>
+                    </div>
+
+                    {{ $slot }}
+                    @stack('main')
+
+                </main>
+            </div>
+        </div>
+    </div>
+</x-volt-base>

resources/views/vendor/laravolt/layout/base.blade.php

+<!DOCTYPE html>
+<html lang="{{ config('app.locale') }}"
+      data-font-size="{{ config('laravolt.ui.font_size') }}"
+      data-theme="{{ config('laravolt.ui.theme') }}"
+      data-sidebar-density="{{ config('laravolt.ui.sidebar_density') }}"
+      data-spa="{{ config('laravolt.platform.features.spa') }}"
+>
+<head>
+    <title>{{ $title ?? '' }} | {{ config('app.name') }}</title>
+
+    <meta charset="UTF-8"/>
+    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+    <meta content="no-cache">
+
+    @stack('meta')
+
+    @laravoltStyles
+    @livewireStyles
+
+    @stack('style')
+    @stack('head')
+
+    @laravoltScripts
+</head>
+
+<body class="{{ $bodyClass ?? '' }} @yield('body.class')">
+
+    {{ $slot }}
+
+    @livewireScripts
+    @stack('script')
+    @stack('body')
+</body>
+</html>

resources/views/vendor/laravolt/layout/public.blade.php

+<x-volt-base>
+    {{ $slot }}
+</x-volt-base>

resources/views/vendor/laravolt/mail/body.blade.php

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+        body {
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+        }
+
+        img {
+            -ms-interpolation-mode: bicubic;
+        }
+
+        img {
+            border: 0;
+            height: auto;
+            line-height: 100%;
+            outline: none;
+            text-decoration: none;
+        }
+
+        body {
+            height: 100% !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            width: 100% !important;
+        }
+
+        @media screen and (max-width: 500px) {
+            .img-max {
+                width: 100% !important;
+                max-width: 100% !important;
+                height: auto !important;
+            }
+
+            .max-width {
+                max-width: 100% !important;
+            }
+
+            .mobile-wrapper {
+                width: 85% !important;
+                max-width: 85% !important;
+            }
+
+            .mobile-padding {
+                padding-left: 5% !important;
+                padding-right: 5% !important;
+            }
+        }
+    </style>
+</head>
+
+<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; height: 100% !important; margin: 0; padding: 0; width: 100% !important;"
+      bgcolor="{{ config('laravolt.ui.mail.body') }}">
+<!-- HIDDEN PREHEADER TEXT -->
+<div style="display: none; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
+    {{ $preheader ?? '' }}
+</div>
+<table border="0" cellpadding="0" cellspacing="0"
+       width="100%"
+       style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+    <tbody>
+    <tr>
+        <td align="center" valign="top" width="100%" bgcolor="{{ config('laravolt.ui.mail.header') }}"
+            style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 35px 15px 0;"
+            class="mobile-padding">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
+                <tr>
+                    <td align="center" valign="top" width="500">
+            <![endif]-->
+            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
+                   style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; max-width: 500px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+                <tbody>
+                <tr>
+                    <td align="center" bgcolor="{{ config('laravolt.ui.mail.content.background') }}"
+                        style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-radius: 10px 10px 0 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+                        <div class="header"
+                             style="-moz-osx-::font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-bottom-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-width: 0 0 1px; font-size: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; margin: auto 30px; padding: 30px 60px; vertical-align: baseline;">
+
+                            <img src="{{ config('laravolt.ui.brand_image') }}" border="0"
+                                 style="-ms-interpolation-mode: bicubic; border: 0; display: block; width: 50px; line-height: 100%; outline: none; text-decoration: none;margin: 0 0 10px 0;">
+
+                            <h2 style="-moz-osx-::font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border: 0; color: {{ config('laravolt.ui.mail.content.color') }}; font: 400 16px/24px apple-system, BlinkMacSystemFont, Arial, 'Segoe UI', 'Helvetica Neue', sans-serif; margin: 0; vertical-align: baseline;"
+                                align="center">{{ config('app.name') }}</h2>
+                        </div>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>
+    <tr>
+        <td align="center" height="100%" valign="top" width="100%"
+            style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 15px 20px;"
+            class="mobile-padding">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
+                <tr>
+                    <td align="center" valign="top" width="500">
+            <![endif]-->
+            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
+                   style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; max-width: 500px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+                <tbody>
+                <tr>
+                    <td align="center" valign="top"
+                        style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Open Sans, Helvetica, Arial, sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 0 25px;">
+                        <table cellspacing="0" cellpadding="0" border="0" width="100%"
+                               style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+                            <tbody>
+                            <tr>
+                                <td align="center" bgcolor="{{ config('laravolt.ui.mail.content.background') }}"
+                                    style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-radius: 0 0 10px 10px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px; color: {{ config('laravolt.ui.mail.content.color') }}">
+                                    {!! $slot !!}
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>
+    <tr>
+        <td align="center" height="100%" valign="top" width="100%"
+            style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 15px 40px;">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
+                <tr>
+                    <td align="center" valign="top" width="500">
+            <![endif]-->
+            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
+                   style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; max-width: 500px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+                <tbody>
+                <tr>
+                    <td align="center" valign="top"
+                        style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: rgba(140,143,156,0.53); font-family: Open Sans, Helvetica, Arial, sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
+                        <p style="font-size: 14px; line-height: 20px;">© {{ config('app.name') }}</p>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>
+    </tbody>
+</table>
+
+</body>
+
+</html>

resources/views/vendor/laravolt/mail/button.blade.php

+<table border="0" cellspacing="0" cellpadding="0"
+       style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+    <tbody>
+    <tr>
+        <td align="center"
+            style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-radius: 26px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;padding: 0 0 20px 0">
+            <a href="{{ $url }}" target="_blank"
+               style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: {{ config('laravolt.ui.mail.button.background') }}; color: {{ config('laravolt.ui.mail.button.color') }}; border-radius: 26px; display: block; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; padding: 14px 26px; text-decoration: none;">
+                {{ $slot }}
+            </a>
+        </td>
+    </tr>
+    </tbody>
+</table>

resources/views/vendor/laravolt/mail/headline.blade.php

+<h1 style="-moz-osx-volt-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border: 0; color: {{ config('laravolt.ui.mail.content.color') }}; font: 400 32px/40px apple-system, BlinkMacSystemFont, Arial, 'Segoe UI', 'Helvetica Neue', sans-serif; margin: 0; vertical-align: baseline;"
+    align="center">
+    {!! $slot !!}
+</h1>

resources/views/vendor/laravolt/mail/info.blade.php

+<table cellspacing="0" cellpadding="0" border="0" width="100%"
+       style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt;margin: 20px 0;">
+    <tbody>
+    <tr>
+        <td align="center"
+            style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Open Sans, Helvetica, Arial, sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt;padding:0">
+            <p style="-moz-osx-::font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border: 0; color: #667685; font: 400 12px/16px apple-system, BlinkMacSystemFont, Arial, 'Segoe UI', 'Helvetica Neue', sans-serif; margin: 0px 0 10px; padding: 20px; vertical-align: baseline;background: #fafafa; font-style: italic; border-radius: 5px">
+            {!! $slot !!}
+            </p>
+        </td>
+    </tr>
+    </tbody>
+</table>

resources/views/vendor/laravolt/mail/message.blade.php

+<table cellspacing="0" cellpadding="0" border="0" width="100%"
+       style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 20px 0;">
+    <tbody>
+    <tr>
+        <td align="center"
+            style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Open Sans, Helvetica, Arial, sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+            <p style="-moz-osx-volt-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border: 0; color: {{ config('laravolt.ui.mail.content.color') }}; font: 400 16px/25px apple-system, BlinkMacSystemFont, Arial, 'Segoe UI', 'Helvetica Neue', sans-serif; margin: 0px 0 10px; padding: 0; vertical-align: baseline;">
+            {!! $slot !!}
+            </p>
+        </td>
+    </tr>
+    </tbody>
+</table>

resources/views/vendor/laravolt/menu/actionbar.blade.php

+<div id="actionbar" class="ui two column grid p-x-3 p-y-1 m-b-0">
+    <div class="column middle aligned">
+        @yield('breadcrumb')
+        <h3 class="ui header m-t-xs">
+            {{ $title }}
+            <div class="sub header">{{ $subtitle ?? '' }}</div>
+        </h3>
+    </div>
+    <div class="column right aligned middle aligned">
+        {{ $actions ?? '' }}
+    </div>
+</div>

resources/views/vendor/laravolt/menu/sidebar.blade.php

+@php
+/** @var \Laravolt\Platform\Services\SidebarMenu */
+$items = app('laravolt.menu.sidebar')->allMenu();
+@endphp
+
+<nav class="sidebar" data-role="sidebar" id="sidebar">
+    <script>
+        if (document.body.clientWidth < 991 || localStorage.getItem('layout-mode') === 'full') {
+            document.getElementById('sidebar').classList.add('hide');
+            document.getElementById('topbar').classList.add('full');
+        } else {
+            document.getElementById('sidebar').classList.add('show');
+        }
+    </script>
+
+    <div class="sidebar__scroller">
+        @include('laravolt::menu.sidebar_logo')
+        @include('laravolt::menu.sidebar_profile')
+        @include('laravolt::menu.sidebar_menu')
+    </div>
+</nav>

resources/views/vendor/laravolt/menu/sidebar_items.blade.php

+@foreach($items->sortBy(fn($item) => $item->data('order')) as $item)
+    @if($item->hasChildren())
+        <div class="title title__1 item {{ \Laravolt\Platform\Services\SidebarMenu::setActiveParent($item->children(), $item->isActive) }}">
+            {!! svg(config('laravolt.ui.iconset').'-'.$item->data('icon'), null, ['class' => 'left x-icon'])
+            ->width('16px')
+            ->toHtml() !!}
+            <span>{{ $item->title }}</span>
+            <i class="angle down icon"></i>
+        </div>
+        <div class="content content__2 {{ \Laravolt\Platform\Services\SidebarMenu::setActiveParent($item->children(), $item->isActive) }} ">
+            <div class="ui list">
+                @foreach($item->children()->sortBy(fn($item) => $item->data('order')) as $child)
+                    @if($child->hasChildren())
+                        <div class="title title__2 {{ \Laravolt\Platform\Services\SidebarMenu::setActiveParent($child->children(), $child->isActive) }}">
+                            <span>{{ $child->title }}</span>
+                            <i class="angle down icon"></i>
+                        </div>
+                        <div class="content content__3 {{ \Laravolt\Platform\Services\SidebarMenu::setActiveParent($child->children(), $child ->isActive) }}">
+                            <div class="ui list list__3">
+                                @foreach($child->children() as $grandchild)
+                                    <a class="title title__3 empty {{ \Laravolt\Platform\Services\SidebarMenu::setActiveParent($grandchild->children(), $grandchild->isActive) }}"
+                                       href="{{ $grandchild->url() }}"
+                                       data-parent="{{ $grandchild->parent()->title }}">
+                                        <span>{{ $grandchild->title }}</span>
+                                    </a>
+                                @endforeach
+                            </div>
+                        </div>
+                    @else
+                        <a href="{{ $child->url() }}" data-parent="{{ $child->parent()->title }}"
+                           class="item title__2 {{ ($child->isActive)?'selected':'' }} ">{{ $child->title }}</a>
+                    @endif
+                @endforeach
+            </div>
+        </div>
+    @else
+        <a class="title title__1 item empty {{ \Laravolt\Platform\Services\SidebarMenu::setActiveParent($item->children(), $item->isActive) }}"
+           href="{{ $item->url() }}"
+           data-parent="{{ $item->parent()->title }}">
+            {!! svg(config('laravolt.ui.iconset').'-'.$item->data('icon'), null, ['class' => 'left x-icon'])
+            ->width('16px')
+            ->toHtml() !!}
+            <span>{{ $item->title }}</span>
+        </a>
+        <div class="content"></div>
+    @endif
+@endforeach

resources/views/vendor/laravolt/menu/sidebar_logo.blade.php

+<div class="sidebar__logo">
+    <x-volt-brand-image></x-volt-brand-image>
+</div>

resources/views/vendor/laravolt/menu/sidebar_menu.blade.php

+<div class="sidebar__menu">
+    @if(!$items->isEmpty())
+        @if(config('laravolt.platform.features.quick_switcher'))
+            @include('laravolt::quick-switcher.modal')
+        @endif
+
+        <div class="ui attached vertical menu fluid" data-role="original-menu">
+
+            @foreach($items as $item)
+                @if($item->hasChildren())
+                    <div class="item">
+                        <div class="header">{{ $item->title }}</div>
+                    </div>
+                    <div class="ui accordion sidebar__accordion" data-role="sidenav">
+                        @include('laravolt::menu.sidebar_items', ['items' => $item->children()])
+                    </div>
+                @else
+                    <div class="ui accordion sidebar__accordion">
+                        <a class="title title__1 item empty {{ \Laravolt\Platform\Services\SidebarMenu::setActiveParent($item->children(), $item->isActive) }}"
+                           href="{{ $item->url() }}">
+                            <i class="left icon {{ $item->data('icon') }}"></i>
+                            <span>{{ $item->title }}</span>
+                        </a>
+                        <div class="content"></div>
+                    </div>
+                @endif
+            @endforeach
+        </div>
+    @endif
+</div>

resources/views/vendor/laravolt/menu/sidebar_profile.blade.php

+@auth
+    <div class="sidebar__profile">
+        <img src="{{ auth()->user()->avatar }}" class="ui image">
+        <div class="meta">
+            <h4 class="ui header">{{ auth()->user()->name }}</h4>
+            <div class="extra">
+                <a href="{{ route('auth::logout') }}" class="item">Logout</a>
+            </div>
+        </div>
+    </div>
+@endauth

resources/views/vendor/laravolt/menu/topbar.blade.php

+<header class="ui menu fixed top borderless" id="topbar">
+    <div class="item hamburger" data-role="sidebar-visibility-switcher" style="cursor: pointer"><i class="icon sidebar"></i></div>
+
+    <div class="menu p-l-2" id="titlebar">
+        <div class="left menu">
+            <div class="item">
+                {{ config('laravolt.ui.brand_name') }}
+            </div>
+        </div>
+    </div>
+
+    <div class="menu right p-r-1" id="userbar">
+        @auth
+            <div class="item">
+                <div class="ui compact menu b-0">
+                    <div class="ui simple dropdown basic button top right pointing b-0 p-x-volt-0">
+                        <img src="{{ auth()->user()->avatar }}" alt="" class="ui image avatar">
+                        <i class="dropdown icon m-l-0"></i>
+                        <div class="menu">
+                            <div class="header"><span class="ui text {{ config('laravolt.ui.color') }}">{{ auth()->user()->name }}</span></div>
+
+                            <div class="divider"></div>
+
+                            <a href="{{ route('my::profile.edit') }}" class="item">@lang('Edit Profil')</a>
+                            <a href="{{ route('my::password.edit') }}" class="item">@lang('Edit Password')</a>
+
+                            <div class="divider"></div>
+
+                            <a href="{{ route('auth::logout') }}" class="item" up-target="body">Logout</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        @endauth
+
+    </div>
+</header>

resources/views/vendor/laravolt/pagination/default.blade.php

+<div class="ui pagination menu">
+    <!-- Previous Page Link -->
+    @if ($paginator->onFirstPage())
+        <div class="item disabled"><i class="icon left chevron"></i></div>
+    @else
+        <a class="item" href="{{ $paginator->previousPageUrl() }}" rel="prev"><i class="icon left chevron"></i></a>
+    @endif
+
+<!-- Pagination Elements -->
+    @foreach ($elements as $element)
+    <!-- "Three Dots" Separator -->
+        @if (is_string($element))
+            <div class="item disabled"><span>{{ $element }}</span></div>
+        @endif
+
+    <!-- Array Of Links -->
+        @if (is_array($element))
+            @foreach ($element as $page => $url)
+                @if ($page == $paginator->currentPage())
+                    <a class="item active">{{ $page }}</a>
+                @else
+                    <a class="item" href="{{ $url }}">{{ $page }}</a>
+                @endif
+            @endforeach
+        @endif
+    @endforeach
+
+<!-- Next Page Link -->
+    @if ($paginator->hasMorePages())
+        <a class="item" href="{{ $paginator->nextPageUrl() }}" rel="next"><i class="icon right chevron"></i></a>
+    @else
+        <div class="item disabled"><i class="icon right chevron"></i></div>
+    @endif
+</div>

resources/views/vendor/laravolt/pagination/livewire/default.blade.php

+<div class="menu attached right bottom" data-role="pagination">
+    <!-- Previous Page Link -->
+    @if ($paginator->onFirstPage())
+        <button class="item disabled prev ui button icon">
+            <i class="icon left chevron" aria-hidden="true"></i>
+        </button>
+    @else
+        <div class="item prev ui button icon" wire:click.prevent="previousPage" rel="prev">
+            <i class="icon left chevron" aria-hidden="true"></i>
+        </div>
+    @endif
+
+<!-- Pagination Elements -->
+    @foreach ($elements as $element)
+    <!-- "Three Dots" Separator -->
+        @if (is_string($element))
+            <div class="item disabled dots"><span>{{ $element }}</span></div>
+        @endif
+
+    <!-- Array Of Links -->
+        @if (is_array($element))
+            @foreach ($element as $page => $url)
+                @if ($page == $paginator->currentPage())
+                    <div class="item active number">{{ $page }}</div>
+                @else
+                    <button class="item number" wire:click.prevent="gotoPage({{ $page }})">{{ $page }}</button>
+                @endif
+            @endforeach
+        @endif
+    @endforeach
+
+<!-- Next Page Link -->
+    @if ($paginator->hasMorePages())
+        <button class="item next ui button icon" wire:click.prevent="nextPage" rel="next">
+            <i class="icon right chevron" aria-hidden="true"></i>
+        </button>
+    @else
+        <div class="item disabled next ui button icon">
+            <i class="icon right chevron" aria-hidden="true"></i>
+        </div>
+    @endif
+</div>

resources/views/vendor/laravolt/pagination/livewire/simple.blade.php

+<div class="ui buttons basic icon mini" themed>
+
+    @if ($paginator->onFirstPage())
+        <div class="ui button disabled "><i class="icon left chevron" aria-hidden="true"></i></div>
+    @else
+        <button class="ui button" wire:click.prevent="previousPage">
+            <i class="icon left chevron" aria-hidden="true"></i>
+        </button>
+    @endif
+
+    <div class="ui button ">{{ $paginator->currentPage() }}/{{ $paginator->lastPage() }}</div>
+
+    @if ($paginator->hasMorePages())
+        <button class="ui button" wire:click.prevent="nextPage">
+            <i class="icon right chevron" aria-hidden="true"></i>
+        </button>
+    @else
+        <div class="ui button disabled">
+            <i class="icon right chevron" aria-hidden="true"></i>
+        </div>
+    @endif
+</div>

resources/views/vendor/laravolt/pagination/simple.blade.php

+<div class="ui buttons basic icon mini" themed>
+    <!-- Previous Page Link -->
+    @if ($paginator->onFirstPage())
+        <div class="ui button disabled "><i class="icon left chevron"></i></div>
+    @else
+        <a class="ui button " href="{{ $paginator->previousPageUrl() }}" rel="prev"><i
+                    class="icon left chevron"></i></a>
+    @endif
+    <div class="ui button ">{{ $paginator->currentPage() }}/{{ $paginator->lastPage() }}</div>
+    <!-- Next Page Link -->
+    @if ($paginator->hasMorePages())
+        <a class="ui button " href="{{ $paginator->nextPageUrl() }}" rel="next"><i class="icon right chevron"></i></a>
+    @else
+        <div class="ui button disabled "><i class="icon right chevron"></i></div>
+    @endif
+</div>

resources/views/vendor/laravolt/password/edit.blade.php

+@extends('laravolt::users.edit', ['tab' => 'password'])
+
+@section('content-user-edit')
+
+    <h4>@lang('laravolt::label.reset_password_manual')</h4>
+    <p>@lang('laravolt::message.reset_password_manual_intro')</p>
+    <form action="{{ route('epicentrum::password.reset', [$user['id']]) }}" method="POST">
+    {{ csrf_field() }}
+    <x-volt-button>@lang('laravolt::action.send_reset_password_link')</x-volt-button>
+    </form>
+
+    <div class="ui divider"></div>
+
+    <h4>@lang('laravolt::label.reset_password_automatic')</h4>
+    <p>@lang('laravolt::message.reset_password_automatic_intro')</p>
+    {!! Form::open()->post()->action(route('epicentrum::password.generate', $user['id'])) !!}
+    {{ csrf_field() }}
+    <div class="field">
+        <div class="ui checkbox">
+            <input type="checkbox" name="must_change_password" {{ request()->old('must_change_password')?'checked':'' }}>
+            <label>@lang('laravolt::users.change_password_on_first_login')</label>
+        </div>
+    </div>
+    <x-volt-button>@lang('laravolt::action.send_new_password')</x-volt-button>
+    {!! Form::close() !!}
+@endsection

resources/views/vendor/laravolt/permissions/edit.blade.php

+<x-volt-app :title="__('laravolt::label.permissions')">
+
+    <x-volt-panel title="Atur Deskripsi Hak Akses">
+        <div class="ui icon message compact">
+            <i class="lightbulb outline icon"></i>
+            <div class="content">
+                <div class="header">
+                    Tips
+                </div>
+                <p>
+                    Memberikan deskripsi yang jelas akan membantu admin aplikasi ketika melakukan pengaturan hak akses.
+                    <br>
+                    Contoh: <strong>laravolt::manage-user</strong> bisa diperjelas deskripsinya menjadi <strong>Menambah, mengedit, dan menghapus pengguna</strong>.
+                </p>
+            </div>
+        </div>
+        {!! form()->open(route('epicentrum::permissions.update'))->put() !!}
+
+        {!! Suitable::source($permissions)->columns([
+            \Laravolt\Suitable\Columns\Numbering::make('No')->setHeaderAttributes(['width' => '50px']),
+            \Laravolt\Suitable\Columns\Text::make('name', __('laravolt::permissions.name'))
+                ->setHeaderAttributes(['width' => '250px']),
+            \Laravolt\Suitable\Columns\Raw::make(function($item) {
+                return Form::textarea('permission['.$item->getKey().']')->value($item->description)->rows(2);
+            }, __('laravolt::permissions.description'))
+        ])->render() !!}
+
+        {!! form()->submit(__('laravolt::action.save')) !!}
+
+        {!! form()->close() !!}
+
+    </x-volt-panel>
+
+</x-volt-app>

resources/views/vendor/laravolt/platform/check.blade.php

+<x-volt-app title="Platform Check">
+    <div class="ui container">
+        <x-volt-panel title="Form Submission Check">
+            {!! form()->post(route('platform::dump'))->multipart() !!}
+            {!! form()->uploader('file')->ajax(false)->label('Upload File')->hint('Max file upload detected from php.ini: ' . \Laravolt\platform_max_file_upload(true)) !!}
+            {!! form()->uploader('files')->ajax(false)->limit(9)->label('Multiple Upload File')->hint('Max file upload detected from php.ini: ' . \Laravolt\platform_max_file_upload(true)) !!}
+            {!! form()->redactor('rich_content')->label('Rich Content')->hint('Beberapa web application firewall melarang pengiriman tag HTML atau script JS via form.') !!}
+            {!! form()->textarea('long_content')->label('Long Content')->hint('Beberapa web application firewall membatasi jumlah byte yang bisa dikirim ketika submit form.') !!}
+            {!! form()->submit('Test Submit Form') !!}
+            {!! form()->close() !!}
+        </x-volt-panel>
+    </div>
+</x-volt-app>

resources/views/vendor/laravolt/playground/article.blade.php

+@extends('laravolt::layouts.app')
+
+@section('content')
+
+    {!! form()->open(route('platform::dump')) !!}
+    {!! form()->dropdown('foo', ['a' => 'foobar', 'b' => 'foobaz'])->multiple()->addClass('tag') !!}
+    {!! form()->submit('Dump') !!}
+    {!! form()->text('bar') !!}
+    {!! form()->close() !!}
+    <x-volt-titlebar title="Article Editor"></x-volt-titlebar>
+
+
+
+@endsection
+
+@push('script')
+    <script>
+
+    </script>
+@endpush

resources/views/vendor/laravolt/playground/components/button.blade.php

+<x-volt-panel title="Button">
+    <x-volt-button label="Primary Button"></x-volt-button>
+    <x-volt-button label="Secondary Button" class="secondary"></x-volt-button>
+    <x-volt-button label="Basic Button" class="basic"></x-volt-button>
+
+    <div class="ui divider section"></div>
+
+    <div class="ui buttons">
+        <x-volt-button label="Primary Button" class="primary"></x-volt-button>
+        <x-volt-button label="Basic Button" class="basic"></x-volt-button>
+    </div>
+
+    <div class="ui divider section"></div>
+
+    <div class="ui horizontal list">
+        @foreach(config('laravolt.ui.colors') as $color => $hex)
+            <div class="item">
+                <x-volt-button class="{{ $color }}">{{ $color }}</x-volt-button>
+            </div>
+        @endforeach
+    </div>
+    <div class="ui horizontal list">
+        @foreach(config('laravolt.ui.colors') as $color => $hex)
+            <div class="item">
+                <x-volt-button class="{{ $color }} secondary">{{ $color }}</x-volt-button>
+            </div>
+        @endforeach
+    </div>
+    <div class="ui horizontal list">
+        @foreach(config('laravolt.ui.colors') as $color => $hex)
+            <div class="item">
+                <x-volt-button class="{{ $color }} basic">{{ $color }}</x-volt-button>
+            </div>
+        @endforeach
+    </div>
+</x-volt-panel>

resources/views/vendor/laravolt/playground/components/card.blade.php

+<div class="ui  container p-y-2">
+    <h2 class="ui header">
+        Card
+        <div class="sub header">
+            Card adalah representasi khusus panel yang biasanya disajikan dalam bentuk grid.
+            Card dalam satu row dijamin memiliki height yang sama.
+        </div>
+    </h2>
+</div>
+
+<x-volt-cards>
+    <x-volt-card
+            meta.before="<i class='icon coins yellow'></i> 100 poin"
+            title="Increase confidence with TrustPilot reviews"
+            content="Many people also have their own barometers for what makes a cute dog."
+            url="#"
+    >
+        <x-slot name="body">
+            <div class="content">
+                <div class="description">
+                    <x-volt-label label="foo" color="theme solid"></x-volt-label>
+                    <x-volt-label label="bar" color="theme secondary"></x-volt-label>
+                </div>
+            </div>
+        </x-slot>
+        <x-volt-card-footer left='<i class="icon check"></i> 121 votes' right="right" />
+    </x-volt-card>
+    <x-volt-card
+            meta.before="<i class='icon coins yellow'></i> 100 poin"
+            title="Increase confidence with TrustPilot reviews"
+            content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores atque culpa distinctio facilis minima neque quas. Consequatur delectus distinctio ducimus expedita minus mollitia odio officia pariatur quod, totam. Cumque, provident."
+    >
+        <x-volt-card-footer left='<i class="icon check"></i> 121 votes' right="right" />
+    </x-volt-card>
+    <x-volt-card
+            meta.before="<i class='icon coins yellow'></i> 100 poin"
+            title="Increase confidence with TrustPilot reviews"
+            content="Many people also have their own barometers for what makes a cute dog."
+    >
+        <x-volt-card-footer left='<i class="icon check"></i> 121 votes' right="right" />
+    </x-volt-card>
+</x-volt-cards>
+

resources/views/vendor/laravolt/playground/components/definition.blade.php

+<div class="ui grid equal width">
+    <div class="column">
+        <x-volt-panel title="Data Definition">
+            <table class="ui table definition">
+                <caption>Profil</caption>
+                <tbody>
+                <tr><td>Nama</td><td>Bayu Hendra</td></tr>
+                <tr><td>Posisi</td><td>Programmer</td></tr>
+                <tr><td>Lokasi</td><td>Indonesia</td></tr>
+                <tr><td>Bio</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ipsum nisi placeat possimus tenetur. Ad dicta dolores ducimus natus nihil officiis repellat ullam! Facere laboriosam necessitatibus pariatur quae qui rem!</td></tr>
+                </tbody>
+            </table>
+
+            <table class="ui table definition">
+                <caption>Profil</caption>
+                <tbody>
+                <tr><td>Nama</td><td>Bayu Hendra</td></tr>
+                <tr><td>Posisi</td><td>Programmer</td></tr>
+                <tr><td>Lokasi</td><td>Indonesia</td></tr>
+                <tr><td>Bio</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ipsum nisi placeat possimus tenetur. Ad dicta dolores ducimus natus nihil officiis repellat ullam! Facere laboriosam necessitatibus pariatur quae qui rem!</td></tr>
+                </tbody>
+            </table>
+        </x-volt-panel>
+    </div>
+</div>

resources/views/vendor/laravolt/playground/components/form.blade.php

+<x-volt-panel title="Form Fields">
+    {!! form()->open(route('platform::dump'))->multipart() !!}
+    {!! form()->text('text')->label('Text') !!}
+    {!! form()->email('email')->label('Email') !!}
+    {!! form()->number('number')->label('Number') !!}
+    {!! form()->password('password')->label('Password') !!}
+    {!! form()->color('color')->label('Color') !!}
+    {!! form()->time('time')->label('Time') !!}
+    {!! form()->date('date')->label('Date') !!}
+    {!! form()->datepicker('datepicker')->label('Datepicker') !!}
+    {!! form()->rupiah('rupiah1')->label('Rupiah') !!}
+    {!! form()->uploader('avatar')->label('Single File Upload') !!}
+    {!! form()->uploader('attachments')->limit(10)->label('Multiple File Upload') !!}
+    {!! form()->uploader('attachments_non_ajax')->ajax(false)->limit(10)->label('Multiple File Upload Wihout Ajax') !!}
+    <h3 class="ui divider horizontal section">Chained Dropdown</h3>
+    <p class="ui message">Silakan pilih salah satu user, makan dropdown kedua akan otomatis ter-update dengan
+        menampilkan daftar user yang berhubungan</p>
+    {!! form()->dropdownDB('user1', 'select id, email as name from users')->label('User') !!}
+    {!! form()->dropdownDB('user2', 'select id, email as name from users where id = %s')->label('Similar User')->dependency('user1') !!}
+    <h3 class="ui divider horizontal section">Dropdown With Remove Content</h3>
+    {!! form()->dropdownDB('user3', 'select id, email as name from users where email like "%%%s%%" limit 10')->prependOption(2, 'Foo')->ajax()->label('Search User') !!}
+    {!! form()->coordinate('koordinat')->label('Koordinat') !!}
+    {!! form()->redactor('redactor')->label('WYSIWYG (Redactor)') !!}
+    {!! form()->submit('Submit') !!}
+    {!! form()->close() !!}
+</x-volt-panel>
+<x-volt-panel title="Field Hints">
+    {!! form()->get()->horizontal() !!}
+    {!! form()->text('field1')->label('Username')->hint('Minimal 6 karakter.')->hint('Hanya boleh huruf dan angka.') !!}
+    {!! form()->password('password')->label('Password')->hint('Minimal 8 karakter.')->hint('Harus mengandung huruf, angka, dan karakter aneh.') !!}
+    {!! form()->close() !!}
+</x-volt-panel>
+
+<div class="ui grid equal width">
+    <div class="column">
+        <x-volt-panel title="Horizontal Form">
+            {!! form()->get()->horizontal() !!}
+            <h3 class="ui horizontal divider section">Basic Info</h3>
+            {!! form()->text('nama')->label('Nama') !!}
+            {!! form()->dropdown('lokasi', ['Indonesia', 'Malaysia'])->label('Lokasi') !!}
+            <h3 class="ui horizontal divider section">Localization</h3>
+            {!! form()->dropdown('language', ['Indonesia', 'Malaysia'])->label('Language') !!}
+            {!! form()->dropdown('timezone', ['Indonesia', 'Malaysia'])->label('Timezone') !!}
+            {!! form()->action(form()->submit('Simpan')) !!}
+            {!! form()->close() !!}
+        </x-volt-panel>
+    </div>
+    <div class="column">
+        <x-volt-panel title="Vertical Form">
+            {!! form()->get() !!}
+            <h3 class="ui horizontal divider section">Basic Info</h3>
+            {!! form()->text('nama')->label('Nama') !!}
+            {!! form()->dropdown('lokasi', ['Indonesia', 'Malaysia'])->label('Lokasi') !!}
+            <h3 class="ui horizontal divider section">Localization</h3>
+            {!! form()->dropdown('language', ['Indonesia', 'Malaysia'])->label('Language') !!}
+            {!! form()->dropdown('timezone', ['Indonesia', 'Malaysia'])->label('Timezone') !!}
+            {!! form()->submit('Simpan') !!}
+            {!! form()->action(form()->close()) !!}
+        </x-volt-panel>
+    </div>
+</div>

resources/views/vendor/laravolt/playground/components/label.blade.php

+<x-volt-panel title="Label">
+    <div class="ui horizontal list">
+        @foreach(config('laravolt.ui.colors') as $color => $hex)
+            <div class="item">
+                <x-volt-label :color="'solid '.$color">{{ $color }}</x-volt-label>
+            </div>
+        @endforeach
+    </div>
+    <div class="ui horizontal list">
+        @foreach(config('laravolt.ui.colors') as $color => $hex)
+            <div class="item">
+                <x-volt-label :color="$color">{{ $color }}</x-volt-label>
+            </div>
+        @endforeach
+    </div>
+    <div class="ui horizontal list">
+        @foreach(config('laravolt.ui.colors') as $color => $hex)
+            <div class="item">
+                <x-volt-label :color="'basic '.$color">{{ $color }}</x-volt-label>
+            </div>
+        @endforeach
+    </div>
+    <div class="ui horizontal list">
+        @foreach(config('laravolt.ui.colors') as $color => $hex)
+            <div class="item">
+                <x-volt-label :color="'circular empty '.$color"></x-volt-label>
+            </div>
+        @endforeach
+    </div>
+    <div class="divider"></div>
+    <div class="ui horizontal list">
+        @foreach(config('laravolt.ui.colors') as $color => $hex)
+            <div class="item">
+                <x-volt-label :color="'circular empty basic '.$color"></x-volt-label>
+            </div>
+        @endforeach
+    </div>
+</x-volt-panel>

resources/views/vendor/laravolt/playground/components/media.blade.php

+<x-volt-panel title="Media Library">
+    <x-volt-media-library :collection="auth()->user()->getMedia()" :delete="true"/>
+</x-volt-panel>

resources/views/vendor/laravolt/playground/components/modal.blade.php

+<x-volt-panel title="Modal" style="height: 300px">
+    <div class="ui modal active">
+        <i class="close icon"></i>
+        <div class="header">
+            Profile Picture
+        </div>
+        <div class="content">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa deleniti, eum ex harum impedit iste iusto magnam magni nam nemo omnis perferendis quisquam quos sequi soluta totam vel voluptate, voluptatibus.
+        </div>
+        <div class="actions">
+            <x-volt-button class="secondary">Nope</x-volt-button>
+            <x-volt-button>Yep</x-volt-button>
+        </div>
+    </div>
+</x-volt-panel>

resources/views/vendor/laravolt/playground/components/panel.blade.php

+<h2 class="ui header m-b-2">
+    Panel
+    <div class="sub header">Semua konten yang merupakan satu kesatuan wajib dibungkus dalam sebuah panel</div>
+</h2>
+
+<div class="ui grid equal width">
+    <div class="column">
+        <x-volt-panel title="Panel">
+            <div class="ui placeholder">
+                <div class="image header">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
+                <div class="paragraph">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
+            </div>
+        </x-volt-panel>
+    </div>
+    <div class="column">
+        <x-volt-panel title="Panel With Icon" icon="rocket">
+            <div class="ui placeholder">
+                <div class="image header">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
+                <div class="paragraph">
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </div>
+            </div>
+        </x-volt-panel>
+    </div>
+    <div class="row">
+        <div class="column">
+            <x-volt-panel title="Panel With Footer">
+                <div class="ui placeholder">
+                    <div class="image header">
+                        <div class="line"></div>
+                        <div class="line"></div>
+                    </div>
+                    <div class="paragraph">
+                        <div class="line"></div>
+                        <div class="line"></div>
+                    </div>
+                </div>
+                <x-slot name="footer">
+                    Footer
+                </x-slot>
+            </x-volt-panel>
+        </div>
+        <div class="column">
+            <x-volt-panel title="Panel With Action">
+                <div class="ui placeholder">
+                    <div class="image header">
+                        <div class="line"></div>
+                        <div class="line"></div>
+                    </div>
+                    <div class="paragraph">
+                        <div class="line"></div>
+                        <div class="line"></div>
+                    </div>
+                </div>
+                <x-slot name="action">
+                    <x-volt-link-button url="#" icon="edit" class="mini">Edit</x-volt-link-button>
+                </x-slot>
+                <x-slot name="footer">
+                    Footer
+                </x-slot>
+            </x-volt-panel>
+        </div>
+
+    </div>
+</div>

resources/views/vendor/laravolt/playground/components/tab.blade.php

+<x-volt-panel title="Tab">
+    <x-volt-tab>
+        <x-volt-tab-content title="Another First" active>Another First</x-volt-tab-content>
+        <x-volt-tab-content title="Another Second">Another Second</x-volt-tab-content>
+    </x-volt-tab>
+    <x-volt-tab>
+        <x-volt-tab-content title="First" active>First</x-volt-tab-content>
+        <x-volt-tab-content title="Second">Second</x-volt-tab-content>
+    </x-volt-tab>
+</x-volt-panel>

resources/views/vendor/laravolt/playground/components/table.blade.php

+{!! \Laravolt\Epicentrum\Table\UserTable::make()->title('Tabel')->render() !!}

resources/views/vendor/laravolt/playground/components/typography.blade.php

+<x-volt-panel title="Typography">
+    <h1 class="ui header">Heading 1</h1>
+    <h2 class="ui header">Heading 2</h2>
+    <h3 class="ui header">Heading 3</h3>
+    <h4 class="ui header">Heading 4</h4>
+    <h5 class="ui header">Heading 5</h5>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, doloribus fugit inventore quaerat
+        quas quis ratione saepe sint totam. Distinctio laborum praesentium sit tempore voluptatem. Aspernatur odio
+        provident repellat voluptate.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, doloribus fugit inventore quaerat
+        quas quis ratione saepe sint totam. Distinctio laborum praesentium sit tempore voluptatem. Aspernatur odio
+        provident repellat voluptate.</p>
+
+    <div class="ui divider section"></div>
+
+    <div class="ui container text">
+        <h1 class="ui header">Text Container</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corporis cumque distinctio dolore
+            ea enim et expedita in nobis nulla odit possimus quae quam quas quos reiciendis tempore temporibus,
+            veritatis!</p>
+    </div>
+
+    <div class="ui divider section"></div>
+    <div class="ui right floated horizontal list" themed>
+        <div class="disabled item" href="#">© GitHub, Inc.</div>
+        <a class="item" href="#">Terms</a>
+        <a class="item" href="#">Privacy</a>
+        <a class="item" href="#">Contact</a>
+    </div>
+    <div class="ui horizontal list">
+        <a class="item" href="#">About Us</a>
+        <a class="item" href="#">Jobs</a>
+    </div>
+
+</x-volt-panel>

resources/views/vendor/laravolt/playground/form.blade.php

+<x-volt-app title="Kitchen Sink">
+
+    @include('laravolt::playground.components.form')
+
+</x-volt-app>

resources/views/vendor/laravolt/playground/ui.blade.php

+<x-volt-app title="Kitchen Sink">
+
+    @include('laravolt::playground.components.panel')
+    <div class="ui divider hidden"></div>
+    @include('laravolt::playground.components.card')
+    <div class="ui divider hidden"></div>
+    @include('laravolt::playground.components.modal')
+    <div class="ui divider hidden"></div>
+    @include('laravolt::playground.components.tab')
+    <div class="ui divider hidden"></div>
+    @include('laravolt::playground.components.definition')
+
+    <div class="ui divider hidden"></div>
+
+    @include('laravolt::playground.components.table')
+    <div class="ui divider hidden"></div>
+    @include('laravolt::playground.components.typography')
+    <div class="ui divider hidden"></div>
+    @include('laravolt::playground.components.button')
+    <div class="ui divider hidden"></div>
+    @include('laravolt::playground.components.label')
+    <div class="ui divider hidden"></div>
+    @include('laravolt::playground.components.media')
+
+</x-volt-app>

resources/views/vendor/laravolt/quick-switcher/modal.blade.php

+<div class="ui tiny basic modal" data-role="quick-switcher-modal">
+    <div class="content">
+        <select class="fluid search ui big" data-role="quick-switcher-dropdown">
+            <option value="">@lang('Type to find an action')</option>
+        </select>
+    </div>
+</div>
+
+@push('script')
+    <script>
+    </script>
+@endpush

resources/views/vendor/laravolt/quick-switcher/sidebar.blade.php

+<div class="ui attached vertical menu fluid" data-role="quick-menu">
+    <div class="item">
+        <div class="ui icon input">
+            <input type="text" placeholder="" data-role="quick-menu-searchbox">
+            <i class="search icon"></i>
+        </div>
+    </div>
+    <div class="items ui accordion sidebar__accordion"></div>
+</div>
+
+<style>
+    [data-role="quick-menu"] .ui.items:empty {
+        margin: 0;
+    }
+</style>

resources/views/vendor/laravolt/role/edit.blade.php

+@extends('epicentrum::edit', ['tab' => 'role'])
+
+@section('content-user-edit')
+    {!! Form::open()->put()->action(route('epicentrum::role.update', $user['id'])) !!}
+
+    <div class="grouped fields">
+        <label>Role</label>
+        @foreach($roles as $role)
+        <div class="field">
+            <div class="ui checkbox {{ $multipleRole?'':'radio' }}">
+                <input type="{{ $multipleRole?'checkbox':'radio' }}" name="roles[]" value="{{ $role->id }}" {{ ($user->hasRole($role))?'checked=checked':'' }}>
+                <label>{{ $role->name }}</label>
+            </div>
+        </div>
+        @endforeach
+    </div>
+
+    <div class="ui divider hidden"></div>
+    <button class="ui button primary" type="submit" name="submit" value="1">@lang('laravolt::action.save')</button>
+    <a href="{{ route('epicentrum::users.index') }}" class="ui button">@lang('laravolt::action.cancel')</a>
+    {!! Form::close() !!}
+@endsection

resources/views/vendor/laravolt/roles/create.blade.php

+<x-volt-app :title="__('laravolt::label.roles')">
+
+    <x-slot name="actions">
+        <x-volt-backlink url="{{ route('epicentrum::roles.index') }}"></x-volt-backlink>
+    </x-slot>
+
+    <x-volt-panel title="{{ __('laravolt::label.add_role') }}" icon="user-astronaut">
+        {!! Form::open()->post()->action(route('epicentrum::roles.store')) !!}
+        {!! Form::text('name', old('name'))->label(trans('laravolt::roles.name'))->required() !!}
+
+        <table class="ui table">
+            <thead>
+            <tr>
+                <th>
+                    <div class="ui checkbox" data-toggle="checkall"
+                         data-selector=".checkbox[data-type='check-all-child']">
+                        <input type="checkbox">
+                        <label><strong>@lang('laravolt::label.permissions')</strong></label>
+                    </div>
+                </th>
+                <th>@lang('laravolt::permissions.description')</th>
+            </tr>
+            </thead>
+            <tbody>
+            @foreach($permissions as $permission)
+                <tr>
+                    <td style="width: 300px">
+                        <div class="ui checkbox" data-type="check-all-child">
+                            <input type="checkbox" name="permissions[]"
+                                   value="{{ $permission->id }}" {{ (false)?'checked=checked':'' }}>
+                            <label>{{ $permission->name }}</label>
+                        </div>
+                    </td>
+                    <td>{{ $permission->description }}</td>
+                </tr>
+            @endforeach
+            </tbody>
+        </table>
+
+        <div class="ui divider hidden"></div>
+
+        <div class="field action">
+            <x-volt-button>@lang('laravolt::action.save')</x-volt-button>
+            <x-volt-link-button
+                    url="{{ route('epicentrum::roles.index') }}">@lang('laravolt::action.cancel')
+            </x-volt-link-button>
+        </div>
+
+        {!! Form::close() !!}
+    </x-volt-panel>
+
+</x-volt-app>

resources/views/vendor/laravolt/roles/edit.blade.php

+<x-volt-app :title="__('laravolt::label.roles')">
+
+    <x-slot name="actions">
+        <x-volt-backlink url="{{ route('epicentrum::roles.index') }}"></x-volt-backlink>
+    </x-slot>
+
+    <x-volt-panel title="{{ __('laravolt::label.edit_role') }}" icon="user-astronaut">
+        {!! Form::open()->put()->action(route('epicentrum::roles.update', $role['id'])) !!}
+        <div class="field required">
+            {!! Form::text('name', old('name', $role['name']))->label(trans('laravolt::roles.name')) !!}
+        </div>
+
+        <table class="ui table padded">
+            <thead>
+            <tr>
+                <th>
+                    <div class="ui checkbox" data-toggle="checkall"
+                         data-selector=".checkbox[data-type='check-all-child']">
+                        <input type="checkbox">
+                        <label>@lang('laravolt::label.permissions')</label>
+                        <input type="hidden" name="permissions[]" value="0">
+                    </div>
+                </th>
+            </tr>
+            </thead>
+            <tbody>
+
+            @foreach($permissions as $permission)
+                <tr>
+                    <td>
+                        <div class="ui checkbox" data-type="check-all-child">
+                            <input type="checkbox" name="permissions[]"
+                                   value="{{ $permission->id }}" {{ (in_array($permission->id, $assignedPermissions))?'checked=checked':'' }}>
+                            <label>
+                                <h5 class="m-y-0 m-l-1">{{ $permission->name }}</h5>
+                                <p class="m-l-1">
+                                    {{ $permission->description ?? "No description" }}
+                                </p>
+                            </label>
+                        </div>
+                    </td>
+                </tr>
+            @endforeach
+            </tbody>
+        </table>
+
+        <div class="actions">
+            <x-volt-button>@lang('laravolt::action.save')</x-volt-button>
+            <x-volt-link-button url="{{ route('epicentrum::roles.index') }}">
+                @lang('laravolt::action.cancel')
+            </x-volt-link-button>
+        </div>
+
+        {!! Form::close() !!}
+    </x-volt-panel>
+
+    <div class="ui divider hidden"></div>
+
+    <x-volt-panel title="{{ __('laravolt::label.delete_role') }}" icon="exclamation-triangle" icon-class="text-red-500">
+        <p>@lang('laravolt::message.delete_role_intro', ['count' => $role->users->count()])</p>
+
+        {!! Form::open()->delete()->action(route('epicentrum::roles.destroy', $role['id'])) !!}
+        <div class="actions">
+            <button class="ui button basic red" type="submit" name="submit" value="1"
+                    onclick="return confirm('@lang('laravolt::message.role_deletion_confirmation')')">@lang('laravolt::action.delete')
+            </button>
+        </div>
+        {!! Form::close() !!}
+    </x-volt-panel>
+
+</x-volt-app>

resources/views/vendor/laravolt/roles/index.blade.php

+<x-volt-app :title="__('laravolt::label.roles')">
+
+    <x-slot name="actions">
+        <x-volt-link-button
+                :url="route('epicentrum::roles.create')"
+                icon="plus"
+                :label="__('laravolt::action.add')"/>
+    </x-slot>
+
+    <div class="ui grid">
+        <div class="column sixteen wide">
+            <div class="ui cards three doubling">
+                @foreach($roles as $role)
+                    <a href="{{ route('epicentrum::roles.edit', $role['id']) }}" class="ui card">
+                        <div class="content">
+                            <h3 class="header link">{{ $role['name'] }}</h3>
+                        </div>
+                        <div class="extra content">
+                            <i class="icon users"></i>{{ $role->users_count }}
+                            <span class="right floated">
+                                <i class="icon options"></i> {{ $role->permissions_count }}</span>
+                        </div>
+                    </a>
+                @endforeach
+            </div>
+        </div>
+    </div>
+
+</x-volt-app>

resources/views/vendor/laravolt/settings/edit.blade.php

+<x-volt-app :title="__('Settings')">
+    <x-volt-panel title="Global Application Settings">
+        {!! form()->put(route('platform::settings.update'))->horizontal() !!}
+            {!! form()->make(config('laravolt.platform.settings'))->bindValues($config)->render() !!}
+
+            {!! form()->action(form()->submit(__('Simpan'))) !!}
+        {!! form()->close() !!}
+    </x-volt-panel>
+</x-volt-app>

resources/views/vendor/laravolt/ui-component/charts/chart.blade.php

+<x-volt-panel :title="$this->title()">
+    <div id="{{ $this->key }}"></div>
+</x-volt-panel>
+
+@push('script')
+    @once
+        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+    @endonce
+    <script>
+        (new ApexCharts(document.querySelector("#{{ $this->key }}"), @json($this->options()))).render();
+    </script>
+@endpush

resources/views/vendor/laravolt/ui-component/charts/sparkline.blade.php

+<x-volt-panel contentClass="p-0" :title="$this->title()">
+    <div id="{{ $this->key }}"></div>
+</x-volt-panel>
+
+@push('script')
+    @once
+        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+    @endonce
+    <script>
+        (new ApexCharts(document.querySelector("#{{ $this->key }}"), @json($this->options()))).render();
+    </script>
+@endpush

resources/views/vendor/laravolt/ui-component/modal/modal-bag.blade.php

+<div
+        class="ui page dimmer modals volt-modal-dimmer"
+        :class="{ 'transition visible fade in' : loading && (activeModal === null), 'active' : show }"
+        x-data="LivewireModal()"
+        x-on:keydown.escape.window="close()"
+>
+    <div x-show="loading" class="ui elastic loader {{ config('laravolt.ui.color') }}"></div>
+
+    @foreach($modals as $id => $modal)
+        @livewire($modals[$activeModal]['name'], ['key' => $id], key($id))
+    @endforeach
+</div>

resources/views/vendor/laravolt/ui-component/shared/searchbox.blade.php

+<form method="GET" action="" class="ui form" >
+    <div class="ui left icon input">
+        <i class="search icon" aria-hidden="true"></i>
+        <input
+            type="text"
+            class="prompt"
+            name="{{ $searchName }}"
+            value="{{ request($searchName) }}"
+            placeholder="{{ $this->searchPlaceholder ?? __('laravolt::action.search') }}"
+            wire:model.debounce.{{ $searchDebounce }}ms="search"
+        >
+    </div>
+</form>

resources/views/vendor/laravolt/ui-component/statistic.blade.php

+<x-volt-panel :title="$this->title()">
+    <div class="ui unstackable grid middle aligned">
+        @if($this->icon())
+            <div class="two wide column center aligned">
+                <div class="ui label {{ $this->color() }} massive">
+                    <x-volt-icon :name="$this->icon()"></x-volt-icon>
+                </div>
+            </div>
+        @endif
+        <div class="{{ $this->icon() ? 'fourteen' : '' }} wide column">
+            <div class="ui statistic small" style="width: 100%">
+                <div class="value">
+                    {{ $this->value() }}
+                </div>
+                <div class="label">
+                    <span class="ui {{ $this->color() }} text" style="font-size: .9em">
+                        {{ $this->label() }}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-volt-panel>

resources/views/vendor/laravolt/ui-component/table-view/container.blade.php

+<div data-role="suitable" class="ui segments panel x-suitable">
+    <div class="ui {{ config('laravolt.ui.color') }} progress swinging top attached" wire:loading.class="indeterminate">
+        <div class="bar"></div>
+    </div>
+
+    @if($this->filters() || $this->showSearchbox)
+        <div class="ui borderless unstackable menu attached" data-role="suitable-header">
+            <div class="menu">
+                @if($this->showSearchbox)
+                    <div class="item">
+                        @include('laravolt::ui-component.shared.searchbox')
+                    </div>
+                @endif
+            </div>
+            <div class="menu right">
+                <div class="item">
+                    @include('laravolt::ui-component.table-view.filter')
+                </div>
+            </div>
+        </div>
+    @endif
+
+    @include('laravolt::ui-component.table-view.table')
+
+    <footer class="ui bottom attached menu">
+        @if($data instanceof \Illuminate\Contracts\Pagination\Paginator)
+            <div class="item">
+                <small>{{ $this->summary() }}</small>
+            </div>
+
+            @if($showPerPage)
+                <div class="ui item p-0">
+                    <div class="ui dropdown item">
+                        <span class="text">{{ request('per_page', $data->perPage()) }}</span>
+                        <i class="dropdown icon" aria-hidden="true"></i>
+                        <div class="menu">
+                            @foreach($perPageOptions as $n)
+                                <div class="item" wire:click.prevent="changePerPage({{ $n }})">
+                                    {{ $n }}
+                                </div>
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+            @endif
+
+            {!! $data->appends(request()->input())->onEachSide(1)->links($paginationView) !!}
+        @endif
+    </footer>
+
+</div>

resources/views/vendor/laravolt/ui-component/table-view/empty.blade.php

+<tr>
+    <td colspan="{{ count($columns)+1 }}" class="p-0">
+        <div class="ui segment placeholder b-0 center aligned">
+            <div class="text-gray-400 text-xl">
+                {{ __('No results') }}
+            </div>
+        </div>
+    </td>
+</tr>

resources/views/vendor/laravolt/ui-component/table-view/filter.blade.php

+@if($this->filters())
+    <div data-role="suitable-filter">
+        <div class="ui basic button icon" data-role="suitable-filter-icon">
+            <i class="icon filter"></i>
+            <i class="icon angle down"></i>
+        </div>
+        <div class="ui popup p-0" style="min-width: 300px" wire:ignore.self>
+            <form class="ui form p-2" wire:submit.prevent>
+                @foreach($this->filters() as $filter)
+                    {!! $filter->render() !!}
+                @endforeach
+            </form>
+            <x-volt-button wire:click="resetFilters" type="reset" class="bottom basic fluid attached b-0"
+                           icon="times circle outline">
+                Clear Filter
+            </x-volt-button>
+        </div>
+    </div>
+
+    @once
+        @push('main')
+            <script>
+                $(function () {
+                    $('[data-role="suitable-filter-icon"]')
+                        .popup({
+                            inline: true,
+                            on: 'click',
+                            position: 'bottom right',
+                            lastResort: 'bottom left',
+                        })
+                    ;
+                    $('[data-role="suitable-filter"] button[type="reset"]')
+                        .on('click', function () {
+                            $('[data-role="suitable-filter"] form').form('clear');
+                            $('[data-role="suitable-filter"] .ui.dropdown').dropdown('set selected', '0');
+                        });
+                });
+            </script>
+        @endpush
+    @endonce
+@endif

resources/views/vendor/laravolt/ui-component/table-view/table.blade.php

+<table class="ui attached table unstackable responsive m-b-0" aria-label="table">
+    <thead>
+    <tr>
+        @foreach($columns as $column)
+            @if($column->getSortableColumn())
+                <th scope="col"
+                    style="cursor: pointer"
+                    wire:click.prevent="sortBy('{{ $column->getSortableColumn() }}')"
+                        {{ $column->headerAttributes(asHtml:true) }}>
+
+                    @if($column->getSortableColumn() === $sort)
+                        <i class="icon caret {{ $direction === 'asc' ? 'up' : 'down' }}"></i>
+                    @else
+                        <i class="icon sort"></i>
+                    @endif
+                    {!! $column->getHeader() !!}
+                </th>
+            @else
+                <th scope="col" {!! $column->headerAttributes(asHtml:true) !!}>
+                    {!! $column->getHeader() !!}
+                </th>
+            @endif
+
+        @endforeach
+    </tr>
+    </thead>
+    <tbody class="collection">
+    @forelse($data as $item)
+        @php($outerLoop = $loop)
+        <tr>
+            @foreach($columns as $column)
+                <td {!! $column->cellAttributes($item) !!}>{!! $column->cell($item, $data, $outerLoop) !!}</td>
+            @endforeach
+        </tr>
+    @empty
+        @include('laravolt::ui-component.table-view.empty')
+    @endforelse
+    </tbody>
+</table>

resources/views/vendor/laravolt/users/create.blade.php

+<x-volt-app :title="__('laravolt::menu.add_user')">
+
+    <x-slot name="actions">
+        <x-volt-backlink :url="route('epicentrum::users.index')"/>
+    </x-slot>
+
+    <x-volt-panel title="Form Tambah Pengguna" icon="user-plus">
+        {!! form()->open()->post()->action(route('epicentrum::users.store'))->horizontal() !!}
+        {!! form()->text('name')->label(trans('laravolt::users.name'))->required() !!}
+        {!! form()->text('email')->label(trans('laravolt::users.email'))->required() !!}
+        {!! form()->input('password')->appendButton(trans('laravolt::action.generate_password'), 'randomize')->label(trans('laravolt::users.password'))->required() !!}
+
+        @if($multipleRole)
+            {!! form()->checkboxGroup('roles', $roles)->label(trans('laravolt::users.roles')) !!}
+        @else
+            {!! form()->radioGroup('roles', $roles)->label(trans('laravolt::users.roles')) !!}
+        @endif
+
+        {!! form()->select('status', $statuses)->label(__('laravolt::users.status')) !!}
+        {!! form()->select('timezone', $timezones, config('app.timezone'))->label(__('laravolt::users.timezone')) !!}
+
+        <div class="ui divider section"></div>
+
+        <div class="field">
+
+            <label for="">Opsi Tambahan</label>
+            <div class="field">
+                {!! form()->checkbox('send_account_information', 1)->label(__('laravolt::users.send_account_information_via_email')) !!}
+                {!! form()->checkbox('must_change_password', 1)->label(__('laravolt::users.change_password_on_first_login')) !!}
+            </div>
+        </div>
+
+        <div class="ui divider section"></div>
+
+        {!! form()->action(form()->submit(__('laravolt::action.save')), form()->link(__('laravolt::action.cancel'), route('epicentrum::users.index'))) !!}
+        {!! form()->close() !!}
+
+    </x-volt-panel>
+
+    @push('body')
+        <script>
+            $(function () {
+                $('.randomize').on('click', function (e) {
+                    $(e.currentTarget).prev().val(Math.random().toString(36).substr(2, 8));
+                });
+            });
+        </script>
+    @endpush
+
+</x-volt-app>>
+
+

resources/views/vendor/laravolt/users/edit.blade.php

+<x-volt-app :title="__('laravolt::label.edit_user')">
+
+    <x-slot name="actions">
+        <x-volt-backlink :url="route('epicentrum::users.index')" />
+    </x-slot>
+
+    <x-volt-panel :title="$user->name">
+        <div class="ui tabular secondary pointing menu left attached">
+            <a class="item {{ ($tab == 'account')?'active':'' }}"
+               href="{{ route('epicentrum::account.edit', $user['id']) }}">@lang('laravolt::menu.account')</a>
+            <a class="item {{ ($tab == 'password')?'active':'' }}"
+               href="{{ route('epicentrum::password.edit', $user['id']) }}">@lang('laravolt::menu.password')</a>
+        </div>
+        <div class="ui basic segment bottom attached p-2 b-0" data-tab="first">
+            @yield('content-user-edit')
+        </div>
+    </x-volt-panel>
+
+</x-volt-app>

resources/views/vendor/laravolt/users/index.blade.php

+<x-volt-app :title="__('laravolt::label.users')">
+
+    <x-slot name="actions">
+        <x-volt-link-button
+                :url="route('epicentrum::users.create')"
+                icon="plus"
+                :label="__('laravolt::action.add')"/>
+    </x-slot>
+
+    @livewire('volt-user-table', ['headerTitle' => 'Pengguna Terdaftar'])
+</x-volt-app>

routes/web.php

@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\Home;
 use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\StudentController;
 
 /*
 |--------------------------------------------------------------------------
@@ -14,10 +15,16 @@
 |
 */
 
-Route::redirect('/', '/login');
+Route::redirect('/', 'auth/login');
+
+Route::middleware(['auth'])->group(function () {
+
+    Route::get('/dashboard', \App\Http\Controllers\DashboardController::class)->name('dashboard');
+
+    Route::resource('students', StudentController::class);
+});
+
 
-Route::middleware(['auth', 'verified'])->group(fn () => Route::get('/home', Home::class)->name('home'));
-Route::get('dashboard', \App\Http\Controllers\DashboardController::class)->name('dashboard');
 
 include __DIR__.'/auth.php';
 include __DIR__.'/my.php';