From 4bfb472dbe8bed4707d6b5407a0ba060032567a0 Mon Sep 17 00:00:00 2001
From: arieeefajar <ariefajar739@gmail.com>
Date: Wed, 22 Jan 2025 20:34:09 +0700
Subject: [PATCH] feat(auth): func logout with create layout page

---
 .../Auth/AuthenticatedSessionController.php   |   5 +-
 app/Http/Controllers/DashboardController.php  |  18 +
 app/Http/Middleware/Authenticate.php          |   2 +-
 resources/views/dashboard/admin.blade.php     |  29 +
 resources/views/dashboard/petugas.blade.php   |  29 +
 resources/views/layouts/app.blade.php         | 629 +++++++++++-
 resources/views/layouts/guest.blade.php       |  30 -
 resources/views/layouts/navigation.blade.php  | 100 --
 resources/views/partials/footer.blade.php     |  16 +
 resources/views/partials/navbar.blade.php     | 222 ++++
 resources/views/partials/sidebar.blade.php    | 970 ++++++++++++++++++
 routes/web.php                                |  15 +-
 12 files changed, 1896 insertions(+), 169 deletions(-)
 create mode 100644 app/Http/Controllers/DashboardController.php
 create mode 100644 resources/views/dashboard/admin.blade.php
 create mode 100644 resources/views/dashboard/petugas.blade.php
 delete mode 100644 resources/views/layouts/guest.blade.php
 delete mode 100644 resources/views/layouts/navigation.blade.php
 create mode 100644 resources/views/partials/footer.blade.php
 create mode 100644 resources/views/partials/navbar.blade.php
 create mode 100644 resources/views/partials/sidebar.blade.php

diff --git a/app/Http/Controllers/Auth/AuthenticatedSessionController.php b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
index c00776e..26e5382 100644
--- a/app/Http/Controllers/Auth/AuthenticatedSessionController.php
+++ b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
@@ -7,6 +7,7 @@
 use App\Providers\RouteServiceProvider;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
+use Illuminate\Queue\Jobs\RedisJob;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\View\View;
 
@@ -34,10 +35,10 @@ public function store(LoginRequest $request)
         $user = Auth::user();
 
         if ($user->role == "admin") {
-            dd("dashboard admin");
+            return redirect()->route('dashboard.admin');
         }
 
-        dd("dashboard petugas");
+        return redirect()->route('dashboard.petugas');
     }
 
     /**
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
new file mode 100644
index 0000000..119c906
--- /dev/null
+++ b/app/Http/Controllers/DashboardController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class DashboardController extends Controller
+{
+    public function admin()
+    {
+        return view('dashboard.admin');
+    }
+
+    public function petugas()
+    {
+        return view('dashboard.petugas');
+    }
+}
diff --git a/app/Http/Middleware/Authenticate.php b/app/Http/Middleware/Authenticate.php
index d4ef644..581d215 100644
--- a/app/Http/Middleware/Authenticate.php
+++ b/app/Http/Middleware/Authenticate.php
@@ -12,6 +12,6 @@ class Authenticate extends Middleware
      */
     protected function redirectTo(Request $request): ?string
     {
-        return $request->expectsJson() ? null : route('login');
+        return $request->expectsJson() ? null : route('auth.login');
     }
 }
diff --git a/resources/views/dashboard/admin.blade.php b/resources/views/dashboard/admin.blade.php
new file mode 100644
index 0000000..d15d845
--- /dev/null
+++ b/resources/views/dashboard/admin.blade.php
@@ -0,0 +1,29 @@
+@extends('layouts.app')
+@push('title', 'Dashboard Admin')
+@section('content')
+    <div class="page-content">
+        <div class="container-fluid">
+
+            <!-- start page title -->
+            <div class="row">
+                <div class="col-12">
+                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
+                        <h4 class="mb-sm-0">Dashboard Admin</h4>
+
+                        <div class="page-title-right">
+                            <ol class="breadcrumb m-0">
+                                <li class="breadcrumb-item"><a href="javascript: void(0);">Pages</a></li>
+                                <li class="breadcrumb-item active">Dashboard Admin</li>
+                            </ol>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <!-- end page title -->
+
+        </div>
+        <!-- container-fluid -->
+    </div>
+    <!-- End Page-content -->
+@endsection
diff --git a/resources/views/dashboard/petugas.blade.php b/resources/views/dashboard/petugas.blade.php
new file mode 100644
index 0000000..6618b0a
--- /dev/null
+++ b/resources/views/dashboard/petugas.blade.php
@@ -0,0 +1,29 @@
+@extends('layouts.app')
+@push('title', 'Dashboard Petugas')
+@section('content')
+    <div class="page-content">
+        <div class="container-fluid">
+
+            <!-- start page title -->
+            <div class="row">
+                <div class="col-12">
+                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
+                        <h4 class="mb-sm-0">Dashboard petugas</h4>
+
+                        <div class="page-title-right">
+                            <ol class="breadcrumb m-0">
+                                <li class="breadcrumb-item"><a href="javascript: void(0);">Pages</a></li>
+                                <li class="breadcrumb-item active">Dashboard petugas</li>
+                            </ol>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <!-- end page title -->
+
+        </div>
+        <!-- container-fluid -->
+    </div>
+    <!-- End Page-content -->
+@endsection
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 9069c10..a641dbc 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,36 +1,607 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="csrf-token" content="{{ csrf_token() }}">
+<!doctype html>
+<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="light" data-sidebar-size="lg">
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+<head>
 
-        <!-- Fonts -->
-        <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+    <meta charset="utf-8" />
+    <title>CornQuest | @stack('title')</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
+    <meta content="Themesbrand" name="author" />
+    <!-- App favicon -->
+    <link rel="shortcut icon" href="assets/images/favicon.ico">
 
-        <!-- Scripts -->
-        @vite(['resources/css/app.css', 'resources/js/app.js'])
-    </head>
-    <body class="font-sans antialiased">
-        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
-            @include('layouts.navigation')
+    <!-- Layout config Js -->
+    <script src="assets/js/layout.js"></script>
+    <!-- Bootstrap Css -->
+    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+    <!-- Icons Css -->
+    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
+    <!-- App Css-->
+    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
+    <!-- custom Css-->
+    <link href="assets/css/custom.min.css" rel="stylesheet" type="text/css" />
 
-            <!-- Page Heading -->
-            @if (isset($header))
-                <header class="bg-white dark:bg-gray-800 shadow">
-                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                        {{ $header }}
-                    </div>
-                </header>
-            @endif
 
-            <!-- Page Content -->
-            <main>
-                {{ $slot }}
-            </main>
+</head>
+
+<body>
+
+    <!-- Begin page -->
+    <div id="layout-wrapper">
+
+        @include('partials.navbar')
+        <!-- ========== App Menu ========== -->
+        @include('partials.sidebar')
+        <!-- Left Sidebar End -->
+        <!-- Vertical Overlay-->
+        <div class="vertical-overlay"></div>
+
+        <!-- ============================================================== -->
+        <!-- Start right Content here -->
+        <!-- ============================================================== -->
+        <div class="main-content">
+
+            @yield('content')
+
+            @include('partials.footer')
         </div>
