From e5439ac63f201623a1640ab7d2f066a25ba6c635 Mon Sep 17 00:00:00 2001
From: Ale Gallo <ale@arternative.it>
Date: Fri, 10 Nov 2023 16:39:54 +0100
Subject: [PATCH] Committing laravel (part 4)

committing blade templating files and components that might come in handy
---
 .../views/components/calendar/index.blade.php |   20 +
 .../dark-mode-switcher/index.blade.php        |   20 +
 .../components/donut-chart/index.blade.php    |   15 +
 .../horizontal-bar-chart/index.blade.php      |   15 +
 .../components/leaflet-map/index.blade.php    |    6 +
 .../components/line-chart/index.blade.php     |   15 +
 .../main-color-switcher/index.blade.php       |   28 +
 .../components/mobile-menu/index.blade.php    |  133 +++
 .../components/pie-chart/index.blade.php      |   15 +
 .../report-bar-chart-1/index.blade.php        |   15 +
 .../report-bar-chart/index.blade.php          |   15 +
 .../report-donut-chart-1/index.blade.php      |   15 +
 .../report-donut-chart-2/index.blade.php      |   15 +
 .../report-donut-chart/index.blade.php        |   15 +
 .../report-line-chart/index.blade.php         |   15 +
 .../report-pie-chart/index.blade.php          |   15 +
 .../simple-line-chart-1/index.blade.php       |   15 +
 .../simple-line-chart-2/index.blade.php       |   15 +
 .../simple-line-chart-3/index.blade.php       |   15 +
 .../simple-line-chart-4/index.blade.php       |   15 +
 .../simple-line-chart/index.blade.php         |   15 +
 .../stacked-bar-chart-1/index.blade.php       |   15 +
 .../stacked-bar-chart/index.blade.php         |   15 +
 .../views/components/top-bar/index.blade.php  |  261 ++++
 .../vertical-bar-chart/index.blade.php        |   15 +
 resources/views/layouts/base.blade.php        |   67 ++
 resources/views/layouts/side-menu.blade.php   |  157 +++
 resources/views/layouts/simple-menu.blade.php |  157 +++
 resources/views/layouts/top-menu.blade.php    |  128 ++
 resources/views/login/main.blade.php          |  140 +++
 .../pages/dashboard-overview-1.blade.php      | 1045 +++++++++++++++++
 31 files changed, 2447 insertions(+)
 create mode 100644 resources/views/components/calendar/index.blade.php
 create mode 100644 resources/views/components/dark-mode-switcher/index.blade.php
 create mode 100644 resources/views/components/donut-chart/index.blade.php
 create mode 100644 resources/views/components/horizontal-bar-chart/index.blade.php
 create mode 100644 resources/views/components/leaflet-map/index.blade.php
 create mode 100644 resources/views/components/line-chart/index.blade.php
 create mode 100644 resources/views/components/main-color-switcher/index.blade.php
 create mode 100644 resources/views/components/mobile-menu/index.blade.php
 create mode 100644 resources/views/components/pie-chart/index.blade.php
 create mode 100644 resources/views/components/report-bar-chart-1/index.blade.php
 create mode 100644 resources/views/components/report-bar-chart/index.blade.php
 create mode 100644 resources/views/components/report-donut-chart-1/index.blade.php
 create mode 100644 resources/views/components/report-donut-chart-2/index.blade.php
 create mode 100644 resources/views/components/report-donut-chart/index.blade.php
 create mode 100644 resources/views/components/report-line-chart/index.blade.php
 create mode 100644 resources/views/components/report-pie-chart/index.blade.php
 create mode 100644 resources/views/components/simple-line-chart-1/index.blade.php
 create mode 100644 resources/views/components/simple-line-chart-2/index.blade.php
 create mode 100644 resources/views/components/simple-line-chart-3/index.blade.php
 create mode 100644 resources/views/components/simple-line-chart-4/index.blade.php
 create mode 100644 resources/views/components/simple-line-chart/index.blade.php
 create mode 100644 resources/views/components/stacked-bar-chart-1/index.blade.php
 create mode 100644 resources/views/components/stacked-bar-chart/index.blade.php
 create mode 100644 resources/views/components/top-bar/index.blade.php
 create mode 100644 resources/views/components/vertical-bar-chart/index.blade.php
 create mode 100644 resources/views/layouts/base.blade.php
 create mode 100644 resources/views/layouts/side-menu.blade.php
 create mode 100644 resources/views/layouts/simple-menu.blade.php
 create mode 100644 resources/views/layouts/top-menu.blade.php
 create mode 100755 resources/views/login/main.blade.php
 create mode 100755 resources/views/pages/dashboard-overview-1.blade.php

