diff --git a/resources/css/app.css b/resources/css/app.css
new file mode 100644
index 0000000..e69de29
diff --git a/resources/js/app.js b/resources/js/app.js
new file mode 100644
index 0000000..9ae9348
--- /dev/null
+++ b/resources/js/app.js
@@ -0,0 +1,32 @@
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+require('./bootstrap');
+
+window.Vue = require('vue').default;
+
+/**
+ * The following block of code may be used to automatically register your
+ * Vue components. It will recursively scan this directory for the Vue
+ * components and automatically register them with their "basename".
+ *
+ * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
+ */
+
+// const files = require.context('./', true, /\.vue$/i)
+// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
+
+Vue.component('example-component', require('./components/ExampleComponent.vue').default);
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+const app = new Vue({
+    el: '#app',
+});
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
new file mode 100644
index 0000000..dcdc4df
--- /dev/null
+++ b/resources/js/bootstrap.js
@@ -0,0 +1,32 @@
+window._ = require('lodash');
+
+try {
+    require('bootstrap');
+} catch (e) {}
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     forceTLS: true
+// });
diff --git a/resources/js/components/ExampleComponent.vue b/resources/js/components/ExampleComponent.vue
new file mode 100644
index 0000000..3fb9f9a
--- /dev/null
+++ b/resources/js/components/ExampleComponent.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">Example Component</div>
+
+                    <div class="card-body">
+                        I'm an example component.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            console.log('Component mounted.')
+        }
+    }
+</script>
diff --git a/resources/lang/en/auth.php b/resources/lang/en/auth.php
new file mode 100644
index 0000000..6598e2c
--- /dev/null
+++ b/resources/lang/en/auth.php
@@ -0,0 +1,20 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed' => 'These credentials do not match our records.',
+    'password' => 'The provided password is incorrect.',
+    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
+
+];
diff --git a/resources/lang/en/pagination.php b/resources/lang/en/pagination.php
new file mode 100644
index 0000000..d481411
--- /dev/null
+++ b/resources/lang/en/pagination.php
@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used by the paginator library to build
+    | the simple pagination links. You are free to change them to anything
+    | you want to customize your views to better match your application.
+    |
+    */
+
+    'previous' => '&laquo; Previous',
+    'next' => 'Next &raquo;',
+
+];
diff --git a/resources/lang/en/passwords.php b/resources/lang/en/passwords.php
new file mode 100644
index 0000000..2345a56
--- /dev/null
+++ b/resources/lang/en/passwords.php
@@ -0,0 +1,22 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are the default lines which match reasons
+    | that are given by the password broker for a password update attempt
+    | has failed, such as for an invalid token or invalid new password.
+    |
+    */
+
+    'reset' => 'Your password has been reset!',
+    'sent' => 'We have emailed your password reset link!',
+    'throttled' => 'Please wait before retrying.',
+    'token' => 'This password reset token is invalid.',
+    'user' => "We can't find a user with that email address.",
+
+];
diff --git a/resources/lang/en/validation.php b/resources/lang/en/validation.php
new file mode 100644
index 0000000..783003c
--- /dev/null
+++ b/resources/lang/en/validation.php
@@ -0,0 +1,163 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines contain the default error messages used by
+    | the validator class. Some of these rules have multiple versions such
+    | as the size rules. Feel free to tweak each of these messages here.
+    |
+    */
+
+    'accepted' => 'The :attribute must be accepted.',
+    'accepted_if' => 'The :attribute must be accepted when :other is :value.',
+    'active_url' => 'The :attribute is not a valid URL.',
+    'after' => 'The :attribute must be a date after :date.',
+    'after_or_equal' => 'The :attribute must be a date after or equal to :date.',
+    'alpha' => 'The :attribute must only contain letters.',
+    'alpha_dash' => 'The :attribute must only contain letters, numbers, dashes and underscores.',
+    'alpha_num' => 'The :attribute must only contain letters and numbers.',
+    'array' => 'The :attribute must be an array.',
+    'before' => 'The :attribute must be a date before :date.',
+    'before_or_equal' => 'The :attribute must be a date before or equal to :date.',
+    'between' => [
+        'numeric' => 'The :attribute must be between :min and :max.',
+        'file' => 'The :attribute must be between :min and :max kilobytes.',
+        'string' => 'The :attribute must be between :min and :max characters.',
+        'array' => 'The :attribute must have between :min and :max items.',
+    ],
+    'boolean' => 'The :attribute field must be true or false.',
+    'confirmed' => 'The :attribute confirmation does not match.',
+    'current_password' => 'The password is incorrect.',
+    'date' => 'The :attribute is not a valid date.',
+    'date_equals' => 'The :attribute must be a date equal to :date.',
+    'date_format' => 'The :attribute does not match the format :format.',
+    'declined' => 'The :attribute must be declined.',
+    'declined_if' => 'The :attribute must be declined when :other is :value.',
+    'different' => 'The :attribute and :other must be different.',
+    'digits' => 'The :attribute must be :digits digits.',
+    'digits_between' => 'The :attribute must be between :min and :max digits.',
+    'dimensions' => 'The :attribute has invalid image dimensions.',
+    'distinct' => 'The :attribute field has a duplicate value.',
+    'email' => 'The :attribute must be a valid email address.',
+    'ends_with' => 'The :attribute must end with one of the following: :values.',
+    'enum' => 'The selected :attribute is invalid.',
+    'exists' => 'The selected :attribute is invalid.',
+    'file' => 'The :attribute must be a file.',
+    'filled' => 'The :attribute field must have a value.',
+    'gt' => [
+        'numeric' => 'The :attribute must be greater than :value.',
+        'file' => 'The :attribute must be greater than :value kilobytes.',
+        'string' => 'The :attribute must be greater than :value characters.',
+        'array' => 'The :attribute must have more than :value items.',
+    ],
+    'gte' => [
+        'numeric' => 'The :attribute must be greater than or equal to :value.',
+        'file' => 'The :attribute must be greater than or equal to :value kilobytes.',
+        'string' => 'The :attribute must be greater than or equal to :value characters.',
+        'array' => 'The :attribute must have :value items or more.',
+    ],
+    'image' => 'The :attribute must be an image.',
+    'in' => 'The selected :attribute is invalid.',
+    'in_array' => 'The :attribute field does not exist in :other.',
+    'integer' => 'The :attribute must be an integer.',
+    'ip' => 'The :attribute must be a valid IP address.',
+    'ipv4' => 'The :attribute must be a valid IPv4 address.',
+    'ipv6' => 'The :attribute must be a valid IPv6 address.',
+    'json' => 'The :attribute must be a valid JSON string.',
+    'lt' => [
+        'numeric' => 'The :attribute must be less than :value.',
+        'file' => 'The :attribute must be less than :value kilobytes.',
+        'string' => 'The :attribute must be less than :value characters.',
+        'array' => 'The :attribute must have less than :value items.',
+    ],
+    'lte' => [
+        'numeric' => 'The :attribute must be less than or equal to :value.',
+        'file' => 'The :attribute must be less than or equal to :value kilobytes.',
+        'string' => 'The :attribute must be less than or equal to :value characters.',
+        'array' => 'The :attribute must not have more than :value items.',
+    ],
+    'mac_address' => 'The :attribute must be a valid MAC address.',
+    'max' => [
+        'numeric' => 'The :attribute must not be greater than :max.',
+        'file' => 'The :attribute must not be greater than :max kilobytes.',
+        'string' => 'The :attribute must not be greater than :max characters.',
+        'array' => 'The :attribute must not have more than :max items.',
+    ],
+    'mimes' => 'The :attribute must be a file of type: :values.',
+    'mimetypes' => 'The :attribute must be a file of type: :values.',
+    'min' => [
+        'numeric' => 'The :attribute must be at least :min.',
+        'file' => 'The :attribute must be at least :min kilobytes.',
+        'string' => 'The :attribute must be at least :min characters.',
+        'array' => 'The :attribute must have at least :min items.',
+    ],
+    'multiple_of' => 'The :attribute must be a multiple of :value.',
+    'not_in' => 'The selected :attribute is invalid.',
+    'not_regex' => 'The :attribute format is invalid.',
+    'numeric' => 'The :attribute must be a number.',
+    'password' => 'The password is incorrect.',
+    'present' => 'The :attribute field must be present.',
+    'prohibited' => 'The :attribute field is prohibited.',
+    'prohibited_if' => 'The :attribute field is prohibited when :other is :value.',
+    'prohibited_unless' => 'The :attribute field is prohibited unless :other is in :values.',
+    'prohibits' => 'The :attribute field prohibits :other from being present.',
+    'regex' => 'The :attribute format is invalid.',
+    'required' => 'The :attribute field is required.',
+    'required_array_keys' => 'The :attribute field must contain entries for: :values.',
+    'required_if' => 'The :attribute field is required when :other is :value.',
+    'required_unless' => 'The :attribute field is required unless :other is in :values.',
+    'required_with' => 'The :attribute field is required when :values is present.',
+    'required_with_all' => 'The :attribute field is required when :values are present.',
+    'required_without' => 'The :attribute field is required when :values is not present.',
+    'required_without_all' => 'The :attribute field is required when none of :values are present.',
+    'same' => 'The :attribute and :other must match.',
+    'size' => [
+        'numeric' => 'The :attribute must be :size.',
+        'file' => 'The :attribute must be :size kilobytes.',
+        'string' => 'The :attribute must be :size characters.',
+        'array' => 'The :attribute must contain :size items.',
+    ],
+    'starts_with' => 'The :attribute must start with one of the following: :values.',
+    'string' => 'The :attribute must be a string.',
+    'timezone' => 'The :attribute must be a valid timezone.',
+    'unique' => 'The :attribute has already been taken.',
+    'uploaded' => 'The :attribute failed to upload.',
+    'url' => 'The :attribute must be a valid URL.',
+    'uuid' => 'The :attribute must be a valid UUID.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "attribute.rule" to name the lines. This makes it quick to
+    | specify a specific custom language line for a given attribute rule.
+    |
+    */
+
+    'custom' => [
+        'attribute-name' => [
+            'rule-name' => 'custom-message',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Attributes
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used to swap our attribute placeholder
+    | with something more reader friendly such as "E-Mail Address" instead
+    | of "email". This simply helps us make our message more expressive.
+    |
+    */
+
+    'attributes' => [],
+
+];
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
new file mode 100644
index 0000000..172daaa
--- /dev/null
+++ b/resources/sass/_variables.scss
@@ -0,0 +1,7 @@
+// Body
+$body-bg: #f8fafc;
+
+// Typography
+$font-family-sans-serif: 'Nunito', sans-serif;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
new file mode 100644
index 0000000..3193ffa
--- /dev/null
+++ b/resources/sass/app.scss
@@ -0,0 +1,8 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
diff --git a/resources/views/admin/barang/index.blade.php b/resources/views/admin/barang/index.blade.php
new file mode 100644
index 0000000..1eca39a
--- /dev/null
+++ b/resources/views/admin/barang/index.blade.php
@@ -0,0 +1,412 @@
+@extends('layouts.app')
+
+@section('content')
+    @include('layouts.headers.header-content')
+    
+    <div class="container-fluid mt--6">
+      <div class="row">
+        <div class="col">
+          <div class="card">
+            <!-- Card header -->
+            <div class="card-header border-0">
+              <h3 class="mb-0">{{ $current_page }}</h3>
+              <div class="d-flex flex-row-reverse">
+              <a class="btn btn-md btn-primary justify-content-end text-white modal_add" ><i class="fas fa-plus"></i> Tambah</a>
+                </div>
+            </div>
+         
+            @if ($message = Session::get('sukses'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+        
+    @if ($message = Session::get('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+            
+        
+            <!-- Light table -->
+            <div id="show_image_popup">
+  <div class="close-btn-area">
+
+    <button id="close-btn-image"><i class="fas fa-plus"></i></button> 
+  </div>
+  <div id="image-show-area">
+    <img id="large-image" src="" alt="">
+  </div>
+</div>
+            <div class="table-responsive">
+              <table class="table align-items-center table-flush" id="table_data">
+                <thead class="thead-light">
+                  <tr>
+                    <th scope="col" class="sort" data-sort="name">Nama Barang </th>
+                    <th scope="col" class="sort" data-sort="budget">Jenis Barang</th>
+                    <th scope="col" class="sort" data-sort="status">Lokasi</th>
+                    <th scope="col" class="sort" data-sort="completion">Jumlah Barang</th>
+                    <th scope="col"> Tanggal Masuk </th>
+                    <th scope="col"> Action</th>
+                  </tr>
+                </thead>
+                <tbody class="list">
+
+ 
+                  @foreach($barang as $i)
+                        <tr>
+                            <td> <div class="media align-items-center">
+                        <a href="#" class="circlee small-image mr-3">
+                          <img alt="Image placeholder" src="{{ \Helperku::get_image_barang($i->id) }}">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">{{ $i->nama_barang }}</span>
+                        </div>
+                      </div><br>
+                            <span class="badge badge-primary">{{ $i->serial_number }}</span></td>
+                            <td>{{ $i->nama_jenis }}</td>
+                            <td> <a href="https://maps.google.com/?q=<?= $i->lokasi ?>" target="_blank" class="btn btn-sm btn-outline-primary">
+                                 <?= $i->lokasi ?>  <span class="badge badge-light"><i class="fas fa-map-marker text-success"></i></span>
+                            </a></td>
+                            <td><a data-id="{{ $i->id }}" class="modal_detail_stok btn btn-sm btn-outline-light" > {{ $i->jumlah_barang }} / {{ $i->nama_satuan }} <i class="fas fa-info-circle text-success"></i></a></td>
+                            <td><span class="fas fa-calendar-check"></span> {{ $i->tanggal_masuk }}</td>
+                            <td class="text-right">
+                   
+                   <a data-id="{{ $i->id }}" href="#" data-toggle="tooltip" data-placement="top" title="Edit"   class=" modal_edit text-right btn btn-md btn-outline-success"><i class="fas fa-edit  text-right"></i> </a>
+                   <a data-toggle="tooltip" data-placement="top" title="Hapus" onclick="return confirm('barang ini akan di delete ... ?')" href="{{ route('barang.hapus',$i->id) }}" class=" text-right btn btn-md btn-outline-danger"><i class="fas fa-trash"></i> </a>
+                   <a data-id="{{ $i->id }}" href="#" data-toggle="tooltip" data-placement="top" title="Barang Keluar"   class=" modal_keluar text-right btn btn-md btn-outline-primary"><i class="fas fa-arrow-right  text-right"></i> </a> 
+             </td>
+                            
+                        </tr>
+
+                  @endforeach
+                </tbody>
+              </table>
+            </div>
+            <!-- Card footer -->
+           
+          </div>
+        </div>
+      </div>
+</div>
+<!-- Modal -->
+@include('admin.barang.modal_add')
+@include('admin.barang.modal_edit')
+@include('admin.barang.modal_keluar')
+@include('admin.barang.modal_detail_stok')
+
+        @include('layouts.footers.auth')
+    </div>
+@endsection
+
+@push('js')
+    <script src="{{ secure_asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
+    <script src="{{ secure_asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
+    
+<script>
+    $("[name=jenis_keluar]").change(function(e){
+
+            e.preventDefault();
+
+            var isi = $(this).val();
+
+            if(isi == 1){
+
+                var html = '';
+              
+                html += '<div class="row bm-3">'+
+                        '<div class="form-group mb-3 col-6">'+
+                        '<div class="input-group input-group-alternative">'+
+                         '<div class="input-group-prepend">'+
+                        '<span class="input-group-text"> <i class="fas fa-user"></i></span>'+
+                        '</div>'+
+                        '<select name="pengguna" class="form-control" required>'+
+                        '<option value="">-- Pilih Penanggung Jawab --</option>'+
+                        '@foreach($pengguna as $i)'+
+                        '<option value="{{ $i->id }}">{{ $i->nama }}</option>'+
+                        '@endforeach'+
+                        '</select>'+
+                        '</div>'+
+                        '</div>'+
+                        '<div class="form-group mb-3 col-6">'+
+                        '<div class="input-group input-group-alternative">'+
+                        '<div class="input-group-prepend">'+
+                        '<span class="input-group-text"><i class="fas fa-upload"></i></span>'+
+                        '</div>'+
+                        '<input class="custom-file-input form-control" required placeholder="inputkan Jumlah Barang ..." type="file" name="file_barang"><br>'+
+                        '<small>* Upload FIle</small>'+
+                        '</div>'+
+                        '</div>'+
+                        '</div>';
+                $("#pinjam_field").html(html);
+            }else{
+              $("#pinjam_field").html('');
+            }
+
+    })
+</script>
+    <script>
+
+$(document).ready(function () {
+    $('#table_data').DataTable();
+    $('[data-toggle="tooltip"]').tooltip();
+});
+        $(".modal_add").click(function(e){
+
+            e.preventDefault();
+
+            $("#modal_add").modal('show');
+        })
+
+        $(".modal_keluar").click(function(e){
+
+e.preventDefault();
+$("#modal_keluar").modal('show');
+var id = $(this).attr('data-id');
+
+$.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ secure_url('get_barang') }}",
+                method:"post",
+                data:{id:id},
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    console.log(obj[0].serial_number);
+
+                    $("[name=nama_barang]").val(obj[0].nama_barang);
+                    $("[name=id_barang]").val(id);
+                    $(".serial_number").text('S/N  :  '+obj[0].serial_number);
+                    $(".jenis_barang").text('Jenis :'+obj[0].nama_jenis );
+                
+
+                    
+              $.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+
+            $.ajax({
+                url:"{{ secure_url('get_detail_stok') }}",
+                method:"post",
+                data:{id:id},
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    console.log(obj);
+
+                  
+                    $(".satuan_barang").text('Stok :'+obj.stok_now+'');
+
+
+                }
+
+
+            })
+
+                }
+
+
+            })
+
+  })
+$(".modal_detail_stok").click(function(e){
+  e.preventDefault();
+  var id_barang = $(this).attr('data-id');
+  $("#modal_detail_stok").modal('show');
+
+  $.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ secure_url('get_detail_stok') }}",
+                method:"post",
+                data:{id:id_barang}, 
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    // console.log(obj);
+                    var stok_pinjam = '';
+                    var stok_rusak = '';
+                    var stok_awal = '';
+                    var stok_now = '';
+
+                    $(".stok_awal").text(obj.stok_awal);
+                    $(".stok_now").text(obj.stok_now);
+                    $(".nama_barang").text(obj.nama_barang); 
+                    if(obj.stok_pinjam == 0){
+
+                     stok_pinjam = 0;
+                    }else{
+                      stok_pinjam = obj.stok_pinjam;
+                    }
+                                     
+                    if(obj.stok_rusak == 0){
+
+                    stok_rusak = 0;
+                    }else{
+                    stok_rusak = obj.stok_rusak;
+                    }
+
+                    $(".stok_pinjam").text(stok_pinjam);
+                    $(".stok_rusak").text(stok_rusak)
+
+
+                }
+
+
+            })
+
+
+})
+        $(".modal_edit").click(function(e){
+
+e.preventDefault();
+
+$("#modal_edit").modal('show');
+var id = $(this).attr('data-id');
+// console.log(id_jenis);  
+            $.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ secure_url('get_barang') }}",
+                method:"post",
+                data:{id:id},
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    console.log(obj[0].nama_barang);
+
+                    $("[name=nama_barang]").val(obj[0].nama_barang);
+                    $("[name=id]").val(id);
+                    $("[name=serial_number]").val('S/N  :  '+obj[0].serial_number);
+                    $("[name=lokasi]").val(obj[0].lokasi);
+                    $("[name=keterangan]").val(obj[0].keterangan);
+                    $("[name=jumlah]").val(obj[0].jumlah_barang);
+                    $("[name=tanggal_masuk]").val(obj[0].tanggal_masuk);
+             
+
+                }
+
+
+            })
+
+})
+$( document ).ready(function(){
+
+
+
+
+
+
+// without animation
+/*
+$("#close-btn").click(function(){
+   $(".small-image").removeClass('active');
+  $("#show_image_popup").hide();
+})
+
+
+$(".small-image").click(function(){
+   // add active class
+   $(this).addClass('active');
+  var image_path = $(this).attr('src'); 
+  $("#show_image_popup").hide();
+  // now st this path to our popup image src
+  $("#show_image_popup").show();
+  $("#large-image").attr('src',image_path);
+
+})
+*/
+
+// with animation  
+
+  $("#close-btn-image").click(function(){
+     // remove active class from all images
+    $(".small-image").removeClass('active');
+    $("#show_image_popup").slideUp();
+  })
+
+  $(".small-image img").click(function(){
+      // remove active class from all images
+     $(".small-image").removeClass('active');
+    // add active class
+     $(this).addClass('active');
+
+    var image_path = $(this).attr('src'); 
+
+    console.log(image_path);
+    $("#show_image_popup").fadeOut();
+    // now st this path to our popup image src
+    $("#show_image_popup").fadeIn();
+    $("#large-image").attr('src',image_path);
+
+  })
+
+})
+
+
+// javascript
+
+// var small_images  = document.getElementsByClassName("small-image");
+// var show_image_popup  = document.getElementById("show_image_popup");
+// var large_image  = document.getElementById("large-image");
+// var close_btn = document.getElementById("close-btn");
+
+// for(var i=0; i< small_images.length; i++){
+
+//   small_images[i].addEventListener("click", function(){
+//     // remove active class from every images
+//     for(var j=0; j< small_images.length; j++){
+//       small_images[j].classList.remove('active');
+//     }
+//     // end
+
+//     this.classList.add('active'); // add active class to this image
+  
+//     var src_val = this.src;
+//     large_image.src = src_val;
+//     showModal();
+//   });
+// }
+
+
+// function showModal(){
+//   show_image_popup.style.display = 'block';
+// }
+
+// close_btn.addEventListener("click", function(){
+//   // before colose the modal we need to remove active class
+//   for(var i=0; i< small_images.length; i++){
+//     small_images[i].classList.remove('active');
+//   }
+//   // end
+//   closeModal();
+// });
+
+// function closeModal(){
+//   show_image_popup.style.display = 'none';
+// }
+
+
+        </script>
+@endpush
+
diff --git a/resources/views/admin/barang/modal_add.blade.php b/resources/views/admin/barang/modal_add.blade.php
new file mode 100644
index 0000000..f66ff23
--- /dev/null
+++ b/resources/views/admin/barang/modal_add.blade.php
@@ -0,0 +1,116 @@
+
+<div class="modal fade" id="modal_add" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Tambah Barang</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        <form role="form" action="<?= route('barang.store') ?>" method="post">
+        @csrf
+            <div class="row">
+
+            <div class="form-group mb-3 col-6">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Nama Barang ..." type="text" name="nama_barang">
+                </div>
+            </div>
+
+            <div class="form-group mb-3 col-6">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Serial Number ..." type="text" name="serial_number">
+                </div>
+            </div>
+            
+            </div>
+
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-map-marker"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Nama Lokasi Akurat ..." type="text" name="lokasi">
+                </div>
+            </div>
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"> <i class="fas fa-list"></i>  Tanggal Masuk :</span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan  ..." type="date" name="tanggal_masuk">
+                </div>
+            </div>
+            <div class="row">
+            <div class="form-group mb-3 col-6">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"> <i class="fas fa-list"></i></span>
+                    </div>
+                    <select name="jenis_barang" class="form-control" required>
+                        <option value="">-- Pilih Jenis Barang --</option>
+                        @foreach($jenis_barang as $i)
+                            <option value="{{ $i->id }}">{{ $i->nama_jenis }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            </div>
+
+            <div class="form-group mb-3 col-6">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"> <i class="fas fa-list"></i></span>
+                    </div>
+                    <select name="satuan_barang" class="form-control" required>
+                        <option value="">-- Pilih Satuan Barang --</option>
+                        @foreach($satuan_barang as $i)
+                            <option value="{{ $i->id }}">{{ $i->nama_satuan }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            </div>
+            </div>
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Jumlah Barang ..." type="number" name="jumlah">
+                </div>
+            </div>
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <textarea class="form-control" required placeholder="inputkan Keterangan Barang ..." name="keterangan"></textarea>
+                </div>
+            </div>
+      
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+        </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/admin/barang/modal_detail_stok.blade.php b/resources/views/admin/barang/modal_detail_stok.blade.php
new file mode 100644
index 0000000..8899a76
--- /dev/null
+++ b/resources/views/admin/barang/modal_detail_stok.blade.php
@@ -0,0 +1,86 @@
+<div class="modal fade" id="modal_detail_stok" tabindex="-1" role="dialog" aria-labelledby="modal_detail_stok" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Detail Stok Barang </h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+
+        
+   
+        <div class="card border-primary mb-3 mr-4 " >
+  <div class="card-header badge-primary text-center"><span class="nama_barang"></span></div>
+  <div class="card-body text-primary">
+  <div class="d-flex justify-content-between">
+    <h5 class="card-title">Stok Awal <br><span class="stok_awal d-flex justify-content-center"></span>
+    <h5 class="card-title">Stok Di pinjam<br> <span class="stok_pinjam d-flex justify-content-center"></span> </h5>
+    <h5 class="card-title">Stok Rusak<br><span class="stok_rusak d-flex justify-content-center"></span> </h5>
+    <h5>Stok Saat ini <br> <span class="stok_now d-flex justify-content-center"></span> </h5>
+</div>
+  </div>
+</div>
+
+
+</div>
+      
+      
+    
+            </div>
+            
+           
+            
+        </div>
+    </div>
+</div><div class="modal fade" id="modal_edit" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Update Divisi</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        
+        <form role="form" action="<?= route('divisi.updates') ?>" method="post">
+            @csrf
+            @method('put')
+            <input type="hidden" name="id" />
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+          
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan nama divisi ..." type="text" name="nama_divisi">
+                </div>
+            </div>
+      
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+        </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/admin/barang/modal_edit.blade.php b/resources/views/admin/barang/modal_edit.blade.php
new file mode 100644
index 0000000..ef2ba68
--- /dev/null
+++ b/resources/views/admin/barang/modal_edit.blade.php
@@ -0,0 +1,133 @@
+
+<div class="modal fade" id="modal_edit" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Update Data Barang</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        
+        <form role="form" action="<?= route('barang.updated') ?>" method="post" enctype="multipart/form-data">
+            @csrf
+            @method('put')
+            <input type="hidden" name="id" />
+            <div class="row">
+
+            <div class="form-group mb-3 col-6">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Nama Barang ..." type="text" name="nama_barang">
+                </div>
+            </div>
+
+            <div class="form-group mb-3 col-6">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Serial Number ..." type="text" name="serial_number">
+                </div>
+            </div>
+            
+            </div>
+
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-map-marker"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Nama Lokasi Akurat ..." type="text" name="lokasi">
+                </div>
+            </div>
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"> <i class="fas fa-list"></i>  Tanggal Masuk :</span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan  ..." type="date" name="tanggal_masuk">
+                </div>
+            </div>
+            <div class="row">
+            <div class="form-group mb-3 col-6">
+
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"> <i class="fas fa-list"></i></span>
+                    </div>
+                    <select name="jenis_barang" class="form-control" required>
+                        <option value="">-- Pilih Jenis Barang --</option>
+                        @foreach($jenis_barang as $i)
+                            <option value="{{ $i->id }}">{{ $i->nama_jenis }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            </div>
+
+            <div class="form-group mb-3 col-6">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"> <i class="fas fa-list"></i></span>
+                    </div>
+                    <select name="satuan_barang" class="form-control" required>
+                        <option value="">-- Pilih Satuan Barang --</option>
+                        @foreach($satuan_barang as $i)
+                            <option value="{{ $i->id }}">{{ $i->nama_satuan }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            </div>
+            </div>
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="Update Jumlah Barang ..." type="number" name="jumlah">
+                </div>
+            </div>
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <textarea class="form-control" required placeholder="inputkan Keterangan Barang ..." name="keterangan"></textarea>
+                </div>
+            </div>
+
+            <div class="form-group mb-3 col-6">
+                <div class="input-group input-group-alternative">
+                 <div class="input-group-prepend">
+                    <span class="input-group-text"><i class="fas fa-upload"></i></span>
+                 </div>
+                    <input class="custom-file-input form-control" required placeholder="inputkan Jumlah Barang ..." type="file" name="image_barang"><br>
+                   
+                </div>
+            </div>       
+            <small>* Update Image</small>                   
+      
+      
+    
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Update</button>
+                  
+        </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/admin/barang/modal_keluar.blade.php b/resources/views/admin/barang/modal_keluar.blade.php
new file mode 100644
index 0000000..da94d11
--- /dev/null
+++ b/resources/views/admin/barang/modal_keluar.blade.php
@@ -0,0 +1,111 @@
+
+<div class="modal fade" id="modal_keluar" tabindex="-1" role="dialog" aria-labelledby="modal_keluar" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Barang Keluar</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        <form role="form" action="<?= route('barang.out') ?>" enctype="multipart/form-data" method="post">
+        @csrf
+            
+            <input type="hidden" name="id_barang"/>
+
+            <div class="form-group mb-3 col-12">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text mr-3"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input readonly class="form-control pl-3 text-dark d-flex justify-content-center text-center" required placeholder="inputkan Nama Barang ..." type="text" name="nama_barang"><br>
+                    
+                </div> 
+             
+            </div>
+
+            <div class="d-flex justify-content-between mb-3">
+                    <span class="badge badge-primary serial_number"></span>
+                    <span class="badge badge-success jenis_barang"></span>
+                    <span class="badge badge-danger satuan_barang"> </span>
+
+            </div>
+            
+
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-map-marker"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Lokasi Barang keluar  ..." type="text" name="lokasi_keluar">
+                </div>
+            </div>
+            <div class="row mb-3">
+                
+            <div class="form-group mb-3 col-6">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"> Tanggal Keluar :</span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan  ..." type="date" name="tanggal_keluar">
+                </div>
+            </div>
+            <div class="form-group mb-3 col-6">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-circle-sort-up"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Jumlah Barang ..." type="number" name="jumlah_keluar">
+                </div>
+            </div>
+            </div>
+
+            <div class="form-group mb-3 col-12">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"> <i class="fas fa-filter"></i></span>
+                    </div>
+                    <select name="jenis_keluar" class="form-control" required>
+                        <option value="">-- Pilih Jenis Keluar --</option>
+                    
+                            <option value="1">Di Pinjam</option>
+                            <option value="2">Rusak</option>
+
+                    
+                    </select>
+                </div>
+            </div>
+
+            <div id="pinjam_field">
+           
+            </div>
+            <div class="form-group mb-3 mt-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <textarea class="form-control" required placeholder="inputkan Keterangan Barang ..." name="keterangan_keluar"></textarea>
+                </div>
+            </div>
+
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+        </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
+
diff --git a/resources/views/admin/divisi/index.blade.php b/resources/views/admin/divisi/index.blade.php
new file mode 100644
index 0000000..eb7393a
--- /dev/null
+++ b/resources/views/admin/divisi/index.blade.php
@@ -0,0 +1,140 @@
+@extends('layouts.app')
+
+@section('content')
+    @include('layouts.headers.header-content')
+    
+    <div class="container-fluid mt--6">
+      <div class="row">
+        <div class="col">
+          <div class="card">
+            <!-- Card header -->
+            <div class="card-header border-0">
+              <h3 class="mb-0">{{ $current_page }}</h3>
+              <div class="d-flex flex-row-reverse">
+              <a class="btn btn-md btn-primary justify-content-end text-white modal_add" ><i class="fas fa-plus"></i> Tambah</a>
+                </div>
+            </div>
+         
+            @if ($message = Session::get('sukses'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+        
+    @if ($message = Session::get('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+           
+            <!-- Light table -->
+            <div class="table-responsive">
+              <table class="table align-items-center table-flush" id="table_data">
+                <thead class="thead-light">
+                  <tr>
+                    <th scope="col" class="sort" data-sort="name">Nomor</th>
+                    <th scope="col" class="sort" data-sort="budget">Nama Divisi</th>
+                    <th scope="col"> Action</th>
+                  </tr>
+                </thead>
+                <tbody class="list">
+
+                @foreach($divisi as $i)
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                      
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">{{ $loop->iteration }}</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                    {{ $i->nama_divisi }}
+                    </td>
+                    
+                    <td class="text-right">
+                   
+                          <a data-id="{{ $i->id }}" href="#" data-toggle="tooltip" data-placement="top" title="Edit"   class=" modal_edit text-right btn btn-md btn-outline-success"><i class="fas fa-edit  text-right"></i> </a>
+                          <a data-toggle="tooltip" data-placement="top" title="Hapus" onclick="return confirm('Divisi ini akan di delete ... ?')" href="{{ route('divisi.hapus',$i->id) }}" class=" text-right btn btn-md btn-outline-danger"><i class="fas fa-trash"></i> </a>
+                    
+                    </td>
+                  </tr>     
+                  @endforeach
+                  
+                </tbody>
+              </table>
+            </div>
+            <!-- Card footer -->
+           
+          </div>
+        </div>
+      </div>
+</div>
+
+@include('admin.divisi.modal_add')
+@include('admin.divisi.modal_edit')
+
+        @include('layouts.footers.auth')
+    </div>
+@endsection
+
+@push('js')
+    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
+    
+    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
+    <script>
+
+$(document).ready(function () {
+    $('#table_data').DataTable();
+    $('[data-toggle="tooltip"]').tooltip();
+});
+        $(".modal_add").click(function(e){
+
+            e.preventDefault();
+
+            $("#modal_add").modal('show');
+        })
+
+        $(".modal_edit").click(function(e){
+
+e.preventDefault();
+
+$("#modal_edit").modal('show');
+var id = $(this).attr('data-id');
+// console.log(id_jenis);  
+            $.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ secure_url('get_divisi') }}",
+                method:"post",
+                data:{id:id},
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    // console.log(obj);
+
+                    $("[name=nama_divisi]").val(obj.nama_divisi);
+                    $("[name=id]").val(obj.id);
+
+
+                }
+
+
+            })
+
+})
+        
+        </script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/admin/divisi/modal_add.blade.php b/resources/views/admin/divisi/modal_add.blade.php
new file mode 100644
index 0000000..fc76216
--- /dev/null
+++ b/resources/views/admin/divisi/modal_add.blade.php
@@ -0,0 +1,40 @@
+<div class="modal fade" id="modal_add" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Tambah Divisi</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        <form role="form" action="<?= route('divisi.store') ?>" method="post">
+        @csrf
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Nama Divisi ..." type="text" name="nama_divisi">
+                </div>
+            </div>
+      
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+        </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/admin/divisi/modal_edit.blade.php b/resources/views/admin/divisi/modal_edit.blade.php
new file mode 100644
index 0000000..9d94d5d
--- /dev/null
+++ b/resources/views/admin/divisi/modal_edit.blade.php
@@ -0,0 +1,45 @@
+
+<div class="modal fade" id="modal_edit" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Update Divisi</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        
+        <form role="form" action="<?= route('divisi.updates') ?>" method="post">
+            @csrf
+            @method('put')
+            <input type="hidden" name="id" />
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+          
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan nama divisi ..." type="text" name="nama_divisi">
+                </div>
+            </div>
+      
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+        </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/admin/jenis_barang/index.blade.php b/resources/views/admin/jenis_barang/index.blade.php
new file mode 100644
index 0000000..74de4ed
--- /dev/null
+++ b/resources/views/admin/jenis_barang/index.blade.php
@@ -0,0 +1,222 @@
+@extends('layouts.app')
+
+@section('content')
+    @include('layouts.headers.header-content')
+    
+    <div class="container-fluid mt--6">
+      <div class="row">
+        <div class="col">
+          <div class="card">
+            <!-- Card header -->
+            <div class="card-header border-0">
+              <h3 class="mb-0">{{ $current_page }}</h3>
+              <div class="d-flex flex-row-reverse">
+              <a class="btn btn-md btn-primary justify-content-end text-white jenis_barang_add" ><i class="fas fa-plus"></i> Tambah</a>
+                </div>
+            </div>
+         
+            @if ($message = Session::get('sukses'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+        
+    @if ($message = Session::get('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+           
+            <!-- Light table -->
+            <div class="table-responsive">
+              <table class="table align-items-center table-flush" id="table_jenisbarang">
+                <thead class="thead-light">
+                  <tr>
+                    <th scope="col" class="sort" data-sort="name">ID jenis Barang</th>
+                    <th scope="col" class="sort" data-sort="budget">Jenis Barang</th>
+                    <th scope="col"> Action</th>
+                  </tr>
+                </thead>
+                <tbody class="list">
+
+                @foreach($jenis_barang as $i)
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/bootstrap.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">{{ $loop->iteration }}</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                    {{ $i->nama_jenis }}
+                    </td>
+                    
+                    <td class="text-right">
+                     
+                          <a data-id="{{ $i->id }}" data-toggle="tooltip" data-placement="top" title="Edit" href="#" class="modal_edit btn btn-md btn-outline-success"><i class="fas fa-edit"></i></a>
+                          <a data-toggle="tooltip" data-placement="top" title="Hapus" onclick="return confirm('Jenis barang ini akan di delete ... ?')" href="{{ route('jenis_barang.hapus',$i->id) }}" class="btn btn-md btn-outline-danger"><i class="fas fa-trash"></i> </a>
+                          <!-- <a class="dropdown-item" href="#">Something else here</a> -->
+                        
+                    </td>
+                  </tr>     
+                  @endforeach
+                  
+                </tbody>
+              </table>
+            </div>
+            <!-- Card footer -->
+           
+          </div>
+        </div>
+      </div>
+</div>
+<div class="modal fade" id="modal_add" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Tambah jenis barang</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        <form role="form" action="<?= route('jenis_barang.store') ?>" method="post">
+        @csrf
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan jenis barang ..." type="text" name="jenis_barang">
+                </div>
+            </div>
+      
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+        </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="modal_edit" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Update jenis barang</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        
+        <form role="form" action="<?= route('jenis_barang.updates') ?>" method="post">
+            @csrf
+            @method('put')
+            <input type="hidden" name="id" />
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+          
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan jenis barang ..." type="text" name="jenis_barang">
+                </div>
+            </div>
+      
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+        </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
+        @include('layouts.footers.auth')
+    </div>
+@endsection
+
+@push('js')
+    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
+    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
+    <script>
+
+$(document).ready(function () {
+    $('#table_jenisbarang').DataTable();
+});
+        $(".jenis_barang_add").click(function(e){
+
+            e.preventDefault();
+
+            $("#modal_add").modal('show');
+        })
+
+        $(".modal_edit").click(function(e){
+
+e.preventDefault();
+
+$("#modal_edit").modal('show');
+var id = $(this).attr('data-id');
+// console.log(id_jenis);  
+            $.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ secure_url('get_jenis_barang') }}",
+                method:"post",
+                data:{id:id},
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    // console.log(obj);
+
+                    $("[name=jenis_barang]").val(obj.nama_jenis);
+                    $("[name=id]").val(obj.id);
+
+
+                }
+
+
+            })
+
+})
+        
+        </script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/admin/pengguna/index.blade.php b/resources/views/admin/pengguna/index.blade.php
new file mode 100644
index 0000000..0a8fd21
--- /dev/null
+++ b/resources/views/admin/pengguna/index.blade.php
@@ -0,0 +1,183 @@
+@extends('layouts.app')
+
+@section('content')
+    @include('layouts.headers.header-content')
+    
+    <div class="container-fluid mt--6">
+      <div class="row">
+        <div class="col">
+          <div class="card">
+            <!-- Card header -->
+            <div class="card-header border-0">
+              <h3 class="mb-0">{{ $current_page }}</h3>
+              <div class="d-flex flex-row-reverse">
+              <a class="btn btn-md btn-primary justify-content-end text-white modal_add" ><i class="fas fa-plus"></i> Tambah</a>
+                </div>
+            </div>
+         
+            @if ($message = Session::get('sukses'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+        
+    @if ($message = Session::get('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+           
+            <!-- Light table -->
+            <div class="table-responsive">
+              <table class="table align-items-center table-flush" id="table_data">
+                <thead class="thead-light">
+                  <tr>
+                    <th scope="col" class="sort" data-sort="name">Nomor</th>
+                    <th scope="col" class="sort" data-sort="budget">Nama Pengguna</th>
+                    <th scope="col" class="sort" data-sort="budget">No Identitas </th>
+                    <th scope="col" class="sort" data-sort="budget">Jumlah barang </th>
+                    <th scope="col"> Action</th>
+                  </tr>
+                </thead>
+                <tbody class="list">
+              
+                @foreach($pengguna as $i)
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">{{ $loop->iteration }}</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                    {{ $i->nama }} <br>
+                    <span class="badge badge-primary">{{ $i->nama_divisi }}</span>
+                    </td>
+                    <td class="budget">
+                    {{ $i->no_identitas }}
+                    </td>
+                    <td class="budget">
+                        {{ \Helperku::get_jumlah_pinjam($i->id) }}
+                    </td>
+                    <td class="text-right">
+                        
+                    <a data-id="{{ $i->id }}" href="{{ route('pengguna.show',$i->id) }}"  data-toggle="tooltip" data-placement="top" title="Detail Pengguna" href="#" class="btn btn-md btn-outline-primary"><i class="fas fa-address-book"></i> </a>
+                          <a data-id="{{ $i->id }}" data-toggle="tooltip" data-placement="top" title="Edit" href="#" class="modal_edit btn btn-md btn-outline-success"><i class="fas fa-edit"></i> </a>
+                          <a data-toggle="tooltip" data-placement="top" title="Hapus"  onclick="return confirm('Pengguna ini akan di delete ... ?')" href="{{ route('pengguna.hapus',$i->id) }}" class="btn btn-md btn-outline-danger"><i class="fas fa-trash"></i> </a>
+                          <!-- <a class="dropdown-item" href="#">Something else here</a> -->
+                      
+                    </td>
+                  </tr>     
+                  @endforeach
+                  
+                </tbody>
+              </table>
+            </div>
+            <!-- Card footer -->
+           
+          </div>
+        </div>
+      </div>
+</div>
+
+
+@include('admin.pengguna.modal_add')
+@include('admin.pengguna.modal_edit')
+@include('layouts.footers.auth')
+    </div>
+@endsection
+
+@push('js')
+    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
+    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
+    <script>
+
+$(document).ready(function () {
+    $('#table_data').DataTable();
+});
+        $(".modal_add").click(function(e){
+
+            e.preventDefault();
+
+            $("#modal_add").modal('show');
+        })
+
+        $(".modal_edit").click(function(e){
+
+e.preventDefault();
+var id = $(this).attr('data-id');
+$("#modal_edit").modal('show');
+
+console.log(id);  
+            $.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ secure_url('get_pengguna') }}",
+                method:"post",
+                data:{id:id},
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    // console.log(obj);
+
+                    $("[name=nama]").val(obj.nama);
+                    $("[name=no_identitas]").val(obj.no_identitas);
+                    $("[name=id]").val(id);
+
+
+                }
+
+
+            })
+
+})
+
+
+$(".modal_detail").click(function(e){
+
+e.preventDefault();
+var id = $(this).attr('data-id');
+$("#modal_detail").modal('show');
+
+console.log(id);  
+            $.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ secure_url('get_detail_pengguna') }}",
+                method:"post",
+                data:{id:id},
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    // console.log(obj);
+
+                    $("[name=nama]").val(obj.nama);
+                    $("[name=no_identitas]").val(obj.no_identitas);
+                    $("[name=id]").val(id);
+
+
+                }
+
+
+            })
+
+})
+        
+        </script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/admin/pengguna/modal_add.blade.php b/resources/views/admin/pengguna/modal_add.blade.php
new file mode 100644
index 0000000..55caa27
--- /dev/null
+++ b/resources/views/admin/pengguna/modal_add.blade.php
@@ -0,0 +1,62 @@
+
+<div class="modal fade" id="modal_add" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Tambah Pengguna</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+             </div>
+              <form role="form" action="<?= route('pengguna.store') ?>" method="post">
+               @csrf
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan nama  ..." type="text" name="nama">
+                </div>
+            </div>
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Nip / Nrp  ..." type="text" name="no_identitas">
+                </div>
+            </div>
+
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                   <select name="divisi" required class="form-control">
+                    <option value="">-- Pilih Divisi --</option>
+                    @foreach($divisi as $i)
+                      <option value="{{  $i->id }}">{{ $i->nama_divisi }}</option>
+                    @endforeach
+                  </select>
+                </div>
+            </div>
+</div>
+      
+    
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+                </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/admin/pengguna/modal_detail.blade.php b/resources/views/admin/pengguna/modal_detail.blade.php
new file mode 100644
index 0000000..30e088a
--- /dev/null
+++ b/resources/views/admin/pengguna/modal_detail.blade.php
@@ -0,0 +1,62 @@
+
+<div class="modal fade" id="modal_add" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Detail Pengguna Barang</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+             </div>
+              <form role="form" action="<?= route('pengguna.store') ?>" method="post">
+               @csrf
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan nama  ..." type="text" name="nama">
+                </div>
+            </div>
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Nip / Nrp  ..." type="text" name="no_identitas">
+                </div>
+            </div>
+
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                   <select name="divisi" required class="form-control">
+                    <option value="">-- Pilih Divisi --</option>
+                    @foreach($divisi as $i)
+                      <option value="{{  $i->id }}">{{ $i->nama_divisi }}</option>
+                    @endforeach
+                  </select>
+                </div>
+            </div>
+</div>
+      
+    
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+                </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/admin/pengguna/modal_edit.blade.php b/resources/views/admin/pengguna/modal_edit.blade.php
new file mode 100644
index 0000000..3789abc
--- /dev/null
+++ b/resources/views/admin/pengguna/modal_edit.blade.php
@@ -0,0 +1,69 @@
+
+<div class="modal fade" id="modal_edit" tabindex="-1" role="dialog" aria-labelledby="modal_edit" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Update Data Pengguna</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        
+        <form role="form" action="<?= route('pengguna.updates') ?>" method="post">
+            @csrf
+            @method('put')
+            <input type="hidden" name="id" />
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan nama  ..." type="text" name="nama">
+                </div>
+            </div>
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Nip / Nrp  ..." type="text" name="no_identitas">
+                </div>
+            </div>
+
+            <div class="form-group mb-3">
+     
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                   <select name="divisi" required class="form-control">
+                    <option value="">-- Pilih Divisi --   </option>
+                 
+                    @foreach($divisi as $d)
+                      <option value="<?= $d->id ?>"><?=  $d->nama_divisi ?></option>
+                    @endforeach
+                  </select>
+                </div>
+            </div>
+      
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Update </button>
+                  
+</form>
+            </div>
+</div>  
+        </div>
+    </div>
+
+       
\ No newline at end of file
diff --git a/resources/views/admin/satuan_barang/index.blade.php b/resources/views/admin/satuan_barang/index.blade.php
new file mode 100644
index 0000000..4c3894a
--- /dev/null
+++ b/resources/views/admin/satuan_barang/index.blade.php
@@ -0,0 +1,222 @@
+@extends('layouts.app')
+
+@section('content')
+    @include('layouts.headers.header-content')
+    
+    <div class="container-fluid mt--6">
+      <div class="row">
+        <div class="col">
+          <div class="card">
+            <!-- Card header -->
+            <div class="card-header border-0">
+              <h3 class="mb-0">{{ $current_page }}</h3>
+              <div class="d-flex flex-row-reverse">
+              <a class="btn btn-md btn-primary justify-content-end text-white modal_add" ><i class="fas fa-plus"></i> Tambah</a>
+                </div>
+            </div>
+         
+            @if ($message = Session::get('sukses'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+        
+    @if ($message = Session::get('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+           
+            <!-- Light table -->
+            <div class="table-responsive">
+              <table class="table align-items-center table-flush" id="table_data">
+                <thead class="thead-light">
+                  <tr>
+                    <th scope="col" class="sort" data-sort="name">Nomor</th>
+                    <th scope="col" class="sort" data-sort="budget">Satuan Barang</th>
+                    <th scope="col"> Action</th>
+                  </tr>
+                </thead>
+                <tbody class="list">
+
+                @foreach($satuan_barang as $i)
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/bootstrap.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">{{ $loop->iteration }}</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                    {{ $i->nama_satuan }}
+                    </td>
+                    
+                    <td class="text-right">
+                     
+                          <a data-id="{{ $i->id }}" data-toggle="tooltip" data-placement="top" title="Edit" href="#" class="modal_edit btn btn-md btn-outline-success"><i class="fas fa-edit"></i></a>
+                          <a data-toggle="tooltip" data-placement="top" title="Hapus" onclick="return confirm('Jenis barang ini akan di delete ... ?')" href="{{ route('satuan.hapus',$i->id) }}" class="btn btn-md btn-outline-danger"><i class="fas fa-trash"></i> </a>
+                          <!-- <a class="dropdown-item" href="#">Something else here</a> -->
+                        
+                    </td>
+                  </tr>     
+                  @endforeach
+                  
+                </tbody>
+              </table>
+            </div>
+            <!-- Card footer -->
+           
+          </div>
+        </div>
+      </div>
+</div>
+<div class="modal fade" id="modal_add" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Tambah Satuan barang</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        <form role="form" action="<?= route('satuan.store') ?>" method="post">
+        @csrf
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Satuan barang ..." type="text" name="satuan_barang">
+                </div>
+            </div>
+      
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+        </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="modal_edit" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
+    <div class="modal-dialog modal-lg  modal-" role="document">
+        <div class="modal-content">
+        	
+            <div class="modal-header">
+                <h2 class="modal-title" id="modal-title-default">Update Satuan barang</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            
+            <div class="modal-body">
+            	
+            <div class="text-center text-muted mb-4">
+            <small></small>
+        </div>
+        
+        <form role="form" action="<?= route('satuan.updates') ?>" method="post">
+            @csrf
+            @method('put')
+            <input type="hidden" name="id" />
+            <div class="form-group mb-3">
+                <div class="input-group input-group-alternative">
+          
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-list"></i></span>
+                    </div>
+                    <input class="form-control" required placeholder="inputkan Satuan barang ..." type="text" name="satuan_barang">
+                </div>
+            </div>
+      
+      
+    
+            </div>
+            
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary">Simpan </button>
+                  
+        </form>
+            </div>
+            
+        </div>
+    </div>
+</div>
+        @include('layouts.footers.auth')
+    </div>
+@endsection
+
+@push('js')
+    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
+    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
+    <script>
+
+$(document).ready(function () {
+    $('#table_data').DataTable();
+});
+        $(".modal_add").click(function(e){
+
+            e.preventDefault();
+
+            $("#modal_add").modal('show');
+        })
+
+        $(".modal_edit").click(function(e){
+
+e.preventDefault();
+
+$("#modal_edit").modal('show');
+var id = $(this).attr('data-id');
+// console.log(id_jenis);  
+            $.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ secure_url('get_satuan_barang') }}",
+                method:"post",
+                data:{id:id},
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    // console.log(obj);
+
+                    $("[name=satuan_barang]").val(obj.nama_satuan);
+                    $("[name=id]").val(obj.id);
+
+
+                }
+
+
+            })
+
+})
+        
+        </script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/admin/transaksi/index.blade.php b/resources/views/admin/transaksi/index.blade.php
new file mode 100644
index 0000000..0693a37
--- /dev/null
+++ b/resources/views/admin/transaksi/index.blade.php
@@ -0,0 +1,220 @@
+@extends('layouts.app')
+
+@section('content')
+    @include('layouts.headers.header-content')
+    
+    <div class="container-fluid mt--6">
+      <div class="row">
+        <div class="col">
+          <div class="card">
+            <!-- Card header -->
+            <div class="card-header border-0">
+              <h3 class="mb-0 header-sub">{{ $sub_1 }}<br>
+                    </h3>
+              <div class="d-flex flex-row-reverse ">
+
+                    <select name="filter_jenis" required class="col-2 form-control form-control-sm">
+                            <option value="">-- Filter Status Barang --</option>
+                            <option value="1" selected>Di pinjam </option>
+                            <option value="2">Rusak</option>
+                    </select>
+                </div>
+            </div>
+         
+            @if ($message = Session::get('sukses'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+        
+    @if ($message = Session::get('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
+    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+    @endif
+            
+           
+            <!-- Light table -->
+      
+            <div class="table-responsive">
+              <table class="table align-items-center table-flush" id="table_data">
+                <thead class="thead-light">
+                  <tr>
+                    <th scope="col" class="sort" data-sort="name">Nama Pengguna </th>
+                    <th scope="col" class="sort" data-sort="budget">Barang</th>
+                    <th scope="col" class="sort" data-sort="status">Lokasi Keluar</th>
+                    <th scope="col" class="sort" data-sort="completion">Jumlah Keluar</th>
+                    <th scope="col"> Tanggal Keluar</th>
+                    <th scope="col"> Action</th>
+                  </tr>
+                </thead>
+                <tbody class="list isi_data">
+
+
+                  @foreach($barang_keluar as $i)
+                        <tr>
+                            <td>{{ $i->nama}} <br>
+                                <span class="badge badge-danger">{{ $i->transaksi_id }}</span> </td>
+                            <td>{{ $i->nama_barang }} <br>
+                                <span class="badge badge-primary">S/N : {{ $i->serial_number }}</span> <span class="badge badge-success">{{ $i->nama_jenis }}</span> </td>
+                            <td> <a href="https://maps.google.com/?q=<?= $i->lokasi_keluar ?>" target="_blank" class="btn btn-sm btn-outline-primary">
+                                 <?= $i->lokasi_keluar ?>  <span class="badge badge-light"><i class="fas fa-map-marker text-success"></i></span>
+                            </a></td>
+                            <td>{{ $i->jumlah_keluar }} / {{ $i->nama_satuan }}</td>
+                            <td><span class="fas fa-calendar-check"></span> {{ $i->tanggal_keluar }}</td>
+                            <td class="text-right">
+                   
+                   <a data-id="{{ $i->id }}" href="#" data-toggle="tooltip" data-placement="top" title="Edit"   class=" modal_edit text-right btn btn-md btn-outline-success"><i class="fas fa-edit  text-right"></i> </a>
+                   <a data-toggle="tooltip" data-placement="top" title="Hapus" onclick="return confirm('barang ini akan di delete ... ?')" href="{{ route('barang.hapus',$i->id) }}" class=" text-right btn btn-md btn-outline-danger"><i class="fas fa-trash"></i> </a>
+                   <a data-id="{{ $i->id }}" href="#" data-toggle="tooltip" data-placement="top" title="Barang Keluar"   class=" modal_keluar text-right btn btn-md btn-outline-primary"><i class="fas fa-arrow-right  text-right"></i> </a> 
+             </td>
+                            
+                        </tr>
+
+                  @endforeach
+                </tbody>
+              </table>
+            </div>
+            <!-- Card footer -->
+           
+          </div>
+        </div>
+      </div>
+</div>
+<!-- Modal -->
+@include('admin.barang.modal_add')
+@include('admin.barang.modal_edit')
+@include('admin.barang.modal_keluar')
+
+        @include('layouts.footers.auth')
+    </div>
+@endsection
+
+@push('js')
+    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
+    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
+    <script>
+
+$(document).ready(function () {
+    $('#table_data').DataTable();
+    $('[data-toggle="tooltip"]').tooltip();
+});
+        $(".modal_add").click(function(e){
+
+            e.preventDefault();
+
+            $("#modal_add").modal('show');
+        })
+
+        $(".modal_keluar").click(function(e){
+
+e.preventDefault();
+$("#modal_keluar").modal('show');
+var id = $(this).attr('data-id');
+
+$.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ url('get_barang') }}",
+                method:"post",
+                data:{id:id},
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    console.log(obj[0].serial_number);
+
+                    $("[name=nama_barang]").val(obj[0].nama_barang);
+                    $("[name=id_barang]").val(id);
+                    $(".serial_number").text('S/N  :  '+obj[0].serial_number);
+                    $(".jenis_barang").text('Jenis :'+obj[0].nama_jenis);
+                    $(".satuan_barang").text('Stok :'+obj[0].jumlah_barang+'/'+obj[0].nama_satuan);
+
+
+                }
+
+
+            })
+
+})
+
+$("[name=filter_jenis]").change(function(e){
+
+  e.preventDefault();
+
+  var isi = $(this).val();
+  console.log(isi);
+;  if(isi == 1){
+
+      location.href="{{ route('transaksi.index') }}";
+
+  }else if(isi == 2)
+  { 
+
+    $.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ url('get_html_barang_rusak') }}",
+                method:"get",
+                success:function(data){
+
+                   $("#table_data").html(data);
+
+                   $(".header-sub").text('Data Barang Rusak');
+
+                }
+
+
+            })
+
+  }
+})
+
+        $(".modal_edit").click(function(e){
+
+e.preventDefault();
+
+$("#modal_edit").modal('show');
+var id = $(this).attr('data-id');
+// console.log(id_jenis);  
+            $.ajaxSetup({
+                  headers: {
+                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                  }
+              })
+            $.ajax({
+                url:"{{ url('get_divisi') }}",
+                method:"post",
+                data:{id:id},
+                success:function(data){
+
+                    var obj = JSON.parse(data);
+                    // console.log(obj);
+
+                    $("[name=nama_divisi]").val(obj.nama_divisi);
+                    $("[name=id]").val(obj.id);
+
+
+                }
+
+
+            })
+
+})
+        
+        </script>
+@endpush
+
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
new file mode 100644
index 0000000..fd28de8
--- /dev/null
+++ b/resources/views/auth/login.blade.php
@@ -0,0 +1,69 @@
+@extends('layouts.app', ['class' => 'bg-default'])
+
+@section('content')
+    @include('layouts.headers.guest')
+
+    <div class="container mt--8 pb-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-5 col-md-7">
+                <div class="card bg-secondary shadow border-0">
+                    <div class="card-header bg-transparent pb-5">
+                        <div class="text-muted text-center mt-2 mb-3"><h2>{{ __('Login Administrator SIMAK') }}</h2></div>
+                        <div class="btn-wrapper text-center">
+                        
+                        </div>
+                    </div>
+                    <div class="card-body px-lg-5 py-lg-5">
+                        <div class="text-center text-muted mb-4">
+                         
+                        </div>
+                        <form role="form" method="POST" action="{{ route('login') }}">
+                            @csrf
+
+                            <div class="form-group{{ $errors->has('username') ? ' has-danger' : '' }} mb-3">
+                                <div class="input-group input-group-alternative">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="ni ni-circle-08"></i></span>
+                                    </div>
+                                    <input class="form-control{{ $errors->has('username') ? ' is-invalid' : '' }}" placeholder="{{ __('Username') }}" type="text" name="username" value="{{ old('username') }}" value="administrator" required autofocus>
+                                </div>
+                                @if ($errors->has('username'))
+                                    <span class="invalid-feedback" style="display: block;" role="alert">
+                                        <strong>{{ $errors->first('username') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                            <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
+                                <div class="input-group input-group-alternative">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
+                                    </div>
+                                    <input class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="{{ __('Password') }}" type="password" required>
+                                </div>
+                                @if ($errors->has('password'))
+                                    <span class="invalid-feedback" style="display: block;" role="alert">
+                                        <strong>{{ $errors->first('password') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                            
+                            <div class="text-center">
+                                <button type="submit" class="btn btn-primary my-4">{{ __('Login') }}</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="row mt-3">
+                    <div class="col-6">
+                        @if (Route::has('password.request'))
+                            <a href="{{ route('password.request') }}" class="text-light">
+                                <small>{{ __('Forgot password?') }}</small>
+                            </a>
+                        @endif
+                    </div>
+                
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/resources/views/auth/passwords/confirm.blade.php b/resources/views/auth/passwords/confirm.blade.php
new file mode 100644
index 0000000..f8c8e61
--- /dev/null
+++ b/resources/views/auth/passwords/confirm.blade.php
@@ -0,0 +1,49 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Confirm Password') }}</div>
+
+                <div class="card-body">
+                    {{ __('Please confirm your password before continuing.') }}
+
+                    <form method="POST" action="{{ route('password.confirm') }}">
+                        @csrf
+
+                        <div class="row mb-3">
+                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
+
+                                @error('password')
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $message }}</strong>
+                                    </span>
+                                @enderror
+                            </div>
+                        </div>
+
+                        <div class="row mb-0">
+                            <div class="col-md-8 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Confirm Password') }}
+                                </button>
+
+                                @if (Route::has('password.request'))
+                                    <a class="btn btn-link" href="{{ route('password.request') }}">
+                                        {{ __('Forgot Your Password?') }}
+                                    </a>
+                                @endif
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
new file mode 100644
index 0000000..e6a8cfb
--- /dev/null
+++ b/resources/views/auth/passwords/email.blade.php
@@ -0,0 +1,52 @@
+@extends('layouts.app', ['class' => 'bg-default'])
+
+@section('content')
+    @include('layouts.headers.guest')
+
+    <div class="container mt--8 pb-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-5 col-md-7">
+                <div class="card bg-secondary shadow border-0">
+                    <div class="card-body px-lg-5 py-lg-5">
+                        <div class="text-center text-muted mb-4">
+                            <small>{{ __('Reset password') }}</small>
+                        </div>
+
+                        @if (session('status'))
+                            <div class="alert alert-success" role="alert">
+                                {{ session('status') }}
+                            </div>
+                        @endif
+
+                        @if (session('info'))
+                            <div class="alert alert-info" role="alert">
+                                {{ session('info') }}
+                            </div>
+                        @endif
+
+                        <form role="form" method="POST" action="{{ route('password.email') }}">
+                            @csrf
+
+                            <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }} mb-3">
+                                <div class="input-group input-group-alternative">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="ni ni-email-83"></i></span>
+                                    </div>
+                                    <input class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('Email') }}" type="email" name="email" value="{{ old('email') }}" required autofocus>
+                                </div>
+                                @if ($errors->has('email'))
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $errors->first('email') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                            <div class="text-center">
+                                <button type="submit" class="btn btn-primary my-4">{{ __('Send Password Reset Link') }}</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
new file mode 100644
index 0000000..c5fcf95
--- /dev/null
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -0,0 +1,62 @@
+@extends('layouts.app', ['class' => 'bg-default'])
+
+@section('content')
+    @include('layouts.headers.guest')
+    
+    <div class="container mt--8 pb-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-5 col-md-7">
+                <div class="card bg-secondary shadow border-0">
+                    <div class="card-body px-lg-5 py-lg-5">
+                        <div class="text-center text-muted mb-4">
+                            <small>{{ __('Reset Password') }}</small>
+                        </div>
+                        <form role="form" method="POST" action="{{ route('password.update') }}">
+                            @csrf
+
+                            <input type="hidden" name="token" value="{{ $token }}">
+
+                            <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }} mb-3">
+                                <div class="input-group input-group-alternative">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="ni ni-email-83"></i></span>
+                                    </div>
+                                    <input class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('Email') }}" type="email" name="email" value="{{ $email ?? old('email') }}" required autofocus>
+                                </div>
+                                @if ($errors->has('email'))
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $errors->first('email') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                            <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
+                                <div class="input-group input-group-alternative">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
+                                    </div>
+                                    <input class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="{{ __('Password') }}" type="password" required>
+                                </div>
+                                @if ($errors->has('password'))
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $errors->first('password') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                            <div class="form-group">
+                                <div class="input-group input-group-alternative">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
+                                    </div>
+                                    <input class="form-control" placeholder="{{ __('Confirm Password') }}" type="password" name="password_confirmation" required>
+                                </div>
+                            </div>
+                            <div class="text-center">
+                                <button type="submit" class="btn btn-primary my-4">{{ __('Reset Password') }}</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
new file mode 100644
index 0000000..b4879e5
--- /dev/null
+++ b/resources/views/auth/register.blade.php
@@ -0,0 +1,100 @@
+@extends('layouts.app', ['class' => 'bg-default'])
+
+@section('content')
+    @include('layouts.headers.guest')
+
+    <div class="container mt--8 pb-5">
+        <!-- Table -->
+        <div class="row justify-content-center">
+            <div class="col-lg-6 col-md-8">
+                <div class="card bg-secondary shadow border-0">
+                    <div class="card-header bg-transparent pb-5">
+                        <div class="text-muted text-center mt-2 mb-4"><small>{{ __('Sign up with') }}</small></div>
+                        <div class="text-center">
+                            <a href="#" class="btn btn-neutral btn-icon mr-4">
+                                <span class="btn-inner--icon"><img src="{{ asset('argon') }}/img/icons/common/github.svg"></span>
+                                <span class="btn-inner--text">{{ __('Github') }}</span>
+                            </a>
+                            <a href="#" class="btn btn-neutral btn-icon">
+                                <span class="btn-inner--icon"><img src="{{ asset('argon') }}/img/icons/common/google.svg"></span>
+                                <span class="btn-inner--text">{{ __('Google') }}</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="card-body px-lg-5 py-lg-5">
+                        <div class="text-center text-muted mb-4">
+                            <small>{{ __('Or sign up with credentials') }}</small>
+                        </div>
+                        <form role="form" method="POST" action="{{ route('register') }}">
+                            @csrf
+
+                            <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
+                                <div class="input-group input-group-alternative mb-3">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="ni ni-hat-3"></i></span>
+                                    </div>
+                                    <input class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="{{ __('Name') }}" type="text" name="name" value="{{ old('name') }}" required autofocus>
+                                </div>
+                                @if ($errors->has('name'))
+                                    <span class="invalid-feedback" style="display: block;" role="alert">
+                                        <strong>{{ $errors->first('name') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                            <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
+                                <div class="input-group input-group-alternative mb-3">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="ni ni-email-83"></i></span>
+                                    </div>
+                                    <input class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('Email') }}" type="email" name="email" value="{{ old('email') }}" required>
+                                </div>
+                                @if ($errors->has('email'))
+                                    <span class="invalid-feedback" style="display: block;" role="alert">
+                                        <strong>{{ $errors->first('email') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                            <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
+                                <div class="input-group input-group-alternative">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
+                                    </div>
+                                    <input class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" placeholder="{{ __('Password') }}" type="password" name="password" required>
+                                </div>
+                                @if ($errors->has('password'))
+                                    <span class="invalid-feedback" style="display: block;" role="alert">
+                                        <strong>{{ $errors->first('password') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                            <div class="form-group">
+                                <div class="input-group input-group-alternative">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
+                                    </div>
+                                    <input class="form-control" placeholder="{{ __('Confirm Password') }}" type="password" name="password_confirmation" required>
+                                </div>
+                            </div>
+                            <div class="text-muted font-italic">
+                                <small>{{ __('password strength') }}: <span class="text-success font-weight-700">{{ __('strong') }}strong</span></small>
+                            </div>
+                            <div class="row my-4">
+                                <div class="col-12">
+                                    <div class="custom-control custom-control-alternative custom-checkbox">
+                                        <input class="custom-control-input" id="customCheckRegister" type="checkbox">
+                                        <label class="custom-control-label" for="customCheckRegister">
+                                            <span class="text-muted">{{ __('I agree with the') }} <a href="#!">{{ __('Privacy Policy') }}</a></span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="text-center">
+                                <button type="submit" class="btn btn-primary mt-4">{{ __('Create account') }}</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/resources/views/auth/verify.blade.php b/resources/views/auth/verify.blade.php
new file mode 100644
index 0000000..44178cb
--- /dev/null
+++ b/resources/views/auth/verify.blade.php
@@ -0,0 +1,32 @@
+@extends('layouts.app', ['class' => 'bg-default'])
+
+@section('content')
+    @include('layouts.headers.guest')
+
+    <div class="container mt--8 pb-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-5 col-md-7">
+                <div class="card bg-secondary shadow border-0">
+                    <div class="card-body px-lg-5 py-lg-5">
+                        <div class="text-center text-muted mb-4">
+                            <small>{{ __('Verify Your Email Address') }}</small>
+                        </div>
+                        <div>
+                            @if (session('resent'))
+                                <div class="alert alert-success" role="alert">
+                                    {{ __('A fresh verification link has been sent to your email address.') }}
+                                </div>
+                            @endif
+                            
+                            {{ __('Before proceeding, please check your email for a verification link.') }}
+                            
+                            @if (Route::has('verification.resend'))
+                                {{ __('If you did not receive the email') }}, <a href="{{ route('verification.resend') }}">{{ __('click here to request another') }}</a>
+                            @endif
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
new file mode 100644
index 0000000..97e3c20
--- /dev/null
+++ b/resources/views/dashboard.blade.php
@@ -0,0 +1,289 @@
+@extends('layouts.app')
+
+@section('content')
+    @include('layouts.headers.cards')
+    
+    <div class="container-fluid mt--7">
+        <div class="row">
+            <div class="col-xl-8 mb-5 mb-xl-0">
+                <div class="card bg-gradient-default shadow">
+                    <div class="card-header bg-transparent">
+                        <div class="row align-items-center">
+                            <div class="col">
+                                <h6 class="text-uppercase text-light ls-1 mb-1">Grafik Peminjaman Barang</h6>
+                                <h2 class="text-white mb-0">Peminjaman Barang</h2>
+                            </div>
+                            <div class="col">
+                                <ul class="nav nav-pills justify-content-end">
+                                    <li class="nav-item mr-2 mr-md-0" data-toggle="chart" data-target="#chart-sales" data-update='{"data":{"datasets":[{"data":[0, 20, 10, 30, 15, 40, 20, 60, 60]}]}}' data-prefix="$" data-suffix="k">
+                                        <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab">
+                                            <span class="d-none d-md-block">Month</span>
+                                            <span class="d-md-none">M</span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item" data-toggle="chart" data-target="#chart-sales" data-update='{"data":{"datasets":[{"data":[0, 20, 5, 25, 10, 30, 15, 40, 40]}]}}' data-prefix="$" data-suffix="k">
+                                        <a href="#" class="nav-link py-2 px-3" data-toggle="tab">
+                                            <span class="d-none d-md-block">Week</span>
+                                            <span class="d-md-none">W</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <!-- Chart -->
+                        <div class="chart">
+                            <!-- Chart wrapper -->
+                            <canvas id="chart-sales" class="chart-canvas"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-4">
+                <div class="card shadow">
+                    <div class="card-header bg-transparent">
+                        <div class="row align-items-center">
+                            <div class="col">
+                                <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
+                                <h2 class="mb-0">Total orders</h2>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <!-- Chart -->
+                        <div class="chart">
+                            <canvas id="chart-orders" class="chart-canvas"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row mt-5">
+            <div class="col-xl-8 mb-5 mb-xl-0">
+                <div class="card shadow">
+                    <div class="card-header border-0">
+                        <div class="row align-items-center">
+                            <div class="col">
+                                <h3 class="mb-0">Page visits</h3>
+                            </div>
+                            <div class="col text-right">
+                                <a href="#!" class="btn btn-sm btn-primary">See all</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="table-responsive">
+                        <!-- Projects table -->
+                        <table class="table align-items-center table-flush">
+                            <thead class="thead-light">
+                                <tr>
+                                    <th scope="col">Page name</th>
+                                    <th scope="col">Visitors</th>
+                                    <th scope="col">Unique users</th>
+                                    <th scope="col">Bounce rate</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <th scope="row">
+                                        /argon/
+                                    </th>
+                                    <td>
+                                        4,569
+                                    </td>
+                                    <td>
+                                        340
+                                    </td>
+                                    <td>
+                                        <i class="fas fa-arrow-up text-success mr-3"></i> 46,53%
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">
+                                        /argon/index.html
+                                    </th>
+                                    <td>
+                                        3,985
+                                    </td>
+                                    <td>
+                                        319
+                                    </td>
+                                    <td>
+                                        <i class="fas fa-arrow-down text-warning mr-3"></i> 46,53%
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">
+                                        /argon/charts.html
+                                    </th>
+                                    <td>
+                                        3,513
+                                    </td>
+                                    <td>
+                                        294
+                                    </td>
+                                    <td>
+                                        <i class="fas fa-arrow-down text-warning mr-3"></i> 36,49%
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">
+                                        /argon/tables.html
+                                    </th>
+                                    <td>
+                                        2,050
+                                    </td>
+                                    <td>
+                                        147
+                                    </td>
+                                    <td>
+                                        <i class="fas fa-arrow-up text-success mr-3"></i> 50,87%
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">
+                                        /argon/profile.html
+                                    </th>
+                                    <td>
+                                        1,795
+                                    </td>
+                                    <td>
+                                        190
+                                    </td>
+                                    <td>
+                                        <i class="fas fa-arrow-down text-danger mr-3"></i> 46,53%
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-4">
+                <div class="card shadow">
+                    <div class="card-header border-0">
+                        <div class="row align-items-center">
+                            <div class="col">
+                                <h3 class="mb-0">Social traffic</h3>
+                            </div>
+                            <div class="col text-right">
+                                <a href="#!" class="btn btn-sm btn-primary">See all</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="table-responsive">
+                        <!-- Projects table -->
+                        <table class="table align-items-center table-flush">
+                            <thead class="thead-light">
+                                <tr>
+                                    <th scope="col">Referral</th>
+                                    <th scope="col">Visitors</th>
+                                    <th scope="col"></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <th scope="row">
+                                        Facebook
+                                    </th>
+                                    <td>
+                                        1,480
+                                    </td>
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            <span class="mr-2">60%</span>
+                                            <div>
+                                                <div class="progress">
+                                                <div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">
+                                        Facebook
+                                    </th>
+                                    <td>
+                                        5,480
+                                    </td>
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            <span class="mr-2">70%</span>
+                                            <div>
+                                                <div class="progress">
+                                                <div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">
+                                        Google
+                                    </th>
+                                    <td>
+                                        4,807
+                                    </td>
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            <span class="mr-2">80%</span>
+                                            <div>
+                                                <div class="progress">
+                                                <div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">
+                                        Instagram
+                                    </th>
+                                    <td>
+                                        3,678
+                                    </td>
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            <span class="mr-2">75%</span>
+                                            <div>
+                                                <div class="progress">
+                                                    <div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">
+                                        twitter
+                                    </th>
+                                    <td>
+                                        2,645
+                                    </td>
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            <span class="mr-2">30%</span>
+                                            <div>
+                                                <div class="progress">
+                                                <div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        @include('layouts.footers.auth')
+    </div>
+@endsection
+
+@push('js')
+    <script src="{{ secure_asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
+    <script src="{{ secure_asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
new file mode 100644
index 0000000..04ce04e
--- /dev/null
+++ b/resources/views/layouts/app.blade.php
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
+
+        <meta name="csrf-token" content="{{ csrf_token() }}">
+       
+        <title>{{ config('app.name', 'Argon Dashboard') }}</title>
+        <!-- Favicon -->
+        <link href="{{ secure_asset('argon') }}/img/brand/iconputih.png" rel="icon" type="image/png">
+        
+        <!-- Fonts -->
+        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+        <!-- Extra details for Live View on GitHub Pages -->
+
+        <!-- Icons -->
+        <link href="{{ secure_asset('argon') }}/vendor/nucleo/css/nucleo.css" rel="stylesheet">
+        <link href="{{ secure_asset('argon') }}/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+        <link href="{{ secure_asset('argon') }}/css/datatable.css" rel="stylesheet">
+        <!-- Argon CSS -->
+        <link type="text/css" href="{{ secure_asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet">
+
+        <style>
+            .circlee{
+   width: 120px;
+   height: 100px;
+   border: 5px solid #7e42f5;
+   border-radius:;
+   overflow: hidden;
+}
+.circlee img{
+   width: 100%;
+   height: 100%;
+   object-fit: cover;
+}
+#show_image_popup{
+  width: 900px;
+  height: 500px;
+  border: 1px solid #333;
+  box-sizing: border-box;
+  padding: 5px;
+  text-align: center;
+  z-index: 999999999;
+  
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #e5e5e5;
+/*    */
+  display: none;
+}
+#show_image_popup img{
+  max-width: 100%;
+  height: auto;
+}
+
+#all-images .active{
+  filter: blur(5px);
+}
+.close-btn-area{
+  width: 100%;
+  text-align: right;
+  margin-bottom: 5px;
+  
+}
+.close-btn-area button{
+  cursor: pointer;
+}
+
+            </style>
+    </head>
+    <body class="{{ $class ?? '' }}">
+        @auth()
+            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+                @csrf
+            </form>
+            @include('layouts.navbars.sidebar')
+        @endauth
+        
+        <div class="main-content">
+            @include('layouts.navbars.navbar')
+            @yield('content')
+        </div>
+
+        @guest()
+            @include('layouts.footers.guest')
+        @endguest
+
+        <script src="{{ secure_asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
+        <script>
+            $(window).ready(function(e){
+
+                $('[data-toggle="tooltip"]').tooltip();
+
+            })
+            </script>
+        <script src="{{ secure_asset('argon') }}/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+        <script src="{{ secure_asset('argon') }}/js/datatable.js"> </script>
+        <script src="{{ secure_asset('argon') }}/js/datatable-bs.js"></script>
+        
+        @stack('js')
+        
+        <!-- Argon JS -->
+        <script src="{{ secure_asset('argon') }}/js/argon.js?v=1.0.0"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/resources/views/layouts/footers/auth.blade.php b/resources/views/layouts/footers/auth.blade.php
new file mode 100644
index 0000000..9e0d41d
--- /dev/null
+++ b/resources/views/layouts/footers/auth.blade.php
@@ -0,0 +1,3 @@
+<footer class="footer" >
+    @include('layouts.footers.nav')
+</footer>
\ No newline at end of file
diff --git a/resources/views/layouts/footers/guest.blade.php b/resources/views/layouts/footers/guest.blade.php
new file mode 100644
index 0000000..d5c061d
--- /dev/null
+++ b/resources/views/layouts/footers/guest.blade.php
@@ -0,0 +1,5 @@
+<footer class="py-5 ">
+    <div class="container">
+        @include('layouts.footers.nav')
+    </div>
+</footer>
\ No newline at end of file
diff --git a/resources/views/layouts/footers/nav.blade.php b/resources/views/layouts/footers/nav.blade.php
new file mode 100644
index 0000000..82fb14b
--- /dev/null
+++ b/resources/views/layouts/footers/nav.blade.php
@@ -0,0 +1,9 @@
+<div class="row align-items-center justify-content-xl-between" >
+    <div class="col-xl-12"  >
+        <div class="copyright text-center text-xl-center text-muted" >
+            &copy; {{ now()->year }} <a href="https://uptti.unej.ac.id" class="font-weight-bold ml-1" target="_blank">UPT Teknologi Informasi dan Komunikasi </a> -
+            <a href="https://unej.ac.id" class="font-weight-bold ml-1" target="_blank">Developed by Network Operation Center .</a> Semua hak cipta dilindungi undang-undang.
+        </div>
+    </div>
+   
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/headers/cards.blade.php b/resources/views/layouts/headers/cards.blade.php
new file mode 100644
index 0000000..7257e77
--- /dev/null
+++ b/resources/views/layouts/headers/cards.blade.php
@@ -0,0 +1,93 @@
+<div class="header bg-gradient-primary pb-8 pt-5 pt-md-8">
+    <div class="container-fluid">
+        <div class="header-body">
+            <!-- Card stats -->
+            <div class="row">
+                <div class="col-xl-3 col-lg-6">
+                    <div class="card card-stats mb-4 mb-xl-0">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="card-title text-uppercase text-muted mb-0">Jumlah Total Barang</h5>
+                                    <span class="h2 font-weight-bold mb-0">{{ \Helperku::get_total_barang() }}</span>
+                                </div>
+                                <div class="col-auto">
+                                    <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
+                                        <i class="fas fa-briefcase"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <p class="mt-3 mb-0 text-muted text-sm">
+                                <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
+                                <span class="text-nowrap">Since last month</span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-3 col-lg-6">
+                    <div class="card card-stats mb-4 mb-xl-0">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="card-title text-uppercase text-muted mb-0">Total Pengguna </h5>
+                                    <span class="h2 font-weight-bold mb-0">{{ \Helperku::get_total_pengguna() }}</span>
+                                </div>
+                                <div class="col-auto">
+                                    <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
+                                        <i class="fas fa-users"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <p class="mt-3 mb-0 text-muted text-sm">
+                                <span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 3.48%</span>
+                                <span class="text-nowrap">Since last week</span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-3 col-lg-6">
+                    <div class="card card-stats mb-4 mb-xl-0">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="card-title text-uppercase text-muted mb-0">Total Barang Keluar</h5>
+                                    <span class="h2 font-weight-bold mb-0">{{ \Helperku::get_total_barang_keluar() }}</span>
+                                </div>
+                                <div class="col-auto">
+                                    <div class="icon icon-shape bg-yellow text-white rounded-circle shadow">
+                                        <i class="fas fa-toolbox"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <p class="mt-3 mb-0 text-muted text-sm">
+                                <span class="text-warning mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>
+                                <span class="text-nowrap">Since yesterday</span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-3 col-lg-6">
+                    <div class="card card-stats mb-4 mb-xl-0">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="card-title text-uppercase text-muted mb-0">Total Divisi </h5>
+                                    <span class="h2 font-weight-bold mb-0">{{ \Helperku::get_total_divisi() }}</span>
+                                </div>
+                                <div class="col-auto">
+                                    <div class="icon icon-shape bg-info text-white rounded-circle shadow">
+                                        <i class="fas fa-users"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <p class="mt-3 mb-0 text-muted text-sm">
+                                <span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>
+                                <span class="text-nowrap">Since last month</span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/headers/guest.blade.php b/resources/views/layouts/headers/guest.blade.php
new file mode 100644
index 0000000..2062d63
--- /dev/null
+++ b/resources/views/layouts/headers/guest.blade.php
@@ -0,0 +1,16 @@
+<div class="header bg-gradient-primary py-7 py-lg-8">
+    <div class="container">
+        <div class="header-body text-center mb-7">
+            <div class="row justify-content-center">
+                <div class="col-lg-5 col-md-6">
+                    <h1 class="text-white">{{ __('') }}</h1>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="separator separator-bottom separator-skew zindex-100">
+        <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
+        </svg>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/headers/header-content.blade.php b/resources/views/layouts/headers/header-content.blade.php
new file mode 100644
index 0000000..f865e2d
--- /dev/null
+++ b/resources/views/layouts/headers/header-content.blade.php
@@ -0,0 +1,23 @@
+
+
+<div class="header bg-gradient-primary pb-8 pt-5 pt-md-8">
+    <div class="container-fluid">
+        <div class="header-body">
+<div class="row align-items-center py-4">
+            <div class="col-lg-6 col-7">
+              <h6 class="h2 text-white d-inline-block mb-0"><?=  $current_page ?></h6>
+              <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
+                <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
+                  <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
+                  <li class="breadcrumb-item"><a href="#"><?= $menu ?></a></li>
+                  <li class="breadcrumb-item active" aria-current="page"><?= $current_page ?></li>
+                </ol>
+              </nav>
+            </div>
+            <div class="col-lg-6 col-5 text-right">
+         
+            </div>
+          </div>
+</div>
+</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/navbars/navbar.blade.php b/resources/views/layouts/navbars/navbar.blade.php
new file mode 100644
index 0000000..7507569
--- /dev/null
+++ b/resources/views/layouts/navbars/navbar.blade.php
@@ -0,0 +1,7 @@
+@auth()
+    @include('layouts.navbars.navs.auth')
+@endauth
+    
+@guest()
+    @include('layouts.navbars.navs.guest')
+@endguest
\ No newline at end of file
diff --git a/resources/views/layouts/navbars/navs/auth.blade.php b/resources/views/layouts/navbars/navs/auth.blade.php
new file mode 100644
index 0000000..d0c2df3
--- /dev/null
+++ b/resources/views/layouts/navbars/navs/auth.blade.php
@@ -0,0 +1,60 @@
+<!-- Top navbar -->
+<nav class="navbar navbar-top navbar-expand-md navbar-dark" id="navbar-main">
+    <div class="container-fluid">
+        <!-- Brand -->
+        <a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="{{ route('home') }}">{{ __('Dashboard') }}</a>
+        <!-- Form -->
+        <form class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto">
+            <div class="form-group mb-0">
+                <div class="input-group input-group-alternative">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-search"></i></span>
+                    </div>
+                    <input class="form-control" placeholder="Search" type="text">
+                </div>
+            </div>
+        </form>
+        <!-- User -->
+        <ul class="navbar-nav align-items-center d-none d-md-flex">
+            <li class="nav-item dropdown">
+                <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <div class="media align-items-center">
+                        <span class="avatar avatar-sm rounded-circle">
+                        <img width="150px" height="80px" src="{{ asset('argon') }}/img/brand/sibanu-logo-dashboard.png" class="" alt="...">
+                        </span>
+                        <div class="media-body ml-2 d-none d-lg-block">
+                            <span class="mb-0 text-sm  font-weight-bold">{{ auth()->user()->name }}</span>
+                        </div>
+                    </div>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">
+                    <div class=" dropdown-header noti-title">
+                        <h6 class="text-overflow m-0">{{ __('Welcome!') }}</h6>
+                    </div>
+                    <a href="{{ route('profile.edit') }}" class="dropdown-item">
+                        <i class="ni ni-single-02"></i>
+                        <span>{{ __('My profile') }}</span>
+                    </a>
+                    <a href="#" class="dropdown-item">
+                        <i class="ni ni-settings-gear-65"></i>
+                        <span>{{ __('Settings') }}</span>
+                    </a>
+                    <a href="#" class="dropdown-item">
+                        <i class="ni ni-calendar-grid-58"></i>
+                        <span>{{ __('Activity') }}</span>
+                    </a>
+                    <a href="#" class="dropdown-item">
+                        <i class="ni ni-support-16"></i>
+                        <span>{{ __('Support') }}</span>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="{{ route('logout') }}" class="dropdown-item" onclick="event.preventDefault();
+                    document.getElementById('logout-form').submit();">
+                        <i class="ni ni-user-run"></i>
+                        <span>{{ __('Logout') }}</span>
+                    </a>
+                </div>
+            </li>
+        </ul>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/resources/views/layouts/navbars/navs/guest.blade.php b/resources/views/layouts/navbars/navs/guest.blade.php
new file mode 100644
index 0000000..9ba87e2
--- /dev/null
+++ b/resources/views/layouts/navbars/navs/guest.blade.php
@@ -0,0 +1,45 @@
+<nav class="navbar navbar-top navbar-horizontal navbar-expand-md navbar-dark">
+    <div class="container px-4">
+        <a class="" href="{{ route('home') }}">
+            <img  src="{{ secure_asset('argon') }}/img/brand/logoputih200px.png" />
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse-main" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbar-collapse-main">
+            <!-- Collapse header -->
+            <div class="navbar-collapse-header d-md-none">
+                <div class="row">
+                    <div class="col-6 collapse-brand">
+                        <a href="{{ route('home') }}">
+                            <img height="200px" width="150px" src="{{ secure_asset('argon') }}/img/brand/sibanu-logo-dashboard.png">
+                        </a>
+                    </div>
+                    <div class="col-6 collapse-close">
+                        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle sidenav">
+                            <span></span>
+                            <span></span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Navbar items -->
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link nav-link-icon" href="{{ url('/') }}">
+                        <i class="fab fa-dashcube"></i>
+                        <span class="nav-link-inner--text">{{ __('Dashboard') }}</span>
+                    </a>
+                </li>
+           
+                <li class="nav-item">
+                    <a class="nav-link nav-link-icon" href="{{ route('login') }}">
+                        <i class="ni ni-key-25"></i>
+                        <span class="nav-link-inner--text">{{ __('Login') }}</span>
+                    </a>
+                </li>
+            
+            </ul>
+        </div>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/resources/views/layouts/navbars/sidebar.blade.php b/resources/views/layouts/navbars/sidebar.blade.php
new file mode 100644
index 0000000..7b4814b
--- /dev/null
+++ b/resources/views/layouts/navbars/sidebar.blade.php
@@ -0,0 +1,167 @@
+<nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-white" id="sidenav-main">
+    <div class="container-fluid">
+        <!-- Toggler -->
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <!-- Brand -->
+        <a class=" pt-2 h-4" href="{{ route('home') }}">
+            <img width="150px" height="80px" src="{{ asset('argon') }}/img/brand/sibanu-logo-dashboard.png" class="" alt="...">
+        </a>
+        <!-- User -->
+        <ul class="nav align-items-center d-md-none">
+            <li class="nav-item dropdown">
+                <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <div class="media align-items-center">
+                        <span class="avatar avatar-sm rounded-circle">
+                        <img alt="Image placeholder" src="{{ asset('argon') }}/img/theme/team-1-800x800.jpg">
+                        </span>
+                    </div>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">
+                    <div class=" dropdown-header noti-title">
+                        <h6 class="text-overflow m-0">{{ __('Welcome!') }}</h6>
+                    </div>
+                    <a href="{{ route('profile.edit') }}" class="dropdown-item">
+                        <i class="ni ni-single-02"></i>
+                        <span>{{ __('My profile') }}</span>
+                    </a>
+                    <a href="#" class="dropdown-item">
+                        <i class="ni ni-settings-gear-65"></i>
+                        <span>{{ __('Settings') }}</span>
+                    </a>
+                    <a href="#" class="dropdown-item">
+                        <i class="ni ni-calendar-grid-58"></i>
+                        <span>{{ __('Activity') }}</span>
+                    </a>
+                    <a href="#" class="dropdown-item">
+                        <i class="ni ni-support-16"></i>
+                        <span>{{ __('Support') }}</span>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="{{ route('logout') }}" class="dropdown-item" onclick="event.preventDefault();
+                    document.getElementById('logout-form').submit();">
+                        <i class="ni ni-user-run"></i>
+                        <span>{{ __('Logout') }}</span>
+                    </a>
+                </div>
+            </li>
+        </ul>
+        <!-- Collapse -->
+        <div class="collapse navbar-collapse" id="sidenav-collapse-main">
+            <!-- Collapse header -->
+            <div class="navbar-collapse-header d-md-none">
+                <div class="row">
+                    <div class="col-6 ">
+                        <a href="{{ route('home') }}">
+                        <img width="150px" height="80px" src="{{ asset('argon') }}/img/brand/sibanu-logo-dashboard.png" class="" alt="...">
+                        </a>
+                    </div>
+                    <div class="col-6 collapse-close">
+                        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle sidenav">
+                            <span></span>
+                            <span></span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Form -->
+            <form class="mt-4 mb-3 d-md-none">
+                <div class="input-group input-group-rounded input-group-merge">
+                    <input type="search" class="form-control form-control-rounded form-control-prepended" placeholder="{{ __('Search') }}" aria-label="Search">
+                    <div class="input-group-prepend">
+                        <div class="input-group-text">
+                            <span class="fa fa-search"></span>
+                        </div>
+                    </div>
+                </div>
+            </form>
+            <!-- Navigation -->
+            <ul class="navbar-nav">
+            <li class="nav-item">
+                    <a class="nav-link" href="{{ route('home') }}">
+                        <i class="ni ni-tv-2 text-primary"></i> {{ __('Dashboard') }}
+                    </a>
+                </li>
+</ul>
+<hr class="my-3">
+            <!-- Heading -->
+            <h6 class="navbar-heading text-muted">Manajemen  Barang</h6>
+            <!-- Navigation -->
+            <ul class="navbar-nav mb-md-3">
+
+            <li class="nav-item">
+                    <a class="nav-link active" href="#navbar-barang" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="navbar-examples">
+                        <i class="fas fa-toolbox text-primary"></i>
+                        <span class="nav-link-text text-default">{{ __('Data Barang') }}</span>
+                    </a>
+
+                    <div class="collapse show" id="navbar-barang">
+                        <ul class="nav nav-sm flex-column">
+                          
+                            <li class="nav-item">
+                                <a class="nav-link" href="{{ route('jenis_barang.index') }}">
+                                    {{ __('Jenis Barang') }}
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="{{ route('satuan.index') }}">
+                                    {{ __('Satuan Barang') }}
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="{{ route('barang.index') }}">
+                                    {{ __('Item Barang') }}
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                
+            </ul>
+            
+
+            <hr class="my-3">
+            <!-- Heading -->
+            <h6 class="navbar-heading text-muted">Manajemen  pengguna</h6>
+            <!-- Navigation -->
+            <ul class="navbar-nav mb-md-3">
+            <li class="nav-item">
+                    <a class="nav-link active" href="#navbar-examples" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="navbar-examples">
+                        <i class="fas fa-users text-primary"></i>
+                        <span class="nav-link-text text-default">{{ __('Data Pengguna') }}</span>
+                    </a>
+
+                    <div class="collapse show" id="navbar-examples">
+                        <ul class="nav nav-sm flex-column">
+                        <li class="nav-item">
+                                <a class="nav-link" href="{{ route('divisi.index') }}">
+                                    {{ __('Divisi') }}
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="{{ route('pengguna.index') }}">
+                                    {{ __('Pengguna Barang') }}
+                                </a>
+                            </li>
+                        
+                        </ul>
+                    </div>
+                </li>
+</ul>
+            <!-- Divider -->
+            <hr class="my-3">
+            <!-- Heading -->
+            <h6 class="navbar-heading text-muted">informasi Barang</h6>
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ route('transaksi.index') }}">
+                        <i class="fas fa-clipboard-list text-blue"></i> {{ __('Data Barang keluar') }}
+                    </a>
+                </li>
+         
+            </ul>
+           
+        </div>
+    </div>
+</nav>
diff --git a/resources/views/pages/icons.blade.php b/resources/views/pages/icons.blade.php
new file mode 100644
index 0000000..f025b23
--- /dev/null
+++ b/resources/views/pages/icons.blade.php
@@ -0,0 +1,1267 @@
+<!--
+=========================================================
+* Argon Dashboard - v1.2.0
+=========================================================
+* Product Page: https://www.creative-tim.com/product/argon-dashboard
+
+
+* Copyright  Creative Tim (http://www.creative-tim.com)
+* Coded by www.creative-tim.com
+
+
+
+=========================================================
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+-->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
+  <meta name="author" content="Creative Tim">
+  <title>Argon Dashboard - Free Dashboard for Bootstrap 4</title>
+  <!-- Favicon -->
+  <link rel="icon" href="../assets/img/brand/favicon.png" type="image/png">
+  <!-- Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+  <!-- Icons -->
+  <link rel="stylesheet" href="../assets/vendor/nucleo/css/nucleo.css" type="text/css">
+  <link rel="stylesheet" href="../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
+  <!-- Page plugins -->
+  <!-- Argon CSS -->
+  <link rel="stylesheet" href="../assets/css/argon.css?v=1.2.0" type="text/css">
+</head>
+
+<body>
+  <!-- Sidenav -->
+  <nav class="sidenav navbar navbar-vertical  fixed-left  navbar-expand-xs navbar-light bg-white" id="sidenav-main">
+    <div class="scrollbar-inner">
+      <!-- Brand -->
+      <div class="sidenav-header  align-items-center">
+        <a class="navbar-brand" href="javascript:void(0)">
+          <img src="../assets/img/brand/blue.png" class="navbar-brand-img" alt="...">
+        </a>
+      </div>
+      <div class="navbar-inner">
+        <!-- Collapse -->
+        <div class="collapse navbar-collapse" id="sidenav-collapse-main">
+          <!-- Nav items -->
+          <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('home') }}">
+                    <i class="ni ni-tv-2 text-primary"></i> {{ __('Dashboard') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link active" href="#navbar-examples" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="navbar-examples">
+                    <i class="fab fa-laravel" style="color: #f4645f;"></i>
+                    <span class="nav-link-text" style="color: #f4645f;">{{ __('Laravel Examples') }}</span>
+                </a>
+
+                <div class="collapse show" id="navbar-examples">
+                    <ul class="nav nav-sm flex-column">
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ route('profile.edit') }}">
+                                {{ __('User profile') }}
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ route('user.index') }}">
+                                {{ __('User Management') }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                    <i class="ni ni-planet text-blue"></i> {{ __('Icons') }}
+                </a>
+            </li>
+            <li class="nav-item ">
+                <a class="nav-link" href="{{ route('map') }}">
+                    <i class="ni ni-pin-3 text-orange"></i> {{ __('Maps') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('table') }}">
+                  <i class="ni ni-bullet-list-67 text-default"></i>
+                  <span class="nav-link-text">Tables</span>
+                </a>
+              </li>
+            <li class="nav-item mb-5 mr-4 ml-4 pl-1 bg-danger" style="position: absolute; bottom: 0;">
+                <a class="nav-link text-white" href="{{route('upgrade')}}">
+                    <i class="ni ni-cloud-download-95"></i> Upgrade to PRO
+                </a>
+            </li>
+        </ul>
+          <!-- Divider -->
+          <hr class="my-3">
+          <!-- Heading -->
+          <h6 class="navbar-heading p-0 text-muted">
+            <span class="docs-normal">Documentation</span>
+          </h6>
+          <!-- Navigation -->
+          <ul class="navbar-nav mb-md-3">
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/getting-started/overview.html" target="_blank">
+                <i class="ni ni-spaceship"></i>
+                <span class="nav-link-text">Getting started</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/foundation/colors.html" target="_blank">
+                <i class="ni ni-palette"></i>
+                <span class="nav-link-text">Foundation</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/components/alerts.html" target="_blank">
+                <i class="ni ni-ui-04"></i>
+                <span class="nav-link-text">Components</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/plugins/charts.html" target="_blank">
+                <i class="ni ni-chart-pie-35"></i>
+                <span class="nav-link-text">Plugins</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <!-- Main content -->
+  <div class="main-content" id="panel">
+    <!-- Topnav -->
+    <nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom">
+      <div class="container-fluid">
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <!-- Search form -->
+          <form class="navbar-search navbar-search-light form-inline mr-sm-3" id="navbar-search-main">
+            <div class="form-group mb-0">
+              <div class="input-group input-group-alternative input-group-merge">
+                <div class="input-group-prepend">
+                  <span class="input-group-text"><i class="fas fa-search"></i></span>
+                </div>
+                <input class="form-control" placeholder="Search" type="text">
+              </div>
+            </div>
+            <button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
+              <span aria-hidden="true">×</span>
+            </button>
+          </form>
+          <!-- Navbar links -->
+          <ul class="navbar-nav align-items-center  ml-md-auto ">
+            <li class="nav-item d-xl-none">
+              <!-- Sidenav toggler -->
+              <div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
+                <div class="sidenav-toggler-inner">
+                  <i class="sidenav-toggler-line"></i>
+                  <i class="sidenav-toggler-line"></i>
+                  <i class="sidenav-toggler-line"></i>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-sm-none">
+              <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
+                <i class="ni ni-zoom-split-in"></i>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="ni ni-bell-55"></i>
+              </a>
+              <div class="dropdown-menu dropdown-menu-xl  dropdown-menu-right  py-0 overflow-hidden">
+                <!-- Dropdown header -->
+                <div class="px-3 py-3">
+                  <h6 class="text-sm text-muted m-0">You have <strong class="text-primary">13</strong> notifications.</h6>
+                </div>
+                <!-- List group -->
+                <div class="list-group list-group-flush">
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>2 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>3 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>5 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Your posts have been liked a lot.</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>2 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-5.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>3 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+                <!-- View all -->
+                <a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">View all</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="ni ni-ungroup"></i>
+              </a>
+              <div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default  dropdown-menu-right ">
+                <div class="row shortcuts px-4">
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-red">
+                      <i class="ni ni-calendar-grid-58"></i>
+                    </span>
+                    <small>Calendar</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-orange">
+                      <i class="ni ni-email-83"></i>
+                    </span>
+                    <small>Email</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-info">
+                      <i class="ni ni-credit-card"></i>
+                    </span>
+                    <small>Payments</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-green">
+                      <i class="ni ni-books"></i>
+                    </span>
+                    <small>Reports</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-purple">
+                      <i class="ni ni-pin-3"></i>
+                    </span>
+                    <small>Maps</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
+                      <i class="ni ni-basket"></i>
+                    </span>
+                    <small>Shop</small>
+                  </a>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <ul class="navbar-nav align-items-center  ml-auto ml-md-0 ">
+            <li class="nav-item dropdown">
+              <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <div class="media align-items-center">
+                  <span class="avatar avatar-sm rounded-circle">
+                    <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                  </span>
+                  <div class="media-body  ml-2  d-none d-lg-block">
+                    <span class="mb-0 text-sm  font-weight-bold">John Snow</span>
+                  </div>
+                </div>
+              </a>
+              <div class="dropdown-menu  dropdown-menu-right ">
+                <div class="dropdown-header noti-title">
+                  <h6 class="text-overflow m-0">Welcome!</h6>
+                </div>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-single-02"></i>
+                  <span>My profile</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-settings-gear-65"></i>
+                  <span>Settings</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-calendar-grid-58"></i>
+                  <span>Activity</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-support-16"></i>
+                  <span>Support</span>
+                </a>
+                <div class="dropdown-divider"></div>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-user-run"></i>
+                  <span>Logout</span>
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <!-- Header -->
+    <!-- Header -->
+    <div class="header bg-primary pb-6">
+      <div class="container-fluid">
+        <div class="header-body">
+          <div class="row align-items-center py-4">
+            <div class="col-lg-6 col-7">
+              <h6 class="h2 text-white d-inline-block mb-0">Icons</h6>
+              <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
+                <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
+                  <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
+                  <li class="breadcrumb-item"><a href="#">Components</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">Icons</li>
+                </ol>
+              </nav>
+            </div>
+            <div class="col-lg-6 col-5 text-right">
+              <a href="#" class="btn btn-sm btn-neutral">New</a>
+              <a href="#" class="btn btn-sm btn-neutral">Filters</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Page content -->
+    <div class="container-fluid mt--6">
+      <div class="row justify-content-center">
+        <div class=" col ">
+          <div class="card">
+            <div class="card-header bg-transparent">
+              <h3 class="mb-0">Icons</h3>
+            </div>
+            <div class="card-body">
+              <div class="row icon-examples">
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="active-40" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-active-40"></i>
+                      <span>active-40</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="air-baloon" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-air-baloon"></i>
+                      <span>air-baloon</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="album-2" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-album-2"></i>
+                      <span>album-2</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="align-center" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-align-center"></i>
+                      <span>align-center</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="align-left-2" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-align-left-2"></i>
+                      <span>align-left-2</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="ambulance" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-ambulance"></i>
+                      <span>ambulance</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="app" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-app"></i>
+                      <span>app</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="archive-2" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-archive-2"></i>
+                      <span>archive-2</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="atom" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-atom"></i>
+                      <span>atom</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="badge" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-badge"></i>
+                      <span>badge</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="bag-17" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-bag-17"></i>
+                      <span>bag-17</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="basket" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-basket"></i>
+                      <span>basket</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="bell-55" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-bell-55"></i>
+                      <span>bell-55</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="bold-down" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-bold-down"></i>
+                      <span>bold-down</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="bold-left" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-bold-left"></i>
+                      <span>bold-left</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="bold-right" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-bold-right"></i>
+                      <span>bold-right</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="bold-up" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-bold-up"></i>
+                      <span>bold-up</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="bold" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-bold"></i>
+                      <span>bold</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="book-bookmark" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-book-bookmark"></i>
+                      <span>book-bookmark</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="books" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-books"></i>
+                      <span>books</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="box-2" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-box-2"></i>
+                      <span>box-2</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="briefcase-24" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-briefcase-24"></i>
+                      <span>briefcase-24</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="building" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-building"></i>
+                      <span>building</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="bulb-61" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-bulb-61"></i>
+                      <span>bulb-61</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="bullet-list-67" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-bullet-list-67"></i>
+                      <span>bullet-list-67</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="bus-front-12" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-bus-front-12"></i>
+                      <span>bus-front-12</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="button-pause" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-button-pause"></i>
+                      <span>button-pause</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="button-play" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-button-play"></i>
+                      <span>button-play</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="button-power" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-button-power"></i>
+                      <span>button-power</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="calendar-grid-58" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-calendar-grid-58"></i>
+                      <span>calendar-grid-58</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="camera-compact" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-camera-compact"></i>
+                      <span>camera-compact</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="caps-small" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-caps-small"></i>
+                      <span>caps-small</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="cart" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-cart"></i>
+                      <span>cart</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="chart-bar-32" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-chart-bar-32"></i>
+                      <span>chart-bar-32</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="chart-pie-35" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-chart-pie-35"></i>
+                      <span>chart-pie-35</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="chat-round" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-chat-round"></i>
+                      <span>chat-round</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="check-bold" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-check-bold"></i>
+                      <span>check-bold</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="circle-08" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-circle-08"></i>
+                      <span>circle-08</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="cloud-download-95" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-cloud-download-95"></i>
+                      <span>cloud-download-95</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="cloud-upload-96" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-cloud-upload-96"></i>
+                      <span>cloud-upload-96</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="compass-04" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-compass-04"></i>
+                      <span>compass-04</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="controller" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-controller"></i>
+                      <span>controller</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="credit-card" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-credit-card"></i>
+                      <span>credit-card</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="curved-next" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-curved-next"></i>
+                      <span>curved-next</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="delivery-fast" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-delivery-fast"></i>
+                      <span>delivery-fast</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="diamond" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-diamond"></i>
+                      <span>diamond</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="email-83" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-email-83"></i>
+                      <span>email-83</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="fat-add" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-fat-add"></i>
+                      <span>fat-add</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="fat-delete" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-fat-delete"></i>
+                      <span>fat-delete</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="fat-remove" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-fat-remove"></i>
+                      <span>fat-remove</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="favourite-28" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-favourite-28"></i>
+                      <span>favourite-28</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="folder-17" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-folder-17"></i>
+                      <span>folder-17</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="glasses-2" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-glasses-2"></i>
+                      <span>glasses-2</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="hat-3" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-hat-3"></i>
+                      <span>hat-3</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="headphones" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-headphones"></i>
+                      <span>headphones</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="html5" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-html5"></i>
+                      <span>html5</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="istanbul" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-istanbul"></i>
+                      <span>istanbul</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="circle-08" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-circle-08"></i>
+                      <span>circle-08</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="key-25" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-key-25"></i>
+                      <span>key-25</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="laptop" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-laptop"></i>
+                      <span>laptop</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="like-2" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-like-2"></i>
+                      <span>like-2</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="lock-circle-open" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-lock-circle-open"></i>
+                      <span>lock-circle-open</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="map-big" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-map-big"></i>
+                      <span>map-big</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="mobile-button" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-mobile-button"></i>
+                      <span>mobile-button</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="money-coins" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-money-coins"></i>
+                      <span>money-coins</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="note-03" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-note-03"></i>
+                      <span>note-03</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="notification-70" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-notification-70"></i>
+                      <span>notification-70</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="palette" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-palette"></i>
+                      <span>palette</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="paper-diploma" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-paper-diploma"></i>
+                      <span>paper-diploma</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="pin-3" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-pin-3"></i>
+                      <span>pin-3</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="planet" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-planet"></i>
+                      <span>planet</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="ruler-pencil" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-ruler-pencil"></i>
+                      <span>ruler-pencil</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="satisfied" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-satisfied"></i>
+                      <span>satisfied</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="scissors" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-scissors"></i>
+                      <span>scissors</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="send" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-send"></i>
+                      <span>send</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="settings-gear-65" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-settings-gear-65"></i>
+                      <span>settings-gear-65</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="settings" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-settings"></i>
+                      <span>settings</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="single-02" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-single-02"></i>
+                      <span>single-02</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="single-copy-04" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-single-copy-04"></i>
+                      <span>single-copy-04</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="sound-wave" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-sound-wave"></i>
+                      <span>sound-wave</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="spaceship" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-spaceship"></i>
+                      <span>spaceship</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="square-pin" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-square-pin"></i>
+                      <span>square-pin</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="support-16" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-support-16"></i>
+                      <span>support-16</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="tablet-button" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-tablet-button"></i>
+                      <span>tablet-button</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="tag" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-tag"></i>
+                      <span>tag</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="tie-bow" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-tie-bow"></i>
+                      <span>tie-bow</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="time-alarm" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-time-alarm"></i>
+                      <span>time-alarm</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="trophy" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-trophy"></i>
+                      <span>trophy</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="tv-2" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-tv-2"></i>
+                      <span>tv-2</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="umbrella-13" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-umbrella-13"></i>
+                      <span>umbrella-13</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="user-run" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-user-run"></i>
+                      <span>user-run</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="vector" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-vector"></i>
+                      <span>vector</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="watch-time" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-watch-time"></i>
+                      <span>watch-time</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="world" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-world"></i>
+                      <span>world</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="zoom-split-in" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-zoom-split-in"></i>
+                      <span>zoom-split-in</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="collection" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-collection"></i>
+                      <span>collection</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="image" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-image"></i>
+                      <span>image</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="shop" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-shop"></i>
+                      <span>shop</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="ungroup" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-ungroup"></i>
+                      <span>ungroup</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="world-2" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-world-2"></i>
+                      <span>world-2</span>
+                    </div>
+                  </button>
+                </div>
+                <div class="col-lg-3 col-md-6">
+                  <button type="button" class="btn-icon-clipboard" data-clipboard-text="ui-04" title="Copy to clipboard">
+                    <div>
+                      <i class="ni ni-ui-04"></i>
+                      <span>ui-04</span>
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <footer class="footer pt-0">
+        <div class="row align-items-center justify-content-lg-between">
+          <div class="col-lg-6">
+        <div class="copyright text-center text-xl-left text-muted">
+            &copy; {{ now()->year }} <a href="https://www.creative-tim.com" class="font-weight-bold ml-1" target="_blank">Creative Tim</a> &amp;
+            <a href="https://www.updivision.com" class="font-weight-bold ml-1" target="_blank">Updivision</a>
+        </div>
+          </div>
+    <div class="col-xl-6">
+        <ul class="nav nav-footer justify-content-center justify-content-xl-end">
+            <li class="nav-item">
+                <a href="https://www.creative-tim.com" class="nav-link" target="_blank">Creative Tim</a>
+            </li>
+            <li class="nav-item">
+                <a href="https://www.updivision.com" class="nav-link" target="_blank">Updivision</a>
+            </li>
+            <li class="nav-item">
+                <a href="https://www.creative-tim.com/presentation" class="nav-link" target="_blank">About Us</a>
+            </li>
+            <li class="nav-item">
+                <a href="http://blog.creative-tim.com" class="nav-link" target="_blank">Blog</a>
+            </li>
+            <li class="nav-item">
+                <a href="https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md" class="nav-link" target="_blank">MIT License</a>
+            </li>
+        </ul>
+    </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!-- Argon Scripts -->
+  <!-- Core -->
+  <script src="../assets/vendor/jquery/dist/jquery.min.js"></script>
+  <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="../assets/vendor/js-cookie/js.cookie.js"></script>
+  <script src="../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
+  <script src="../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
+  <!-- Optional JS -->
+  <script src="../assets/vendor/clipboard/dist/clipboard.min.js"></script>
+  <!-- Argon JS -->
+  <script src="../assets/js/argon.js?v=1.2.0"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/resources/views/pages/maps.blade.php b/resources/views/pages/maps.blade.php
new file mode 100644
index 0000000..70b1f53
--- /dev/null
+++ b/resources/views/pages/maps.blade.php
@@ -0,0 +1,475 @@
+<!--
+=========================================================
+* Argon Dashboard - v1.2.0
+=========================================================
+* Product Page: https://www.creative-tim.com/product/argon-dashboard
+
+
+* Copyright  Creative Tim (http://www.creative-tim.com)
+* Coded by www.creative-tim.com
+
+
+
+=========================================================
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+-->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
+  <meta name="author" content="Creative Tim">
+  <title>Argon Dashboard - Free Dashboard for Bootstrap 4</title>
+  <!-- Favicon -->
+  <link rel="icon" href="../assets/img/brand/favicon.png" type="image/png">
+  <!-- Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+  <!-- Icons -->
+  <link rel="stylesheet" href="../assets/vendor/nucleo/css/nucleo.css" type="text/css">
+  <link rel="stylesheet" href="../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
+  <!-- Page plugins -->
+  <!-- Argon CSS -->
+  <link rel="stylesheet" href="../assets/css/argon.css?v=1.2.0" type="text/css">
+</head>
+
+<body>
+  <!-- Sidenav -->
+  <nav class="sidenav navbar navbar-vertical  fixed-left  navbar-expand-xs navbar-light bg-white" id="sidenav-main">
+    <div class="scrollbar-inner">
+      <!-- Brand -->
+      <div class="sidenav-header  align-items-center">
+        <a class="navbar-brand" href="javascript:void(0)">
+          <img src="../assets/img/brand/blue.png" class="navbar-brand-img" alt="...">
+        </a>
+      </div>
+      <div class="navbar-inner">
+        <!-- Collapse -->
+        <div class="collapse navbar-collapse" id="sidenav-collapse-main">
+          <!-- Nav items -->
+          <ul class="nav align-items-center d-md-none">
+            <li class="nav-item dropdown">
+                <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <div class="media align-items-center">
+                        <span class="avatar avatar-sm rounded-circle">
+                        <img alt="Image placeholder" src="{{ asset('argon') }}/img/theme/team-1-800x800.jpg">
+                        </span>
+                    </div>
+                </a>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">
+                    <div class=" dropdown-header noti-title">
+                        <h6 class="text-overflow m-0">{{ __('Welcome!') }}</h6>
+                    </div>
+                    <a href="{{ route('profile.edit') }}" class="dropdown-item">
+                        <i class="ni ni-single-02"></i>
+                        <span>{{ __('My profile') }}</span>
+                    </a>
+                    <a href="#" class="dropdown-item">
+                        <i class="ni ni-settings-gear-65"></i>
+                        <span>{{ __('Settings') }}</span>
+                    </a>
+                    <a href="#" class="dropdown-item">
+                        <i class="ni ni-calendar-grid-58"></i>
+                        <span>{{ __('Activity') }}</span>
+                    </a>
+                    <a href="#" class="dropdown-item">
+                        <i class="ni ni-support-16"></i>
+                        <span>{{ __('Support') }}</span>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="{{ route('logout') }}" class="dropdown-item" onclick="event.preventDefault();
+                    document.getElementById('logout-form').submit();">
+                        <i class="ni ni-user-run"></i>
+                        <span>{{ __('Logout') }}</span>
+                    </a>
+                </div>
+            </li>
+        </ul>
+        <!-- Collapse -->
+        <div class="collapse navbar-collapse" id="sidenav-collapse-main">
+          <!-- Nav items -->
+          <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('home') }}">
+                    <i class="ni ni-tv-2 text-primary"></i> {{ __('Dashboard') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link active" href="#navbar-examples" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="navbar-examples">
+                    <i class="fab fa-laravel" style="color: #f4645f;"></i>
+                    <span class="nav-link-text" style="color: #f4645f;">{{ __('Laravel Examples') }}</span>
+                </a>
+
+                <div class="collapse show" id="navbar-examples">
+                    <ul class="nav nav-sm flex-column">
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ route('profile.edit') }}">
+                                {{ __('User profile') }}
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ route('user.index') }}">
+                                {{ __('User Management') }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('icons') }}">
+                    <i class="ni ni-planet text-blue"></i> {{ __('Icons') }}
+                </a>
+            </li>
+            <li class="nav-item ">
+                <a class="nav-link" href="{{ route('map') }}">
+                    <i class="ni ni-pin-3 text-orange"></i> {{ __('Maps') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('table') }}">
+                  <i class="ni ni-bullet-list-67 text-default"></i>
+                  <span class="nav-link-text">Tables</span>
+                </a>
+              </li>
+            <li class="nav-item mb-5 mr-4 ml-4 pl-1 bg-danger" style="position: absolute; bottom: 0;">
+                <a class="nav-link text-white" href="{{route('upgrade')}}">
+                    <i class="ni ni-cloud-download-95"></i> Upgrade to PRO
+                </a>
+            </li>
+        </ul>
+          <!-- Divider -->
+          <hr class="my-3">
+          <!-- Heading -->
+          <h6 class="navbar-heading p-0 text-muted">
+            <span class="docs-normal">Documentation</span>
+          </h6>
+          <!-- Navigation -->
+          <ul class="navbar-nav mb-md-3">
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/getting-started/overview.html" target="_blank">
+                <i class="ni ni-spaceship"></i>
+                <span class="nav-link-text">Getting started</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/foundation/colors.html" target="_blank">
+                <i class="ni ni-palette"></i>
+                <span class="nav-link-text">Foundation</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/components/alerts.html" target="_blank">
+                <i class="ni ni-ui-04"></i>
+                <span class="nav-link-text">Components</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/plugins/charts.html" target="_blank">
+                <i class="ni ni-chart-pie-35"></i>
+                <span class="nav-link-text">Plugins</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <!-- Main content -->
+  <div class="main-content" id="panel">
+    <!-- Topnav -->
+    <nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom">
+      <div class="container-fluid">
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <!-- Search form -->
+          <form class="navbar-search navbar-search-light form-inline mr-sm-3" id="navbar-search-main">
+            <div class="form-group mb-0">
+              <div class="input-group input-group-alternative input-group-merge">
+                <div class="input-group-prepend">
+                  <span class="input-group-text"><i class="fas fa-search"></i></span>
+                </div>
+                <input class="form-control" placeholder="Search" type="text">
+              </div>
+            </div>
+            <button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
+              <span aria-hidden="true">×</span>
+            </button>
+          </form>
+          <!-- Navbar links -->
+          <ul class="navbar-nav align-items-center  ml-md-auto ">
+            <li class="nav-item d-xl-none">
+              <!-- Sidenav toggler -->
+              <div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
+                <div class="sidenav-toggler-inner">
+                  <i class="sidenav-toggler-line"></i>
+                  <i class="sidenav-toggler-line"></i>
+                  <i class="sidenav-toggler-line"></i>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-sm-none">
+              <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
+                <i class="ni ni-zoom-split-in"></i>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="ni ni-bell-55"></i>
+              </a>
+              <div class="dropdown-menu dropdown-menu-xl  dropdown-menu-right  py-0 overflow-hidden">
+                <!-- Dropdown header -->
+                <div class="px-3 py-3">
+                  <h6 class="text-sm text-muted m-0">You have <strong class="text-primary">13</strong> notifications.</h6>
+                </div>
+                <!-- List group -->
+                <div class="list-group list-group-flush">
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>3 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>5 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Your posts have been liked a lot.</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>2 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-5.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>3 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+                <!-- View all -->
+                <a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">View all</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="ni ni-ungroup"></i>
+              </a>
+              <div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default  dropdown-menu-right ">
+                <div class="row shortcuts px-4">
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-red">
+                      <i class="ni ni-calendar-grid-58"></i>
+                    </span>
+                    <small>Calendar</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-orange">
+                      <i class="ni ni-email-83"></i>
+                    </span>
+                    <small>Email</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-info">
+                      <i class="ni ni-credit-card"></i>
+                    </span>
+                    <small>Payments</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-green">
+                      <i class="ni ni-books"></i>
+                    </span>
+                    <small>Reports</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-purple">
+                      <i class="ni ni-pin-3"></i>
+                    </span>
+                    <small>Maps</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
+                      <i class="ni ni-basket"></i>
+                    </span>
+                    <small>Shop</small>
+                  </a>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <ul class="navbar-nav align-items-center  ml-auto ml-md-0 ">
+            <li class="nav-item dropdown">
+              <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <div class="media align-items-center">
+                  <span class="avatar avatar-sm rounded-circle">
+                    <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                  </span>
+                  <div class="media-body  ml-2  d-none d-lg-block">
+                    <span class="mb-0 text-sm  font-weight-bold">John Snow</span>
+                  </div>
+                </div>
+              </a>
+              <div class="dropdown-menu  dropdown-menu-right ">
+                <div class="dropdown-header noti-title">
+                  <h6 class="text-overflow m-0">Welcome!</h6>
+                </div>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-single-02"></i>
+                  <span>My profile</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-settings-gear-65"></i>
+                  <span>Settings</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-calendar-grid-58"></i>
+                  <span>Activity</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-support-16"></i>
+                  <span>Support</span>
+                </a>
+                <div class="dropdown-divider"></div>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-user-run"></i>
+                  <span>Logout</span>
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <!-- Header -->
+    <!-- Header -->
+    <div class="header bg-primary pb-6">
+      <div class="container-fluid">
+        <div class="header-body">
+          <div class="row align-items-center py-4">
+            <div class="col-lg-6 col-7">
+              <h6 class="h2 text-white d-inline-block mb-0">Google maps</h6>
+              <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
+                <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
+                  <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
+                  <li class="breadcrumb-item"><a href="#">Maps</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">Google maps</li>
+                </ol>
+              </nav>
+            </div>
+            <div class="col-lg-6 col-5 text-right">
+              <a href="#" class="btn btn-sm btn-neutral">New</a>
+              <a href="#" class="btn btn-sm btn-neutral">Filters</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Page content -->
+    <div class="container-fluid mt--6">
+      <div class="row">
+        <div class="col">
+          <div class="card border-0">
+            <div id="map-default" class="map-canvas" data-lat="40.748817" data-lng="-73.985428" style="height: 600px;"></div>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <footer class="footer pt-0">
+        <div class="row align-items-center justify-content-lg-between">
+          <div class="col-lg-6">
+        <div class="copyright text-center text-xl-left text-muted">
+            &copy; {{ now()->year }} <a href="https://www.creative-tim.com" class="font-weight-bold ml-1" target="_blank">Creative Tim</a> &amp;
+            <a href="https://www.updivision.com" class="font-weight-bold ml-1" target="_blank">Updivision</a>
+        </div>
+          </div>
+          <div class="col-xl-6">
+            <ul class="nav nav-footer justify-content-center justify-content-xl-end">
+                <li class="nav-item">
+                    <a href="https://www.creative-tim.com" class="nav-link" target="_blank">Creative Tim</a>
+                </li>
+                <li class="nav-item">
+                    <a href="https://www.updivision.com" class="nav-link" target="_blank">Updivision</a>
+                </li>
+                <li class="nav-item">
+                    <a href="https://www.creative-tim.com/presentation" class="nav-link" target="_blank">About Us</a>
+                </li>
+                <li class="nav-item">
+                    <a href="http://blog.creative-tim.com" class="nav-link" target="_blank">Blog</a>
+                </li>
+                <li class="nav-item">
+                    <a href="https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md" class="nav-link" target="_blank">MIT License</a>
+                </li>
+            </ul>
+        </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!-- Argon Scripts -->
+  <!-- Core -->
+  <script src="../assets/vendor/jquery/dist/jquery.min.js"></script>
+  <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="../assets/vendor/js-cookie/js.cookie.js"></script>
+  <script src="../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
+  <script src="../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
+  <!-- Optional JS -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
+  <!-- Argon JS -->
+  <script src="../assets/js/argon.js?v=1.2.0"></script>
+</body>
+
+</html>
diff --git a/resources/views/pages/tables.blade.php b/resources/views/pages/tables.blade.php
new file mode 100644
index 0000000..7adecb2
--- /dev/null
+++ b/resources/views/pages/tables.blade.php
@@ -0,0 +1,1112 @@
+<!--
+=========================================================
+* Argon Dashboard - v1.2.0
+=========================================================
+* Product Page: https://www.creative-tim.com/product/argon-dashboard
+
+
+* Copyright  Creative Tim (http://www.creative-tim.com)
+* Coded by www.creative-tim.com
+
+
+
+=========================================================
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+-->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
+  <meta name="author" content="Creative Tim">
+  <title>Argon Dashboard - Free Dashboard for Bootstrap 4</title>
+  <!-- Favicon -->
+  <link rel="icon" href="../assets/img/brand/favicon.png" type="image/png">
+  <!-- Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+  <!-- Icons -->
+  <link rel="stylesheet" href="../assets/vendor/nucleo/css/nucleo.css" type="text/css">
+  <link rel="stylesheet" href="../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
+  <!-- Argon CSS -->
+  <link rel="stylesheet" href="../assets/css/argon.css?v=1.2.0" type="text/css">
+</head>
+
+<body>
+  <!-- Sidenav -->
+  <nav class="sidenav navbar navbar-vertical  fixed-left  navbar-expand-xs navbar-light bg-white" id="sidenav-main">
+    <div class="scrollbar-inner">
+      <!-- Brand -->
+      <div class="sidenav-header  align-items-center">
+        <a class="navbar-brand" href="javascript:void(0)">
+          <img src="../assets/img/brand/blue.png" class="navbar-brand-img" alt="...">
+        </a>
+      </div>
+      <div class="navbar-inner">
+        <!-- Collapse -->
+        <div class="collapse navbar-collapse" id="sidenav-collapse-main">
+          <!-- Nav items -->
+          <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('home') }}">
+                    <i class="ni ni-tv-2 text-primary"></i> {{ __('Dashboard') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link active" href="#navbar-examples" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="navbar-examples">
+                    <i class="fab fa-laravel" style="color: #f4645f;"></i>
+                    <span class="nav-link-text" style="color: #f4645f;">{{ __('Laravel Examples') }}</span>
+                </a>
+
+                <div class="collapse show" id="navbar-examples">
+                    <ul class="nav nav-sm flex-column">
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ route('profile.edit') }}">
+                                {{ __('User profile') }}
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ route('user.index') }}">
+                                {{ __('User Management') }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('icons') }}">
+                    <i class="ni ni-planet text-blue"></i> {{ __('Icons') }}
+                </a>
+            </li>
+            <li class="nav-item ">
+                <a class="nav-link" href="{{ route('map') }}">
+                    <i class="ni ni-pin-3 text-orange"></i> {{ __('Maps') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('table') }}">
+                  <i class="ni ni-bullet-list-67 text-default"></i>
+                  <span class="nav-link-text">Tables</span>
+                </a>
+              </li>
+            <li class="nav-item mb-5 mr-4 ml-4 pl-1 bg-danger" style="position: absolute; bottom: 0;">
+                <a class="nav-link text-white" href="{{route('upgrade')}}">
+                    <i class="ni ni-cloud-download-95"></i> Upgrade to PRO
+                </a>
+            </li>
+        </ul>
+          <!-- Divider -->
+          <hr class="my-3">
+          <!-- Heading -->
+          <h6 class="navbar-heading p-0 text-muted">
+            <span class="docs-normal">Documentation</span>
+          </h6>
+          <!-- Navigation -->
+          <ul class="navbar-nav mb-md-3">
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/getting-started/overview.html" target="_blank">
+                <i class="ni ni-spaceship"></i>
+                <span class="nav-link-text">Getting started</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/foundation/colors.html" target="_blank">
+                <i class="ni ni-palette"></i>
+                <span class="nav-link-text">Foundation</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/components/alerts.html" target="_blank">
+                <i class="ni ni-ui-04"></i>
+                <span class="nav-link-text">Components</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/plugins/charts.html" target="_blank">
+                <i class="ni ni-chart-pie-35"></i>
+                <span class="nav-link-text">Plugins</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <!-- Main content -->
+  <div class="main-content" id="panel">
+    <!-- Topnav -->
+    <nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom">
+      <div class="container-fluid">
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <!-- Search form -->
+          <form class="navbar-search navbar-search-light form-inline mr-sm-3" id="navbar-search-main">
+            <div class="form-group mb-0">
+              <div class="input-group input-group-alternative input-group-merge">
+                <div class="input-group-prepend">
+                  <span class="input-group-text"><i class="fas fa-search"></i></span>
+                </div>
+                <input class="form-control" placeholder="Search" type="text">
+              </div>
+            </div>
+            <button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
+              <span aria-hidden="true">×</span>
+            </button>
+          </form>
+          <!-- Navbar links -->
+          <ul class="navbar-nav align-items-center  ml-md-auto ">
+            <li class="nav-item d-xl-none">
+              <!-- Sidenav toggler -->
+              <div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
+                <div class="sidenav-toggler-inner">
+                  <i class="sidenav-toggler-line"></i>
+                  <i class="sidenav-toggler-line"></i>
+                  <i class="sidenav-toggler-line"></i>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-sm-none">
+              <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
+                <i class="ni ni-zoom-split-in"></i>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="ni ni-bell-55"></i>
+              </a>
+              <div class="dropdown-menu dropdown-menu-xl  dropdown-menu-right  py-0 overflow-hidden">
+                <!-- Dropdown header -->
+                <div class="px-3 py-3">
+                  <h6 class="text-sm text-muted m-0">You have <strong class="text-primary">13</strong> notifications.</h6>
+                </div>
+                <!-- List group -->
+                <div class="list-group list-group-flush">
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>2 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>3 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>5 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Your posts have been liked a lot.</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>2 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-5.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>3 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+                <!-- View all -->
+                <a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">View all</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="ni ni-ungroup"></i>
+              </a>
+              <div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default  dropdown-menu-right ">
+                <div class="row shortcuts px-4">
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-red">
+                      <i class="ni ni-calendar-grid-58"></i>
+                    </span>
+                    <small>Calendar</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-orange">
+                      <i class="ni ni-email-83"></i>
+                    </span>
+                    <small>Email</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-info">
+                      <i class="ni ni-credit-card"></i>
+                    </span>
+                    <small>Payments</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-green">
+                      <i class="ni ni-books"></i>
+                    </span>
+                    <small>Reports</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-purple">
+                      <i class="ni ni-pin-3"></i>
+                    </span>
+                    <small>Maps</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
+                      <i class="ni ni-basket"></i>
+                    </span>
+                    <small>Shop</small>
+                  </a>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <ul class="navbar-nav align-items-center  ml-auto ml-md-0 ">
+            <li class="nav-item dropdown">
+              <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <div class="media align-items-center">
+                  <span class="avatar avatar-sm rounded-circle">
+                    <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                  </span>
+                  <div class="media-body  ml-2  d-none d-lg-block">
+                    <span class="mb-0 text-sm  font-weight-bold">John Snow</span>
+                  </div>
+                </div>
+              </a>
+              <div class="dropdown-menu  dropdown-menu-right ">
+                <div class="dropdown-header noti-title">
+                  <h6 class="text-overflow m-0">Welcome!</h6>
+                </div>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-single-02"></i>
+                  <span>My profile</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-settings-gear-65"></i>
+                  <span>Settings</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-calendar-grid-58"></i>
+                  <span>Activity</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-support-16"></i>
+                  <span>Support</span>
+                </a>
+                <div class="dropdown-divider"></div>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-user-run"></i>
+                  <span>Logout</span>
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <!-- Header -->
+    <!-- Header -->
+    <div class="header bg-primary pb-6">
+      <div class="container-fluid">
+        <div class="header-body">
+          <div class="row align-items-center py-4">
+            <div class="col-lg-6 col-7">
+              <h6 class="h2 text-white d-inline-block mb-0">Tables</h6>
+              <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
+                <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
+                  <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
+                  <li class="breadcrumb-item"><a href="#">Tables</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">Tables</li>
+                </ol>
+              </nav>
+            </div>
+            <div class="col-lg-6 col-5 text-right">
+              <a href="#" class="btn btn-sm btn-neutral">New</a>
+              <a href="#" class="btn btn-sm btn-neutral">Filters</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Page content -->
+    <div class="container-fluid mt--6">
+      <div class="row">
+        <div class="col">
+          <div class="card">
+            <!-- Card header -->
+            <div class="card-header border-0">
+              <h3 class="mb-0">Light table</h3>
+            </div>
+            <!-- Light table -->
+            <div class="table-responsive">
+              <table class="table align-items-center table-flush">
+                <thead class="thead-light">
+                  <tr>
+                    <th scope="col" class="sort" data-sort="name">Project</th>
+                    <th scope="col" class="sort" data-sort="budget">Budget</th>
+                    <th scope="col" class="sort" data-sort="status">Status</th>
+                    <th scope="col">Users</th>
+                    <th scope="col" class="sort" data-sort="completion">Completion</th>
+                    <th scope="col"></th>
+                  </tr>
+                </thead>
+                <tbody class="list">
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/bootstrap.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">Argon Design System</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                      $2500 USD
+                    </td>
+                    <td>
+                      <span class="badge badge-dot mr-4">
+                        <i class="bg-warning"></i>
+                        <span class="status">pending</span>
+                      </span>
+                    </td>
+                    <td>
+                      <div class="avatar-group">
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                        </a>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <span class="completion mr-2">60%</span>
+                        <div>
+                          <div class="progress">
+                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <div class="dropdown">
+                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fas fa-ellipsis-v"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                          <a class="dropdown-item" href="#">Action</a>
+                          <a class="dropdown-item" href="#">Another action</a>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/angular.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">Angular Now UI Kit PRO</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                      $1800 USD
+                    </td>
+                    <td>
+                      <span class="badge badge-dot mr-4">
+                        <i class="bg-success"></i>
+                        <span class="status">completed</span>
+                      </span>
+                    </td>
+                    <td>
+                      <div class="avatar-group">
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                        </a>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <span class="completion mr-2">100%</span>
+                        <div>
+                          <div class="progress">
+                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <div class="dropdown">
+                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fas fa-ellipsis-v"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                          <a class="dropdown-item" href="#">Action</a>
+                          <a class="dropdown-item" href="#">Another action</a>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/sketch.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">Black Dashboard</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                      $3150 USD
+                    </td>
+                    <td>
+                      <span class="badge badge-dot mr-4">
+                        <i class="bg-danger"></i>
+                        <span class="status">delayed</span>
+                      </span>
+                    </td>
+                    <td>
+                      <div class="avatar-group">
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                        </a>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <span class="completion mr-2">72%</span>
+                        <div>
+                          <div class="progress">
+                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <div class="dropdown">
+                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fas fa-ellipsis-v"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                          <a class="dropdown-item" href="#">Action</a>
+                          <a class="dropdown-item" href="#">Another action</a>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/react.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">React Material Dashboard</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                      $4400 USD
+                    </td>
+                    <td>
+                      <span class="badge badge-dot mr-4">
+                        <i class="bg-info"></i>
+                        <span class="status">on schedule</span>
+                      </span>
+                    </td>
+                    <td>
+                      <div class="avatar-group">
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                        </a>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <span class="completion mr-2">90%</span>
+                        <div>
+                          <div class="progress">
+                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <div class="dropdown">
+                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fas fa-ellipsis-v"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                          <a class="dropdown-item" href="#">Action</a>
+                          <a class="dropdown-item" href="#">Another action</a>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/vue.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">Vue Paper UI Kit PRO</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                      $2200 USD
+                    </td>
+                    <td>
+                      <span class="badge badge-dot mr-4">
+                        <i class="bg-success"></i>
+                        <span class="status">completed</span>
+                      </span>
+                    </td>
+                    <td>
+                      <div class="avatar-group">
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                        </a>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <span class="completion mr-2">100%</span>
+                        <div>
+                          <div class="progress">
+                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <div class="dropdown">
+                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fas fa-ellipsis-v"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                          <a class="dropdown-item" href="#">Action</a>
+                          <a class="dropdown-item" href="#">Another action</a>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <!-- Card footer -->
+            <div class="card-footer py-4">
+              <nav aria-label="...">
+                <ul class="pagination justify-content-end mb-0">
+                  <li class="page-item disabled">
+                    <a class="page-link" href="#" tabindex="-1">
+                      <i class="fas fa-angle-left"></i>
+                      <span class="sr-only">Previous</span>
+                    </a>
+                  </li>
+                  <li class="page-item active">
+                    <a class="page-link" href="#">1</a>
+                  </li>
+                  <li class="page-item">
+                    <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
+                  </li>
+                  <li class="page-item"><a class="page-link" href="#">3</a></li>
+                  <li class="page-item">
+                    <a class="page-link" href="#">
+                      <i class="fas fa-angle-right"></i>
+                      <span class="sr-only">Next</span>
+                    </a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Dark table -->
+      <div class="row">
+        <div class="col">
+          <div class="card bg-default shadow">
+            <div class="card-header bg-transparent border-0">
+              <h3 class="text-white mb-0">Dark table</h3>
+            </div>
+            <div class="table-responsive">
+              <table class="table align-items-center table-dark table-flush">
+                <thead class="thead-dark">
+                  <tr>
+                    <th scope="col" class="sort" data-sort="name">Project</th>
+                    <th scope="col" class="sort" data-sort="budget">Budget</th>
+                    <th scope="col" class="sort" data-sort="status">Status</th>
+                    <th scope="col">Users</th>
+                    <th scope="col" class="sort" data-sort="completion">Completion</th>
+                    <th scope="col"></th>
+                  </tr>
+                </thead>
+                <tbody class="list">
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/bootstrap.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">Argon Design System</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                      $2500 USD
+                    </td>
+                    <td>
+                      <span class="badge badge-dot mr-4">
+                        <i class="bg-warning"></i>
+                        <span class="status">pending</span>
+                      </span>
+                    </td>
+                    <td>
+                      <div class="avatar-group">
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                        </a>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <span class="completion mr-2">60%</span>
+                        <div>
+                          <div class="progress">
+                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <div class="dropdown">
+                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fas fa-ellipsis-v"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                          <a class="dropdown-item" href="#">Action</a>
+                          <a class="dropdown-item" href="#">Another action</a>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/angular.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">Angular Now UI Kit PRO</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                      $1800 USD
+                    </td>
+                    <td>
+                      <span class="badge badge-dot mr-4">
+                        <i class="bg-success"></i>
+                        <span class="status">completed</span>
+                      </span>
+                    </td>
+                    <td>
+                      <div class="avatar-group">
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                        </a>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <span class="completion mr-2">100%</span>
+                        <div>
+                          <div class="progress">
+                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <div class="dropdown">
+                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fas fa-ellipsis-v"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                          <a class="dropdown-item" href="#">Action</a>
+                          <a class="dropdown-item" href="#">Another action</a>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/sketch.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">Black Dashboard</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                      $3150 USD
+                    </td>
+                    <td>
+                      <span class="badge badge-dot mr-4">
+                        <i class="bg-danger"></i>
+                        <span class="status">delayed</span>
+                      </span>
+                    </td>
+                    <td>
+                      <div class="avatar-group">
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                        </a>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <span class="completion mr-2">72%</span>
+                        <div>
+                          <div class="progress">
+                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <div class="dropdown">
+                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fas fa-ellipsis-v"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                          <a class="dropdown-item" href="#">Action</a>
+                          <a class="dropdown-item" href="#">Another action</a>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/react.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">React Material Dashboard</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                      $4400 USD
+                    </td>
+                    <td>
+                      <span class="badge badge-dot mr-4">
+                        <i class="bg-info"></i>
+                        <span class="status">on schedule</span>
+                      </span>
+                    </td>
+                    <td>
+                      <div class="avatar-group">
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                        </a>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <span class="completion mr-2">90%</span>
+                        <div>
+                          <div class="progress">
+                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <div class="dropdown">
+                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fas fa-ellipsis-v"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                          <a class="dropdown-item" href="#">Action</a>
+                          <a class="dropdown-item" href="#">Another action</a>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th scope="row">
+                      <div class="media align-items-center">
+                        <a href="#" class="avatar rounded-circle mr-3">
+                          <img alt="Image placeholder" src="../assets/img/theme/vue.jpg">
+                        </a>
+                        <div class="media-body">
+                          <span class="name mb-0 text-sm">Vue Paper UI Kit PRO</span>
+                        </div>
+                      </div>
+                    </th>
+                    <td class="budget">
+                      $2200 USD
+                    </td>
+                    <td>
+                      <span class="badge badge-dot mr-4">
+                        <i class="bg-success"></i>
+                        <span class="status">completed</span>
+                      </span>
+                    </td>
+                    <td>
+                      <div class="avatar-group">
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg">
+                        </a>
+                        <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
+                          <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                        </a>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <span class="completion mr-2">100%</span>
+                        <div>
+                          <div class="progress">
+                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <div class="dropdown">
+                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="fas fa-ellipsis-v"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                          <a class="dropdown-item" href="#">Action</a>
+                          <a class="dropdown-item" href="#">Another action</a>
+                          <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <footer class="footer pt-0">
+        <div class="row align-items-center justify-content-lg-between">
+          <div class="col-lg-6">
+        <div class="copyright text-center text-xl-left text-muted">
+            &copy; {{ now()->year }} <a href="https://www.creative-tim.com" class="font-weight-bold ml-1" target="_blank">Creative Tim</a> &amp;
+            <a href="https://www.updivision.com" class="font-weight-bold ml-1" target="_blank">Updivision</a>
+        </div>
+          </div>
+    <div class="col-xl-6">
+        <ul class="nav nav-footer justify-content-center justify-content-xl-end">
+            <li class="nav-item">
+                <a href="https://www.creative-tim.com" class="nav-link" target="_blank">Creative Tim</a>
+            </li>
+            <li class="nav-item">
+                <a href="https://www.updivision.com" class="nav-link" target="_blank">Updivision</a>
+            </li>
+            <li class="nav-item">
+                <a href="https://www.creative-tim.com/presentation" class="nav-link" target="_blank">About Us</a>
+            </li>
+            <li class="nav-item">
+                <a href="http://blog.creative-tim.com" class="nav-link" target="_blank">Blog</a>
+            </li>
+            <li class="nav-item">
+                <a href="https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md" class="nav-link" target="_blank">MIT License</a>
+            </li>
+        </ul>
+    </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!-- Argon Scripts -->
+  <!-- Core -->
+  <script src="../assets/vendor/jquery/dist/jquery.min.js"></script>
+  <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="../assets/vendor/js-cookie/js.cookie.js"></script>
+  <script src="../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
+  <script src="../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
+  <!-- Argon JS -->
+  <script src="../assets/js/argon.js?v=1.2.0"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/resources/views/pages/upgrade.blade.php b/resources/views/pages/upgrade.blade.php
new file mode 100644
index 0000000..17d6512
--- /dev/null
+++ b/resources/views/pages/upgrade.blade.php
@@ -0,0 +1,565 @@
+<!--
+=========================================================
+* Argon Dashboard - v1.2.0
+=========================================================
+* Product Page: https://www.creative-tim.com/product/argon-dashboard
+
+
+* Copyright  Creative Tim (http://www.creative-tim.com)
+* Coded by www.creative-tim.com
+
+
+
+=========================================================
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+-->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
+  <meta name="author" content="Creative Tim">
+  <title>Argon Dashboard - Free Dashboard for Bootstrap 4</title>
+  <!-- Favicon -->
+  <link rel="icon" href="../assets/img/brand/favicon.png" type="image/png">
+  <!-- Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+  <!-- Icons -->
+  <link rel="stylesheet" href="../assets/vendor/nucleo/css/nucleo.css" type="text/css">
+  <link rel="stylesheet" href="../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
+  <!-- Argon CSS -->
+  <link rel="stylesheet" href="../assets/css/argon.css?v=1.2.0" type="text/css">
+</head>
+
+<body>
+  <!-- Sidenav -->
+  <nav class="sidenav navbar navbar-vertical  fixed-left  navbar-expand-xs navbar-light bg-white" id="sidenav-main">
+    <div class="scrollbar-inner">
+      <!-- Brand -->
+      <div class="sidenav-header  align-items-center">
+        <a class="navbar-brand" href="javascript:void(0)">
+          <img src="../assets/img/brand/blue.png" class="navbar-brand-img" alt="...">
+        </a>
+      </div>
+      <div class="navbar-inner">
+        <!-- Collapse -->
+        <div class="collapse navbar-collapse" id="sidenav-collapse-main">
+          <!-- Nav items -->
+          <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('home') }}">
+                    <i class="ni ni-tv-2 text-primary"></i> {{ __('Dashboard') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link active" href="#navbar-examples" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="navbar-examples">
+                    <i class="fab fa-laravel" style="color: #f4645f;"></i>
+                    <span class="nav-link-text" style="color: #f4645f;">{{ __('Laravel Examples') }}</span>
+                </a>
+
+                <div class="collapse show" id="navbar-examples">
+                    <ul class="nav nav-sm flex-column">
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ route('profile.edit') }}">
+                                {{ __('User profile') }}
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ route('user.index') }}">
+                                {{ __('User Management') }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('icons') }}">
+                    <i class="ni ni-planet text-blue"></i> {{ __('Icons') }}
+                </a>
+            </li>
+            <li class="nav-item ">
+                <a class="nav-link" href="{{ route('map') }}">
+                    <i class="ni ni-pin-3 text-orange"></i> {{ __('Maps') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('table') }}">
+                  <i class="ni ni-bullet-list-67 text-default"></i>
+                  <span class="nav-link-text">Tables</span>
+                </a>
+              </li>
+            <li class="nav-item mb-5 mr-4 ml-4 pl-1 bg-danger" style="position: absolute; bottom: 0;">
+                <a class="nav-link text-white" href="https://www.creative-tim.com/product/argon-dashboard-pro-laravel" target="_blank">
+                    <i class="ni ni-cloud-download-95"></i> Upgrade to PRO
+                </a>
+            </li>
+        </ul>
+          <!-- Divider -->
+          <hr class="my-3">
+          <!-- Heading -->
+          <h6 class="navbar-heading p-0 text-muted">
+            <span class="docs-normal">Documentation</span>
+          </h6>
+          <!-- Navigation -->
+          <ul class="navbar-nav mb-md-3">
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/getting-started/overview.html" target="_blank">
+                <i class="ni ni-spaceship"></i>
+                <span class="nav-link-text">Getting started</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/foundation/colors.html" target="_blank">
+                <i class="ni ni-palette"></i>
+                <span class="nav-link-text">Foundation</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/components/alerts.html" target="_blank">
+                <i class="ni ni-ui-04"></i>
+                <span class="nav-link-text">Components</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/plugins/charts.html" target="_blank">
+                <i class="ni ni-chart-pie-35"></i>
+                <span class="nav-link-text">Plugins</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <!-- Main content -->
+  <div class="main-content" id="panel">
+    <!-- Topnav -->
+    <nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom">
+      <div class="container-fluid">
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <!-- Search form -->
+          <form class="navbar-search navbar-search-light form-inline mr-sm-3" id="navbar-search-main">
+            <div class="form-group mb-0">
+              <div class="input-group input-group-alternative input-group-merge">
+                <div class="input-group-prepend">
+                  <span class="input-group-text"><i class="fas fa-search"></i></span>
+                </div>
+                <input class="form-control" placeholder="Search" type="text">
+              </div>
+            </div>
+            <button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
+              <span aria-hidden="true">×</span>
+            </button>
+          </form>
+          <!-- Navbar links -->
+          <ul class="navbar-nav align-items-center  ml-md-auto ">
+            <li class="nav-item d-xl-none">
+              <!-- Sidenav toggler -->
+              <div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
+                <div class="sidenav-toggler-inner">
+                  <i class="sidenav-toggler-line"></i>
+                  <i class="sidenav-toggler-line"></i>
+                  <i class="sidenav-toggler-line"></i>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-sm-none">
+              <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
+                <i class="ni ni-zoom-split-in"></i>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="ni ni-bell-55"></i>
+              </a>
+              <div class="dropdown-menu dropdown-menu-xl  dropdown-menu-right  py-0 overflow-hidden">
+                <!-- Dropdown header -->
+                <div class="px-3 py-3">
+                  <h6 class="text-sm text-muted m-0">You have <strong class="text-primary">13</strong> notifications.</h6>
+                </div>
+                <!-- List group -->
+                <div class="list-group list-group-flush">
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-1.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>2 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-2.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>3 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-3.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>5 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Your posts have been liked a lot.</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>2 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
+                      </div>
+                    </div>
+                  </a>
+                  <a href="#!" class="list-group-item list-group-item-action">
+                    <div class="row align-items-center">
+                      <div class="col-auto">
+                        <!-- Avatar -->
+                        <img alt="Image placeholder" src="../assets/img/theme/team-5.jpg" class="avatar rounded-circle">
+                      </div>
+                      <div class="col ml--2">
+                        <div class="d-flex justify-content-between align-items-center">
+                          <div>
+                            <h4 class="mb-0 text-sm">John Snow</h4>
+                          </div>
+                          <div class="text-right text-muted">
+                            <small>3 hrs ago</small>
+                          </div>
+                        </div>
+                        <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+                <!-- View all -->
+                <a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">View all</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="ni ni-ungroup"></i>
+              </a>
+              <div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default  dropdown-menu-right ">
+                <div class="row shortcuts px-4">
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-red">
+                      <i class="ni ni-calendar-grid-58"></i>
+                    </span>
+                    <small>Calendar</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-orange">
+                      <i class="ni ni-email-83"></i>
+                    </span>
+                    <small>Email</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-info">
+                      <i class="ni ni-credit-card"></i>
+                    </span>
+                    <small>Payments</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-green">
+                      <i class="ni ni-books"></i>
+                    </span>
+                    <small>Reports</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-purple">
+                      <i class="ni ni-pin-3"></i>
+                    </span>
+                    <small>Maps</small>
+                  </a>
+                  <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
+                      <i class="ni ni-basket"></i>
+                    </span>
+                    <small>Shop</small>
+                  </a>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <ul class="navbar-nav align-items-center  ml-auto ml-md-0 ">
+            <li class="nav-item dropdown">
+              <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <div class="media align-items-center">
+                  <span class="avatar avatar-sm rounded-circle">
+                    <img alt="Image placeholder" src="../assets/img/theme/team-4.jpg">
+                  </span>
+                  <div class="media-body  ml-2  d-none d-lg-block">
+                    <span class="mb-0 text-sm  font-weight-bold">John Snow</span>
+                  </div>
+                </div>
+              </a>
+              <div class="dropdown-menu  dropdown-menu-right ">
+                <div class="dropdown-header noti-title">
+                  <h6 class="text-overflow m-0">Welcome!</h6>
+                </div>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-single-02"></i>
+                  <span>My profile</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-settings-gear-65"></i>
+                  <span>Settings</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-calendar-grid-58"></i>
+                  <span>Activity</span>
+                </a>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-support-16"></i>
+                  <span>Support</span>
+                </a>
+                <div class="dropdown-divider"></div>
+                <a href="#!" class="dropdown-item">
+                  <i class="ni ni-user-run"></i>
+                  <span>Logout</span>
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <!-- Header -->
+    <!-- Header -->
+    <div class="header bg-primary pb-6">
+      <div class="container-fluid">
+        <div class="header-body">
+          <div class="row align-items-center py-4">
+            <div class="col-lg-6 col-7">
+              <h6 class="h2 text-white d-inline-block mb-0">Upgrade to PRO</h6>
+            </div>
+            <div class="col-lg-6 col-5 text-right">
+              <a href="#" class="btn btn-sm btn-neutral">New</a>
+              <a href="#" class="btn btn-sm btn-neutral">Filters</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Page content -->
+    <div class="container-fluid mt--6">
+      <div class="row mt--5">
+        <div class="col-md-10 ml-auto mr-auto">
+          <div class="card card-upgrade">
+            <div class="card-header text-center border-bottom-0">
+              <h4 class="card-title">Argon Dashboard PRO</h4>
+              <p class="card-category">Are you looking for more components? Please check our Premium Version of Argon Dashboard.</p>
+            </div>
+            <div class="card-body">
+              <div class="table-responsive table-upgrade">
+                <table class="table">
+                  <thead>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td><h2>Backend</h2></td>
+                      <td class="text-center"></td>
+                      <td class="text-center"></td>
+                    </tr>
+                    <tr>
+                      <th></th>
+                      <th class="text-center">Free</th>
+                      <th class="text-center">PRO</th>
+                    </tr>
+                    <tr>
+                      <td>Login, Register, Forgot password pages</td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>User profile</td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>Users management</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>User roles management</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>Items management</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>Categories management, Tags management</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>Wysiwyg, image upload, date picker inputs</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>Radio button, checkbox, toggle inputs</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>Notifications with Bootstrap Notify</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>DataTables.net</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td><h2>Frontend</h2></td>
+                      <td class="text-center"></td>
+                      <td class="text-center"></td>
+                    </tr>
+                    <tr>
+                      <td>Elements</td>
+                      <td class="text-center">100</td>
+                      <td class="text-center">200</td>
+                    </tr>
+                    <tr>
+                      <td>Plugins</td>
+                      <td class="text-center">4</td>
+                      <td class="text-center">16</td>
+                    </tr>
+                    <tr>
+                      <td>Example Pages</td>
+                      <td class="text-center">6</td>
+                      <td class="text-center">25</td>
+                    </tr>
+                    <tr>
+                      <td>DataTables, VectorMap, SweetAlert, Wizard,<br> jQueryValidation, FullCalendar etc...</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>Mini Sidebar</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td>Premium Support</td>
+                      <td class="text-center"><i class="ni ni-fat-remove text-danger"></i></td>
+                      <td class="text-center"><i class="ni ni-check-bold text-success"></i></td>
+                    </tr>
+                    <tr>
+                      <td></td>
+                      <td class="text-center">Free</td>
+                      <td class="text-center">Just $149</td>
+                    </tr>
+                    <tr>
+                      <td class="text-center"></td>
+                      <td class="text-center">
+                        <a href="#" class="btn btn-round btn-default disabled">Current Version</a>
+                      </td>
+                      <td class="text-center">
+                        <a target="_blank" href="https://www.creative-tim.com/product/argon-dashboard-pro-laravel" class="btn btn-round btn-primary">Upgrade to PRO</a>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <footer class="footer pt-0">
+        <div class="row align-items-center justify-content-lg-between">
+          <div class="col-lg-6">
+        <div class="copyright text-center text-xl-left text-muted">
+            &copy; {{ now()->year }} <a href="https://www.creative-tim.com" class="font-weight-bold ml-1" target="_blank">Creative Tim</a> &amp;
+            <a href="https://www.updivision.com" class="font-weight-bold ml-1" target="_blank">Updivision</a>
+        </div>
+          </div>
+    <div class="col-xl-6">
+        <ul class="nav nav-footer justify-content-center justify-content-xl-end">
+            <li class="nav-item">
+                <a href="https://www.creative-tim.com" class="nav-link" target="_blank">Creative Tim</a>
+            </li>
+            <li class="nav-item">
+                <a href="https://www.updivision.com" class="nav-link" target="_blank">Updivision</a>
+            </li>
+            <li class="nav-item">
+                <a href="https://www.creative-tim.com/presentation" class="nav-link" target="_blank">About Us</a>
+            </li>
+            <li class="nav-item">
+                <a href="http://blog.creative-tim.com" class="nav-link" target="_blank">Blog</a>
+            </li>
+            <li class="nav-item">
+                <a href="https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md" class="nav-link" target="_blank">MIT License</a>
+            </li>
+        </ul>
+    </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!-- Argon Scripts -->
+  <!-- Core -->
+  <script src="../assets/vendor/jquery/dist/jquery.min.js"></script>
+  <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="../assets/vendor/js-cookie/js.cookie.js"></script>
+  <script src="../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
+  <script src="../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
+  <!-- Argon JS -->
+  <script src="../assets/js/argon.js?v=1.2.0"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
new file mode 100644
index 0000000..8017317
--- /dev/null
+++ b/resources/views/profile/edit.blade.php
@@ -0,0 +1,173 @@
+@extends('layouts.app', ['title' => __('User Profile')])
+
+@section('content')
+    @include('users.partials.header', [
+        'title' => __('Hello') . ' '. auth()->user()->name,
+        'description' => __('This is your profile page. You can see the progress you\'ve made with your work and manage your projects or assigned tasks'),
+        'class' => 'col-lg-7'
+    ])   
+
+    <div class="container-fluid mt--7">
+        <div class="row">
+            <div class="col-xl-4 order-xl-2 mb-5 mb-xl-0">
+                <div class="card card-profile shadow">
+                    <div class="row justify-content-center">
+                        <div class="col-lg-3 order-lg-2">
+                            <div class="card-profile-image">
+                                <a href="#">
+                                    <img src="{{ asset('argon') }}/img/theme/team-4-800x800.jpg" class="rounded-circle">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
+                        <div class="d-flex justify-content-between">
+                            <a href="#" class="btn btn-sm btn-info mr-4">{{ __('Connect') }}</a>
+                            <a href="#" class="btn btn-sm btn-default float-right">{{ __('Message') }}</a>
+                        </div>
+                    </div>
+                    <div class="card-body pt-0 pt-md-4">
+                        <div class="row">
+                            <div class="col">
+                                <div class="card-profile-stats d-flex justify-content-center mt-md-5">
+                                    <div>
+                                        <span class="heading">22</span>
+                                        <span class="description">{{ __('Friends') }}</span>
+                                    </div>
+                                    <div>
+                                        <span class="heading">10</span>
+                                        <span class="description">{{ __('Photos') }}</span>
+                                    </div>
+                                    <div>
+                                        <span class="heading">89</span>
+                                        <span class="description">{{ __('Comments') }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-center">
+                            <h3>
+                                {{ auth()->user()->name }}<span class="font-weight-light">, 27</span>
+                            </h3>
+                            <div class="h5 font-weight-300">
+                                <i class="ni location_pin mr-2"></i>{{ __('Bucharest, Romania') }}
+                            </div>
+                            <div class="h5 mt-4">
+                                <i class="ni business_briefcase-24 mr-2"></i>{{ __('Solution Manager - Creative Tim Officer') }}
+                            </div>
+                            <div>
+                                <i class="ni education_hat mr-2"></i>{{ __('University of Computer Science') }}
+                            </div>
+                            <hr class="my-4" />
+                            <p>{{ __('Ryan — the name taken by Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs and records all of his own music.') }}</p>
+                            <a href="#">{{ __('Show more') }}</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-8 order-xl-1">
+                <div class="card bg-secondary shadow">
+                    <div class="card-header bg-white border-0">
+                        <div class="row align-items-center">
+                            <h3 class="mb-0">{{ __('Edit Profile') }}</h3>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <form method="post" action="{{ route('profile.update') }}" autocomplete="off">
+                            @csrf
+                            @method('put')
+
+                            <h6 class="heading-small text-muted mb-4">{{ __('User information') }}</h6>
+                            
+                            @if (session('status'))
+                                <div class="alert alert-success alert-dismissible fade show" role="alert">
+                                    {{ session('status') }}
+                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+                                </div>
+                            @endif
+
+
+                            <div class="pl-lg-4">
+                                <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
+                                    <label class="form-control-label" for="input-name">{{ __('Name') }}</label>
+                                    <input type="text" name="name" id="input-name" class="form-control form-control-alternative{{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="{{ __('Name') }}" value="{{ old('name', auth()->user()->name) }}" required autofocus>
+
+                                    @if ($errors->has('name'))
+                                        <span class="invalid-feedback" role="alert">
+                                            <strong>{{ $errors->first('name') }}</strong>
+                                        </span>
+                                    @endif
+                                </div>
+                                <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
+                                    <label class="form-control-label" for="input-email">{{ __('Email') }}</label>
+                                    <input type="email" name="email" id="input-email" class="form-control form-control-alternative{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('Email') }}" value="{{ old('email', auth()->user()->email) }}" required>
+
+                                    @if ($errors->has('email'))
+                                        <span class="invalid-feedback" role="alert">
+                                            <strong>{{ $errors->first('email') }}</strong>
+                                        </span>
+                                    @endif
+                                </div>
+
+                                <div class="text-center">
+                                    <button type="submit" class="btn btn-success mt-4">{{ __('Save') }}</button>
+                                </div>
+                            </div>
+                        </form>
+                        <hr class="my-4" />
+                        <form method="post" action="{{ route('profile.password') }}" autocomplete="off">
+                            @csrf
+                            @method('put')
+
+                            <h6 class="heading-small text-muted mb-4">{{ __('Password') }}</h6>
+
+                            @if (session('password_status'))
+                                <div class="alert alert-success alert-dismissible fade show" role="alert">
+                                    {{ session('password_status') }}
+                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+                                </div>
+                            @endif
+
+                            <div class="pl-lg-4">
+                                <div class="form-group{{ $errors->has('old_password') ? ' has-danger' : '' }}">
+                                    <label class="form-control-label" for="input-current-password">{{ __('Current Password') }}</label>
+                                    <input type="password" name="old_password" id="input-current-password" class="form-control form-control-alternative{{ $errors->has('old_password') ? ' is-invalid' : '' }}" placeholder="{{ __('Current Password') }}" value="" required>
+                                    
+                                    @if ($errors->has('old_password'))
+                                        <span class="invalid-feedback" role="alert">
+                                            <strong>{{ $errors->first('old_password') }}</strong>
+                                        </span>
+                                    @endif
+                                </div>
+                                <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
+                                    <label class="form-control-label" for="input-password">{{ __('New Password') }}</label>
+                                    <input type="password" name="password" id="input-password" class="form-control form-control-alternative{{ $errors->has('password') ? ' is-invalid' : '' }}" placeholder="{{ __('New Password') }}" value="" required>
+                                    
+                                    @if ($errors->has('password'))
+                                        <span class="invalid-feedback" role="alert">
+                                            <strong>{{ $errors->first('password') }}</strong>
+                                        </span>
+                                    @endif
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-control-label" for="input-password-confirmation">{{ __('Confirm New Password') }}</label>
+                                    <input type="password" name="password_confirmation" id="input-password-confirmation" class="form-control form-control-alternative" placeholder="{{ __('Confirm New Password') }}" value="" required>
+                                </div>
+
+                                <div class="text-center">
+                                    <button type="submit" class="btn btn-success mt-4">{{ __('Change password') }}</button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        @include('layouts.footers.auth')
+    </div>
+@endsection
diff --git a/resources/views/users/index.blade.php b/resources/views/users/index.blade.php
new file mode 100644
index 0000000..c08fddd
--- /dev/null
+++ b/resources/views/users/index.blade.php
@@ -0,0 +1,472 @@
+<html lang="en"><head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+
+    <title>{{ config('app.name', 'Argon Dashboard') }}</title>
+    <!-- Favicon -->
+    <link href="{{ asset('argon') }}/img/brand/favicon.png" rel="icon" type="image/png">
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+    <!-- Icons -->
+    <link href="{{ asset('argon') }}/vendor/nucleo/css/nucleo.css" rel="stylesheet">
+    <link href="{{ asset('argon') }}/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
+    <!-- Argon CSS -->
+    <link type="text/css" href="{{ asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet">
+           <!-- Extra details for Live View on GitHub Pages -->
+    <!-- Canonical SEO -->
+    <link rel="canonical" href="https://www.creative-tim.com/product/argon-dashboard-laravel" />
+    <!--  Social tags      -->
+    <meta name="keywords" content="dashboard, bootstrap 4 dashboard, bootstrap 4 design, bootstrap 4 system, bootstrap 4, bootstrap 4 uit kit, bootstrap 4 kit, argon, argon ui kit, creative tim, html kit, html css template, web template, bootstrap, bootstrap 4, css3 template, frontend, responsive bootstrap template, bootstrap ui kit, responsive ui kit, argon dashboard">
+    <meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
+    <!-- Schema.org markup for Google+ -->
+    <meta itemprop="name" content="Argon - Free Dashboard for Bootstrap 4 by Creative Tim">
+    <meta itemprop="description" content="Start your development with a Dashboard for Bootstrap 4.">
+    <meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/96/original/opt_ad_thumbnail.jpg">
+    <!-- Twitter Card data -->
+    <meta name="twitter:card" content="product">
+    <meta name="twitter:site" content="@creativetim">
+    <meta name="twitter:title" content="Argon - Free Dashboard for Bootstrap 4 by Creative Tim">
+    <meta name="twitter:description" content="Start your development with a Dashboard for Bootstrap 4.">
+    <meta name="twitter:creator" content="@creativetim">
+    <meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/96/original/opt_ad_thumbnail.jpg">
+    <!-- Open Graph data -->
+    <meta property="fb:app_id" content="655968634437471">
+    <meta property="og:title" content="Argon - Free Dashboard for Bootstrap 4 by Creative Tim" />
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="https://demos.creative-tim.com/argon-dashboard/index.html" />
+    <meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/96/original/opt_ad_thumbnail.jpg" />
+    <meta property="og:description" content="Start your development with a Dashboard for Bootstrap 4." />
+    <meta property="og:site_name" content="Creative Tim" />
+    <!-- Google Tag Manager -->
+    <script>
+        (function(w, d, s, l, i) {
+            w[l] = w[l] || [];
+            w[l].push({
+                'gtm.start': new Date().getTime(),
+                event: 'gtm.js'
+            });
+            var f = d.getElementsByTagName(s)[0],
+                j = d.createElement(s),
+                dl = l != 'dataLayer' ? '&l=' + l : '';
+            j.async = true;
+            j.src =
+                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+            f.parentNode.insertBefore(j, f);
+        })(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
+    </script>
+    <!-- End Google Tag Manager -->
+</head>
+<body class="clickup-chrome-ext_installed">
+    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+        @csrf
+    </form>
+        <nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-white" id="sidenav-main">
+<div class="container-fluid">
+    <!-- Toggler -->
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <!-- Brand -->
+    <a class="navbar-brand pt-0" href="{{ route('home') }}">
+        <img src="{{ asset('argon') }}/img/brand/blue.png" class="navbar-brand-img" alt="...">
+    </a>
+    <!-- User -->
+    <ul class="nav align-items-center d-md-none">
+        <li class="nav-item dropdown">
+            <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <div class="media align-items-center">
+                    <span class="avatar avatar-sm rounded-circle">
+                    <img alt="Image placeholder" src="{{ asset('argon') }}/img/theme/team-1-800x800.jpg">
+                    </span>
+                </div>
+            </a>
+            <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">
+                <div class=" dropdown-header noti-title">
+                    <h6 class="text-overflow m-0">Welcome!</h6>
+                </div>
+                <a href="{{ route('profile.edit') }}" class="dropdown-item">
+                    <i class="ni ni-single-02"></i>
+                    <span>My profile</span>
+                </a>
+                <a href="#" class="dropdown-item">
+                    <i class="ni ni-settings-gear-65"></i>
+                    <span>Settings</span>
+                </a>
+                <a href="#" class="dropdown-item">
+                    <i class="ni ni-calendar-grid-58"></i>
+                    <span>Activity</span>
+                </a>
+                <a href="#" class="dropdown-item">
+                    <i class="ni ni-support-16"></i>
+                    <span>Support</span>
+                </a>
+                <div class="dropdown-divider"></div>
+                <a href="{{ route('logout') }}" class="dropdown-item" onclick="event.preventDefault();
+                document.getElementById('logout-form').submit();">
+                    <i class="ni ni-user-run"></i>
+                    <span>Logout</span>
+                </a>
+            </div>
+        </li>
+    </ul>
+    <!-- Collapse -->
+    <div class="collapse navbar-collapse" id="sidenav-collapse-main">
+        <!-- Collapse header -->
+        <div class="navbar-collapse-header d-md-none">
+            <div class="row">
+                <div class="col-6 collapse-brand">
+                    <a  href="{{ route('home') }}">
+                        <img src="{{ asset('argon') }}/img/brand/blue.png">
+                    </a>
+                </div>
+                <div class="col-6 collapse-close">
+                    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle sidenav">
+                        <span></span>
+                        <span></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Form -->
+        <form class="mt-4 mb-3 d-md-none">
+            <div class="input-group input-group-rounded input-group-merge">
+                <input type="search" class="form-control form-control-rounded form-control-prepended" placeholder="Search" aria-label="Search">
+                <div class="input-group-prepend">
+                    <div class="input-group-text">
+                        <span class="fa fa-search"></span>
+                    </div>
+                </div>
+            </div>
+        </form>
+        <!-- Navigation -->
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('home') }}">
+                    <i class="ni ni-tv-2 text-primary"></i> {{ __('Dashboard') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link active" href="#navbar-examples" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="navbar-examples">
+                    <i class="fab fa-laravel" style="color: #f4645f;"></i>
+                    <span class="nav-link-text" style="color: #f4645f;">{{ __('Laravel Examples') }}</span>
+                </a>
+
+                <div class="collapse show" id="navbar-examples">
+                    <ul class="nav nav-sm flex-column">
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ route('profile.edit') }}">
+                                {{ __('User profile') }}
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ route('user.index') }}">
+                                {{ __('User Management') }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('icons') }}">
+                    <i class="ni ni-planet text-blue"></i> {{ __('Icons') }}
+                </a>
+            </li>
+            <li class="nav-item ">
+                <a class="nav-link" href="{{ route('map') }}">
+                    <i class="ni ni-pin-3 text-orange"></i> {{ __('Maps') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('table') }}">
+                  <i class="ni ni-bullet-list-67 text-default"></i>
+                  <span class="nav-link-text">Tables</span>
+                </a>
+            </li>
+                           <li class="nav-item mb-5 mr-4 ml-4 pl-1 bg-danger" style="position: absolute; bottom: 0;">
+                    <a class="nav-link text-white" href="https://www.creative-tim.com/product/argon-dashboard-pro-laravel" target="_blank">
+                        <i class="ni ni-cloud-download-95"></i> Upgrade to PRO
+                    </a>
+                </li>
+        </ul>
+        <!-- Divider -->
+        <hr class="my-3">
+        <!-- Heading -->
+        <h6 class="navbar-heading text-muted">Documentation</h6>
+        <!-- Navigation -->
+        <ul class="navbar-nav mb-md-3">
+            <li class="nav-item">
+                <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/getting-started/overview.html">
+                    <i class="ni ni-spaceship"></i> Getting started
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/foundation/colors.html">
+                    <i class="ni ni-palette"></i> Foundation
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="https://demos.creative-tim.com/argon-dashboard/docs/components/alerts.html">
+                    <i class="ni ni-ui-04"></i> Components
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
+</nav>                
+    <div class="main-content">
+        <!-- Top navbar -->
+<nav class="navbar navbar-top navbar-expand-md navbar-dark" id="navbar-main">
+<div class="container-fluid">
+    <!-- Brand -->
+    <a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="{{ route('home') }}">Dashboard</a>
+    <!-- Form -->
+    <form class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto">
+        <div class="form-group mb-0">
+            <div class="input-group input-group-alternative">
+                <div class="input-group-prepend">
+                    <span class="input-group-text"><i class="fas fa-search"></i></span>
+                </div>
+                <input class="form-control" placeholder="Search" type="text">
+            </div>
+        </div>
+    </form>
+    <!-- User -->
+    <ul class="navbar-nav align-items-center d-none d-md-flex">
+        <li class="nav-item dropdown">
+            <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <div class="media align-items-center">
+                    <span class="avatar avatar-sm rounded-circle">
+                        <img alt="Image placeholder" src="{{ asset('argon') }}/img/theme/team-4-800x800.jpg">
+                    </span>
+                    <div class="media-body ml-2 d-none d-lg-block">
+                        <span class="mb-0 text-sm  font-weight-bold">Admin Admin</span>
+                    </div>
+                </div>
+            </a>
+            <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">
+                <div class=" dropdown-header noti-title">
+                    <h6 class="text-overflow m-0">Welcome!</h6>
+                </div>
+                <a href="{{ route('profile.edit') }}" class="dropdown-item">
+                    <i class="ni ni-single-02"></i>
+                    <span>My profile</span>
+                </a>
+                <a href="#" class="dropdown-item">
+                    <i class="ni ni-settings-gear-65"></i>
+                    <span>Settings</span>
+                </a>
+                <a href="#" class="dropdown-item">
+                    <i class="ni ni-calendar-grid-58"></i>
+                    <span>Activity</span>
+                </a>
+                <a href="#" class="dropdown-item">
+                    <i class="ni ni-support-16"></i>
+                    <span>Support</span>
+                </a>
+                <div class="dropdown-divider"></div>
+                <a href="{{ route('logout') }}" class="dropdown-item" onclick="event.preventDefault();
+                document.getElementById('logout-form').submit();">
+                    <i class="ni ni-user-run"></i>
+                    <span>Logout</span>
+                </a>
+            </div>
+        </li>
+    </ul>
+</div>
+</nav>    
+            <div class="header bg-gradient-primary pb-8 pt-5 pt-md-8">
+<div class="container-fluid">
+    <div class="alert alert-danger" role="alert">
+        <strong>This is a PRO feature!</strong>
+      </div>
+    <div class="header-body">
+        <!-- Card stats -->
+        <div class="row">
+            <div class="col-xl-3 col-lg-6">
+                <div class="card card-stats mb-4 mb-xl-0">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="card-title text-uppercase text-muted mb-0">Traffic</h5>
+                                <span class="h2 font-weight-bold mb-0">350,897</span>
+                            </div>
+                            <div class="col-auto">
+                                <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
+                                    <i class="fas fa-chart-bar"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="mt-3 mb-0 text-muted text-sm">
+                            <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
+                            <span class="text-nowrap">Since last month</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-3 col-lg-6">
+                <div class="card card-stats mb-4 mb-xl-0">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
+                                <span class="h2 font-weight-bold mb-0">2,356</span>
+                            </div>
+                            <div class="col-auto">
+                                <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
+                                    <i class="fas fa-chart-pie"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="mt-3 mb-0 text-muted text-sm">
+                            <span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 3.48%</span>
+                            <span class="text-nowrap">Since last week</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-3 col-lg-6">
+                <div class="card card-stats mb-4 mb-xl-0">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="card-title text-uppercase text-muted mb-0">Sales</h5>
+                                <span class="h2 font-weight-bold mb-0">924</span>
+                            </div>
+                            <div class="col-auto">
+                                <div class="icon icon-shape bg-yellow text-white rounded-circle shadow">
+                                    <i class="fas fa-users"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="mt-3 mb-0 text-muted text-sm">
+                            <span class="text-warning mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>
+                            <span class="text-nowrap">Since yesterday</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-3 col-lg-6">
+                <div class="card card-stats mb-4 mb-xl-0">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
+                                <span class="h2 font-weight-bold mb-0">49,65%</span>
+                            </div>
+                            <div class="col-auto">
+                                <div class="icon icon-shape bg-info text-white rounded-circle shadow">
+                                    <i class="fas fa-percent"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="mt-3 mb-0 text-muted text-sm">
+                            <span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>
+                            <span class="text-nowrap">Since last month</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+<div class="container-fluid mt--7">
+    <div class="row">
+        <div class="col">
+            <div class="card shadow">
+                <div class="card-header border-0">
+                    <div class="row align-items-center">
+                        <div class="col-8">
+                            <h3 class="mb-0">Users</h3>
+                        </div>
+                        <div class="col-4 text-right">
+                            <a href="" class="btn btn-sm btn-primary">Add user</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-12">
+                                        </div>
+
+                <div class="table-responsive">
+                    <table class="table align-items-center table-flush">
+                        <thead class="thead-light">
+                            <tr>
+                                <th scope="col">Name</th>
+                                <th scope="col">Email</th>
+                                <th scope="col">Creation Date</th>
+                                <th scope="col"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                                                                <tr>
+                                    <td>Admin Admin</td>
+                                    <td>
+                                        <a href="mailto:admin@argon.com">admin@argon.com</a>
+                                    </td>
+                                    <td>12/02/2020 11:00</td>
+                                    <td class="text-right">
+                                        <div class="dropdown">
+                                            <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                                <i class="fas fa-ellipsis-v"></i>
+                                            </a>
+                                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                                                                                                        <a class="dropdown-item" href="">Edit</a>
+                                                                                                </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                                                        </tbody>
+                    </table>
+                </div>
+                <div class="card-footer py-4">
+                    <nav class="d-flex justify-content-end" aria-label="...">
+                        
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </div>
+        
+    <footer class="footer">
+<div class="row align-items-center justify-content-xl-between">
+<div class="col-xl-6">
+    <div class="copyright text-center text-xl-left text-muted">
+        © 2020 <a href="https://www.creative-tim.com" class="font-weight-bold ml-1" target="_blank">Creative Tim</a> &amp;
+        <a href="https://www.updivision.com" class="font-weight-bold ml-1" target="_blank">Updivision</a>
+    </div>
+</div>
+<div class="col-xl-6">
+    <ul class="nav nav-footer justify-content-center justify-content-xl-end">
+        <li class="nav-item">
+            <a href="https://www.creative-tim.com" class="nav-link" target="_blank">Creative Tim</a>
+        </li>
+        <li class="nav-item">
+            <a href="https://www.updivision.com" class="nav-link" target="_blank">Updivision</a>
+        </li>
+        <li class="nav-item">
+            <a href="https://www.creative-tim.com/presentation" class="nav-link" target="_blank">About Us</a>
+        </li>
+        <li class="nav-item">
+            <a href="http://blog.creative-tim.com" class="nav-link" target="_blank">Blog</a>
+        </li>
+        <li class="nav-item">
+            <a href="https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md" class="nav-link" target="_blank">MIT License</a>
+        </li>
+    </ul>
+</div>
+</div></footer>    </div>
+    </div>
+
+    
+    <script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
+        <script src="{{ asset('argon') }}/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    
+            
+    <!-- Argon JS -->
+    <script src="{{ asset('argon') }}/js/argon.js?v=1.0.0"></script>
+</body></html>
diff --git a/resources/views/users/partials/header.blade.php b/resources/views/users/partials/header.blade.php
new file mode 100644
index 0000000..4ed2f6b
--- /dev/null
+++ b/resources/views/users/partials/header.blade.php
@@ -0,0 +1,15 @@
+<div class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center" style="background-image: url(../argon/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
+    <!-- Mask -->
+    <span class="mask bg-gradient-default opacity-8"></span>
+    <!-- Header container -->
+    <div class="container-fluid d-flex align-items-center">
+        <div class="row">
+            <div class="col-md-12 {{ $class ?? '' }}">
+                <h1 class="display-2 text-white">{{ $title }}</h1>
+                @if (isset($description) && $description)
+                    <p class="text-white mt-0 mb-5">{{ $description }}</p>
+                @endif
+            </div>
+        </div>
+    </div>
+</div> 
\ No newline at end of file
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
new file mode 100644
index 0000000..573b08f
--- /dev/null
+++ b/resources/views/welcome.blade.php
@@ -0,0 +1,100 @@
+@extends('layouts.app', ['class' => 'bg-default'])
+
+@section('content')
+    <div class="header bg-gradient-primary py-7 py-lg-8">
+        <div class="container">
+            <div class="header-body text-center mt-7 mb-7">
+                <div class="row justify-content-center">
+                    <div class="col-lg-9 col-md-9">
+                        <h1 class="text-white">{{ __('Sistem Informasi Manajemen Akutansi Barang Milik Negara') }}</h1><br>
+                        <h2 class="text-black">SIMAK-BMN Hahaha </h2>
+                    </div>
+                </div>
+            </div>
+        </div>
+      
+        <div class="separator separator-bottom separator-skew zindex-100">
+            <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
+            </svg>
+        </div>
+    </div>
+    <div class="container-fluid mt--7" style="overflow:scroll">
+        <div class="row">
+            <div class="col-xl-8 mb-5 mb-xl-0">
+                <div class="card bg-gradient-default shadow">
+                    <div class="card-header bg-transparent">
+                        <div class="row align-items-center">
+                            <div class="col">
+                                <h5 class="text-uppercase text-light ls-1 mb-1">Grafik Jumlah Barang</h5>
+                                <h2 class="text-white mb-0">Jenis Barang</h2>
+                            </div>
+                        
+                         
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <!-- Chart -->
+                        <div class="chart">
+                            <!-- Chart wrapper -->
+                            <canvas id="chart-sales" class="chart-canvas"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-4">
+                <div class="card shadow">
+                    <div class="card-header bg-transparent">
+                        <div class="row align-items-center">
+                            <div class="col">
+                                <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
+                                <h2 class="mb-0">Total orders</h2>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <!-- Chart -->
+                        <div class="chart">
+                            <canvas id="chart-orders" class="chart-canvas"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row mt-5">
+           
+            </div>
+    <div class="container mt--10 pb-5">
+      
+            <div class="card-deck mt-4">
+                <div class="row">
+            @foreach($barang as $i)
+  <div class="card col-lg-6 col-md-6 col-sm-3">
+    <img class="card-img-top small-image" width="200px" height="150px" src="{{ \Helperku::get_image_barang($i->id) }}" alt="Card image cap">
+    <div class="card-body">
+      <h5 class="card-title">{{ $i->nama_barang }}<br>
+<br>      <span class="badge badge-info">{{ $i->nama_jenis }}</span>
+                            <span class="badge badge-primary">{{ $i->serial_number }}</span> </h5>
+      <p class="card-text text-small"> jumlah Stok : {{ $i->jumlah_barang }} <br>
+      <a href="https://maps.google.com/?q=<?= $i->lokasi ?>" data-toggle="tooltip" data-placement="top" title="Lokasi Barang" target="_blank" class="btn btn-sm btn-outline-success text-small">
+                 <span class="badge badge-success"><i class="fas fa-map-marker text-success"></i></a>
+                 <a  data-toggle="tooltip" data-placement="top" title="{{ $i->keterangan }}" target="_blank" class="btn btn-sm btn-outline-warning text-small">
+                 <span class="badge badge-warning"><i class="fas fa-comment-alt text-warning"></i></a>
+                </p>
+     
+    </div>
+  </div>
+  @endforeach
+</div>
+</div>
+</div>
+        </div>
+        
+    <div class="container mt--10 pb-5"></div>
+@endsection
+
+
+@push('js')
+    <script src="{{ secure_asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
+    <script src="{{ secure_asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
+@endpush
\ No newline at end of file