-    </body>
+        <!-- end main content-->
+
+    </div>
+    <!-- END layout-wrapper -->
+
+
+    <!--start back-to-top-->
+    <button onclick="topFunction()" class="btn btn-danger btn-icon" id="back-to-top">
+        <i class="ri-arrow-up-line"></i>
+    </button>
+    <!--end back-to-top-->
+
+    <div class="customizer-setting d-none d-md-block">
+        <div class="btn-primary btn-rounded shadow-lg btn btn-icon btn-lg p-2" data-bs-toggle="offcanvas"
+            data-bs-target="#theme-settings-offcanvas" aria-controls="theme-settings-offcanvas">
+            <i class='mdi mdi-spin mdi-cog-outline fs-22'></i>
+        </div>
+    </div>
+
+    <!-- Theme Settings -->
+    <div class="offcanvas offcanvas-end border-0" tabindex="-1" id="theme-settings-offcanvas">
+        <div class="d-flex align-items-center bg-primary bg-gradient p-3 offcanvas-header">
+            <h5 class="m-0 me-2 text-white">Theme Customizer</h5>
+
+            <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="offcanvas"
+                aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body p-0">
+            <div data-simplebar class="h-100">
+                <div class="p-4">
+                    <h6 class="mb-0 fw-semibold text-uppercase">Layout</h6>
+                    <p class="text-muted">Choose your layout</p>
+
+                    <div class="row">
+                        <div class="col-4">
+                            <div class="form-check card-radio">
+                                <input id="customizer-layout01" name="data-layout" type="radio" value="vertical"
+                                    class="form-check-input">
+                                <label class="form-check-label p-0 avatar-md w-100" for="customizer-layout01">
+                                    <span class="d-flex gap-1 h-100">
+                                        <span class="flex-shrink-0">
+                                            <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                            </span>
+                                        </span>
+                                        <span class="flex-grow-1">
+                                            <span class="d-flex h-100 flex-column">
+                                                <span class="bg-light d-block p-1"></span>
+                                                <span class="bg-light d-block p-1 mt-auto"></span>
+                                            </span>
+                                        </span>
+                                    </span>
+                                </label>
+                            </div>
+                            <h5 class="fs-13 text-center mt-2">Vertical</h5>
+                        </div>
+                        <div class="col-4">
+                            <div class="form-check card-radio">
+                                <input id="customizer-layout02" name="data-layout" type="radio" value="horizontal"
+                                    class="form-check-input">
+                                <label class="form-check-label p-0 avatar-md w-100" for="customizer-layout02">
+                                    <span class="d-flex h-100 flex-column gap-1">
+                                        <span class="bg-light d-flex p-1 gap-1 align-items-center">
+                                            <span class="d-block p-1 bg-soft-primary rounded me-1"></span>
+                                            <span class="d-block p-1 pb-0 px-2 bg-soft-primary ms-auto"></span>
+                                            <span class="d-block p-1 pb-0 px-2 bg-soft-primary"></span>
+                                        </span>
+                                        <span class="bg-light d-block p-1"></span>
+                                        <span class="bg-light d-block p-1 mt-auto"></span>
+                                    </span>
+                                </label>
+                            </div>
+                            <h5 class="fs-13 text-center mt-2">Horizontal</h5>
+                        </div>
+                        <div class="col-4">
+                            <div class="form-check card-radio">
+                                <input id="customizer-layout03" name="data-layout" type="radio" value="twocolumn"
+                                    class="form-check-input">
+                                <label class="form-check-label p-0 avatar-md w-100" for="customizer-layout03">
+                                    <span class="d-flex gap-1 h-100">
+                                        <span class="flex-shrink-0">
+                                            <span class="bg-light d-flex h-100 flex-column gap-1">
+                                                <span class="d-block p-1 bg-soft-primary mb-2"></span>
+                                                <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                            </span>
+                                        </span>
+                                        <span class="flex-shrink-0">
+                                            <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                            </span>
+                                        </span>
+                                        <span class="flex-grow-1">
+                                            <span class="d-flex h-100 flex-column">
+                                                <span class="bg-light d-block p-1"></span>
+                                                <span class="bg-light d-block p-1 mt-auto"></span>
+                                            </span>
+                                        </span>
+                                    </span>
+                                </label>
+                            </div>
+                            <h5 class="fs-13 text-center mt-2">Two Column</h5>
+                        </div>
+                        <!-- end col -->
+                    </div>
+
+                    <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Color Scheme</h6>
+                    <p class="text-muted">Choose Light or Dark Scheme.</p>
+
+                    <div class="colorscheme-cardradio">
+                        <div class="row">
+                            <div class="col-4">
+                                <div class="form-check card-radio">
+                                    <input class="form-check-input" type="radio" name="data-layout-mode"
+                                        id="layout-mode-light" value="light">
+                                    <label class="form-check-label p-0 avatar-md w-100" for="layout-mode-light">
+                                        <span class="d-flex gap-1 h-100">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                    <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-light d-block p-1"></span>
+                                                    <span class="bg-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Light</h5>
+                            </div>
+
+                            <div class="col-4">
+                                <div class="form-check card-radio dark">
+                                    <input class="form-check-input" type="radio" name="data-layout-mode"
+                                        id="layout-mode-dark" value="dark">
+                                    <label class="form-check-label p-0 avatar-md w-100 bg-dark"
+                                        for="layout-mode-dark">
+                                        <span class="d-flex gap-1 h-100">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-soft-light d-flex h-100 flex-column gap-1 p-1">
+                                                    <span class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-soft-light d-block p-1"></span>
+                                                    <span class="bg-soft-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Dark</h5>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="layout-width">
+                        <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Layout Width</h6>
+                        <p class="text-muted">Choose Fluid or Boxed layout.</p>
+
+                        <div class="row">
+                            <div class="col-4">
+                                <div class="form-check card-radio">
+                                    <input class="form-check-input" type="radio" name="data-layout-width"
+                                        id="layout-width-fluid" value="fluid">
+                                    <label class="form-check-label p-0 avatar-md w-100" for="layout-width-fluid">
+                                        <span class="d-flex gap-1 h-100">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                    <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-light d-block p-1"></span>
+                                                    <span class="bg-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Fluid</h5>
+                            </div>
+                            <div class="col-4">
+                                <div class="form-check card-radio">
+                                    <input class="form-check-input" type="radio" name="data-layout-width"
+                                        id="layout-width-boxed" value="boxed">
+                                    <label class="form-check-label p-0 avatar-md w-100 px-2" for="layout-width-boxed">
+                                        <span class="d-flex gap-1 h-100 border-start border-end">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                    <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-light d-block p-1"></span>
+                                                    <span class="bg-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Boxed</h5>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="layout-position">
+                        <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Layout Position</h6>
+                        <p class="text-muted">Choose Fixed or Scrollable Layout Position.</p>
+
+                        <div class="btn-group radio" role="group">
+                            <input type="radio" class="btn-check" name="data-layout-position"
+                                id="layout-position-fixed" value="fixed">
+                            <label class="btn btn-light w-sm" for="layout-position-fixed">Fixed</label>
+
+                            <input type="radio" class="btn-check" name="data-layout-position"
+                                id="layout-position-scrollable" value="scrollable">
+                            <label class="btn btn-light w-sm ms-0" for="layout-position-scrollable">Scrollable</label>
+                        </div>
+                    </div>
+                    <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Topbar Color</h6>
+                    <p class="text-muted">Choose Light or Dark Topbar Color.</p>
+
+                    <div class="row">
+                        <div class="col-4">
+                            <div class="form-check card-radio">
+                                <input class="form-check-input" type="radio" name="data-topbar"
+                                    id="topbar-color-light" value="light">
+                                <label class="form-check-label p-0 avatar-md w-100" for="topbar-color-light">
+                                    <span class="d-flex gap-1 h-100">
+                                        <span class="flex-shrink-0">
+                                            <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                            </span>
+                                        </span>
+                                        <span class="flex-grow-1">
+                                            <span class="d-flex h-100 flex-column">
+                                                <span class="bg-light d-block p-1"></span>
+                                                <span class="bg-light d-block p-1 mt-auto"></span>
+                                            </span>
+                                        </span>
+                                    </span>
+                                </label>
+                            </div>
+                            <h5 class="fs-13 text-center mt-2">Light</h5>
+                        </div>
+                        <div class="col-4">
+                            <div class="form-check card-radio">
+                                <input class="form-check-input" type="radio" name="data-topbar"
+                                    id="topbar-color-dark" value="dark">
+                                <label class="form-check-label p-0 avatar-md w-100" for="topbar-color-dark">
+                                    <span class="d-flex gap-1 h-100">
+                                        <span class="flex-shrink-0">
+                                            <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                            </span>
+                                        </span>
+                                        <span class="flex-grow-1">
+                                            <span class="d-flex h-100 flex-column">
+                                                <span class="bg-primary d-block p-1"></span>
+                                                <span class="bg-light d-block p-1 mt-auto"></span>
+                                            </span>
+                                        </span>
+                                    </span>
+                                </label>
+                            </div>
+                            <h5 class="fs-13 text-center mt-2">Dark</h5>
+                        </div>
+                    </div>
+
+                    <div id="sidebar-size">
+                        <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Size</h6>
+                        <p class="text-muted">Choose a size of Sidebar.</p>
+
+                        <div class="row">
+                            <div class="col-4">
+                                <div class="form-check sidebar-setting card-radio">
+                                    <input class="form-check-input" type="radio" name="data-sidebar-size"
+                                        id="sidebar-size-default" value="lg">
+                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-default">
+                                        <span class="d-flex gap-1 h-100">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                    <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-light d-block p-1"></span>
+                                                    <span class="bg-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Default</h5>
+                            </div>
+
+                            <div class="col-4">
+                                <div class="form-check sidebar-setting card-radio">
+                                    <input class="form-check-input" type="radio" name="data-sidebar-size"
+                                        id="sidebar-size-compact" value="md">
+                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-compact">
+                                        <span class="d-flex gap-1 h-100">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                    <span class="d-block p-1 bg-soft-primary rounded mb-2"></span>
+                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-light d-block p-1"></span>
+                                                    <span class="bg-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Compact</h5>
+                            </div>
+
+                            <div class="col-4">
+                                <div class="form-check sidebar-setting card-radio">
+                                    <input class="form-check-input" type="radio" name="data-sidebar-size"
+                                        id="sidebar-size-small" value="sm">
+                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small">
+                                        <span class="d-flex gap-1 h-100">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-light d-flex h-100 flex-column gap-1">
+                                                    <span class="d-block p-1 bg-soft-primary mb-2"></span>
+                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-light d-block p-1"></span>
+                                                    <span class="bg-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Small (Icon View)</h5>
+                            </div>
+
+                            <div class="col-4">
+                                <div class="form-check sidebar-setting card-radio">
+                                    <input class="form-check-input" type="radio" name="data-sidebar-size"
+                                        id="sidebar-size-small-hover" value="sm-hover">
+                                    <label class="form-check-label p-0 avatar-md w-100"
+                                        for="sidebar-size-small-hover">
+                                        <span class="d-flex gap-1 h-100">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-light d-flex h-100 flex-column gap-1">
+                                                    <span class="d-block p-1 bg-soft-primary mb-2"></span>
+                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 pb-0 bg-soft-primary"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-light d-block p-1"></span>
+                                                    <span class="bg-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Small Hover View</h5>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="sidebar-view">
+                        <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar View</h6>
+                        <p class="text-muted">Choose Default or Detached Sidebar view.</p>
+
+                        <div class="row">
+                            <div class="col-4">
+                                <div class="form-check sidebar-setting card-radio">
+                                    <input class="form-check-input" type="radio" name="data-layout-style"
+                                        id="sidebar-view-default" value="default">
+                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-default">
+                                        <span class="d-flex gap-1 h-100">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                    <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-light d-block p-1"></span>
+                                                    <span class="bg-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Default</h5>
+                            </div>
+                            <div class="col-4">
+                                <div class="form-check sidebar-setting card-radio">
+                                    <input class="form-check-input" type="radio" name="data-layout-style"
+                                        id="sidebar-view-detached" value="detached">
+                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-detached">
+                                        <span class="d-flex h-100 flex-column">
+                                            <span class="bg-light d-flex p-1 gap-1 align-items-center px-2">
+                                                <span class="d-block p-1 bg-soft-primary rounded me-1"></span>
+                                                <span class="d-block p-1 pb-0 px-2 bg-soft-primary ms-auto"></span>
+                                                <span class="d-block p-1 pb-0 px-2 bg-soft-primary"></span>
+                                            </span>
+                                            <span class="d-flex gap-1 h-100 p-1 px-2">
+                                                <span class="flex-shrink-0">
+                                                    <span class="bg-light d-flex h-100 flex-column gap-1 p-1">
+                                                        <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                        <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                        <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    </span>
+                                                </span>
+                                            </span>
+                                            <span class="bg-light d-block p-1 mt-auto px-2"></span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Detached</h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="sidebar-color">
+                        <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Color</h6>
+                        <p class="text-muted">Choose Ligth or Dark Sidebar Color.</p>
+
+                        <div class="row">
+                            <div class="col-4">
+                                <div class="form-check sidebar-setting card-radio">
+                                    <input class="form-check-input" type="radio" name="data-sidebar"
+                                        id="sidebar-color-light" value="light">
+                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-light">
+                                        <span class="d-flex gap-1 h-100">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-white border-end d-flex h-100 flex-column gap-1 p-1">
+                                                    <span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-light d-block p-1"></span>
+                                                    <span class="bg-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Light</h5>
+                            </div>
+                            <div class="col-4">
+                                <div class="form-check sidebar-setting card-radio">
+                                    <input class="form-check-input" type="radio" name="data-sidebar"
+                                        id="sidebar-color-dark" value="dark">
+                                    <label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-dark">
+                                        <span class="d-flex gap-1 h-100">
+                                            <span class="flex-shrink-0">
+                                                <span class="bg-primary d-flex h-100 flex-column gap-1 p-1">
+                                                    <span class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
+                                                    <span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
+                                                </span>
+                                            </span>
+                                            <span class="flex-grow-1">
+                                                <span class="d-flex h-100 flex-column">
+                                                    <span class="bg-light d-block p-1"></span>
+                                                    <span class="bg-light d-block p-1 mt-auto"></span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                    </label>
+                                </div>
+                                <h5 class="fs-13 text-center mt-2">Dark</h5>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+        <div class="offcanvas-footer border-top p-3 text-center">
+            <div class="row">
+                <div class="col-6">
+                    <button type="button" class="btn btn-light w-100" id="reset-layout">Reset</button>
+                </div>
+                <div class="col-6">
+                    <a href="https://1.envato.market/velzon-admin" target="_blank" class="btn btn-primary w-100">Buy
+                        Now</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- JAVASCRIPT -->
+    <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="assets/libs/simplebar/simplebar.min.js"></script>
+    <script src="assets/libs/node-waves/waves.min.js"></script>
+    <script src="assets/libs/feather-icons/feather.min.js"></script>
+    <script src="assets/js/pages/plugins/lord-icon-2.1.0.js"></script>
+    <script src="assets/js/plugins.js"></script>
+
+    <!-- App js -->
+    <script src="assets/js/app.js"></script>
+</body>
+
 </html>
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
deleted file mode 100644
index 4b369b6..0000000
--- a/resources/views/layouts/guest.blade.php
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="csrf-token" content="{{ csrf_token() }}">
-
-        <title>{{ config('app.name', 'Laravel') }}</title>
-
-        <!-- Fonts -->
-        <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
-
-        <!-- Scripts -->
-        @vite(['resources/css/app.css', 'resources/js/app.js'])
-    </head>
-    <body class="font-sans text-gray-900 antialiased">
-        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
-            <div>
-                <a href="/">
-                    <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
-                </a>
-            </div>
-
-            <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
-                {{ $slot }}
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
deleted file mode 100644
index c64bf64..0000000
--- a/resources/views/layouts/navigation.blade.php
+++ /dev/null
@@ -1,100 +0,0 @@
-<nav x-data="{ open: false }" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
-    <!-- Primary Navigation Menu -->
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between h-16">
-            <div class="flex">
-                <!-- Logo -->
-                <div class="shrink-0 flex items-center">
-                    <a href="{{ route('dashboard') }}">
-                        <x-application-logo class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" />
-                    </a>
-                </div>
-
-                <!-- Navigation Links -->
-                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
-                    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
-                        {{ __('Dashboard') }}
-                    </x-nav-link>
-                </div>
-            </div>
-
-            <!-- Settings Dropdown -->
-            <div class="hidden sm:flex sm:items-center sm:ms-6">
-                <x-dropdown align="right" width="48">
-                    <x-slot name="trigger">
-                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
-                            <div>{{ Auth::user()->name }}</div>
-
-                            <div class="ms-1">
-                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                        </button>
-                    </x-slot>
-
-                    <x-slot name="content">
-                        <x-dropdown-link :href="route('profile.edit')">
-                            {{ __('Profile') }}
-                        </x-dropdown-link>
-
-                        <!-- Authentication -->
-                        <form method="POST" action="{{ route('logout') }}">
-                            @csrf
-
-                            <x-dropdown-link :href="route('logout')"
-                                    onclick="event.preventDefault();
-                                                this.closest('form').submit();">
-                                {{ __('Log Out') }}
-                            </x-dropdown-link>
-                        </form>
-                    </x-slot>
-                </x-dropdown>
-            </div>
-
-            <!-- Hamburger -->
-            <div class="-me-2 flex items-center sm:hidden">
-                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
-                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Responsive Navigation Menu -->
-    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
-        <div class="pt-2 pb-3 space-y-1">
-            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
-                {{ __('Dashboard') }}
-            </x-responsive-nav-link>
-        </div>
-
-        <!-- Responsive Settings Options -->
-        <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
-            <div class="px-4">
-                <div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}</div>
-                <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
-            </div>
-
-            <div class="mt-3 space-y-1">
-                <x-responsive-nav-link :href="route('profile.edit')">
-                    {{ __('Profile') }}
-                </x-responsive-nav-link>
-
-                <!-- Authentication -->
-                <form method="POST" action="{{ route('logout') }}">
-                    @csrf
-
-                    <x-responsive-nav-link :href="route('logout')"
-                            onclick="event.preventDefault();
-                                        this.closest('form').submit();">
-                        {{ __('Log Out') }}
-                    </x-responsive-nav-link>
-                </form>
-            </div>
-        </div>
-    </div>
-</nav>
diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
new file mode 100644
index 0000000..8d382fe
--- /dev/null
+++ b/resources/views/partials/footer.blade.php
@@ -0,0 +1,16 @@
+<footer class="footer">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-sm-6">
+                <script>
+                    document.write(new Date().getFullYear())
+                </script> © Velzon.
+            </div>
+            <div class="col-sm-6">
+                <div class="text-sm-end d-none d-sm-block">
+                    Design & Develop by Themesbrand
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
diff --git a/resources/views/partials/navbar.blade.php b/resources/views/partials/navbar.blade.php
new file mode 100644
index 0000000..d284cb7
--- /dev/null
+++ b/resources/views/partials/navbar.blade.php
@@ -0,0 +1,222 @@
+<header id="page-topbar">
+    <div class="layout-width">
+        <div class="navbar-header">
+            <div class="d-flex">
+                <!-- LOGO -->
+                <div class="navbar-brand-box horizontal-logo">
+                    <a href="index.html" class="logo logo-dark">
+                        <span class="logo-sm">
+                            <img src="assets/images/logo-sm.png" alt="" height="22">
+                        </span>
+                        <span class="logo-lg">
+                            <img src="assets/images/logo-dark.png" alt="" height="17">
+                        </span>
+                    </a>
+
+                    <a href="index.html" class="logo logo-light">
+                        <span class="logo-sm">
+                            <img src="assets/images/logo-sm.png" alt="" height="22">
+                        </span>
+                        <span class="logo-lg">
+                            <img src="assets/images/logo-light.png" alt="" height="17">
+                        </span>
+                    </a>
+                </div>
+
+                <button type="button" class="btn btn-sm px-3 fs-16 header-item vertical-menu-btn topnav-hamburger"
+                    id="topnav-hamburger-icon">
+                    <span class="hamburger-icon">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </span>
+                </button>
+
+                <!-- App Search-->
+                <form class="app-search d-none d-md-block">
+                    <div class="position-relative d-none">
+                        <input type="text" class="form-control" placeholder="Search..." autocomplete="off"
+                            id="search-options" value="">
+                        <span class="mdi mdi-magnify search-widget-icon"></span>
+                        <span class="mdi mdi-close-circle search-widget-icon search-widget-icon-close d-none"
+                            id="search-close-options"></span>
+                    </div>
+                    <div class="dropdown-menu dropdown-menu-lg" id="search-dropdown">
+                        <div data-simplebar style="max-height: 320px;">
+                            <!-- item-->
+                            <div class="dropdown-header">
+                                <h6 class="text-overflow text-muted mb-0 text-uppercase">Recent Searches</h6>
+                            </div>
+
+                            <div class="dropdown-item bg-transparent text-wrap">
+                                <a href="index.html" class="btn btn-soft-secondary btn-sm btn-rounded">how to
+                                    setup <i class="mdi mdi-magnify ms-1"></i></a>
+                                <a href="index.html" class="btn btn-soft-secondary btn-sm btn-rounded">buttons
+                                    <i class="mdi mdi-magnify ms-1"></i></a>
+                            </div>
+                            <!-- item-->
+                            <div class="dropdown-header mt-2">
+                                <h6 class="text-overflow text-muted mb-1 text-uppercase">Pages</h6>
+                            </div>
+
+                            <!-- item-->
+                            <a href="javascript:void(0);" class="dropdown-item notify-item">
+                                <i class="ri-bubble-chart-line align-middle fs-18 text-muted me-2"></i>
+                                <span>Analytics Dashboard</span>
+                            </a>
+
+                            <!-- item-->
+                            <a href="javascript:void(0);" class="dropdown-item notify-item">
+                                <i class="ri-lifebuoy-line align-middle fs-18 text-muted me-2"></i>
+                                <span>Help Center</span>
+                            </a>
+
+                            <!-- item-->
+                            <a href="javascript:void(0);" class="dropdown-item notify-item">
+                                <i class="ri-user-settings-line align-middle fs-18 text-muted me-2"></i>
+                                <span>My account settings</span>
+                            </a>
+
+                            <!-- item-->
+                            <div class="dropdown-header mt-2">
+                                <h6 class="text-overflow text-muted mb-2 text-uppercase">Members</h6>
+                            </div>
+
+                            <div class="notification-list">
+                                <!-- item -->
+                                <a href="javascript:void(0);" class="dropdown-item notify-item py-2">
+                                    <div class="d-flex">
+                                        <img src="assets/images/users/avatar-2.jpg"
+                                            class="me-3 rounded-circle avatar-xs" alt="user-pic">
+                                        <div class="flex-1">
+                                            <h6 class="m-0">Angela Bernier</h6>
+                                            <span class="fs-11 mb-0 text-muted">Manager</span>
+                                        </div>
+                                    </div>
+                                </a>
+                                <!-- item -->
+                                <a href="javascript:void(0);" class="dropdown-item notify-item py-2">
+                                    <div class="d-flex">
+                                        <img src="assets/images/users/avatar-3.jpg"
+                                            class="me-3 rounded-circle avatar-xs" alt="user-pic">
+                                        <div class="flex-1">
+                                            <h6 class="m-0">David Grasso</h6>
+                                            <span class="fs-11 mb-0 text-muted">Web Designer</span>
+                                        </div>
+                                    </div>
+                                </a>
+                                <!-- item -->
+                                <a href="javascript:void(0);" class="dropdown-item notify-item py-2">
+                                    <div class="d-flex">
+                                        <img src="assets/images/users/avatar-5.jpg"
+                                            class="me-3 rounded-circle avatar-xs" alt="user-pic">
+                                        <div class="flex-1">
+                                            <h6 class="m-0">Mike Bunch</h6>
+                                            <span class="fs-11 mb-0 text-muted">React Developer</span>
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+
+                        <div class="text-center pt-3 pb-1">
+                            <a href="pages-search-results.html" class="btn btn-primary btn-sm">View All
+                                Results <i class="ri-arrow-right-line ms-1"></i></a>
+                        </div>
+                    </div>
+                </form>
+            </div>
+
+            <div class="d-flex align-items-center">
+
+                <div class="dropdown d-md-none topbar-head-dropdown header-item">
+                    <button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle"
+                        id="page-header-search-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
+                        aria-expanded="false">
+                        <i class="bx bx-search fs-22"></i>
+                    </button>
+                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
+                        aria-labelledby="page-header-search-dropdown">
+                        <form class="p-3">
+                            <div class="form-group m-0">
+                                <div class="input-group">
+                                    <input type="text" class="form-control" placeholder="Search ..."
+                                        aria-label="Recipient's username">
+                                    <button class="btn btn-primary" type="submit"><i
+                                            class="mdi mdi-magnify"></i></button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+                <div class="ms-1 header-item d-none d-sm-flex">
+                    <button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle"
+                        data-toggle="fullscreen">
+                        <i class='bx bx-fullscreen fs-22'></i>
+                    </button>
+                </div>
+
+                <div class="ms-1 header-item d-none d-sm-flex">
+                    <button type="button"
+                        class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle light-dark-mode">
+                        <i class='bx bx-moon fs-22'></i>
+                    </button>
+                </div>
+
+                <div class="dropdown ms-sm-3 header-item topbar-user">
+                    <button type="button" class="btn" id="page-header-user-dropdown" data-bs-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false">
+                        <span class="d-flex align-items-center">
+                            <img class="rounded-circle header-profile-user" src="assets/images/users/avatar-1.jpg"
+                                alt="Header Avatar">
+                            <span class="text-start ms-xl-2">
+                                <span
+                                    class="d-none d-xl-inline-block ms-1 fw-medium user-name-text">{{ Auth::user()->username }}</span>
+                                <span
+                                    class="d-none d-xl-block ms-1 fs-12 text-muted user-name-sub-text">{{ Auth::user()->role }}</span>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="dropdown-menu dropdown-menu-end">
+                        <!-- item-->
+                        <h6 class="dropdown-header">Selamat Datang {{ Auth::user()->name }}!</h6>
+                        <a class="dropdown-item" href="pages-profile.html"><i
+                                class="mdi mdi-account-circle text-muted fs-16 align-middle me-1"></i> <span
+                                class="align-middle">Profile</span></a>
+                        <a class="dropdown-item" href="apps-chat.html"><i
+                                class="mdi mdi-message-text-outline text-muted fs-16 align-middle me-1"></i>
+                            <span class="align-middle">Messages</span></a>
+                        <a class="dropdown-item" href="apps-tasks-kanban.html"><i
+                                class="mdi mdi-calendar-check-outline text-muted fs-16 align-middle me-1"></i>
+                            <span class="align-middle">Taskboard</span></a>
+                        <a class="dropdown-item" href="pages-faqs.html"><i
+                                class="mdi mdi-lifebuoy text-muted fs-16 align-middle me-1"></i> <span
+                                class="align-middle">Help</span></a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="pages-profile.html"><i
+                                class="mdi mdi-wallet text-muted fs-16 align-middle me-1"></i> <span
+                                class="align-middle">Balance : <b>$5971.67</b></span></a>
+                        <a class="dropdown-item" href="pages-profile-settings.html"><span
+                                class="badge bg-soft-success text-success mt-1 float-end">New</span><i
+                                class="mdi mdi-cog-outline text-muted fs-16 align-middle me-1"></i> <span
+                                class="align-middle">Settings</span></a>
+                        <a class="dropdown-item" href="auth-lockscreen-basic.html"><i
+                                class="mdi mdi-lock text-muted fs-16 align-middle me-1"></i> <span
+                                class="align-middle">Lock screen</span></a>
+                        <form action="{{ route('auth.logout') }}" class="d-inline" method="POST">
+                            @csrf
+                            <button type="submit" class="dropdown-item">
+                                <i class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i> <span
+                                    class="align-middle" data-key="t-logout">Logout</span>
+                            </button>
+                        </form>
+                        {{-- <a class="dropdown-item" href="auth-logout-basic.html"><i
+                                class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i> <span
+                                class="align-middle" data-key="t-logout">Logout</span></a> --}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
diff --git a/resources/views/partials/sidebar.blade.php b/resources/views/partials/sidebar.blade.php
new file mode 100644
index 0000000..1986eb6
--- /dev/null
+++ b/resources/views/partials/sidebar.blade.php
@@ -0,0 +1,970 @@
+<div class="app-menu navbar-menu">
+    <!-- LOGO -->
+    <div class="navbar-brand-box">
+        <!-- Dark Logo-->
+        <a href="index.html" class="logo logo-dark">
+            <span class="logo-sm">
+                <img src="assets/images/logo-sm.png" alt="" height="22">
+            </span>
+            <span class="logo-lg">
+                <img src="assets/images/logo-dark.png" alt="" height="17">
+            </span>
+        </a>
+        <!-- Light Logo-->
+        <a href="index.html" class="logo logo-light">
+            <span class="logo-sm">
+                <img src="assets/images/logo-sm.png" alt="" height="22">
+            </span>
+            <span class="logo-lg">
+                <img src="assets/images/logo-light.png" alt="" height="17">
+            </span>
+        </a>
+        <button type="button" class="btn btn-sm p-0 fs-20 header-item float-end btn-vertical-sm-hover"
+            id="vertical-hover">
+            <i class="ri-record-circle-line"></i>
+        </button>
+    </div>
+
+    <div id="scrollbar">
+        <div class="container-fluid">
+
+            <div id="two-column-menu">
+            </div>
+            <ul class="navbar-nav" id="navbar-nav">
+                <li class="menu-title"><span data-key="t-menu">Menu</span></li>
+
+                @if (Auth::user()->role == 'admin')
+                    <li class="nav-item">
+                        <a class="nav-link menu-link {{ request()->routeIs('dashboard.admin') ? 'active' : '' }}"
+                            href="">
+                            <i data-feather="home" class="icon-dual"></i> <span
+                                data-key="t-dashboards">Dashboards</span>
+                        </a>
+                    </li>
+                @else
+                    <li class="nav-item">
+                        <a class="nav-link menu-link {{ request()->routeIs('dashboard.petugas') ? 'active' : '' }}"
+                            href="">
+                            <i data-feather="home" class="icon-dual"></i> <span
+                                data-key="t-dashboards">Dashboards</span>
+                        </a>
+                    </li>
+                @endif <!-- end Dashboard Menu -->
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarApps" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarApps">
+                        <i data-feather="grid" class="icon-dual"></i> <span data-key="t-apps">Apps</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarApps">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="apps-calendar.html" class="nav-link" data-key="t-calendar"> Calendar
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="apps-chat.html" class="nav-link" data-key="t-chat"> Chat </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="apps-mailbox.html" class="nav-link" data-key="t-mailbox"> Mailbox
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarEcommerce" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarEcommerce"
+                                    data-key="t-ecommerce">Ecommerce
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarEcommerce">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="apps-ecommerce-products.html" class="nav-link"
+                                                data-key="t-products"> Products </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-ecommerce-product-details.html" class="nav-link"
+                                                data-key="t-product-Details"> Product Details </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-ecommerce-add-product.html" class="nav-link"
+                                                data-key="t-create-product"> Create Product </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-ecommerce-orders.html" class="nav-link" data-key="t-orders">
+                                                Orders </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-ecommerce-order-details.html" class="nav-link"
+                                                data-key="t-order-details"> Order Details </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-ecommerce-customers.html" class="nav-link"
+                                                data-key="t-customers"> Customers </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-ecommerce-cart.html" class="nav-link"
+                                                data-key="t-shopping-cart"> Shopping Cart </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-ecommerce-checkout.html" class="nav-link"
+                                                data-key="t-checkout"> Checkout </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-ecommerce-sellers.html" class="nav-link"
+                                                data-key="t-sellers"> Sellers </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-ecommerce-seller-details.html" class="nav-link"
+                                                data-key="t-sellers-details"> Seller Details </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarProjects" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarProjects" data-key="t-projects">
+                                    Projects
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarProjects">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="apps-projects-list.html" class="nav-link" data-key="t-list">
+                                                List </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-projects-overview.html" class="nav-link"
+                                                data-key="t-overview"> Overview </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-projects-create.html" class="nav-link"
+                                                data-key="t-create-project"> Create Project </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarTasks" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarTasks" data-key="t-tasks"> Tasks
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarTasks">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="apps-tasks-kanban.html" class="nav-link"
+                                                data-key="t-kanbanboard"> Kanban Board </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-tasks-list-view.html" class="nav-link"
+                                                data-key="t-list-view"> List View </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-tasks-details.html" class="nav-link"
+                                                data-key="t-task-details"> Task Details </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarCRM" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarCRM" data-key="t-crm"> CRM
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarCRM">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="apps-crm-contacts.html" class="nav-link" data-key="t-contacts">
+                                                Contacts </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-crm-companies.html" class="nav-link"
+                                                data-key="t-companies"> Companies </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-crm-deals.html" class="nav-link" data-key="t-deals"> Deals
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-crm-leads.html" class="nav-link" data-key="t-leads"> Leads
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarCrypto" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarCrypto" data-key="t-crypto"> Crypto
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarCrypto">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="apps-crypto-transactions.html" class="nav-link"
+                                                data-key="t-transactions"> Transactions </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-crypto-buy-sell.html" class="nav-link"
+                                                data-key="t-buy-sell"> Buy & Sell </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-crypto-orders.html" class="nav-link" data-key="t-orders">
+                                                Orders </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-crypto-wallet.html" class="nav-link"
+                                                data-key="t-my-wallet"> My Wallet </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-crypto-ico.html" class="nav-link" data-key="t-ico-list">
+                                                ICO List </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-crypto-kyc.html" class="nav-link"
+                                                data-key="t-kyc-application"> KYC Application </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarInvoices" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarInvoices" data-key="t-invoices">
+                                    Invoices
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarInvoices">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="apps-invoices-list.html" class="nav-link"
+                                                data-key="t-list-view"> List View </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-invoices-details.html" class="nav-link"
+                                                data-key="t-details"> Details </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-invoices-create.html" class="nav-link"
+                                                data-key="t-create-invoice"> Create Invoice </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarTickets" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarTickets" data-key="t-supprt-tickets">
+                                    Support Tickets
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarTickets">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="apps-tickets-list.html" class="nav-link" data-key="t-list-view">
+                                                List View </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="apps-tickets-details.html" class="nav-link"
+                                                data-key="t-ticket-details"> Ticket Details </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarLayouts" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarLayouts">
+                        <i data-feather="layout" class="icon-dual"></i> <span data-key="t-layouts">Layouts</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarLayouts">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="layouts-horizontal.html" target="_blank" class="nav-link"
+                                    data-key="t-horizontal">Horizontal</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="layouts-detached.html" target="_blank" class="nav-link"
+                                    data-key="t-detached">Detached</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="layouts-two-column.html" target="_blank" class="nav-link"
+                                    data-key="t-two-column">Two Column</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="layouts-vertical-hovered.html" target="_blank" class="nav-link"
+                                    data-key="t-hovered">Hovered</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li> <!-- end Dashboard Menu -->
+
+                <li class="menu-title"><i class="ri-more-fill"></i> <span data-key="t-pages">Pages</span>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarAuth" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarAuth">
+                        <i data-feather="users" class="icon-dual"></i> <span
+                            data-key="t-authentication">Authentication</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarAuth">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="#sidebarSignIn" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarSignIn" data-key="t-signin"> Sign In
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarSignIn">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="auth-signin-basic.html" class="nav-link" data-key="t-basic">
+                                                Basic </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="auth-signin-cover.html" class="nav-link" data-key="t-cover">
+                                                Cover </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarSignUp" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarSignUp" data-key="t-signup"> Sign Up
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarSignUp">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="auth-signup-basic.html" class="nav-link" data-key="t-basic">
+                                                Basic </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="auth-signup-cover.html" class="nav-link" data-key="t-cover">
+                                                Cover </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+
+                            <li class="nav-item">
+                                <a href="#sidebarResetPass" class="nav-link" data-bs-toggle="collapse"
+                                    role="button" aria-expanded="false" aria-controls="sidebarResetPass"
+                                    data-key="t-password-reset"> Password Reset
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarResetPass">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="auth-pass-reset-basic.html" class="nav-link" data-key="t-basic">
+                                                Basic </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="auth-pass-reset-cover.html" class="nav-link" data-key="t-cover">
+                                                Cover </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+
+                            <li class="nav-item">
+                                <a href="#sidebarLockScreen" class="nav-link" data-bs-toggle="collapse"
+                                    role="button" aria-expanded="false" aria-controls="sidebarLockScreen"
+                                    data-key="t-lock-screen"> Lock Screen
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarLockScreen">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="auth-lockscreen-basic.html" class="nav-link" data-key="t-basic">
+                                                Basic </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="auth-lockscreen-cover.html" class="nav-link" data-key="t-cover">
+                                                Cover </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+
+                            <li class="nav-item">
+                                <a href="#sidebarLogout" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarLogout" data-key="t-logout"> Logout
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarLogout">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="auth-logout-basic.html" class="nav-link" data-key="t-basic">
+                                                Basic </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="auth-logout-cover.html" class="nav-link" data-key="t-cover">
+                                                Cover </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarSuccessMsg" class="nav-link" data-bs-toggle="collapse"
+                                    role="button" aria-expanded="false" aria-controls="sidebarSuccessMsg"
+                                    data-key="t-success-message"> Success Message
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarSuccessMsg">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="auth-success-msg-basic.html" class="nav-link"
+                                                data-key="t-basic"> Basic </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="auth-success-msg-cover.html" class="nav-link"
+                                                data-key="t-cover"> Cover </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarTwoStep" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarTwoStep"
+                                    data-key="t-two-step-verification"> Two Step Verification
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarTwoStep">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="auth-twostep-basic.html" class="nav-link" data-key="t-basic">
+                                                Basic </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="auth-twostep-cover.html" class="nav-link" data-key="t-cover">
+                                                Cover </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarErrors" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarErrors" data-key="t-errors"> Errors
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarErrors">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="auth-404-basic.html" class="nav-link" data-key="t-404-basic">
+                                                404 Basic </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="auth-404-cover.html" class="nav-link" data-key="t-404-cover">
+                                                404 Cover </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="auth-404-alt.html" class="nav-link" data-key="t-404-alt"> 404
+                                                Alt </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="auth-500.html" class="nav-link" data-key="t-500"> 500
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarPages" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarPages">
+                        <i data-feather="command" class="icon-dual"></i> <span data-key="t-pages">Pages</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarPages">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="pages-starter.html" class="nav-link" data-key="t-starter">
+                                    Starter </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarProfile" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarProfile" data-key="t-profile">
+                                    Profile
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarProfile">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="pages-profile.html" class="nav-link" data-key="t-simple-page">
+                                                Simple Page </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="pages-profile-settings.html" class="nav-link"
+                                                data-key="t-settings"> Settings </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="pages-team.html" class="nav-link" data-key="t-team"> Team </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="pages-timeline.html" class="nav-link" data-key="t-timeline">
+                                    Timeline </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="pages-faqs.html" class="nav-link" data-key="t-faqs"> FAQs </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="pages-pricing.html" class="nav-link" data-key="t-pricing">
+                                    Pricing </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="pages-gallery.html" class="nav-link" data-key="t-gallery">
+                                    Gallery </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="pages-maintenance.html" class="nav-link" data-key="t-maintenance">
+                                    Maintenance </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="pages-coming-soon.html" class="nav-link" data-key="t-coming-soon">
+                                    Coming Soon </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="pages-sitemap.html" class="nav-link" data-key="t-sitemap">
+                                    Sitemap </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="pages-search-results.html" class="nav-link" data-key="t-search-results">
+                                    Search Results </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" target="_blank" href="landing.html">
+                        <i class="ri-rocket-line"></i> <span data-key="t-landing">Landing</span>
+                        <span class="badge badge-pill bg-danger" data-key="t-new">New</span>
+                    </a>
+                </li>
+
+                <li class="menu-title"><i class="ri-more-fill"></i> <span data-key="t-components">Components</span>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarUI" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarUI">
+                        <i data-feather="package" class="icon-dual"></i> <span data-key="t-base-ui">Base
+                            UI</span>
+                    </a>
+                    <div class="collapse menu-dropdown mega-dropdown-menu" id="sidebarUI">
+                        <div class="row">
+                            <div class="col-lg-4">
+                                <ul class="nav nav-sm flex-column">
+                                    <li class="nav-item">
+                                        <a href="ui-alerts.html" class="nav-link" data-key="t-alerts">Alerts</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-badges.html" class="nav-link" data-key="t-badges">Badges</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-buttons.html" class="nav-link" data-key="t-buttons">Buttons</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-colors.html" class="nav-link" data-key="t-colors">Colors</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-cards.html" class="nav-link" data-key="t-cards">Cards</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-carousel.html" class="nav-link"
+                                            data-key="t-carousel">Carousel</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-dropdowns.html" class="nav-link"
+                                            data-key="t-dropdowns">Dropdowns</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-grid.html" class="nav-link" data-key="t-grid">Grid</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-4">
+                                <ul class="nav nav-sm flex-column">
+                                    <li class="nav-item">
+                                        <a href="ui-images.html" class="nav-link" data-key="t-images">Images</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-tabs.html" class="nav-link" data-key="t-tabs">Tabs</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-accordions.html" class="nav-link"
+                                            data-key="t-accordion-collapse">Accordion & Collapse</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-modals.html" class="nav-link" data-key="t-modals">Modals</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-offcanvas.html" class="nav-link"
+                                            data-key="t-offcanvas">Offcanvas</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-placeholders.html" class="nav-link"
+                                            data-key="t-placeholders">Placeholders</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-progress.html" class="nav-link"
+                                            data-key="t-progress">Progress</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-notifications.html" class="nav-link"
+                                            data-key="t-notifications">Notifications</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="col-lg-4">
+                                <ul class="nav nav-sm flex-column">
+                                    <li class="nav-item">
+                                        <a href="ui-media.html" class="nav-link" data-key="t-media-object">Media
+                                            object</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-embed-video.html" class="nav-link" data-key="t-embed-video">Embed
+                                            Video</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-typography.html" class="nav-link"
+                                            data-key="t-typography">Typography</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-lists.html" class="nav-link" data-key="t-lists">Lists</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-general.html" class="nav-link" data-key="t-general">General</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-ribbons.html" class="nav-link" data-key="t-ribbons">Ribbons</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="ui-utilities.html" class="nav-link"
+                                            data-key="t-utilities">Utilities</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarAdvanceUI" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarAdvanceUI">
+                        <i data-feather="layers" class="icon-dual"></i> <span data-key="t-advance-ui">Advance
+                            UI</span>
+                        <span class="badge badge-pill bg-primary" data-key="t-new">New</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarAdvanceUI">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="advance-ui-sweetalerts.html" class="nav-link"
+                                    data-key="t-sweet-alerts">Sweet Alerts</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="advance-ui-nestable.html" class="nav-link"
+                                    data-key="t-nestable-list">Nestable List</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="advance-ui-scrollbar.html" class="nav-link"
+                                    data-key="t-scrollbar">Scrollbar</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="advance-ui-animation.html" class="nav-link"
+                                    data-key="t-animation">Animation</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="advance-ui-tour.html" class="nav-link" data-key="t-tour">Tour</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="advance-ui-swiper.html" class="nav-link" data-key="t-swiper-slider">Swiper
+                                    Slider</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="advance-ui-ratings.html" class="nav-link" data-key="t-ratings">Ratings</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="advance-ui-highlight.html" class="nav-link"
+                                    data-key="t-highlight">Highlight</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="advance-ui-scrollspy.html" class="nav-link"
+                                    data-key="t-scrollSpy">ScrollSpy</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="widgets.html">
+                        <i data-feather="copy" class="icon-dual"></i> <span data-key="t-widgets">Widgets</span>
+                    </a>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarForms" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarForms">
+                        <i data-feather="file-text" class="icon-dual"></i> <span data-key="t-forms">Forms</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarForms">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="forms-elements.html" class="nav-link" data-key="t-basic-elements">Basic
+                                    Elements</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-select.html" class="nav-link" data-key="t-form-select">
+                                    Form Select </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-checkboxs-radios.html" class="nav-link"
+                                    data-key="t-checkboxs-radios">Checkboxs & Radios</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-pickers.html" class="nav-link" data-key="t-pickers">
+                                    Pickers </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-masks.html" class="nav-link" data-key="t-input-masks">Input
+                                    Masks</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-advanced.html" class="nav-link" data-key="t-advanced">Advanced</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-range-sliders.html" class="nav-link" data-key="t-range-slider"> Range
+                                    Slider </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-validation.html" class="nav-link"
+                                    data-key="t-validation">Validation</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-wizard.html" class="nav-link" data-key="t-wizard">Wizard</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-editors.html" class="nav-link" data-key="t-editors">Editors</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-file-uploads.html" class="nav-link" data-key="t-file-uploads">File
+                                    Uploads</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="forms-layouts.html" class="nav-link" data-key="t-form-layouts">Form
+                                    Layouts</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarTables" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarTables">
+                        <i data-feather="database" class="icon-dual"></i> <span data-key="t-tables">Tables</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarTables">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="tables-basic.html" class="nav-link" data-key="t-basic-tables">Basic
+                                    Tables</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="tables-gridjs.html" class="nav-link" data-key="t-grid-js">Grid
+                                    Js</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="tables-listjs.html" class="nav-link" data-key="t-list-js">List
+                                    Js</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarCharts" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarCharts">
+                        <i data-feather="pie-chart" class="icon-dual"></i> <span data-key="t-charts">Charts</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarCharts">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="#sidebarApexcharts" class="nav-link" data-bs-toggle="collapse"
+                                    role="button" aria-expanded="false" aria-controls="sidebarApexcharts"
+                                    data-key="t-apexcharts"> Apexcharts
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarApexcharts">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="charts-apex-line.html" class="nav-link" data-key="t-line"> Line
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-area.html" class="nav-link" data-key="t-area"> Area
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-column.html" class="nav-link" data-key="t-column">
+                                                Column </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-bar.html" class="nav-link" data-key="t-bar">
+                                                Bar </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-mixed.html" class="nav-link" data-key="t-mixed">
+                                                Mixed </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-timeline.html" class="nav-link"
+                                                data-key="t-timeline"> Timeline </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-candlestick.html" class="nav-link"
+                                                data-key="t-candlstick"> Candlstick </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-boxplot.html" class="nav-link" data-key="t-boxplot">
+                                                Boxplot </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-bubble.html" class="nav-link" data-key="t-bubble">
+                                                Bubble </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-scatter.html" class="nav-link" data-key="t-scatter">
+                                                Scatter </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-heatmap.html" class="nav-link" data-key="t-heatmap">
+                                                Heatmap </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-treemap.html" class="nav-link" data-key="t-treemap">
+                                                Treemap </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-pie.html" class="nav-link" data-key="t-pie">
+                                                Pie </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-radialbar.html" class="nav-link"
+                                                data-key="t-radialbar"> Radialbar </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-radar.html" class="nav-link" data-key="t-radar">
+                                                Radar </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="charts-apex-polar.html" class="nav-link"
+                                                data-key="t-polar-area"> Polar Area </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="nav-item">
+                                <a href="charts-chartjs.html" class="nav-link" data-key="t-chartjs">
+                                    Chartjs </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="charts-echarts.html" class="nav-link" data-key="t-echarts">
+                                    Echarts </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarIcons" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarIcons">
+                        <i data-feather="archive" class="icon-dual"></i> <span data-key="t-icons">Icons</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarIcons">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="icons-remix.html" class="nav-link" data-key="t-remix">Remix</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="icons-boxicons.html" class="nav-link" data-key="t-boxicons">Boxicons</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="icons-materialdesign.html" class="nav-link"
+                                    data-key="t-material-design">Material Design</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="icons-lineawesome.html" class="nav-link" data-key="t-line-awesome">Line
+                                    Awesome</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="icons-feather.html" class="nav-link" data-key="t-feather">Feather</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarMaps" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarMaps">
+                        <i data-feather="map-pin" class="icon-dual"></i> <span data-key="t-maps">Maps</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarMaps">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="maps-google.html" class="nav-link" data-key="t-google">
+                                    Google
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="maps-vector.html" class="nav-link" data-key="t-vector">
+                                    Vector
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="maps-leaflet.html" class="nav-link" data-key="t-leaflet">
+                                    Leaflet
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+                <li class="nav-item">
+                    <a class="nav-link menu-link" href="#sidebarMultilevel" data-bs-toggle="collapse" role="button"
+                        aria-expanded="false" aria-controls="sidebarMultilevel">
+                        <i data-feather="share-2" class="icon-dual"></i> <span data-key="t-multi-level">Multi
+                            Level</span>
+                    </a>
+                    <div class="collapse menu-dropdown" id="sidebarMultilevel">
+                        <ul class="nav nav-sm flex-column">
+                            <li class="nav-item">
+                                <a href="#" class="nav-link" data-key="t-level-1.1"> Level 1.1 </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="#sidebarAccount" class="nav-link" data-bs-toggle="collapse" role="button"
+                                    aria-expanded="false" aria-controls="sidebarAccount" data-key="t-level-1.2">
+                                    Level 1.2
+                                </a>
+                                <div class="collapse menu-dropdown" id="sidebarAccount">
+                                    <ul class="nav nav-sm flex-column">
+                                        <li class="nav-item">
+                                            <a href="#" class="nav-link" data-key="t-level-2.1">
+                                                Level 2.1 </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a href="#sidebarCrm" class="nav-link" data-bs-toggle="collapse"
+                                                role="button" aria-expanded="false" aria-controls="sidebarCrm"
+                                                data-key="t-level-2.2"> Level 2.2
+                                            </a>
+                                            <div class="collapse menu-dropdown" id="sidebarCrm">
+                                                <ul class="nav nav-sm flex-column">
+                                                    <li class="nav-item">
+                                                        <a href="#" class="nav-link" data-key="t-level-3.1">
+                                                            Level 3.1 </a>
+                                                    </li>
+                                                    <li class="nav-item">
+                                                        <a href="#" class="nav-link" data-key="t-level-3.2">
+                                                            Level 3.2 </a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+
+            </ul>
+        </div>
+        <!-- Sidebar -->
+    </div>
+</div>
diff --git a/routes/web.php b/routes/web.php
index e8a4e3a..f883492 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,8 +1,10 @@
 <?php
 
 use App\Http\Controllers\Auth\AuthenticatedSessionController;
+use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\ProfileController;
 use Illuminate\Support\Facades\Route;
+use SebastianBergmann\CodeCoverage\Report\Html\Dashboard;
 
 /*
 |--------------------------------------------------------------------------
@@ -23,12 +25,11 @@
     });
 });
 
-Route::get('/dashboard', function () {
-    return view('dashboard');
-})->middleware(['auth', 'verified'])->name('dashboard');
-
 Route::middleware('auth')->group(function () {
-    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
-    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
-    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
+    Route::post('/logout', [AuthenticatedSessionController::class, 'destroy'])->name('auth.logout');
+
+    Route::controller(DashboardController::class)->name('dashboard.')->group(function () {
+        Route::get('/dashboard-admin', 'admin')->name('admin');
+        Route::get('/dashboard-petugas', 'petugas')->name('petugas');
+    });
 });