diff --git a/resources/views/components/calendar/index.blade.php b/resources/views/components/calendar/index.blade.php
new file mode 100644
index 0000000..c1f167d
--- /dev/null
+++ b/resources/views/components/calendar/index.blade.php
@@ -0,0 +1,20 @@
+<div
+    data-tw-merge
+    {{ $attributes->class(['full-calendar'])->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+></div>
+
+@once
+    @push('vendors')
+        @vite('resources/js/vendor/calendar/index.js')
+        @vite('resources/js/vendor/calendar/plugins/interaction.js')
+        @vite('resources/js/vendor/calendar/plugins/day-grid.js')
+        @vite('resources/js/vendor/calendar/plugins/time-grid.js')
+        @vite('resources/js/vendor/calendar/plugins/list.js')
+    @endpush
+@endonce
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/calendar/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/dark-mode-switcher/index.blade.php b/resources/views/components/dark-mode-switcher/index.blade.php
new file mode 100644
index 0000000..41dd09d
--- /dev/null
+++ b/resources/views/components/dark-mode-switcher/index.blade.php
@@ -0,0 +1,20 @@
+<!-- BEGIN: Dark Mode Switcher -->
+<div
+    class="dark-mode-switcher {{ $darkMode ? 'dark-mode-switcher--active' : '' }} box group fixed bottom-0 right-0 z-50 mb-10 mr-10 flex h-12 w-40 cursor-pointer items-center justify-center rounded-full border shadow-md"
+    data-url="{{ route('dark-mode-switcher') }}"
+>
+    <div class="mr-4 text-slate-600 dark:text-slate-200">Dark Mode</div>
+    <div @class([
+        'border w-[38px] h-[24px] p-px outline-none rounded-full relative cursor-pointer',
+        'before:content-[\'\'] before:w-[22px] before:h-[22px] before:transition-all before:duration-200 before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] before:absolute before:inset-y-0 before:my-auto before:rounded-full',
+        'group-[.dark-mode-switcher--active]:bg-primary group-[.dark-mode-switcher--active]:border-primary',
+        'group-[.dark-mode-switcher--active]:before:ml-[13px] group-[.dark-mode-switcher--active]:before:bg-white',
+    ])></div>
+</div>
+<!-- END: Dark Mode Switcher -->
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/dark-mode-switcher/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/donut-chart/index.blade.php b/resources/views/components/donut-chart/index.blade.php
new file mode 100644
index 0000000..a0d0e65
--- /dev/null
+++ b/resources/views/components/donut-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="donut-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/donut-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/horizontal-bar-chart/index.blade.php b/resources/views/components/horizontal-bar-chart/index.blade.php
new file mode 100644
index 0000000..902a92c
--- /dev/null
+++ b/resources/views/components/horizontal-bar-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="horizontal-bar-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/horizontal-bar-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/leaflet-map/index.blade.php b/resources/views/components/leaflet-map/index.blade.php
new file mode 100644
index 0000000..560bdda
--- /dev/null
+++ b/resources/views/components/leaflet-map/index.blade.php
@@ -0,0 +1,6 @@
+<x-base.leaflet-map-loader
+    lat="-6.2425342"
+    long="106.8626478"
+    apiKey="1e86fd5a7f60486a8e899411776f60d5"
+    {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+/>
diff --git a/resources/views/components/line-chart/index.blade.php b/resources/views/components/line-chart/index.blade.php
new file mode 100644
index 0000000..60dd976
--- /dev/null
+++ b/resources/views/components/line-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="line-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/line-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/main-color-switcher/index.blade.php b/resources/views/components/main-color-switcher/index.blade.php
new file mode 100644
index 0000000..21da415
--- /dev/null
+++ b/resources/views/components/main-color-switcher/index.blade.php
@@ -0,0 +1,28 @@
+<!-- BEGIN: Main Color Switcher -->
+<div
+    class="fixed bottom-0 right-0 z-50 flex items-center justify-center h-12 px-5 mb-10 border rounded-full shadow-md box mr-52">
+    <div class="hidden mr-4 text-slate-600 dark:text-slate-200 sm:block">
+        Color Scheme
+    </div>
+    <a
+        class="{{ $colorScheme == 'default' ? 'border-slate-300 dark:border-darkmode-800/80' : 'border-white dark:border-darkmode-600' }} mr-1 block h-8 w-8 cursor-pointer rounded-full border-4 bg-blue-800 hover:border-slate-200"
+        href="{{ route('color-scheme-switcher', ['color_scheme' => 'default']) }}"
+    ></a>
+    <a
+        class="{{ $colorScheme == 'theme-1' ? 'border-slate-300 dark:border-darkmode-800/80' : 'border-white dark:border-darkmode-600' }} mr-1 block h-8 w-8 cursor-pointer rounded-full border-4 bg-emerald-900 hover:border-slate-200"
+        href="{{ route('color-scheme-switcher', ['color_scheme' => 'theme-1']) }}"
+    ></a>
+    <a
+        class="{{ $colorScheme == 'theme-2' ? 'border-slate-300 dark:border-darkmode-800/80' : 'border-white dark:border-darkmode-600' }} mr-1 block h-8 w-8 cursor-pointer rounded-full border-4 bg-blue-900 hover:border-slate-200"
+        href="{{ route('color-scheme-switcher', ['color_scheme' => 'theme-2']) }}"
+    ></a>
+    <a
+        class="{{ $colorScheme == 'theme-3' ? 'border-slate-300 dark:border-darkmode-800/80' : 'border-white dark:border-darkmode-600' }} mr-1 block h-8 w-8 cursor-pointer rounded-full border-4 bg-cyan-900 hover:border-slate-200"
+        href="{{ route('color-scheme-switcher', ['color_scheme' => 'theme-3']) }}"
+    ></a>
+    <a
+        class="{{ $colorScheme == 'theme-4' ? 'border-slate-300 dark:border-darkmode-800/80' : 'border-white dark:border-darkmode-600' }} block h-8 w-8 cursor-pointer rounded-full border-4 bg-indigo-900 hover:border-slate-200"
+        href="{{ route('color-scheme-switcher', ['color_scheme' => 'theme-4']) }}"
+    ></a>
+</div>
+<!-- END: Main Color Switcher -->
diff --git a/resources/views/components/mobile-menu/index.blade.php b/resources/views/components/mobile-menu/index.blade.php
new file mode 100644
index 0000000..84da33c
--- /dev/null
+++ b/resources/views/components/mobile-menu/index.blade.php
@@ -0,0 +1,133 @@
+<!-- BEGIN: Mobile Menu -->
+<div @class([
+    'mobile-menu group w-full fixed bg-primary/90 z-[60] border-b border-white/[0.08] -mt-5 -mx-3 sm:-mx-8 mb-6 dark:bg-darkmode-800/90 md:hidden',
+    "before:content-[''] before:w-full before:h-screen before:z-10 before:fixed before:inset-x-0 before:bg-black/90 before:transition-opacity before:duration-200 before:ease-in-out",
+    'before:invisible before:opacity-0',
+    '[&.mobile-menu--active]:before:visible [&.mobile-menu--active]:before:opacity-100',
+])>
+    <div class="flex h-[70px] items-center px-3 sm:px-8">
+        <a
+            class="mr-auto flex"
+            href=""
+        >
+            <img
+                class="w-6"
+                src="{{ Vite::asset('resources/images/logo.svg') }}"
+                alt="Midone Tailwind HTML Admin Template"
+            />
+        </a>
+        <a
+            class="mobile-menu-toggler"
+            href="#"
+        >
+            <x-base.lucide
+                class="h-8 w-8 -rotate-90 transform text-white"
+                icon="BarChart2"
+            />
+        </a>
+    </div>
+    <div @class([
+        'scrollable h-screen z-20 top-0 left-0 w-[270px] -ml-[100%] bg-primary transition-all duration-300 ease-in-out dark:bg-darkmode-800',
+        '[&[data-simplebar]]:fixed [&_.simplebar-scrollbar]:before:bg-black/50',
+        'group-[.mobile-menu--active]:ml-0',
+    ])>
+        <a
+            href="#"
+            @class([
+                'fixed top-0 right-0 mt-4 mr-4 transition-opacity duration-200 ease-in-out',
+                'invisible opacity-0',
+                'group-[.mobile-menu--active]:visible group-[.mobile-menu--active]:opacity-100',
+            ])
+        >
+            <x-base.lucide
+                class="mobile-menu-toggler h-8 w-8 -rotate-90 transform text-white"
+                icon="XCircle"
+            />
+        </a>
+        <ul class="py-2">
+            <!-- BEGIN: First Child -->
+            @foreach ($sideMenu as $menuKey => $menu)
+                @if ($menu == 'divider')
+                    <li class="menu__divider my-6"></li>
+                @else
+                    <li>
+                        <a
+                            class="{{ $firstLevelActiveIndex == $menuKey ? 'menu menu--active' : 'menu' }}"
+                            href="{{ isset($menu['route_name']) ? route($menu['route_name'], $menu['params']) : 'javascript:;' }}"
+                        >
+                            <div class="menu__icon">
+                                <x-base.lucide icon="{{ $menu['icon'] }}" />
+                            </div>
+                            <div class="menu__title">
+                                {{ $menu['title'] }}
+                                @if (isset($menu['sub_menu']))
+                                    <div
+                                        class="menu__sub-icon {{ $firstLevelActiveIndex == $menuKey ? 'transform rotate-180' : '' }}">
+                                        <x-base.lucide icon="ChevronDown" />
+                                    </div>
+                                @endif
+                            </div>
+                        </a>
+                        @if (isset($menu['sub_menu']))
+                            <ul class="{{ $firstLevelActiveIndex == $menuKey ? 'menu__sub-open' : '' }}">
+                                @foreach ($menu['sub_menu'] as $subMenuKey => $subMenu)
+                                    <li>
+                                        <a
+                                            class="{{ $secondLevelActiveIndex == $subMenuKey ? 'menu menu--active' : 'menu' }}"
+                                            href="{{ isset($subMenu['route_name']) ? route($subMenu['route_name'], $subMenu['params']) : 'javascript:;' }}"
+                                        >
+                                            <div class="menu__icon">
+                                                <x-base.lucide icon="{{ $subMenu['icon'] }}" />
+                                            </div>
+                                            <div class="menu__title">
+                                                {{ $subMenu['title'] }}
+                                                @if (isset($subMenu['sub_menu']))
+                                                    <div
+                                                        class="menu__sub-icon {{ $secondLevelActiveIndex == $subMenuKey ? 'transform rotate-180' : '' }}">
+                                                        <x-base.lucide icon="ChevronDown" />
+                                                    </div>
+                                                @endif
+                                            </div>
+                                        </a>
+                                        @if (isset($subMenu['sub_menu']))
+                                            <ul
+                                                class="{{ $secondLevelActiveIndex == $subMenuKey ? 'menu__sub-open' : '' }}">
+                                                @foreach ($subMenu['sub_menu'] as $lastSubMenuKey => $lastSubMenu)
+                                                    <li>
+                                                        <a
+                                                            class="{{ $thirdLevelActiveIndex == $lastSubMenuKey ? 'menu menu--active' : 'menu' }}"
+                                                            href="{{ isset($lastSubMenu['route_name']) ? route($lastSubMenu['route_name'], $lastSubMenu['params']) : 'javascript:;' }}"
+                                                        >
+                                                            <div class="menu__icon">
+                                                                <x-base.lucide icon="{{ $lastSubMenu['icon'] }}" />
+                                                            </div>
+                                                            <div class="menu__title">{{ $lastSubMenu['title'] }}</div>
+                                                        </a>
+                                                    </li>
+                                                @endforeach
+                                            </ul>
+                                        @endif
+                                    </li>
+                                @endforeach
+                            </ul>
+                        @endif
+                    </li>
+                @endif
+            @endforeach
+            <!-- END: First Child -->
+        </ul>
+    </div>
+</div>
+<!-- END: Mobile Menu -->
+
+@once
+    @push('vendors')
+        @vite('resources/js/vendor/simplebar/index.js')
+    @endpush
+@endonce
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/mobile-menu/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/pie-chart/index.blade.php b/resources/views/components/pie-chart/index.blade.php
new file mode 100644
index 0000000..c927fe7
--- /dev/null
+++ b/resources/views/components/pie-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="pie-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/pie-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/report-bar-chart-1/index.blade.php b/resources/views/components/report-bar-chart-1/index.blade.php
new file mode 100644
index 0000000..b21df44
--- /dev/null
+++ b/resources/views/components/report-bar-chart-1/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="report-bar-chart-1"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/report-bar-chart-1/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/report-bar-chart/index.blade.php b/resources/views/components/report-bar-chart/index.blade.php
new file mode 100644
index 0000000..8737d72
--- /dev/null
+++ b/resources/views/components/report-bar-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="report-bar-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/report-bar-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/report-donut-chart-1/index.blade.php b/resources/views/components/report-donut-chart-1/index.blade.php
new file mode 100644
index 0000000..b54c22e
--- /dev/null
+++ b/resources/views/components/report-donut-chart-1/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="report-donut-chart-1"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/report-donut-chart-1/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/report-donut-chart-2/index.blade.php b/resources/views/components/report-donut-chart-2/index.blade.php
new file mode 100644
index 0000000..6ffd315
--- /dev/null
+++ b/resources/views/components/report-donut-chart-2/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="report-donut-chart-2"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/report-donut-chart-2/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/report-donut-chart/index.blade.php b/resources/views/components/report-donut-chart/index.blade.php
new file mode 100644
index 0000000..4325d60
--- /dev/null
+++ b/resources/views/components/report-donut-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        id="report-donut-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/report-donut-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/report-line-chart/index.blade.php b/resources/views/components/report-line-chart/index.blade.php
new file mode 100644
index 0000000..7563673
--- /dev/null
+++ b/resources/views/components/report-line-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        id="report-line-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/report-line-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/report-pie-chart/index.blade.php b/resources/views/components/report-pie-chart/index.blade.php
new file mode 100644
index 0000000..c3b8be0
--- /dev/null
+++ b/resources/views/components/report-pie-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        id="report-pie-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/report-pie-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/simple-line-chart-1/index.blade.php b/resources/views/components/simple-line-chart-1/index.blade.php
new file mode 100644
index 0000000..827b1e4
--- /dev/null
+++ b/resources/views/components/simple-line-chart-1/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="simple-line-chart-1"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/simple-line-chart-1/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/simple-line-chart-2/index.blade.php b/resources/views/components/simple-line-chart-2/index.blade.php
new file mode 100644
index 0000000..425b35c
--- /dev/null
+++ b/resources/views/components/simple-line-chart-2/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="simple-line-chart-2"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/simple-line-chart-2/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/simple-line-chart-3/index.blade.php b/resources/views/components/simple-line-chart-3/index.blade.php
new file mode 100644
index 0000000..3fbe216
--- /dev/null
+++ b/resources/views/components/simple-line-chart-3/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="simple-line-chart-3"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/simple-line-chart-3/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/simple-line-chart-4/index.blade.php b/resources/views/components/simple-line-chart-4/index.blade.php
new file mode 100644
index 0000000..3261b84
--- /dev/null
+++ b/resources/views/components/simple-line-chart-4/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="simple-line-chart-4"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/simple-line-chart-4/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/simple-line-chart/index.blade.php b/resources/views/components/simple-line-chart/index.blade.php
new file mode 100644
index 0000000..d267bb3
--- /dev/null
+++ b/resources/views/components/simple-line-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="simple-line-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/simple-line-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/stacked-bar-chart-1/index.blade.php b/resources/views/components/stacked-bar-chart-1/index.blade.php
new file mode 100644
index 0000000..1ef3848
--- /dev/null
+++ b/resources/views/components/stacked-bar-chart-1/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="stacked-bar-chart-1"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/stacked-bar-chart-1/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/stacked-bar-chart/index.blade.php b/resources/views/components/stacked-bar-chart/index.blade.php
new file mode 100644
index 0000000..01274b2
--- /dev/null
+++ b/resources/views/components/stacked-bar-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="stacked-bar-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/stacked-bar-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/top-bar/index.blade.php b/resources/views/components/top-bar/index.blade.php
new file mode 100644
index 0000000..3f9032a
--- /dev/null
+++ b/resources/views/components/top-bar/index.blade.php
@@ -0,0 +1,261 @@
+<!-- BEGIN: Top Bar -->
+<div
+    class="top-bar-boxed relative z-[51] -mx-3 mt-12 mb-12 h-[70px] border-b border-white/[0.08] px-3 sm:-mx-8 sm:px-8 md:-mt-5 md:pt-0">
+    <div class="flex h-full items-center">
+        <!-- BEGIN: Logo -->
+        <a
+            class="-intro-x hidden md:flex"
+            href=""
+        >
+            <img
+                class="w-6"
+                src="{{ Vite::asset('resources/images/logo.svg') }}"
+                alt="Icewall Tailwind HTML Admin Template"
+            />
+            <span class="ml-3 text-lg text-white"> Icewall </span>
+        </a>
+        <!-- END: Logo -->
+        <!-- BEGIN: Breadcrumb -->
+        <x-base.breadcrumb
+            class="-intro-x mr-auto h-full border-white/[0.08] md:ml-10 md:border-l md:pl-10"
+            light
+        >
+            <x-base.breadcrumb.link :index="0">Application</x-base.breadcrumb.link>
+            <x-base.breadcrumb.link
+                :index="1"
+                :active="true"
+            >
+                Dashboard
+            </x-base.breadcrumb.link>
+        </x-base.breadcrumb>
+        <!-- END: Breadcrumb -->
+        <!-- BEGIN: Search -->
+        <div class="intro-x relative mr-3 sm:mr-6">
+            <div class="search hidden sm:block">
+                <x-base.form-input
+                    class="w-56 rounded-full border-transparent bg-slate-200 pr-8 shadow-none transition-[width] duration-300 ease-in-out focus:w-72 focus:border-transparent dark:bg-darkmode-400/70"
+                    type="text"
+                    placeholder="Search..."
+                />
+                <x-base.lucide
+                    class="absolute inset-y-0 right-0 my-auto mr-3 h-5 w-5 text-slate-600 dark:text-slate-500"
+                    icon="Search"
+                />
+            </div>
+            <a
+                class="relative text-white/70 sm:hidden"
+                href=""
+            >
+                <x-base.lucide
+                    class="h-5 w-5 dark:text-slate-500"
+                    icon="Search"
+                />
+            </a>
+            <x-base.transition
+                class="search-result absolute right-0 z-10 mt-[3px] hidden"
+                selector=".show"
+                enter="transition-all ease-linear duration-150"
+                enterFrom="mt-5 invisible opacity-0 translate-y-1"
+                enterTo="mt-[3px] visible opacity-100 translate-y-0"
+                leave="transition-all ease-linear duration-150"
+                leaveFrom="mt-[3px] visible opacity-100 translate-y-0"
+                leaveTo="mt-5 invisible opacity-0 translate-y-1"
+            >
+                <div class="box w-[450px] p-5">
+                    <div class="mb-2 font-medium">Pages</div>
+                    <div class="mb-5">
+                        <a
+                            class="flex items-center"
+                            href=""
+                        >
+                            <div
+                                class="flex h-8 w-8 items-center justify-center rounded-full bg-success/20 text-success dark:bg-success/10">
+                                <x-base.lucide
+                                    class="h-4 w-4"
+                                    icon="Inbox"
+                                />
+                            </div>
+                            <div class="ml-3">Mail Settings</div>
+                        </a>
+                        <a
+                            class="mt-2 flex items-center"
+                            href=""
+                        >
+                            <div
+                                class="flex h-8 w-8 items-center justify-center rounded-full bg-pending/10 text-pending">
+                                <x-base.lucide
+                                    class="h-4 w-4"
+                                    icon="Users"
+                                />
+                            </div>
+                            <div class="ml-3">Users & Permissions</div>
+                        </a>
+                        <a
+                            class="mt-2 flex items-center"
+                            href=""
+                        >
+                            <div
+                                class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary/80 dark:bg-primary/20">
+                                <x-base.lucide
+                                    class="h-4 w-4"
+                                    icon="CreditCard"
+                                />
+                            </div>
+                            <div class="ml-3">Transactions Report</div>
+                        </a>
+                    </div>
+                    <div class="mb-2 font-medium">Users</div>
+                    <div class="mb-5">
+                        @foreach (array_slice($fakers, 0, 4) as $faker)
+                            <a
+                                class="mt-2 flex items-center"
+                                href=""
+                            >
+                                <div class="image-fit h-8 w-8">
+                                    <img
+                                        class="rounded-full"
+                                        src="{{ Vite::asset($faker['photos'][0]) }}"
+                                        alt="Midone Tailwind HTML Admin Template"
+                                    />
+                                </div>
+                                <div class="ml-3">{{ $faker['users'][0]['name'] }}</div>
+                                <div class="ml-auto w-48 truncate text-right text-xs text-slate-500">
+                                    {{ $faker['users'][0]['email'] }}
+                                </div>
+                            </a>
+                        @endforeach
+                    </div>
+                    <div class="mb-2 font-medium">Products</div>
+                    @foreach (array_slice($fakers, 0, 4) as $faker)
+                        <a
+                            class="mt-2 flex items-center"
+                            href=""
+                        >
+                            <div class="image-fit h-8 w-8">
+                                <img
+                                    class="rounded-full"
+                                    src="{{ Vite::asset($faker['images'][0]) }}"
+                                    alt="Midone Tailwind HTML Admin Template"
+                                />
+                            </div>
+                            <div class="ml-3">{{ $faker['products'][0]['name'] }}</div>
+                            <div class="ml-auto w-48 truncate text-right text-xs text-slate-500">
+                                {{ $faker['products'][0]['category'] }}
+                            </div>
+                        </a>
+                    @endforeach
+                </div>
+            </x-base.transition>
+        </div>
+        <!-- END: Search -->
+        <!-- BEGIN: Notifications -->
+        <x-base.popover class="intro-x mr-4 sm:mr-6">
+            <x-base.popover.button
+                class="relative block text-white/70 outline-none before:absolute before:top-[-2px] before:right-0 before:h-[8px] before:w-[8px] before:rounded-full before:bg-danger before:content-['']"
+            >
+                <x-base.lucide
+                    class="h-5 w-5 dark:text-slate-500"
+                    icon="Bell"
+                />
+            </x-base.popover.button>
+            <x-base.popover.panel class="mt-2 w-[280px] p-5 sm:w-[350px]">
+                <div class="mb-5 font-medium">Notifications</div>
+                @foreach (array_slice($fakers, 0, 5) as $fakerKey => $faker)
+                    <div @class([
+                        'cursor-pointer relative flex items-center',
+                        'mt-5' => $fakerKey,
+                    ])>
+                        <div class="image-fit relative mr-1 h-12 w-12 flex-none">
+                            <img
+                                class="rounded-full"
+                                src="{{ Vite::asset($faker['photos'][0]) }}"
+                                alt="Midone Tailwind HTML Admin Template"
+                            />
+                            <div
+                                class="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-success dark:border-darkmode-600">
+                            </div>
+                        </div>
+                        <div class="ml-2 overflow-hidden">
+                            <div class="flex items-center">
+                                <a
+                                    class="mr-5 truncate font-medium"
+                                    href=""
+                                >
+                                    {{ $faker['users'][0]['name'] }}
+                                </a>
+                                <div class="ml-auto whitespace-nowrap text-xs text-slate-400">
+                                    {{ $faker['times'][0] }}
+                                </div>
+                            </div>
+                            <div class="mt-0.5 w-full truncate text-slate-500">
+                                {{ $faker['news'][0]['short_content'] }}
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            </x-base.popover.panel>
+        </x-base.popover>
+        <!-- END: Notifications -->
+        <!-- BEGIN: Account Menu -->
+        <x-base.menu>
+            <x-base.menu.button
+                class="image-fit zoom-in intro-x block h-8 w-8 scale-110 overflow-hidden rounded-full shadow-lg"
+            >
+                <img
+                    src="{{ Vite::asset($faker['photos'][0]) }}"
+                    alt="Midone Tailwind HTML Admin Template"
+                />
+            </x-base.menu.button>
+            <x-base.menu.items
+                class="relative mt-px w-56 bg-primary/80 text-white before:absolute before:inset-0 before:z-[-1] before:block before:rounded-md before:bg-black"
+            >
+                <x-base.menu.header class="font-normal">
+                    <div class="font-medium">{{ $fakers[0]['users'][0]['name'] }}</div>
+                    <div class="mt-0.5 text-xs text-white/70 dark:text-slate-500">
+                        {{ $fakers[0]['jobs'][0] }}
+                    </div>
+                </x-base.menu.header>
+                <x-base.menu.divider class="bg-white/[0.08]" />
+                <x-base.menu.item class="hover:bg-white/5">
+                    <x-base.lucide
+                        class="mr-2 h-4 w-4"
+                        icon="User"
+                    /> Profile
+                </x-base.menu.item>
+                <x-base.menu.item class="hover:bg-white/5">
+                    <x-base.lucide
+                        class="mr-2 h-4 w-4"
+                        icon="Edit"
+                    /> Add Account
+                </x-base.menu.item>
+                <x-base.menu.item class="hover:bg-white/5">
+                    <x-base.lucide
+                        class="mr-2 h-4 w-4"
+                        icon="Lock"
+                    /> Reset Password
+                </x-base.menu.item>
+                <x-base.menu.item class="hover:bg-white/5">
+                    <x-base.lucide
+                        class="mr-2 h-4 w-4"
+                        icon="HelpCircle"
+                    /> Help
+                </x-base.menu.item>
+                <x-base.menu.divider class="bg-white/[0.08]" />
+                <x-base.menu.item class="hover:bg-white/5">
+                    <x-base.lucide
+                        class="mr-2 h-4 w-4"
+                        icon="ToggleRight"
+                    /> Logout
+                </x-base.menu.item>
+            </x-base.menu.items>
+        </x-base.menu>
+        <!-- END: Account Menu -->
+    </div>
+</div>
+<!-- END: Top Bar -->
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/top-bar/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/components/vertical-bar-chart/index.blade.php b/resources/views/components/vertical-bar-chart/index.blade.php
new file mode 100644
index 0000000..8484fd8
--- /dev/null
+++ b/resources/views/components/vertical-bar-chart/index.blade.php
@@ -0,0 +1,15 @@
+@props(['width' => 'w-auto', 'height' => 'h-auto'])
+
+<div class="{{ $width }} {{ $height }}">
+    <x-base.chart
+        class="vertical-bar-chart"
+        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
+    >
+    </x-base.chart>
+</div>
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/vertical-bar-chart/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
new file mode 100644
index 0000000..28c99bd
--- /dev/null
+++ b/resources/views/layouts/base.blade.php
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+Template Name: Icewall - HTML Admin Dashboard Template
+Author: Left4code
+Website: http://www.left4code.com/
+Contact: muhammadrizki@left4code.com
+Purchase: https://themeforest.net/user/left4code/portfolio
+Renew Support: https://themeforest.net/user/left4code/portfolio
+License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+-->
+<html
+    class="{{ $darkMode ? 'dark' : '' }}{{ $colorScheme != 'default' ? ' ' . $colorScheme : '' }}"
+    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+>
+<!-- BEGIN: Head -->
+
+<head>
+    <meta charset="utf-8">
+    <link
+        href="{{ Vite::asset('resources/images/logo.svg') }}"
+        rel="shortcut icon"
+    >
+    <meta
+        name="csrf-token"
+        content="{{ csrf_token() }}"
+    >
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1"
+    >
+    <meta
+        name="description"
+        content="Icewall admin is super flexible, powerful, clean & modern responsive tailwind admin template with unlimited possibilities."
+    >
+    <meta
+        name="keywords"
+        content="admin template, Icewall Admin Template, dashboard template, flat admin template, responsive admin template, web app"
+    >
+    <meta
+        name="author"
+        content="LEFT4CODE"
+    >
+
+    @yield('head')
+
+    <!-- BEGIN: CSS Assets-->
+    @vite('resources/css/app.css')
+    @stack('styles')
+    <!-- END: CSS Assets-->
+</head>
+<!-- END: Head -->
+
+<body>
+    @yield('content')
+
+    @vite('resources/js/app.js')
+
+    <!-- BEGIN: Vendor JS Assets-->
+    @stack('vendors')
+    <!-- END: Vendor JS Assets-->
+
+    <!-- BEGIN: Pages, layouts, components JS Assets-->
+    @stack('scripts')
+    <!-- END: Pages, layouts, components JS Assets-->
+</body>
+
+</html>
diff --git a/resources/views/layouts/side-menu.blade.php b/resources/views/layouts/side-menu.blade.php
new file mode 100644
index 0000000..f77042f
--- /dev/null
+++ b/resources/views/layouts/side-menu.blade.php
@@ -0,0 +1,157 @@
+@extends('../layouts/base')
+
+@section('head')
+    @yield('subhead')
+@endsection
+
+@section('content')
+    <div
+        class="pt-2 pb-7 before:absolute before:inset-0 before:bg-skew-pattern before:bg-fixed before:bg-no-repeat before:content-[''] dark:before:bg-skew-pattern-dark">
+        <x-dark-mode-switcher />
+        <x-main-color-switcher />
+        <x-mobile-menu />
+        <x-top-bar />
+        <div @class([
+            'relative',
+            "before:content-[''] before:w-[95%] before:z-[-1] before:rounded-[1.3rem] before:bg-white/10 before:h-full before:-mt-4 before:absolute before:mx-auto before:inset-x-0 before:dark:bg-darkmode-400/50",
+        
+            // Animation
+            'before:translate-y-[35px] before:opacity-0 before:animate-[0.4s_ease-in-out_0.1s_intro-wrapper] before:animate-fill-mode-forwards',
+        ])>
+            <div @class([
+                'translate-y-0 bg-primary flex rounded-[1.3rem] -mt-[7px] md:mt-0 dark:bg-darkmode-400',
+                'before:block before:absolute before:inset-0 before:bg-black/[0.15] before:rounded-[1.3rem] before:z-[-1]',
+            
+                // Animation
+                'animate-[0.4s_ease-in-out_0.2s_intro-wrapper] animate-fill-mode-forwards translate-y-[35px]',
+            ])>
+                <!-- BEGIN: Side Menu -->
+                <nav class="side-nav hidden w-[105px] overflow-x-hidden px-5 pt-8 pb-16 md:block xl:w-[250px]">
+                    <ul>
+                        @foreach ($sideMenu as $menuKey => $menu)
+                            @if ($menu == 'divider')
+                                <li @class([
+                                    'side-nav__divider my-6',
+                                
+                                    // Animation
+                                    'opacity-0 animate-[0.4s_ease-in-out_0.1s_intro-divider] animate-fill-mode-forwards animate-delay-' .
+                                    (array_search($menuKey, array_keys($sideMenu)) + 1) * 10,
+                                ])></li>
+                            @else
+                                <li>
+                                    <a
+                                        href="{{ isset($menu['route_name']) ? route($menu['route_name'], $menu['params']) : 'javascript:;' }}"
+                                        @class([
+                                            $firstLevelActiveIndex == $menuKey
+                                                ? 'side-menu side-menu--active'
+                                                : 'side-menu',
+                                        
+                                            // Animation
+                                            '[&:not(.side-menu--active)]:opacity-0 [&:not(.side-menu--active)]:translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-' .
+                                            (array_search($menuKey, array_keys($sideMenu)) + 1) * 10,
+                                        ])
+                                    >
+                                        <div class="side-menu__icon">
+                                            <x-base.lucide icon="{{ $menu['icon'] }}" />
+                                        </div>
+                                        <div class="side-menu__title">
+                                            {{ $menu['title'] }}
+                                            @if (isset($menu['sub_menu']))
+                                                <div
+                                                    class="side-menu__sub-icon {{ $firstLevelActiveIndex == $menuKey ? 'transform rotate-180' : '' }}">
+                                                    <x-base.lucide icon="ChevronDown" />
+                                                </div>
+                                            @endif
+                                        </div>
+                                    </a>
+                                    @if (isset($menu['sub_menu']))
+                                        <ul class="{{ $firstLevelActiveIndex == $menuKey ? 'side-menu__sub-open' : '' }}">
+                                            @foreach ($menu['sub_menu'] as $subMenuKey => $subMenu)
+                                                <li>
+                                                    <a
+                                                        href="{{ isset($subMenu['route_name']) ? route($subMenu['route_name'], $subMenu['params']) : 'javascript:;' }}"
+                                                        @class([
+                                                            $secondLevelActiveIndex == $subMenuKey
+                                                                ? 'side-menu side-menu--active'
+                                                                : 'side-menu',
+                                                        
+                                                            // Animation
+                                                            '[&:not(.side-menu--active)]:opacity-0 [&:not(.side-menu--active)]:translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-' .
+                                                            (array_search($subMenuKey, array_keys($menu['sub_menu'])) + 1) * 10,
+                                                        ])
+                                                    >
+                                                        <div class="side-menu__icon">
+                                                            <x-base.lucide icon="{{ $subMenu['icon'] }}" />
+                                                        </div>
+                                                        <div class="side-menu__title">
+                                                            {{ $subMenu['title'] }}
+                                                            @if (isset($subMenu['sub_menu']))
+                                                                <div
+                                                                    class="side-menu__sub-icon {{ $secondLevelActiveIndex == $subMenuKey ? 'transform rotate-180' : '' }}">
+                                                                    <x-base.lucide icon="ChevronDown" />
+                                                                </div>
+                                                            @endif
+                                                        </div>
+                                                    </a>
+                                                    @if (isset($subMenu['sub_menu']))
+                                                        <ul
+                                                            class="{{ $secondLevelActiveIndex == $subMenuKey ? 'side-menu__sub-open' : '' }}">
+                                                            @foreach ($subMenu['sub_menu'] as $lastSubMenuKey => $lastSubMenu)
+                                                                <li>
+                                                                    <a
+                                                                        href="{{ isset($lastSubMenu['route_name']) ? route($lastSubMenu['route_name'], $lastSubMenu['params']) : 'javascript:;' }}"
+                                                                        @class([
+                                                                            $thirdLevelActiveIndex == $lastSubMenuKey
+                                                                                ? 'side-menu side-menu--active'
+                                                                                : 'side-menu',
+                                                                        
+                                                                            // Animation
+                                                                            '[&:not(.side-menu--active)]:opacity-0 [&:not(.side-menu--active)]:translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-' .
+                                                                            (array_search($lastSubMenuKey, array_keys($subMenu['sub_menu'])) + 1) * 10,
+                                                                        ])
+                                                                    >
+                                                                        <div class="side-menu__icon">
+                                                                            <x-base.lucide
+                                                                                icon="{{ $lastSubMenu['icon'] }}"
+                                                                            />
+                                                                        </div>
+                                                                        <div class="side-menu__title">
+                                                                            {{ $lastSubMenu['title'] }}
+                                                                        </div>
+                                                                    </a>
+                                                                </li>
+                                                            @endforeach
+                                                        </ul>
+                                                    @endif
+                                                </li>
+                                            @endforeach
+                                        </ul>
+                                    @endif
+                                </li>
+                            @endif
+                        @endforeach
+                    </ul>
+                </nav>
+                <!-- END: Side Menu -->
+                <!-- BEGIN: Content -->
+                <div
+                    class="md:max-w-auto min-h-screen min-w-0 max-w-full flex-1 rounded-[1.3rem] bg-slate-100 px-4 pb-10 shadow-sm before:block before:h-px before:w-full before:content-[''] dark:bg-darkmode-700 md:px-[22px]">
+                    @yield('subcontent')
+                </div>
+                <!-- END: Content -->
+            </div>
+        </div>
+    </div>
+@endsection
+
+@once
+    @push('scripts')
+        @vite('resources/js/vendor/tippy/index.js')
+    @endpush
+@endonce
+
+@once
+    @push('scripts')
+        @vite('resources/js/layouts/side-menu/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/layouts/simple-menu.blade.php b/resources/views/layouts/simple-menu.blade.php
new file mode 100644
index 0000000..b01e8a3
--- /dev/null
+++ b/resources/views/layouts/simple-menu.blade.php
@@ -0,0 +1,157 @@
+@extends('../layouts/base')
+
+@section('head')
+    @yield('subhead')
+@endsection
+
+@section('content')
+    <div
+        class="pt-2 pb-7 before:absolute before:inset-0 before:bg-skew-pattern before:bg-fixed before:bg-no-repeat before:content-[''] dark:before:bg-skew-pattern-dark">
+        <x-dark-mode-switcher />
+        <x-main-color-switcher />
+        <x-mobile-menu />
+        <x-top-bar />
+        <div @class([
+            'relative',
+            "before:content-[''] before:w-[95%] before:z-[-1] before:rounded-[1.3rem] before:bg-white/10 before:h-full before:-mt-4 before:absolute before:mx-auto before:inset-x-0 before:dark:bg-darkmode-400/50",
+        
+            // Animation
+            'before:translate-y-[35px] before:opacity-0 before:animate-[0.4s_ease-in-out_0.1s_intro-wrapper] before:animate-fill-mode-forwards',
+        ])>
+            <div @class([
+                'translate-y-0 bg-primary flex rounded-[1.3rem] -mt-[7px] md:mt-0 dark:bg-darkmode-400',
+                'before:block before:absolute before:inset-0 before:bg-black/[0.15] before:rounded-[1.3rem] before:z-[-1]',
+            
+                // Animation
+                'animate-[0.4s_ease-in-out_0.2s_intro-wrapper] animate-fill-mode-forwards translate-y-[35px]',
+            ])>
+                <!-- BEGIN: Side Menu -->
+                <nav class="side-nav side-nav--simple hidden w-[105px] overflow-x-hidden px-5 pt-8 pb-16 md:block">
+                    <ul>
+                        @foreach ($simpleMenu as $menuKey => $menu)
+                            @if ($menu == 'divider')
+                                <li @class([
+                                    'side-nav__divider my-6',
+                                
+                                    // Animation
+                                    'opacity-0 animate-[0.4s_ease-in-out_0.1s_intro-divider] animate-fill-mode-forwards animate-delay-' .
+                                    (array_search($menuKey, array_keys($sideMenu)) + 1) * 10,
+                                ])></li>
+                            @else
+                                <li>
+                                    <a
+                                        href="{{ isset($menu['route_name']) ? route($menu['route_name'], $menu['params']) : 'javascript:;' }}"
+                                        @class([
+                                            $firstLevelActiveIndex == $menuKey
+                                                ? 'side-menu side-menu--active'
+                                                : 'side-menu',
+                                        
+                                            // Animation
+                                            '[&:not(.side-menu--active)]:opacity-0 [&:not(.side-menu--active)]:translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-' .
+                                            (array_search($menuKey, array_keys($sideMenu)) + 1) * 10,
+                                        ])
+                                    >
+                                        <div class="side-menu__icon">
+                                            <x-base.lucide icon="{{ $menu['icon'] }}" />
+                                        </div>
+                                        <div class="side-menu__title">
+                                            {{ $menu['title'] }}
+                                            @if (isset($menu['sub_menu']))
+                                                <div
+                                                    class="side-menu__sub-icon {{ $firstLevelActiveIndex == $menuKey ? 'transform rotate-180' : '' }}">
+                                                    <x-base.lucide icon="ChevronDown" />
+                                                </div>
+                                            @endif
+                                        </div>
+                                    </a>
+                                    @if (isset($menu['sub_menu']))
+                                        <ul class="{{ $firstLevelActiveIndex == $menuKey ? 'side-menu__sub-open' : '' }}">
+                                            @foreach ($menu['sub_menu'] as $subMenuKey => $subMenu)
+                                                <li>
+                                                    <a
+                                                        href="{{ isset($subMenu['route_name']) ? route($subMenu['route_name'], $subMenu['params']) : 'javascript:;' }}"
+                                                        @class([
+                                                            $secondLevelActiveIndex == $subMenuKey
+                                                                ? 'side-menu side-menu--active'
+                                                                : 'side-menu',
+                                                        
+                                                            // Animation
+                                                            '[&:not(.side-menu--active)]:opacity-0 [&:not(.side-menu--active)]:translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-' .
+                                                            (array_search($subMenuKey, array_keys($menu['sub_menu'])) + 1) * 10,
+                                                        ])
+                                                    >
+                                                        <div class="side-menu__icon">
+                                                            <x-base.lucide icon="{{ $subMenu['icon'] }}" />
+                                                        </div>
+                                                        <div class="side-menu__title">
+                                                            {{ $subMenu['title'] }}
+                                                            @if (isset($subMenu['sub_menu']))
+                                                                <div
+                                                                    class="side-menu__sub-icon {{ $secondLevelActiveIndex == $subMenuKey ? 'transform rotate-180' : '' }}">
+                                                                    <x-base.lucide icon="ChevronDown" />
+                                                                </div>
+                                                            @endif
+                                                        </div>
+                                                    </a>
+                                                    @if (isset($subMenu['sub_menu']))
+                                                        <ul
+                                                            class="{{ $secondLevelActiveIndex == $subMenuKey ? 'side-menu__sub-open' : '' }}">
+                                                            @foreach ($subMenu['sub_menu'] as $lastSubMenuKey => $lastSubMenu)
+                                                                <li>
+                                                                    <a
+                                                                        href="{{ isset($lastSubMenu['route_name']) ? route($lastSubMenu['route_name'], $lastSubMenu['params']) : 'javascript:;' }}"
+                                                                        @class([
+                                                                            $thirdLevelActiveIndex == $lastSubMenuKey
+                                                                                ? 'side-menu side-menu--active'
+                                                                                : 'side-menu',
+                                                                        
+                                                                            // Animation
+                                                                            '[&:not(.side-menu--active)]:opacity-0 [&:not(.side-menu--active)]:translate-x-[50px] animate-[0.4s_ease-in-out_0.1s_intro-menu] animate-fill-mode-forwards animate-delay-' .
+                                                                            (array_search($lastSubMenuKey, array_keys($subMenu['sub_menu'])) + 1) * 10,
+                                                                        ])
+                                                                    >
+                                                                        <div class="side-menu__icon">
+                                                                            <x-base.lucide
+                                                                                icon="{{ $lastSubMenu['icon'] }}"
+                                                                            />
+                                                                        </div>
+                                                                        <div class="side-menu__title">
+                                                                            {{ $lastSubMenu['title'] }}
+                                                                        </div>
+                                                                    </a>
+                                                                </li>
+                                                            @endforeach
+                                                        </ul>
+                                                    @endif
+                                                </li>
+                                            @endforeach
+                                        </ul>
+                                    @endif
+                                </li>
+                            @endif
+                        @endforeach
+                    </ul>
+                </nav>
+                <!-- END: Side Menu -->
+                <!-- BEGIN: Content -->
+                <div
+                    class="md:max-w-auto min-h-screen min-w-0 max-w-full flex-1 rounded-[1.3rem] bg-slate-100 px-4 pb-10 shadow-sm before:block before:h-px before:w-full before:content-[''] dark:bg-darkmode-700 md:px-[22px]">
+                    @yield('subcontent')
+                </div>
+                <!-- END: Content -->
+            </div>
+        </div>
+    </div>
+@endsection
+
+@once
+    @push('scripts')
+        @vite('resources/js/vendor/tippy/index.js')
+    @endpush
+@endonce
+
+@once
+    @push('scripts')
+        @vite('resources/js/layouts/side-menu/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/layouts/top-menu.blade.php b/resources/views/layouts/top-menu.blade.php
new file mode 100644
index 0000000..9d9ecd2
--- /dev/null
+++ b/resources/views/layouts/top-menu.blade.php
@@ -0,0 +1,128 @@
+@extends('../layouts/base')
+
+@section('head')
+    @yield('subhead')
+@endsection
+
+@section('content')
+    <div
+        class="pt-2 pb-7 before:absolute before:inset-0 before:bg-skew-pattern before:bg-fixed before:bg-no-repeat before:content-[''] dark:before:bg-skew-pattern-dark">
+        <x-dark-mode-switcher />
+        <x-main-color-switcher />
+        <x-mobile-menu />
+        <x-top-bar />
+        <!-- BEGIN: Top Menu -->
+        <nav @class([
+            'top-nav hidden md:block xl:pt-[12px] z-50 relative xl:px-6 -mt-2 xl:-mt-[3px]',
+        
+            // Animation
+            'animate-[0.4s_ease-in-out_0.3s_intro-top-menu] animate-fill-mode-forwards opacity-0 translate-y-[35px]',
+        ])>
+            <ul class="flex h-[50px] flex-wrap">
+                @foreach ($topMenu as $menuKey => $menu)
+                    <li>
+                        <a
+                            href="{{ isset($menu['route_name']) ? route($menu['route_name'], $menu['params']) : 'javascript:;' }}"
+                            @class([
+                                $firstLevelActiveIndex == $menuKey
+                                    ? 'top-menu top-menu--active'
+                                    : 'top-menu',
+                            
+                                // Animation
+                                '[&:not(.top-menu--active)]:opacity-0 [&:not(.top-menu--active)]:translate-y-[50px] animate-[0.4s_ease-in-out_0.3s_intro-top-menu] animate-fill-mode-forwards animate-delay-' .
+                                (array_search($menuKey, array_keys($topMenu)) + 1) * 10,
+                            ])
+                        >
+                            <div class="top-menu__icon">
+                                <x-base.lucide icon="{{ $menu['icon'] }}" />
+                            </div>
+                            <div class="top-menu__title">
+                                {{ $menu['title'] }}
+                                @if (isset($menu['sub_menu']))
+                                    <x-base.lucide
+                                        class="top-menu__sub-icon"
+                                        icon="chevron-down"
+                                    />
+                                @endif
+                            </div>
+                        </a>
+                        @if (isset($menu['sub_menu']))
+                            <ul class="{{ $firstLevelActiveIndex == $menuKey ? 'top-menu__sub-open' : '' }}">
+                                @foreach ($menu['sub_menu'] as $subMenuKey => $subMenu)
+                                    <li>
+                                        <a
+                                            class="top-menu"
+                                            href="{{ isset($subMenu['route_name']) ? route($subMenu['route_name'], $subMenu['params']) : 'javascript:;' }}"
+                                        >
+                                            <div class="top-menu__icon">
+                                                <x-base.lucide icon="{{ $subMenu['icon'] }}" />
+                                            </div>
+                                            <div class="top-menu__title">
+                                                {{ $subMenu['title'] }}
+                                                @if (isset($subMenu['sub_menu']))
+                                                    <x-base.lucide
+                                                        class="top-menu__sub-icon"
+                                                        icon="chevron-down"
+                                                    />
+                                                @endif
+                                            </div>
+                                        </a>
+                                        @if (isset($subMenu['sub_menu']))
+                                            <ul
+                                                class="{{ $secondLevelActiveIndex == $subMenuKey ? 'top-menu__sub-open' : '' }}">
+                                                @foreach ($subMenu['sub_menu'] as $lastSubMenuKey => $lastSubMenu)
+                                                    <li>
+                                                        <a
+                                                            class="top-menu"
+                                                            href="{{ isset($lastSubMenu['route_name']) ? route($lastSubMenu['route_name'], $lastSubMenu['params']) : 'javascript:;' }}"
+                                                        >
+                                                            <div class="top-menu__icon">
+                                                                <x-base.lucide icon="{{ $lastSubMenu['icon'] }}" />
+                                                            </div>
+                                                            <div class="top-menu__title">{{ $lastSubMenu['title'] }}</div>
+                                                        </a>
+                                                    </li>
+                                                @endforeach
+                                            </ul>
+                                        @endif
+                                    </li>
+                                @endforeach
+                            </ul>
+                        @endif
+                    </li>
+                @endforeach
+            </ul>
+        </nav>
+        <!-- END: Top Menu -->
+        <!-- BEGIN: Content -->
+        <div @class([
+            'relative',
+            "before:content-[''] before:w-[95%] before:z-[-1] before:rounded-[1.3rem] before:bg-transparent xl:before:bg-white/10 before:h-full before:-mt-4 before:absolute before:mx-auto before:inset-x-0 before:dark:bg-darkmode-400/50",
+        
+            // Animation
+            'before:translate-y-[35px] before:opacity-0 before:animate-[0.4s_ease-in-out_0.1s_intro-wrapper] before:animate-fill-mode-forwards',
+        ])>
+            <div @class([
+                'translate-y-0 bg-transparent xl:bg-primary flex rounded-[1.3rem] md:pt-[80px] -mt-[7px] md:-mt-[67px] xl:-mt-[62px] dark:bg-transparent xl:dark:bg-darkmode-400',
+                'before:hidden xl:before:block before:absolute before:inset-0 before:bg-black/[0.15] before:rounded-[1.3rem] before:z-[-1]',
+            
+                // Animation
+                'animate-[0.4s_ease-in-out_0.2s_intro-wrapper] animate-fill-mode-forwards translate-y-[35px]',
+            ])>
+                <!-- BEGIN: Content -->
+                <div
+                    class="md:max-w-auto min-h-screen min-w-0 max-w-full flex-1 rounded-[1.3rem] bg-slate-100 px-4 pb-10 shadow-sm before:block before:h-px before:w-full before:content-[''] dark:bg-darkmode-700 md:px-[22px]">
+                    @yield('subcontent')
+                </div>
+                <!-- END: Content -->
+            </div>
+        </div>
+        <!-- END: Content -->
+    </div>
+@endsection
+
+@once
+    @push('scripts')
+        @vite('resources/js/components/top-bar/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/login/main.blade.php b/resources/views/login/main.blade.php
new file mode 100755
index 0000000..e987d84
--- /dev/null
+++ b/resources/views/login/main.blade.php
@@ -0,0 +1,140 @@
+@extends('../layouts/' . $layout)
+
+@section('head')
+    <title>Login - Icewall - Tailwind HTML Admin Template</title>
+@endsection
+
+@section('content')
+    <div @class([
+        '-m-3 sm:-mx-8 p-3 sm:px-8 relative h-screen lg:overflow-hidden bg-primary xl:bg-white dark:bg-darkmode-800 xl:dark:bg-darkmode-600',
+        'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:-mt-[28%] before:-mb-[16%] before:-ml-[13%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-[-4.5deg] before:bg-primary/20 before:rounded-[100%] before:dark:bg-darkmode-400',
+        'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] after:-mt-[20%] after:-mb-[13%] after:-ml-[13%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-[-4.5deg] after:bg-primary after:rounded-[100%] after:dark:bg-darkmode-700',
+    ])>
+        <div class="container relative z-10 sm:px-10">
+            <div class="block grid-cols-2 gap-4 xl:grid">
+                <!-- BEGIN: Login Info -->
+                <div class="hidden min-h-screen flex-col xl:flex">
+                    <a
+                        class="-intro-x flex items-center pt-5"
+                        href=""
+                    >
+                        <img
+                            class="w-6"
+                            src="{{ Vite::asset('resources/images/logo.svg') }}"
+                            alt="Midone Tailwind HTML Admin Template"
+                        />
+                        <span class="ml-3 text-lg text-white"> Icewall </span>
+                    </a>
+                    <div class="my-auto">
+                        <img
+                            class="-intro-x -mt-16 w-1/2"
+                            src="{{ Vite::asset('resources/images/illustration.svg') }}"
+                            alt="Midone Tailwind HTML Admin Template"
+                        />
+                        <div class="-intro-x mt-10 text-4xl font-medium leading-tight text-white">
+                            A few more clicks to <br />
+                            sign in to your account.
+                        </div>
+                        <div class="-intro-x mt-5 text-lg text-white text-opacity-70 dark:text-slate-400">
+                            Manage all your e-commerce accounts in one place
+                        </div>
+                    </div>
+                </div>
+                <!-- END: Login Info -->
+                <!-- BEGIN: Login Form -->
+                <div class="my-10 flex h-screen py-5 xl:my-0 xl:h-auto xl:py-0">
+                    <div
+                        class="mx-auto my-auto w-full rounded-md bg-white px-5 py-8 shadow-md dark:bg-darkmode-600 sm:w-3/4 sm:px-8 lg:w-2/4 xl:ml-20 xl:w-auto xl:bg-transparent xl:p-0 xl:shadow-none">
+                        <h2 class="intro-x text-center text-2xl font-bold xl:text-left xl:text-3xl">
+                            Sign In
+                        </h2>
+                        <div class="intro-x mt-2 text-center text-slate-400 xl:hidden">
+                            A few more clicks to sign in to your account. Manage all your
+                            e-commerce accounts in one place
+                        </div>
+                        <div class="intro-x mt-8">
+                            <form id="login-form">
+                                <x-base.form-input
+                                    class="intro-x login__input block min-w-full px-4 py-3 xl:min-w-[350px]"
+                                    id="email"
+                                    type="text"
+                                    value="midone@left4code.com"
+                                    placeholder="Email"
+                                />
+                                <div
+                                    class="login__input-error mt-2 text-danger"
+                                    id="error-email"
+                                ></div>
+                                <x-base.form-input
+                                    class="intro-x login__input mt-4 block min-w-full px-4 py-3 xl:min-w-[350px]"
+                                    id="password"
+                                    type="password"
+                                    value="password"
+                                    placeholder="Password"
+                                />
+                                <div
+                                    class="login__input-error mt-2 text-danger"
+                                    id="error-password"
+                                ></div>
+                            </form>
+                        </div>
+                        <div class="intro-x mt-4 flex text-xs text-slate-600 dark:text-slate-500 sm:text-sm">
+                            <div class="mr-auto flex items-center">
+                                <x-base.form-check.input
+                                    class="mr-2 border"
+                                    id="remember-me"
+                                    type="checkbox"
+                                />
+                                <label
+                                    class="cursor-pointer select-none"
+                                    for="remember-me"
+                                >
+                                    Remember me
+                                </label>
+                            </div>
+                            <a href="">Forgot Password?</a>
+                        </div>
+                        <div class="intro-x mt-5 text-center xl:mt-8 xl:text-left">
+                            <x-base.button
+                                class="w-full px-4 py-3 align-top xl:mr-3 xl:w-32"
+                                id="btn-login"
+                                variant="primary"
+                            >
+                                Login
+                            </x-base.button>
+                            <x-base.button
+                                class="mt-3 w-full px-4 py-3 align-top xl:mt-0 xl:w-32"
+                                variant="outline-secondary"
+                            >
+                                Register
+                            </x-base.button>
+                        </div>
+                        <div class="intro-x mt-10 text-center text-slate-600 dark:text-slate-500 xl:mt-24 xl:text-left">
+                            By signin up, you agree to our
+                            <a
+                                class="text-primary dark:text-slate-200"
+                                href=""
+                            >
+                                Terms and Conditions
+                            </a>
+                            &
+                            <a
+                                class="text-primary dark:text-slate-200"
+                                href=""
+                            >
+                                Privacy Policy
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- END: Login Form -->
+            </div>
+        </div>
+    </div>
+@endsection
+
+@once
+    @push('scripts')
+        @vite('resources/js/pages/login/index.js')
+    @endpush
+@endonce
diff --git a/resources/views/pages/dashboard-overview-1.blade.php b/resources/views/pages/dashboard-overview-1.blade.php
new file mode 100755
index 0000000..ca7575d
--- /dev/null
+++ b/resources/views/pages/dashboard-overview-1.blade.php
@@ -0,0 +1,1045 @@
+@extends('../layouts/' . $layout)
+
+@section('subhead')
+    <title>Dashboard - Midone - Tailwind HTML Admin Template</title>
+@endsection
+
+@section('subcontent')
+    <div class="grid grid-cols-12 gap-6">
+        <div class="col-span-12 2xl:col-span-9">
+            <div class="grid grid-cols-12 gap-6">
+                <!-- BEGIN: General Report -->
+                <div class="col-span-12 mt-8">
+                    <div class="intro-y flex h-10 items-center">
+                        <h2 class="mr-5 truncate text-lg font-medium">General Report</h2>
+                        <a
+                            class="ml-auto flex items-center text-primary"
+                            href=""
+                        >
+                            <x-base.lucide
+                                class="mr-3 h-4 w-4"
+                                icon="RefreshCcw"
+                            /> Reload Data
+                        </a>
+                    </div>
+                    <div class="mt-5 grid grid-cols-12 gap-6">
+                        <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
+                            <div @class([
+                                'relative zoom-in',
+                                'before:content-[\'\'] before:w-[90%] before:shadow-[0px_3px_20px_#0000000b] before:bg-slate-50 before:h-full before:mt-3 before:absolute before:rounded-md before:mx-auto before:inset-x-0 before:dark:bg-darkmode-400/70',
+                            ])>
+                                <div class="box p-5">
+                                    <div class="flex">
+                                        <x-base.lucide
+                                            class="h-[28px] w-[28px] text-primary"
+                                            icon="ShoppingCart"
+                                        />
+                                        <div class="ml-auto">
+                                            <x-base.tippy
+                                                class="flex cursor-pointer items-center rounded-full bg-success py-[3px] pl-2 pr-1 text-xs font-medium text-white"
+                                                as="div"
+                                                content="33% Higher than last month"
+                                            >
+                                                33%
+                                                <x-base.lucide
+                                                    class="ml-0.5 h-4 w-4"
+                                                    icon="ChevronUp"
+                                                />
+                                            </x-base.tippy>
+                                        </div>
+                                    </div>
+                                    <div class="mt-6 text-3xl font-medium leading-8">4.710</div>
+                                    <div class="mt-1 text-base text-slate-500">Item Sales</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
+                            <div @class([
+                                'relative zoom-in',
+                                'before:content-[\'\'] before:w-[90%] before:shadow-[0px_3px_20px_#0000000b] before:bg-slate-50 before:h-full before:mt-3 before:absolute before:rounded-md before:mx-auto before:inset-x-0 before:dark:bg-darkmode-400/70',
+                            ])>
+                                <div class="box p-5">
+                                    <div class="flex">
+                                        <x-base.lucide
+                                            class="h-[28px] w-[28px] text-pending"
+                                            icon="CreditCard"
+                                        />
+                                        <div class="ml-auto">
+                                            <x-base.tippy
+                                                class="flex cursor-pointer items-center rounded-full bg-danger py-[3px] pl-2 pr-1 text-xs font-medium text-white"
+                                                as="div"
+                                                content="2% Lower than last month"
+                                            >
+                                                2%
+                                                <x-base.lucide
+                                                    class="ml-0.5 h-4 w-4"
+                                                    icon="ChevronDown"
+                                                />
+                                            </x-base.tippy>
+                                        </div>
+                                    </div>
+                                    <div class="mt-6 text-3xl font-medium leading-8">3.721</div>
+                                    <div class="mt-1 text-base text-slate-500">New Orders</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
+                            <div @class([
+                                'relative zoom-in',
+                                'before:content-[\'\'] before:w-[90%] before:shadow-[0px_3px_20px_#0000000b] before:bg-slate-50 before:h-full before:mt-3 before:absolute before:rounded-md before:mx-auto before:inset-x-0 before:dark:bg-darkmode-400/70',
+                            ])>
+                                <div class="box p-5">
+                                    <div class="flex">
+                                        <x-base.lucide
+                                            class="h-[28px] w-[28px] text-warning"
+                                            icon="Monitor"
+                                        />
+                                        <div class="ml-auto">
+                                            <x-base.tippy
+                                                class="flex cursor-pointer items-center rounded-full bg-success py-[3px] pl-2 pr-1 text-xs font-medium text-white"
+                                                as="div"
+                                                content="12% Higher than last month"
+                                            >
+                                                12%
+                                                <x-base.lucide
+                                                    class="ml-0.5 h-4 w-4"
+                                                    icon="ChevronUp"
+                                                />
+                                            </x-base.tippy>
+                                        </div>
+                                    </div>
+                                    <div class="mt-6 text-3xl font-medium leading-8">2.149</div>
+                                    <div class="mt-1 text-base text-slate-500">
+                                        Total Products
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
+                            <div @class([
+                                'relative zoom-in',
+                                'before:content-[\'\'] before:w-[90%] before:shadow-[0px_3px_20px_#0000000b] before:bg-slate-50 before:h-full before:mt-3 before:absolute before:rounded-md before:mx-auto before:inset-x-0 before:dark:bg-darkmode-400/70',
+                            ])>
+                                <div class="box p-5">
+                                    <div class="flex">
+                                        <x-base.lucide
+                                            class="h-[28px] w-[28px] text-success"
+                                            icon="User"
+                                        />
+                                        <div class="ml-auto">
+                                            <x-base.tippy
+                                                class="flex cursor-pointer items-center rounded-full bg-success py-[3px] pl-2 pr-1 text-xs font-medium text-white"
+                                                as="div"
+                                                content="22% Higher than last month"
+                                            >
+                                                22%
+                                                <x-base.lucide
+                                                    class="ml-0.5 h-4 w-4"
+                                                    icon="ChevronUp"
+                                                />
+                                            </x-base.tippy>
+                                        </div>
+                                    </div>
+                                    <div class="mt-6 text-3xl font-medium leading-8">152.040</div>
+                                    <div class="mt-1 text-base text-slate-500">
+                                        Unique Visitor
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- END: General Report -->
+                <!-- BEGIN: Sales Report -->
+                <div class="col-span-12 mt-8 lg:col-span-6">
+                    <div class="intro-y block h-10 items-center sm:flex">
+                        <h2 class="mr-5 truncate text-lg font-medium">Sales Report</h2>
+                        <div class="relative mt-3 text-slate-500 sm:ml-auto sm:mt-0">
+                            <x-base.lucide
+                                class="absolute inset-y-0 left-0 z-10 my-auto ml-3 h-4 w-4"
+                                icon="Calendar"
+                            />
+                            <x-base.litepicker
+                                class="datepicker !box pl-10 sm:w-56"
+                                type="text"
+                            />
+                        </div>
+                    </div>
+                    <div class="intro-y box mt-12 p-5 sm:mt-5">
+                        <div class="flex flex-col md:flex-row md:items-center">
+                            <div class="flex">
+                                <div>
+                                    <div class="text-lg font-medium text-primary dark:text-slate-300 xl:text-xl">
+                                        $15,000
+                                    </div>
+                                    <div class="mt-0.5 text-slate-500">This Month</div>
+                                </div>
+                                <div
+                                    class="mx-4 h-12 w-px border border-r border-dashed border-slate-200 dark:border-darkmode-300 xl:mx-5">
+                                </div>
+                                <div>
+                                    <div class="text-lg font-medium text-slate-500 xl:text-xl">
+                                        $10,000
+                                    </div>
+                                    <div class="mt-0.5 text-slate-500">Last Month</div>
+                                </div>
+                            </div>
+                            <x-base.menu class="mt-5 md:ml-auto md:mt-0">
+                                <x-base.menu.button
+                                    class="font-normal"
+                                    as="x-base.button"
+                                    variant="outline-secondary"
+                                >
+                                    Filter by Category
+                                    <x-base.lucide
+                                        class="ml-2 h-4 w-4"
+                                        icon="ChevronDown"
+                                    />
+                                </x-base.menu.button>
+                                <x-base.menu.items class="h-32 w-40 overflow-y-auto">
+                                    <x-base.menu.item>PC & Laptop</x-base.menu.item>
+                                    <x-base.menu.item>Smartphone</x-base.menu.item>
+                                    <x-base.menu.item>Electronic</x-base.menu.item>
+                                    <x-base.menu.item>Photography</x-base.menu.item>
+                                    <x-base.menu.item>Sport</x-base.menu.item>
+                                </x-base.menu.items>
+                            </x-base.menu>
+                        </div>
+                        <div @class([
+                            'relative',
+                            'before:content-[\'\'] before:block before:absolute before:w-16 before:left-0 before:top-0 before:bottom-0 before:ml-10 before:mb-7 before:bg-gradient-to-r before:from-white before:via-white/80 before:to-transparent before:dark:from-darkmode-600',
+                            'after:content-[\'\'] after:block after:absolute after:w-16 after:right-0 after:top-0 after:bottom-0 after:mb-7 after:bg-gradient-to-l after:from-white after:via-white/80 after:to-transparent after:dark:from-darkmode-600',
+                        ])>
+                            <x-report-line-chart
+                                class="mt-6 -mb-6"
+                                height="h-[275px]"
+                            />
+                        </div>
+                    </div>
+                </div>
+                <!-- END: Sales Report -->
+                <!-- BEGIN: Weekly Top Seller -->
+                <div class="col-span-12 mt-8 sm:col-span-6 lg:col-span-3">
+                    <div class="intro-y flex h-10 items-center">
+                        <h2 class="mr-5 truncate text-lg font-medium">Weekly Top Seller</h2>
+                        <a
+                            class="ml-auto truncate text-primary"
+                            href=""
+                        > Show More </a>
+                    </div>
+                    <div class="intro-y box mt-5 p-5">
+                        <div class="mt-3">
+                            <x-report-pie-chart height="h-[213px]" />
+                        </div>
+                        <div class="mx-auto mt-8 w-52 sm:w-auto">
+                            <div class="flex items-center">
+                                <div class="mr-3 h-2 w-2 rounded-full bg-primary"></div>
+                                <span class="truncate">17 - 30 Years old</span>
+                                <span class="ml-auto font-medium">62%</span>
+                            </div>
+                            <div class="mt-4 flex items-center">
+                                <div class="mr-3 h-2 w-2 rounded-full bg-pending"></div>
+                                <span class="truncate">31 - 50 Years old</span>
+                                <span class="ml-auto font-medium">33%</span>
+                            </div>
+                            <div class="mt-4 flex items-center">
+                                <div class="mr-3 h-2 w-2 rounded-full bg-warning"></div>
+                                <span class="truncate">&gt;= 50 Years old</span>
+                                <span class="ml-auto font-medium">10%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- END: Weekly Top Seller -->
+                <!-- BEGIN: Sales Report -->
+                <div class="col-span-12 mt-8 sm:col-span-6 lg:col-span-3">
+                    <div class="intro-y flex h-10 items-center">
+                        <h2 class="mr-5 truncate text-lg font-medium">Sales Report</h2>
+                        <a
+                            class="ml-auto truncate text-primary"
+                            href=""
+                        > Show More </a>
+                    </div>
+                    <div class="intro-y box mt-5 p-5">
+                        <div class="mt-3">
+                            <x-report-donut-chart height="h-[213px]" />
+                        </div>
+                        <div class="mx-auto mt-8 w-52 sm:w-auto">
+                            <div class="flex items-center">
+                                <div class="mr-3 h-2 w-2 rounded-full bg-primary"></div>
+                                <span class="truncate">17 - 30 Years old</span>
+                                <span class="ml-auto font-medium">62%</span>
+                            </div>
+                            <div class="mt-4 flex items-center">
+                                <div class="mr-3 h-2 w-2 rounded-full bg-pending"></div>
+                                <span class="truncate">31 - 50 Years old</span>
+                                <span class="ml-auto font-medium">33%</span>
+                            </div>
+                            <div class="mt-4 flex items-center">
+                                <div class="mr-3 h-2 w-2 rounded-full bg-warning"></div>
+                                <span class="truncate">&gt;= 50 Years old</span>
+                                <span class="ml-auto font-medium">10%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- END: Sales Report -->
+                <!-- BEGIN: Official Store -->
+                <div class="col-span-12 mt-6 xl:col-span-8">
+                    <div class="intro-y block h-10 items-center sm:flex">
+                        <h2 class="mr-5 truncate text-lg font-medium">Official Store</h2>
+                        <div class="relative mt-3 text-slate-500 sm:ml-auto sm:mt-0">
+                            <x-base.lucide
+                                class="absolute inset-y-0 left-0 z-10 my-auto ml-3 h-4 w-4"
+                                icon="MapPin"
+                            />
+                            <x-base.form-input
+                                class="!box pl-10 sm:w-56"
+                                type="text"
+                                placeholder="Filter by city"
+                            />
+                        </div>
+                    </div>
+                    <div class="intro-y box mt-12 p-5 sm:mt-5">
+                        <div>
+                            250 Official stores in 21 countries, click the marker to see
+                            location details.
+                        </div>
+                        <x-leaflet-map class="mt-5 h-[310px] rounded-md bg-slate-200" />
+                    </div>
+                </div>
+                <!-- END: Official Store -->
+                <!-- BEGIN: Weekly Best Sellers -->
+                <div class="col-span-12 mt-6 xl:col-span-4">
+                    <div class="intro-y flex h-10 items-center">
+                        <h2 class="mr-5 truncate text-lg font-medium">
+                            Weekly Best Sellers
+                        </h2>
+                    </div>
+                    <div class="mt-5">
+                        @foreach (array_slice($fakers, 0, 4) as $faker)
+                            <div class="intro-y">
+                                <div class="box zoom-in mb-3 flex items-center px-4 py-4">
+                                    <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-md">
+                                        <img
+                                            src="{{ Vite::asset($faker['photos'][0]) }}"
+                                            alt="Midone Tailwind HTML Admin Template"
+                                        />
+                                    </div>
+                                    <div class="ml-4 mr-auto">
+                                        <div class="font-medium">{{ $faker['users'][0]['name'] }}</div>
+                                        <div class="mt-0.5 text-xs text-slate-500">
+                                            {{ $faker['dates'][0] }}
+                                        </div>
+                                    </div>
+                                    <div
+                                        class="cursor-pointer rounded-full bg-success px-2 py-1 text-xs font-medium text-white">
+                                        137 Sales
+                                    </div>
+                                </div>
+                            </div>
+                        @endforeach
+                        <a
+                            class="intro-y block w-full rounded-md border border-dotted border-slate-400 py-4 text-center text-slate-500 dark:border-darkmode-300"
+                            href=""
+                        >
+                            View More
+                        </a>
+                    </div>
+                </div>
+                <!-- END: Weekly Best Sellers -->
+                <!-- BEGIN: General Report -->
+                <div class="col-span-12 mt-8 grid grid-cols-12 gap-6">
+                    <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
+                        <div class="box zoom-in p-5">
+                            <div class="flex items-center">
+                                <div class="w-2/4 flex-none">
+                                    <div class="truncate text-lg font-medium">Target Sales</div>
+                                    <div class="mt-1 text-slate-500">300 Sales</div>
+                                </div>
+                                <div class="relative ml-auto flex-none">
+                                    <x-report-donut-chart-1
+                                        width="w-[90px]"
+                                        height="h-[90px]"
+                                    />
+                                    <div
+                                        class="absolute top-0 left-0 flex h-full w-full items-center justify-center font-medium">
+                                        20%
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
+                        <div class="box zoom-in p-5">
+                            <div class="flex">
+                                <div class="mr-3 truncate text-lg font-medium">
+                                    Social Media
+                                </div>
+                                <div
+                                    class="ml-auto flex cursor-pointer items-center truncate rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-500 dark:bg-darkmode-400">
+                                    320 Followers
+                                </div>
+                            </div>
+                            <div class="mt-1">
+                                <x-simple-line-chart-1
+                                    class="-ml-1"
+                                    height="h-[58px]"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
+                        <div class="box zoom-in p-5">
+                            <div class="flex items-center">
+                                <div class="w-2/4 flex-none">
+                                    <div class="truncate text-lg font-medium">New Products</div>
+                                    <div class="mt-1 text-slate-500">1450 Products</div>
+                                </div>
+                                <div class="relative ml-auto flex-none">
+                                    <x-report-donut-chart-1
+                                        width="w-[90px]"
+                                        height="h-[90px]"
+                                    />
+                                    <div
+                                        class="absolute top-0 left-0 flex h-full w-full items-center justify-center font-medium">
+                                        45%
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="intro-y col-span-12 sm:col-span-6 2xl:col-span-3">
+                        <div class="box zoom-in p-5">
+                            <div class="flex">
+                                <div class="mr-3 truncate text-lg font-medium">Posted Ads</div>
+                                <div
+                                    class="ml-auto flex cursor-pointer items-center truncate rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-500 dark:bg-darkmode-400">
+                                    180 Campaign
+                                </div>
+                            </div>
+                            <div class="mt-1">
+                                <x-simple-line-chart-1
+                                    class="-ml-1"
+                                    height="h-[58px]"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- END: General Report -->
+                <!-- BEGIN: Weekly Top Products -->
+                <div class="col-span-12 mt-6">
+                    <div class="intro-y block h-10 items-center sm:flex">
+                        <h2 class="mr-5 truncate text-lg font-medium">
+                            Weekly Top Products
+                        </h2>
+                        <div class="mt-3 flex items-center sm:ml-auto sm:mt-0">
+                            <x-base.button class="!box flex items-center text-slate-600 dark:text-slate-300">
+                                <x-base.lucide
+                                    class="mr-2 hidden h-4 w-4 sm:block"
+                                    icon="FileText"
+                                />
+                                Export to Excel
+                            </x-base.button>
+                            <x-base.button class="!box ml-3 flex items-center text-slate-600 dark:text-slate-300">
+                                <x-base.lucide
+                                    class="mr-2 hidden h-4 w-4 sm:block"
+                                    icon="FileText"
+                                />
+                                Export to PDF
+                            </x-base.button>
+                        </div>
+                    </div>
+                    <div class="intro-y mt-8 overflow-auto sm:mt-0 lg:overflow-visible">
+                        <x-base.table class="border-separate border-spacing-y-[10px] sm:mt-2">
+                            <x-base.table.thead>
+                                <x-base.table.tr>
+                                    <x-base.table.th class="whitespace-nowrap border-b-0">
+                                        IMAGES
+                                    </x-base.table.th>
+                                    <x-base.table.th class="whitespace-nowrap border-b-0">
+                                        PRODUCT NAME
+                                    </x-base.table.th>
+                                    <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
+                                        STOCK
+                                    </x-base.table.th>
+                                    <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
+                                        STATUS
+                                    </x-base.table.th>
+                                    <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
+                                        ACTIONS
+                                    </x-base.table.th>
+                                </x-base.table.tr>
+                            </x-base.table.thead>
+                            <x-base.table.tbody>
+                                @foreach (array_slice($fakers, 0, 4) as $faker)
+                                    <x-base.table.tr class="intro-x">
+                                        <x-base.table.td
+                                            class="w-40 border-b-0 bg-white shadow-[20px_3px_20px_#0000000b] first:rounded-l-md last:rounded-r-md dark:bg-darkmode-600"
+                                        >
+                                            <div class="flex">
+                                                <div class="image-fit zoom-in h-10 w-10">
+                                                    <x-base.tippy
+                                                        class="rounded-full shadow-[0px_0px_0px_2px_#fff,_1px_1px_5px_rgba(0,0,0,0.32)] dark:shadow-[0px_0px_0px_2px_#3f4865,_1px_1px_5px_rgba(0,0,0,0.32)]"
+                                                        src="{{ Vite::asset($faker['images'][0]) }}"
+                                                        alt="Midone Tailwind HTML Admin Template"
+                                                        as="img"
+                                                        content="{{ 'Uploaded at ' . $faker['dates'][0] }}"
+                                                    />
+                                                </div>
+                                                <div class="image-fit zoom-in -ml-5 h-10 w-10">
+                                                    <x-base.tippy
+                                                        class="rounded-full shadow-[0px_0px_0px_2px_#fff,_1px_1px_5px_rgba(0,0,0,0.32)] dark:shadow-[0px_0px_0px_2px_#3f4865,_1px_1px_5px_rgba(0,0,0,0.32)]"
+                                                        src="{{ Vite::asset($faker['photos'][1]) }}"
+                                                        alt="Midone Tailwind HTML Admin Template"
+                                                        as="img"
+                                                        content="{{ 'Uploaded at ' . $faker['dates'][1] }}"
+                                                    />
+                                                </div>
+                                                <div class="image-fit zoom-in -ml-5 h-10 w-10">
+                                                    <x-base.tippy
+                                                        class="rounded-full shadow-[0px_0px_0px_2px_#fff,_1px_1px_5px_rgba(0,0,0,0.32)] dark:shadow-[0px_0px_0px_2px_#3f4865,_1px_1px_5px_rgba(0,0,0,0.32)]"
+                                                        src="{{ Vite::asset($faker['photos'][2]) }}"
+                                                        alt="Midone Tailwind HTML Admin Template"
+                                                        as="img"
+                                                        content="{{ 'Uploaded at ' . $faker['dates'][2] }}"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </x-base.table.td>
+                                        <x-base.table.td
+                                            class="border-b-0 bg-white shadow-[20px_3px_20px_#0000000b] first:rounded-l-md last:rounded-r-md dark:bg-darkmode-600"
+                                        >
+                                            <a
+                                                class="whitespace-nowrap font-medium"
+                                                href=""
+                                            >
+                                                {{ $faker['products'][0]['name'] }}
+                                            </a>
+                                            <div class="mt-0.5 whitespace-nowrap text-xs text-slate-500">
+                                                {{ $faker['products'][0]['category'] }}
+                                            </div>
+                                        </x-base.table.td>
+                                        <x-base.table.td
+                                            class="border-b-0 bg-white text-center shadow-[20px_3px_20px_#0000000b] first:rounded-l-md last:rounded-r-md dark:bg-darkmode-600"
+                                        >
+                                            {{ $faker['stocks'][0] }}
+                                        </x-base.table.td>
+                                        <x-base.table.td
+                                            class="w-40 border-b-0 bg-white shadow-[20px_3px_20px_#0000000b] first:rounded-l-md last:rounded-r-md dark:bg-darkmode-600"
+                                        >
+                                            <div @class([
+                                                'flex items-center justify-center',
+                                                'text-success' => $faker['true_false'][0],
+                                                'text-danger' => !$faker['true_false'][0],
+                                            ])>
+                                                <x-base.lucide
+                                                    class="mr-2 h-4 w-4"
+                                                    icon="CheckSquare"
+                                                />
+                                                {{ $faker['true_false'][0] ? 'Active' : 'Inactive' }}
+                                            </div>
+                                        </x-base.table.td>
+                                        <x-base.table.td
+                                            class="relative w-56 border-b-0 bg-white py-0 shadow-[20px_3px_20px_#0000000b] before:absolute before:inset-y-0 before:left-0 before:my-auto before:block before:h-8 before:w-px before:bg-slate-200 first:rounded-l-md last:rounded-r-md dark:bg-darkmode-600 before:dark:bg-darkmode-400"
+                                        >
+                                            <div class="flex items-center justify-center">
+                                                <a
+                                                    class="mr-3 flex items-center"
+                                                    href=""
+                                                >
+                                                    <x-base.lucide
+                                                        class="mr-1 h-4 w-4"
+                                                        icon="CheckSquare"
+                                                    />
+                                                    Edit
+                                                </a>
+                                                <a
+                                                    class="flex items-center text-danger"
+                                                    href=""
+                                                >
+                                                    <x-base.lucide
+                                                        class="mr-1 h-4 w-4"
+                                                        icon="Trash"
+                                                    />
+                                                    Delete
+                                                </a>
+                                            </div>
+                                        </x-base.table.td>
+                                    </x-base.table.tr>
+                                @endforeach
+                            </x-base.table.tbody>
+                        </x-base.table>
+                    </div>
+                    <div class="intro-y mt-3 flex flex-wrap items-center sm:flex-row sm:flex-nowrap">
+                        <x-base.pagination class="w-full sm:mr-auto sm:w-auto">
+                            <x-base.pagination.link>
+                                <x-base.lucide
+                                    class="h-4 w-4"
+                                    icon="ChevronsLeft"
+                                />
+                            </x-base.pagination.link>
+                            <x-base.pagination.link>
+                                <x-base.lucide
+                                    class="h-4 w-4"
+                                    icon="ChevronLeft"
+                                />
+                            </x-base.pagination.link>
+                            <x-base.pagination.link>...</x-base.pagination.link>
+                            <x-base.pagination.link>1</x-base.pagination.link>
+                            <x-base.pagination.link active>2</x-base.pagination.link>
+                            <x-base.pagination.link>3</x-base.pagination.link>
+                            <x-base.pagination.link>...</x-base.pagination.link>
+                            <x-base.pagination.link>
+                                <x-base.lucide
+                                    class="h-4 w-4"
+                                    icon="ChevronRight"
+                                />
+                            </x-base.pagination.link>
+                            <x-base.pagination.link>
+                                <x-base.lucide
+                                    class="h-4 w-4"
+                                    icon="ChevronsRight"
+                                />
+                            </x-base.pagination.link>
+                        </x-base.pagination>
+                        <x-base.form-select class="!box mt-3 w-20 sm:mt-0">
+                            <option>10</option>
+                            <option>25</option>
+                            <option>35</option>
+                            <option>50</option>
+                        </x-base.form-select>
+                    </div>
+                </div>
+                <!-- END: Weekly Top Products -->
+            </div>
+        </div>
+        <div class="col-span-12 2xl:col-span-3">
+            <div class="-mb-10 pb-10 2xl:border-l">
+                <div class="grid grid-cols-12 gap-x-6 gap-y-6 2xl:gap-x-0 2xl:pl-6">
+                    <!-- BEGIN: Transactions -->
+                    <div class="col-span-12 mt-3 md:col-span-6 xl:col-span-4 2xl:col-span-12 2xl:mt-8">
+                        <div class="intro-x flex h-10 items-center">
+                            <h2 class="mr-5 truncate text-lg font-medium">Transactions</h2>
+                        </div>
+                        <div class="mt-5">
+                            @foreach (array_slice($fakers, 0, 5) as $faker)
+                                <div class="intro-x">
+                                    <div class="box zoom-in mb-3 flex items-center px-5 py-3">
+                                        <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
+                                            <img
+                                                src="{{ Vite::asset($faker['photos'][0]) }}"
+                                                alt="Midone Tailwind HTML Admin Template"
+                                            />
+                                        </div>
+                                        <div class="ml-4 mr-auto">
+                                            <div class="font-medium">{{ $faker['users'][0]['name'] }}</div>
+                                            <div class="mt-0.5 text-xs text-slate-500">
+                                                {{ $faker['dates'][0] }}
+                                            </div>
+                                        </div>
+                                        <div @class([
+                                            'text-success' => $faker['true_false'][0],
+                                            'text-danger' => !$faker['true_false'][0],
+                                        ])>
+                                            {{ $faker['true_false'][0] ? '+' : '-' }}${{ $faker['totals'][0] }}
+                                        </div>
+                                    </div>
+                                </div>
+                            @endforeach
+                            <a
+                                class="intro-x block w-full rounded-md border border-dotted border-slate-400 py-3 text-center text-slate-500 dark:border-darkmode-300"
+                                href=""
+                            >
+                                View More
+                            </a>
+                        </div>
+                    </div>
+                    <!-- END: Transactions -->
+                    <!-- BEGIN: Recent Activities -->
+                    <div class="col-span-12 mt-3 md:col-span-6 xl:col-span-4 2xl:col-span-12">
+                        <div class="intro-x flex h-10 items-center">
+                            <h2 class="mr-5 truncate text-lg font-medium">
+                                Recent Activities
+                            </h2>
+                            <a
+                                class="ml-auto truncate text-primary"
+                                href=""
+                            > Show More </a>
+                        </div>
+                        <div
+                            class="relative mt-5 before:absolute before:ml-5 before:mt-5 before:block before:h-[85%] before:w-px before:bg-slate-200 before:dark:bg-darkmode-400">
+                            <div class="intro-x relative mb-3 flex items-center">
+                                <div
+                                    class="before:absolute before:mt-5 before:ml-5 before:block before:h-px before:w-20 before:bg-slate-200 before:dark:bg-darkmode-400">
+                                    <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
+                                        <img
+                                            src="{{ Vite::asset($fakers[9]['photos'][0]) }}"
+                                            alt="Midone Tailwind HTML Admin Template"
+                                        />
+                                    </div>
+                                </div>
+                                <div class="box zoom-in ml-4 flex-1 px-5 py-3">
+                                    <div class="flex items-center">
+                                        <div class="font-medium">
+                                            {{ $fakers[9]['users'][0]['name'] }}
+                                        </div>
+                                        <div class="ml-auto text-xs text-slate-500">07:00 PM</div>
+                                    </div>
+                                    <div class="mt-1 text-slate-500">Has joined the team</div>
+                                </div>
+                            </div>
+                            <div class="intro-x relative mb-3 flex items-center">
+                                <div
+                                    class="before:absolute before:mt-5 before:ml-5 before:block before:h-px before:w-20 before:bg-slate-200 before:dark:bg-darkmode-400">
+                                    <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
+                                        <img
+                                            src="{{ Vite::asset($fakers[8]['photos'][0]) }}"
+                                            alt="Midone Tailwind HTML Admin Template"
+                                        />
+                                    </div>
+                                </div>
+                                <div class="box zoom-in ml-4 flex-1 px-5 py-3">
+                                    <div class="flex items-center">
+                                        <div class="font-medium">
+                                            {{ $fakers[8]['users'][0]['name'] }}
+                                        </div>
+                                        <div class="ml-auto text-xs text-slate-500">07:00 PM</div>
+                                    </div>
+                                    <div class="text-slate-500">
+                                        <div class="mt-1">Added 3 new photos</div>
+                                        <div class="mt-2 flex">
+                                            <x-base.tippy
+                                                class="image-fit zoom-in mr-1 h-8 w-8"
+                                                as="div"
+                                                content="{{ $fakers[0]['products'][0]['name'] }}"
+                                            >
+                                                <img
+                                                    class="rounded-md border border-white"
+                                                    src="{{ Vite::asset($fakers[8]['photos'][0]) }}"
+                                                    alt="Midone Tailwind HTML Admin Template"
+                                                />
+                                            </x-base.tippy>
+                                            <x-base.tippy
+                                                class="image-fit zoom-in mr-1 h-8 w-8"
+                                                as="div"
+                                                content="{{ $fakers[1]['products'][0]['name'] }}"
+                                            >
+                                                <img
+                                                    class="rounded-md border border-white"
+                                                    src="{{ Vite::asset($fakers[8]['photos'][1]) }}"
+                                                    alt="Midone Tailwind HTML Admin Template"
+                                                />
+                                            </x-base.tippy>
+                                            <x-base.tippy
+                                                class="image-fit zoom-in mr-1 h-8 w-8"
+                                                as="div"
+                                                content="{{ $fakers[2]['products'][0]['name'] }}"
+                                            >
+                                                <img
+                                                    class="rounded-md border border-white"
+                                                    src="{{ Vite::asset($fakers[8]['photos'][2]) }}"
+                                                    alt="Midone Tailwind HTML Admin Template"
+                                                />
+                                            </x-base.tippy>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="intro-x my-4 text-center text-xs text-slate-500">
+                                12 November
+                            </div>
+                            <div class="intro-x relative mb-3 flex items-center">
+                                <div
+                                    class="before:absolute before:mt-5 before:ml-5 before:block before:h-px before:w-20 before:bg-slate-200 before:dark:bg-darkmode-400">
+                                    <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
+                                        <img
+                                            src="{{ Vite::asset($fakers[7]['photos'][0]) }}"
+                                            alt="Midone Tailwind HTML Admin Template"
+                                        />
+                                    </div>
+                                </div>
+                                <div class="box zoom-in ml-4 flex-1 px-5 py-3">
+                                    <div class="flex items-center">
+                                        <div class="font-medium">
+                                            {{ $fakers[7]['users'][0]['name'] }}
+                                        </div>
+                                        <div class="ml-auto text-xs text-slate-500">07:00 PM</div>
+                                    </div>
+                                    <div class="mt-1 text-slate-500">
+                                        Has changed
+                                        <a
+                                            class="text-primary"
+                                            href=""
+                                        >
+                                            {{ $fakers[7]['products'][0]['name'] }}
+                                        </a>
+                                        price and description
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="intro-x relative mb-3 flex items-center">
+                                <div
+                                    class="before:absolute before:mt-5 before:ml-5 before:block before:h-px before:w-20 before:bg-slate-200 before:dark:bg-darkmode-400">
+                                    <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
+                                        <img
+                                            src="{{ Vite::asset($fakers[6]['photos'][0]) }}"
+                                            alt="Midone Tailwind HTML Admin Template"
+                                        />
+                                    </div>
+                                </div>
+                                <div class="box zoom-in ml-4 flex-1 px-5 py-3">
+                                    <div class="flex items-center">
+                                        <div class="font-medium">
+                                            {{ $fakers[6]['users'][0]['name'] }}
+                                        </div>
+                                        <div class="ml-auto text-xs text-slate-500">07:00 PM</div>
+                                    </div>
+                                    <div class="mt-1 text-slate-500">
+                                        Has changed
+                                        <a
+                                            class="text-primary"
+                                            href=""
+                                        >
+                                            {{ $fakers[6]['products'][0]['name'] }}
+                                        </a>
+                                        description
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- END: Recent Activities -->
+                    <!-- BEGIN: Important Notes -->
+                    <div
+                        class="col-span-12 mt-3 md:col-span-6 xl:col-span-12 xl:col-start-1 xl:row-start-1 2xl:col-start-auto 2xl:row-start-auto">
+                        <div class="intro-x flex h-10 items-center">
+                            <h2 class="mr-auto truncate text-lg font-medium">
+                                Important Notes
+                            </h2>
+                            <x-base.button
+                                class="tiny-slider-navigator mr-2 border-slate-300 px-2 text-slate-600 dark:text-slate-300"
+                                data-carousel="important-notes"
+                                data-target="prev"
+                            >
+                                <x-base.lucide
+                                    class="h-4 w-4"
+                                    icon="ChevronLeft"
+                                />
+                            </x-base.button>
+                            <x-base.button
+                                class="tiny-slider-navigator mr-2 border-slate-300 px-2 text-slate-600 dark:text-slate-300"
+                                data-carousel="important-notes"
+                                data-target="next"
+                            >
+                                <x-base.lucide
+                                    class="h-4 w-4"
+                                    icon="ChevronRight"
+                                />
+                            </x-base.button>
+                        </div>
+                        <div class="intro-x mt-5">
+                            <div class="box zoom-in">
+                                <x-base.tiny-slider id="important-notes">
+                                    <div class="p-5">
+                                        <div class="truncate text-base font-medium">
+                                            Lorem Ipsum is simply dummy text
+                                        </div>
+                                        <div class="mt-1 text-slate-400">20 Hours ago</div>
+                                        <div class="mt-1 text-justify text-slate-500">
+                                            Lorem Ipsum is simply dummy text of the printing and
+                                            typesetting industry. Lorem Ipsum has been the industry's
+                                            standard dummy text ever since the 1500s.
+                                        </div>
+                                        <div class="mt-5 flex font-medium">
+                                            <x-base.button
+                                                class="px-2 py-1"
+                                                type="button"
+                                                variant="secondary"
+                                            >
+                                                View Notes
+                                            </x-base.button>
+                                            <x-base.button
+                                                class="ml-auto px-2 py-1"
+                                                type="button"
+                                                variant="outline-secondary"
+                                            >
+                                                Dismiss
+                                            </x-base.button>
+                                        </div>
+                                    </div>
+                                    <div class="p-5">
+                                        <div class="truncate text-base font-medium">
+                                            Lorem Ipsum is simply dummy text
+                                        </div>
+                                        <div class="mt-1 text-slate-400">20 Hours ago</div>
+                                        <div class="mt-1 text-justify text-slate-500">
+                                            Lorem Ipsum is simply dummy text of the printing and
+                                            typesetting industry. Lorem Ipsum has been the industry's
+                                            standard dummy text ever since the 1500s.
+                                        </div>
+                                        <div class="mt-5 flex font-medium">
+                                            <x-base.button
+                                                class="px-2 py-1"
+                                                type="button"
+                                                variant="secondary"
+                                            >
+                                                View Notes
+                                            </x-base.button>
+                                            <x-base.button
+                                                class="ml-auto px-2 py-1"
+                                                type="button"
+                                                variant="outline-secondary"
+                                            >
+                                                Dismiss
+                                            </x-base.button>
+                                        </div>
+                                    </div>
+                                    <div class="p-5">
+                                        <div class="truncate text-base font-medium">
+                                            Lorem Ipsum is simply dummy text
+                                        </div>
+                                        <div class="mt-1 text-slate-400">20 Hours ago</div>
+                                        <div class="mt-1 text-justify text-slate-500">
+                                            Lorem Ipsum is simply dummy text of the printing and
+                                            typesetting industry. Lorem Ipsum has been the industry's
+                                            standard dummy text ever since the 1500s.
+                                        </div>
+                                        <div class="mt-5 flex font-medium">
+                                            <x-base.button
+                                                class="px-2 py-1"
+                                                type="button"
+                                                variant="secondary"
+                                            >
+                                                View Notes
+                                            </x-base.button>
+                                            <x-base.button
+                                                class="ml-auto px-2 py-1"
+                                                type="button"
+                                                variant="outline-secondary"
+                                            >
+                                                Dismiss
+                                            </x-base.button>
+                                        </div>
+                                    </div>
+                                </x-base.tiny-slider>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- END: Important Notes -->
+                    <!-- BEGIN: Schedules -->
+                    <div
+                        class="col-span-12 mt-3 md:col-span-6 xl:col-span-4 xl:col-start-1 xl:row-start-2 2xl:col-span-12 2xl:col-start-auto 2xl:row-start-auto">
+                        <div class="intro-x flex h-10 items-center">
+                            <h2 class="mr-5 truncate text-lg font-medium">Schedules</h2>
+                            <a
+                                class="ml-auto flex items-center truncate text-primary"
+                                href=""
+                            >
+                                <x-base.lucide
+                                    class="mr-1 h-4 w-4"
+                                    icon="Plus"
+                                /> Add New Schedules
+                            </a>
+                        </div>
+                        <div class="mt-5">
+                            <div class="intro-x box">
+                                <div class="p-5">
+                                    <div class="flex">
+                                        <x-base.lucide
+                                            class="h-5 w-5 text-slate-500"
+                                            icon="ChevronLeft"
+                                        />
+                                        <div class="mx-auto text-base font-medium">April</div>
+                                        <x-base.lucide
+                                            class="h-5 w-5 text-slate-500"
+                                            icon="ChevronRight"
+                                        />
+                                    </div>
+                                    <div class="mt-5 grid grid-cols-7 gap-4 text-center">
+                                        <div class="font-medium">Su</div>
+                                        <div class="font-medium">Mo</div>
+                                        <div class="font-medium">Tu</div>
+                                        <div class="font-medium">We</div>
+                                        <div class="font-medium">Th</div>
+                                        <div class="font-medium">Fr</div>
+                                        <div class="font-medium">Sa</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">29</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">30</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">31</div>
+                                        <div class="relative rounded py-0.5">1</div>
+                                        <div class="relative rounded py-0.5">2</div>
+                                        <div class="relative rounded py-0.5">3</div>
+                                        <div class="relative rounded py-0.5">4</div>
+                                        <div class="relative rounded py-0.5">5</div>
+                                        <div class="relative rounded bg-success/20 py-0.5 dark:bg-success/30">
+                                            6
+                                        </div>
+                                        <div class="relative rounded py-0.5">7</div>
+                                        <div class="relative rounded bg-primary py-0.5 text-white">
+                                            8
+                                        </div>
+                                        <div class="relative rounded py-0.5">9</div>
+                                        <div class="relative rounded py-0.5">10</div>
+                                        <div class="relative rounded py-0.5">11</div>
+                                        <div class="relative rounded py-0.5">12</div>
+                                        <div class="relative rounded py-0.5">13</div>
+                                        <div class="relative rounded py-0.5">14</div>
+                                        <div class="relative rounded py-0.5">15</div>
+                                        <div class="relative rounded py-0.5">16</div>
+                                        <div class="relative rounded py-0.5">17</div>
+                                        <div class="relative rounded py-0.5">18</div>
+                                        <div class="relative rounded py-0.5">19</div>
+                                        <div class="relative rounded py-0.5">20</div>
+                                        <div class="relative rounded py-0.5">21</div>
+                                        <div class="relative rounded py-0.5">22</div>
+                                        <div class="relative rounded bg-pending/20 py-0.5 dark:bg-pending/30">
+                                            23
+                                        </div>
+                                        <div class="relative rounded py-0.5">24</div>
+                                        <div class="relative rounded py-0.5">25</div>
+                                        <div class="relative rounded py-0.5">26</div>
+                                        <div class="relative rounded bg-primary/10 py-0.5 dark:bg-primary/50">
+                                            27
+                                        </div>
+                                        <div class="relative rounded py-0.5">28</div>
+                                        <div class="relative rounded py-0.5">29</div>
+                                        <div class="relative rounded py-0.5">30</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">1</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">2</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">3</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">4</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">5</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">6</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">7</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">8</div>
+                                        <div class="relative rounded py-0.5 text-slate-500">9</div>
+                                    </div>
+                                </div>
+                                <div class="border-t border-slate-200/60 p-5">
+                                    <div class="flex items-center">
+                                        <div class="mr-3 h-2 w-2 rounded-full bg-pending"></div>
+                                        <span class="truncate">UI/UX Workshop</span>
+                                        <span class="font-medium xl:ml-auto">23th</span>
+                                    </div>
+                                    <div class="mt-4 flex items-center">
+                                        <div class="mr-3 h-2 w-2 rounded-full bg-primary"></div>
+                                        <span class="truncate"> VueJs Frontend Development </span>
+                                        <span class="font-medium xl:ml-auto">10th</span>
+                                    </div>
+                                    <div class="mt-4 flex items-center">
+                                        <div class="mr-3 h-2 w-2 rounded-full bg-warning"></div>
+                                        <span class="truncate">Laravel Rest API</span>
+                                        <span class="font-medium xl:ml-auto">31th</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- END: Schedules -->
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection