From 8623a44171c5cb2b38b4952ce86eb8eae3e36650 Mon Sep 17 00:00:00 2001
From: Femi Novia Lina <77434812+FemiNoviaLina@users.noreply.github.com>
Date: Wed, 25 May 2022 20:41:33 +0700
Subject: [PATCH] edit order dashboard

---
 app/Http/Controllers/AdminController.php      |  18 +
 app/Http/Controllers/RentController.php       |  32 +-
 public/css/app.css                            | 460 +++++++++++-------
 public/js/dashboard_modal_script.js           |  73 +++
 public/mix-manifest.json                      |   1 +
 resources/js/dashboard_modal_script.js        |  70 +++
 .../views/components/base-layout.blade.php    |   1 +
 resources/views/dashboard/orders.blade.php    | 329 +++++++++----
 resources/views/rent-form.blade.php           |   9 +-
 routes/web.php                                |   5 +-
 tailwind.config.js                            |   6 +
 webpack.mix.js                                |   2 +-
 12 files changed, 744 insertions(+), 262 deletions(-)
 create mode 100644 public/js/dashboard_modal_script.js
 create mode 100644 resources/js/dashboard_modal_script.js

diff --git a/app/Http/Controllers/AdminController.php b/app/Http/Controllers/AdminController.php
index ea9f92e..c15f4eb 100644
--- a/app/Http/Controllers/AdminController.php
+++ b/app/Http/Controllers/AdminController.php
@@ -108,4 +108,22 @@ public function addVehicle($type) {
 
         return redirect()->route('vehicles-dashboard-'.$type);
     }
+
+    public function getOrderDetails($id) {
+        $orders = Order::join('users', 'orders.user_id', '=', 'users.id')
+        ->join('vehicles', 'orders.vehicle_id', '=', 'vehicles.id')
+        ->select('orders.id', 'orders.pickup_date', 'orders.pickup_time', 'orders.pickup_address', 
+        'orders.dropoff_date', 'orders.dropoff_time', 'orders.dropoff_address', 'orders.phone_1',
+        'orders.phone_2', 'orders.address_id', 'orders.address_mlg', 'orders.note', 'orders.order_status', 
+        'orders.total_price', 'orders.id_card', 'orders.id_card_2', 'orders.driver_license',
+        'orders.payment_method', 'orders.created_at', 'orders.transaction_id', 'orders.payment_expiry_time',
+        'users.id as user_id', 'users.name as user_name', 'users.email', 
+        'vehicles.id as vehicles_id', 'vehicles.name as vehicle_name', 'vehicles.type',
+        'vehicles.price', 'vehicles.available_unit', 'vehicles.photo', 'vehicles.fuel', 'vehicles.transmission',
+        'vehicles.cc', 'vehicles.year')
+        ->where('orders.id', '=', $id)
+        ->get();
+
+        return response()->json($orders);
+    }
 }
diff --git a/app/Http/Controllers/RentController.php b/app/Http/Controllers/RentController.php
index c87be8e..89411bb 100644
--- a/app/Http/Controllers/RentController.php
+++ b/app/Http/Controllers/RentController.php
@@ -71,9 +71,27 @@ public function getRentMotors()
         return view('vehicles-list', ['vehicles' => session('vehicles'), 'pickup_date' => session('pickup_date'), 'dropoff_date' => session('dropoff_date'), 'type' => 'Motor', 'transmission' => session('transmission'), 'brand' => session('brand')]);
     }
 
-    public function rentVehicle($type, $id)
+    public function rentVehicle($type, $id, Request $request)
     {
-        $request = request()->input();
+
+        // $request = $request->validate([
+        //     'pickup_date' => 'required|before_or_equal:dropoff_date|after_or_equal:today',
+        //     'pickup_time' => 'required',
+        //     'dropoff_date' => 'required|after_or_equal:pickup_date',
+        //     'dropoff_time' => 'required',
+        //     'vehicle_id' => 'required',
+        //     'user_id' => 'required',
+        //     'pickup_address' => 'required',
+        //     'dropoff_address' => 'required',
+        //     'phone_1' => 'required',
+        //     'phone_2' => 'required',
+        //     'address_id' => 'required',
+        //     'address_mlg' => 'required',
+        //     'id_card' => 'required|image|mimes:jpeg,png,jpg,pdf|max:2048',
+        //     'id_card_2' => 'required|image|mimes:jpeg,png,jpg,pdf|max:2048',
+        //     'driver_license' => 'required|image|mimes:jpeg,png,jpg,pdf|max:2048',
+        //     'note' => 'nullable',
+        // ]);
 
         $vehicle = Vehicle::find($id);
 
@@ -119,6 +137,16 @@ public function rentVehicle($type, $id)
 
     public function getUserOrders()
     {
+        // $orders = Order::join('vehicles', 'orders.vehicle_id', '=', 'vehicles.id')
+        // ->where('user_id', '=', auth()->user()->id)
+        // ->where('order_status', 'IN', ['PENDING', 'WAITING_FOR_PAYMENT'])
+        // ->where('pickup_date', '<', date('Y-m-d'))
+        // ->orWhere(function($query) {
+        //     $query->where('pickup_date', '=', date('Y-m-d'))
+        //     ->where('pickup_time', '<', date('H:i:s'));
+        // })
+        // ->update(['order_status' => 'CANCELED']);
+
         $orders = Order::join('vehicles', 'orders.vehicle_id', '=', 'vehicles.id')
         ->select("orders.id", "orders.order_status", "orders.created_at", "vehicles.name")
         ->where('user_id', '=', auth()->user()->id)
diff --git a/public/css/app.css b/public/css/app.css
index af92de5..e3ed6b3 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -595,6 +595,39 @@ select {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
 .fixed {
   position: fixed;
 }
@@ -648,6 +681,18 @@ select {
 .m-10 {
   margin: 2.5rem;
 }
+.mx-20 {
+  margin-left: 5rem;
+  margin-right: 5rem;
+}
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
 .mx-6 {
   margin-left: 1.5rem;
   margin-right: 1.5rem;
@@ -660,10 +705,6 @@ select {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
 .my-6 {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
@@ -672,14 +713,6 @@ select {
   margin-left: 2.5rem;
   margin-right: 2.5rem;
 }
-.mx-5 {
-  margin-left: 1.25rem;
-  margin-right: 1.25rem;
-}
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -688,37 +721,25 @@ select {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
 }
-.mx-20 {
-  margin-left: 5rem;
-  margin-right: 5rem;
-}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
 .mx-8 {
   margin-left: 2rem;
   margin-right: 2rem;
 }
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-.my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-.my-20 {
-  margin-top: 5rem;
-  margin-bottom: 5rem;
-}
-.my-12 {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
 }
 .ml-3 {
   margin-left: 0.75rem;
@@ -726,6 +747,9 @@ select {
 .-ml-px {
   margin-left: -1px;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -762,9 +786,6 @@ select {
 .mt-1 {
   margin-top: 0.25rem;
 }
-.mt-4 {
-  margin-top: 1rem;
-}
 .mt-24 {
   margin-top: 6rem;
 }
@@ -789,6 +810,9 @@ select {
 .-mt-px {
   margin-top: -1px;
 }
+.-mr-2 {
+  margin-right: -0.5rem;
+}
 .mt-20 {
   margin-top: 5rem;
 }
@@ -798,6 +822,9 @@ select {
 .mb-32 {
   margin-bottom: 8rem;
 }
+.ml-auto {
+  margin-left: auto;
+}
 .ml-20 {
   margin-left: 5rem;
 }
@@ -834,9 +861,6 @@ select {
 .mt-10 {
   margin-top: 2.5rem;
 }
-.-mr-2 {
-  margin-right: -0.5rem;
-}
 .block {
   display: block;
 }
@@ -864,6 +888,9 @@ select {
 .h-5 {
   height: 1.25rem;
 }
+.h-screen {
+  height: 100vh;
+}
 .h-1 {
   height: 0.25rem;
 }
@@ -891,6 +918,9 @@ select {
 .h-6 {
   height: 1.5rem;
 }
+.h-10 {
+  height: 2.5rem;
+}
 .h-96 {
   height: 24rem;
 }
@@ -900,6 +930,12 @@ select {
 .h-40 {
   height: 10rem;
 }
+.h-3\/6 {
+  height: 50%;
+}
+.h-64 {
+  height: 16rem;
+}
 .h-7 {
   height: 1.75rem;
 }
@@ -912,21 +948,15 @@ select {
 .h-4\/5 {
   height: 80%;
 }
-.h-10 {
-  height: 2.5rem;
-}
-.h-3\/6 {
-  height: 50%;
-}
-.h-screen {
-  height: 100vh;
-}
 .min-h-screen {
   min-height: 100vh;
 }
 .w-5 {
   width: 1.25rem;
 }
+.w-full {
+  width: 100%;
+}
 .w-screen {
   width: 100vw;
 }
@@ -954,20 +984,23 @@ select {
 .w-3 {
   width: 0.75rem;
 }
-.w-full {
-  width: 100%;
-}
 .w-auto {
   width: auto;
 }
+.w-4 {
+  width: 1rem;
+}
 .w-32 {
   width: 8rem;
 }
 .w-80 {
   width: 20rem;
 }
-.w-4 {
-  width: 1rem;
+.w-8\/12 {
+  width: 66.666667%;
+}
+.w-48 {
+  width: 12rem;
 }
 .w-60 {
   width: 15rem;
@@ -996,23 +1029,6 @@ select {
 .w-1 {
   width: 0.25rem;
 }
-.w-48 {
-  width: 12rem;
-}
-.w-fit {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.w-7\/12 {
-  width: 58.333333%;
-}
-.w-5\/12 {
-  width: 41.666667%;
-}
-.w-8\/12 {
-  width: 66.666667%;
-}
 .min-w-full {
   min-width: 100%;
 }
@@ -1066,6 +1082,12 @@ select {
 .basis-3\/12 {
   flex-basis: 25%;
 }
+.table-auto {
+  table-layout: auto;
+}
+.border-collapse {
+  border-collapse: collapse;
+}
 .origin-top-left {
   transform-origin: top left;
 }
@@ -1108,6 +1130,9 @@ select {
 .grid-flow-col {
   grid-auto-flow: column;
 }
+.auto-rows-auto {
+  grid-auto-rows: auto;
+}
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1129,6 +1154,9 @@ select {
 .content-center {
   align-content: center;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-center {
   align-items: center;
 }
@@ -1165,13 +1193,13 @@ select {
 .gap-8 {
   gap: 2rem;
 }
-.gap-y-2 {
-  row-gap: 0.5rem;
-}
 .gap-x-5 {
   -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
 }
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
 .space-x-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2rem * var(--tw-space-x-reverse));
@@ -1182,12 +1210,33 @@ select {
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .overflow-hidden {
   overflow: hidden;
 }
 .overflow-x-auto {
   overflow-x: auto;
 }
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
 .text-ellipsis {
   text-overflow: ellipsis;
 }
@@ -1203,12 +1252,12 @@ select {
 .rounded-lg {
   border-radius: 0.5rem;
 }
-.rounded-full {
-  border-radius: 9999px;
-}
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
 .rounded-sm {
   border-radius: 0.125rem;
 }
@@ -1234,29 +1283,36 @@ select {
   border-top-right-radius: 0.125rem;
   border-bottom-right-radius: 0.125rem;
 }
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
 .border {
   border-width: 1px;
 }
 .border-2 {
   border-width: 2px;
 }
+.border-b {
+  border-bottom-width: 1px;
+}
 .border-l-2 {
   border-left-width: 2px;
 }
+.border-l-4 {
+  border-left-width: 4px;
+}
 .border-t {
   border-top-width: 1px;
 }
 .border-r {
   border-right-width: 1px;
 }
-.border-b {
-  border-bottom-width: 1px;
-}
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-l-4 {
-  border-left-width: 4px;
+.border-b-4 {
+  border-bottom-width: 4px;
 }
 .border-gray-300 {
   --tw-border-opacity: 1;
@@ -1281,6 +1337,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(226 226 226 / var(--tw-border-opacity));
 }
+.border-red {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 80 80 / var(--tw-border-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1301,6 +1361,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(226 226 226 / var(--tw-bg-opacity));
 }
+.bg-mint-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 222 141 / var(--tw-bg-opacity));
+}
 .bg-lilac-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(169 169 231 / var(--tw-bg-opacity));
@@ -1313,14 +1377,28 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(221 222 245 / var(--tw-bg-opacity));
 }
-.bg-mint-100 {
+.bg-yellow-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(37 222 141 / var(--tw-bg-opacity));
+  background-color: rgb(250 253 212 / var(--tw-bg-opacity));
+}
+.bg-light-red {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 212 212 / var(--tw-bg-opacity));
+}
+.bg-mint-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(166 241 208 / var(--tw-bg-opacity));
 }
 .bg-red {
   --tw-bg-opacity: 1;
   background-color: rgb(255 80 80 / var(--tw-bg-opacity));
 }
+.bg-transparent {
+  background-color: transparent;
+}
+.bg-opacity-75 {
+  --tw-bg-opacity: 0.75;
+}
 .bg-cover {
   background-size: cover;
 }
@@ -1346,6 +1424,9 @@ select {
 .p-3 {
   padding: 0.75rem;
 }
+.p-6 {
+  padding: 1.5rem;
+}
 .p-10 {
   padding: 2.5rem;
 }
@@ -1355,9 +1436,6 @@ select {
 .p-2 {
   padding: 0.5rem;
 }
-.p-6 {
-  padding: 1.5rem;
-}
 .p-5 {
   padding: 1.25rem;
 }
@@ -1382,10 +1460,22 @@ select {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1398,14 +1488,6 @@ select {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
-.px-20 {
-  padding-left: 5rem;
-  padding-right: 5rem;
-}
-.py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1414,6 +1496,18 @@ select {
   padding-top: 5rem;
   padding-bottom: 5rem;
 }
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
@@ -1422,17 +1516,15 @@ select {
   padding-left: 0px;
   padding-right: 0px;
 }
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
+.pt-24 {
+  padding-top: 6rem;
+}
+.pr-8 {
+  padding-right: 2rem;
 }
 .pl-1 {
   padding-left: 0.25rem;
@@ -1443,14 +1535,29 @@ select {
 .pt-1 {
   padding-top: 0.25rem;
 }
+.pl-3 {
+  padding-left: 0.75rem;
+}
+.pr-4 {
+  padding-right: 1rem;
+}
 .pt-8 {
   padding-top: 2rem;
 }
 .pl-2 {
   padding-left: 0.5rem;
 }
-.pr-8 {
-  padding-right: 2rem;
+.pt-2 {
+  padding-top: 0.5rem;
+}
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+.pt-4 {
+  padding-top: 1rem;
+}
+.pb-1 {
+  padding-bottom: 0.25rem;
 }
 .pt-52 {
   padding-top: 13rem;
@@ -1458,32 +1565,14 @@ select {
 .pl-24 {
   padding-left: 6rem;
 }
-.pt-4 {
-  padding-top: 1rem;
-}
 .pt-44 {
   padding-top: 11rem;
 }
 .pl-4 {
   padding-left: 1rem;
 }
-.pt-2 {
-  padding-top: 0.5rem;
-}
-.pl-3 {
-  padding-left: 0.75rem;
-}
-.pr-4 {
-  padding-right: 1rem;
-}
-.pb-3 {
-  padding-bottom: 0.75rem;
-}
-.pb-1 {
-  padding-bottom: 0.25rem;
-}
-.pt-24 {
-  padding-top: 6rem;
+.text-left {
+  text-align: left;
 }
 .text-center {
   text-align: center;
@@ -1495,30 +1584,30 @@ select {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
@@ -1551,12 +1640,12 @@ select {
 .leading-5 {
   line-height: 1.25rem;
 }
-.leading-7 {
-  line-height: 1.75rem;
-}
 .leading-tight {
   line-height: 1.25;
 }
+.leading-7 {
+  line-height: 1.75rem;
+}
 .tracking-wider {
   letter-spacing: 0.05em;
 }
@@ -1587,9 +1676,9 @@ select {
   --tw-text-opacity: 1;
   color: rgb(147 149 222 / var(--tw-text-opacity));
 }
-.text-lilac-300 {
+.text-yellow-100 {
   --tw-text-opacity: 1;
-  color: rgb(169 169 231 / var(--tw-text-opacity));
+  color: rgb(172 157 22 / var(--tw-text-opacity));
 }
 .text-red {
   --tw-text-opacity: 1;
@@ -1599,6 +1688,14 @@ select {
   --tw-text-opacity: 1;
   color: rgb(37 222 141 / var(--tw-text-opacity));
 }
+.text-lilac-300 {
+  --tw-text-opacity: 1;
+  color: rgb(169 169 231 / var(--tw-text-opacity));
+}
+.text-mint-50 {
+  --tw-text-opacity: 1;
+  color: rgb(27 206 127 / var(--tw-text-opacity));
+}
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1763,6 +1860,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 248 / var(--tw-border-opacity));
 }
+.hover\:bg-lilac-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 149 222 / var(--tw-bg-opacity));
+}
 .hover\:bg-lilac-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(124 125 220 / var(--tw-bg-opacity));
@@ -1771,29 +1872,29 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(169 169 231 / var(--tw-bg-opacity));
 }
-.hover\:bg-lilac-200:hover {
+.hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(147 149 222 / var(--tw-bg-opacity));
+  background-color: rgb(93 93 148 / var(--tw-bg-opacity));
 }
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(226 226 226 / var(--tw-bg-opacity));
 }
-.hover\:bg-gray-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(93 93 148 / var(--tw-bg-opacity));
-}
 .hover\:bg-mint-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(131 238 191 / var(--tw-bg-opacity));
 }
+.hover\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 248 / var(--tw-bg-opacity));
+}
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.hover\:text-mint-100:hover {
+.hover\:text-lilac-100:hover {
   --tw-text-opacity: 1;
-  color: rgb(37 222 141 / var(--tw-text-opacity));
+  color: rgb(124 125 220 / var(--tw-text-opacity));
 }
 .focus\:z-10:focus {
   z-index: 10;
@@ -1802,14 +1903,14 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 248 / var(--tw-border-opacity));
 }
-.focus\:bg-gray-100:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 226 226 / var(--tw-bg-opacity));
-}
 .focus\:bg-gray-50:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(93 93 148 / var(--tw-bg-opacity));
 }
+.focus\:bg-gray-100:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 226 226 / var(--tw-bg-opacity));
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1887,6 +1988,10 @@ select {
     flex-basis: 100%;
   }
 
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
   .sm\:items-center {
     align-items: center;
   }
@@ -1903,6 +2008,12 @@ select {
     justify-content: space-between;
   }
 
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
   .sm\:rounded-lg {
     border-radius: 0.5rem;
   }
@@ -1912,21 +2023,31 @@ select {
     padding-right: 1.5rem;
   }
 
-  .sm\:px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
   .sm\:pt-0 {
     padding-top: 0px;
   }
+
+  .sm\:text-left {
+    text-align: left;
+  }
 }
 @media (min-width: 768px) {
 
+  .md\:inset-0 {
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+  }
+
   .md\:inline {
     display: inline;
   }
 
+  .md\:h-auto {
+    height: auto;
+  }
+
   .md\:max-h-0 {
     max-height: 0px;
   }
@@ -1974,12 +2095,16 @@ select {
     flex-basis: 50%;
   }
 
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .lg\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .lg\:grid-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
   }
 
   .lg\:grid-rows-2 {
@@ -1990,12 +2115,12 @@ select {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
 
-  .lg\:grid-rows-4 {
-    grid-template-rows: repeat(4, minmax(0, 1fr));
+  .lg\:grid-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
   }
 
-  .lg\:grid-rows-5 {
-    grid-template-rows: repeat(5, minmax(0, 1fr));
+  .lg\:grid-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
   }
 
   .lg\:flex-row {
@@ -2006,11 +2131,6 @@ select {
     padding-left: 2rem;
     padding-right: 2rem;
   }
-
-  .lg\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
 }
 
 
diff --git a/public/js/dashboard_modal_script.js b/public/js/dashboard_modal_script.js
new file mode 100644
index 0000000..3689228
--- /dev/null
+++ b/public/js/dashboard_modal_script.js
@@ -0,0 +1,73 @@
+/******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
+/*!************************************************!*\
+  !*** ./resources/js/dashboard_modal_script.js ***!
+  \************************************************/
+$("#table-body").on("click", "tr:not(:first-child)", function () {
+  var row = $(event.target).closest("tr");
+  ;
+  $.get(row.children()[0].value, function (data) {
+    console.log(data);
+    $("#selected-id").html(data[0].id);
+    $("#selected-transaction-id").html(data[0].transaction_id ? data[0].transaction_id : "N/A");
+    $("#selected-application-date").html(data[0].created_at);
+    $("#selected-total-price").html("IDR " + data[0].total_price);
+    $("#selected-payment-expiry-time").html(data[0].payment_expiry_time ? data[0].payment_expiry_time : "N/A");
+    $("#selected-payment-method").html(data[0].payment_method ? data[0].payment_method : "N/A");
+    $("#selected-pickup-time").html(data[0].pickup_date + " " + data[0].pickup_time);
+    $("#selected-dropoff-time").html(data[0].dropoff_date + " " + data[0].dropoff_time);
+    $("#selected-pickup-location").html(data[0].pickup_address);
+    $("#selected-dropoff-location").html(data[0].dropoff_address);
+    $("#selected-note").html(data[0].note);
+    $("#selected-user-name").html(data[0].user_name);
+    $("#selected-user-email").html(data[0].email);
+    $("#selected-user-phone-1").html(data[0].phone_1);
+    $("#selected-user-phone-2").html(data[0].phone_2);
+    $("#selected-user-address-id").html(data[0].address_id);
+    $("#selected-user-address-mlg").html(data[0].address_mlg);
+    $("#selected-id-card-1").attr("src", "/storage/id-card/" + data[0].id_card);
+    $("#selected-id-card-2").attr("src", "/storage/id-card/" + data[0].id_card_2);
+    $("#selected-driver-license").attr("src", "/storage/driver-license/" + data[0].driver_license);
+    $("#selected-vehicle-id").html(data[0].vehicles_id);
+    $("#selected-vehicle-type").html(data[0].type);
+    $("#selected-vehicle-name").html(data[0].vehicle_name);
+    $("#selected-vehicle-price").html(data[0].price);
+    $("#selected-vehicle-fuel").html(data[0].fuel);
+    $("#selected-vehicle-cc").html(data[0].cc);
+    $("#selected-vehicle-transmission").html(data[0].transmission);
+    $("#selected-vehicle-year").html(data[0].year);
+    $("#selected-vehicle-unit").html(data[0].available_unit);
+    $("#selected-vehicle-year").html(data[0].year);
+    $("#selected-vehicle-image").attr("src", "/storage/images/" + data[0].photo);
+  });
+  $("#modal").css('display', 'flex');
+});
+$("#close").on("click", function () {
+  $("#modal").css('display', 'none');
+});
+$("#customer-tab").on("click", function () {
+  $("#customer-tab").css("border-bottom", "4px solid #7C7DDC");
+  $("#order-tab").css("border-bottom", "none");
+  $("#vehicle-tab").css("border-bottom", "none");
+  $("#customer").css("display", "block");
+  $("#order").css("display", "none");
+  $("#vehicle").css("display", "none");
+});
+$("#order-tab").on("click", function () {
+  $("#order-tab").css("border-bottom", "4px solid #7C7DDC");
+  $("#customer-tab").css("border-bottom", "none");
+  $("#vehicle-tab").css("border-bottom", "none");
+  $("#order").css("display", "block");
+  $("#customer").css("display", "none");
+  $("#vehicle").css("display", "none");
+});
+$("#vehicle-tab").on("click", function () {
+  $("#vehicle-tab").css("border-bottom", "4px solid #7C7DDC");
+  $("#order-tab").css("border-bottom", "none");
+  $("#customer-tab").css("border-bottom", "none");
+  $("#vehicle").css("display", "block");
+  $("#order").css("display", "none");
+  $("#customer").css("display", "none");
+});
+/******/ })()
+;
\ No newline at end of file
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index b02ae28..13ac643 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,5 +1,6 @@
 {
     "/js/app.js": "/js/app.js",
     "/js/navbar_script.js": "/js/navbar_script.js",
+    "/js/dashboard_modal_script.js": "/js/dashboard_modal_script.js",
     "/css/app.css": "/css/app.css"
 }
diff --git a/resources/js/dashboard_modal_script.js b/resources/js/dashboard_modal_script.js
new file mode 100644
index 0000000..f5dac6e
--- /dev/null
+++ b/resources/js/dashboard_modal_script.js
@@ -0,0 +1,70 @@
+$("#table-body").on("click", "tr:not(:first-child)", () => {
+    let row = $(event.target).closest("tr");;
+    $.get(row.children()[0].value,
+    (data) => {
+        console.log(data)
+        $("#selected-id").html(data[0].id);
+        $("#selected-transaction-id").html(data[0].transaction_id  ? data[0].transaction_id : "N/A");
+        $("#selected-application-date").html(data[0].created_at);
+        $("#selected-total-price").html("IDR " + data[0].total_price);
+        $("#selected-payment-expiry-time").html(data[0].payment_expiry_time ? data[0].payment_expiry_time : "N/A");
+        $("#selected-payment-method").html(data[0].payment_method ? data[0].payment_method : "N/A");
+        $("#selected-pickup-time").html(data[0].pickup_date + " " + data[0].pickup_time);
+        $("#selected-dropoff-time").html(data[0].dropoff_date + " " + data[0].dropoff_time);
+        $("#selected-pickup-location").html(data[0].pickup_address);
+        $("#selected-dropoff-location").html(data[0].dropoff_address);
+        $("#selected-note").html(data[0].note);
+        $("#selected-user-name").html(data[0].user_name);
+        $("#selected-user-email").html(data[0].email);
+        $("#selected-user-phone-1").html(data[0].phone_1);
+        $("#selected-user-phone-2").html(data[0].phone_2);
+        $("#selected-user-address-id").html(data[0].address_id);
+        $("#selected-user-address-mlg").html(data[0].address_mlg);
+        $("#selected-id-card-1").attr("src", "/storage/id-card/" + data[0].id_card);
+        $("#selected-id-card-2").attr("src", "/storage/id-card/" + data[0].id_card_2);
+        $("#selected-driver-license").attr("src", "/storage/driver-license/" + data[0].driver_license);
+        $("#selected-vehicle-id").html(data[0].vehicles_id);
+        $("#selected-vehicle-type").html(data[0].type);
+        $("#selected-vehicle-name").html(data[0].vehicle_name);
+        $("#selected-vehicle-price").html(data[0].price);
+        $("#selected-vehicle-fuel").html(data[0].fuel);
+        $("#selected-vehicle-cc").html(data[0].cc);
+        $("#selected-vehicle-transmission").html(data[0].transmission);
+        $("#selected-vehicle-year").html(data[0].year);
+        $("#selected-vehicle-unit").html(data[0].available_unit);
+        $("#selected-vehicle-year").html(data[0].year);
+        $("#selected-vehicle-image").attr("src", "/storage/images/" + data[0].photo);
+    })
+    $("#modal").css('display','flex');
+});
+
+$("#close").on("click", () => {
+    $("#modal").css('display','none');
+})
+
+$("#customer-tab").on("click", () => {
+    $("#customer-tab").css("border-bottom", "4px solid #7C7DDC");
+    $("#order-tab").css("border-bottom", "none");
+    $("#vehicle-tab").css("border-bottom", "none");
+    $("#customer").css("display", "block");
+    $("#order").css("display", "none");
+    $("#vehicle").css("display", "none");
+})
+
+$("#order-tab").on("click", () => {
+    $("#order-tab").css("border-bottom", "4px solid #7C7DDC");
+    $("#customer-tab").css("border-bottom", "none");
+    $("#vehicle-tab").css("border-bottom", "none");
+    $("#order").css("display", "block");
+    $("#customer").css("display", "none");
+    $("#vehicle").css("display", "none");
+})
+
+$("#vehicle-tab").on("click", () => {
+    $("#vehicle-tab").css("border-bottom", "4px solid #7C7DDC");
+    $("#order-tab").css("border-bottom", "none");
+    $("#customer-tab").css("border-bottom", "none");
+    $("#vehicle").css("display", "block");
+    $("#order").css("display", "none");
+    $("#customer").css("display", "none");
+})
\ No newline at end of file
diff --git a/resources/views/components/base-layout.blade.php b/resources/views/components/base-layout.blade.php
index 0fb57a2..289f524 100644
--- a/resources/views/components/base-layout.blade.php
+++ b/resources/views/components/base-layout.blade.php
@@ -15,6 +15,7 @@
         <link rel="stylesheet" href="{{ asset('css/app.css') }}">
 
         <script src="{{ asset('js/app.js') }}" defer></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     </head>
     <body class="font-sans antialiased">
         {{ $slot }}
diff --git a/resources/views/dashboard/orders.blade.php b/resources/views/dashboard/orders.blade.php
index 3ef9403..aa8d590 100644
--- a/resources/views/dashboard/orders.blade.php
+++ b/resources/views/dashboard/orders.blade.php
@@ -37,94 +37,253 @@
                 </select>
             </div>
         </div>
-        <div class="flex flex-col mx-4">
-            <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
-                <div class="py-2 inline-block min-w-full sm:px-4 lg:px-6">
-                <div class="overflow-hidden">
-                    <table class="min-w-full text-center">
-                    <thead class="border-b bg-gray">
-                        <tr>
-                            <th scope="col" class="text-sm font-bold text-gray-900 px-6 py-2">
-                                <input type="checkbox" name="check" id="check-all" class="rounded-sm">
-                            </th>
-                            <th scope="col" class="text-sm font-bold text-gray-900 px-6 py-2">
-                                Order ID
-                            </th>
-                            <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
-                                Vehicle
-                            </th>
-                            <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
-                                Pick up time
-                            </th>
-                            <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
-                                Drop off time
-                            </th>
-                            <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
-                                Customer
-                            </th>
-                            <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
-                                Status
-                            </th>
-                            <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
-                                Total price
-                            </th>
-                            <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
-                                Action
-                            </th>
-                        </tr>
-                    </thead class="border-b">
-                    <tbody>
-                        @foreach($orders as $order)
-                        <tr class="bg-white border-b">
-                        <td class="text-sm text-gray-900 font-light px-6 py-2 whitespace-nowrap">
-                            <input type="checkbox" name="check" class="rounded-sm">
-                        </td>
-                        <td class="text-sm text-gray-900 font-regular px-6 py-2 whitespace-nowrap">
-                            {{ $order->id }}
-                        </td>
-                        <td class="text-sm text-gray-900 font-regular px-6 py-2 whitespace-nowrap">
-                            {{ $order->vehicle_name }}
-                        </td>
-                        <td class="text-sm text-gray-900 font-regular px-6 py-2 whitespace-nowrap">
-                            {{ $order->pickup_date }} {{ $order->pickup_time }}
-                        </td>
-                        <td class="text-sm text-gray-900 font-regular px-6 py-2 whitespace-nowrap">
-                            {{ $order->dropoff_date }} {{ $order->dropoff_time }}
-                        </td>
-                        <td class="text-sm text-gray-900 font-regular px-6 py-2 whitespace-nowrap">
-                            {{ $order->user_name }}
-                        </td>
-                        <td class="text-sm text-gray-900 font-regular px-6 py-2 whitespace-nowrap">
-                            {{ $order->order_status }}
-                        </td>
-                        <td class="text-sm text-gray-900 font-regular px-6 py-2 whitespace-nowrap">
-                            {{ $order->total_price }}
-                        </td>
-                        <td class="text-sm text-gray-900 font-regular px-6 py-2 whitespace-nowrap">
-                            @if($order->order_status == 'PENDING')
-                            <a href="{{ route('accept-order', [$order->id]) }}">
-                                <button class="bg-mint-100 text-white text-xs rounded-full p-1.5 mx-1">ACCEPT</button>
-                            </a>
-                            <a href="{{ route('reject-order', [$order->id]) }}">
-                            <button class="bg-red text-white text-xs rounded-full p-1.5 mx-1">REJECT</button>
-                            </a>
-                            @elseif($order->order_status == 'PAYMENT_DONE')
-                            <form action="{{ route('done-vehicle') }}" method="post">
-                                @csrf
-                                <input type="hidden" name="order_id" value="{{ $order->id }}">
-                                <button class="bg-mint-100 text-white text-xs rounded-full p-1.5 mx-1">SET AS COMPLETED</button>
-                            </form>
-                            @else
-                            -
-                            @endif
-                        </td>
-                        </tr class="bg-white border-b">
-                        @endforeach
-                    </tbody>
-                    </table>
+
+        <div class="items-center w-full px-4 py-2 mx-auto my-5 bg-white rounded-lg shadow-md max-w-7xl">
+            <div class="container mx-auto">
+                <div class="overflow-x-auto">
+                <table class="w-full border border-collapse table-auto">
+                <thead class="">
+                    <tr class="text-base font-bold text-left bg-gray-100">
+                        <th class="px-2 py-3 border-b-2 border-blue-500">
+                            <input type="checkbox" name="check" id="check-all" class="rounded-sm">
+                        </th>
+                        <th class="px-2 py-3 border-b-2 border-green-500">Order ID</th>
+                        <th class="px-2 py-3 border-b-2 border-red-500">Vehicle</th>
+                        <th class="px-2 py-3 text-center border-b-2 border-yellow-500 sm:text-left">Pick up time</th>
+                        <th class="px-2 py-3 text-center border-b-2 border-yellow-500 sm:text-left">Drop off time</th>
+                        <th class="px-2 py-3 text-center border-b-2 border-yellow-500 sm:text-left">Customer</th>
+                        <th class="px-2 py-3 text-center border-b-2 border-yellow-500 sm:text-left">Status</th>
+                        <th class="px-2 py-3 text-center border-b-2 border-yellow-500 sm:text-left">Total price</th>
+                        <th class="px-2 py-3 text-center border-b-2 border-yellow-500 sm:text-left">Action</th>
+                    </tr>
+                </thead>
+                <tbody class="text-sm font-normal text-gray-700" id="table-body">
+                    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
+                    @foreach($orders as $order)
+                    <tr class="py-10 border-b border-gray-200 hover:bg-gray-300 cursor-pointer">
+                    <input type="hidden" name="link" id="link-{{ $order->id }}" value="{{ route('order-details', [$order->id]) }}">
+                    <td class="check flex flex-row items-center px-2 py-4">
+                        <input type="checkbox" name="check" class="rounded-sm">
+                    </td>
+                    <td class="px-2 py-4">
+                        {{ $order->id }}
+                    </td>
+                    <td class="px-2 py-4">
+                        {{ $order->vehicle_name }}
+                    </td>
+                    <td class="px-2 py-4">
+                        {{ $order->pickup_date }} {{ $order->pickup_time }}
+                    </td>
+                    <td class="px-2 py-4">
+                        {{ $order->dropoff_date }} {{ $order->dropoff_time }}
+                    </td>
+                    <td class="px-2 py-4">
+                        {{ $order->user_name }}
+                    </td>
+                    <td class="px-2 py-4">
+                        @if($order->order_status == "PENDING")
+                        <div class="bg-lilac-400 text-lilac-100 text-xs rounded-full p-1.5 text-center">{{ $order->order_status }}</div>
+                        @elseif($order->order_status == "WAITING_FOR_PAYMENT")
+                        <div class="bg-yellow-200 text-yellow-100 text-xs rounded-full p-1.5 text-center">{{ $order->order_status }}</div>
+                        @elseif($order->order_status == "REJECTED" || $order->order_status == "CANCELED")
+                        <div class="bg-light-red text-red text-xs rounded-full p-1.5 text-center">{{ $order->order_status }}</div>
+                        @elseif($order->order_status == "PAYMENT_DONE" || $order->order_status == "COMPLETED")
+                        <div class="bg-mint-300 text-mint-50 text-xs rounded-full p-1.5 text-center">{{ $order->order_status }}</div>
+                        @endif
+                    </td>
+                    <td class="px-2 py-4">
+                        {{ $order->total_price }}
+                    </td>
+                    <td class="px-2 py-4 flex gap-2">
+                        @if($order->order_status == 'PENDING')
+                        <form action="{{ route('accept-order', [$order->id]) }}" method="post">
+                            @csrf
+                            <button class="bg-mint-100 text-white text-xs rounded-full p-1.5">ACCEPT</button>
+                        </form>
+                        <form action="{{ route('reject-order', [$order->id]) }}" method="post">
+                            @csrf
+                            <button class="bg-red text-white text-xs rounded-full p-1.5 ">REJECT</button>
+                        </form>
+                        @elseif($order->order_status == 'PAYMENT_DONE')
+                        <form action="{{ route('done-vehicle') }}" method="post">
+                            @csrf
+                            <input type="hidden" name="order_id" value="{{ $order->id }}">
+                            <button class="bg-mint-100 text-white text-xs rounded-full p-1.5 mx-1">SET AS COMPLETED</button>
+                        </form>
+                        @else
+                        -
+                        @endif
+                    </td>
+                    </tr>
+                    @endforeach
+                </tbody>
+                </table>
+            </div>
+            <div class="flex flex-col items-center w-full px-4 py-2 space-y-2 text-sm text-gray-500 sm:justify-between sm:space-y-0 sm:flex-row">
+                <div class="flex items-center justify-between space-x-2">
+                <a href="#" class="hover:text-gray-600">Previous</a>
+                <div class="flex flex-row space-x-1">
+                    <div class="flex px-2 py-px text-white bg-blue-400 border border-blue-400">1</div>
+                    <div class="flex px-2 py-px border border-blue-400 hover:bg-blue-400 hover:text-white">2</div>
+                </div>
+                <a href="#" class="hover:text-gray-600">Next</a>
                 </div>
+            </div>
+            </div>
+        </div>
+        <div id="modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bg-gray-300 bg-opacity-75 z-50 w-full md:inset-0 h-full flex items-center justify-center">
+            <div class="p-4 w-full max-w-3xl h-full md:h-auto">
+                <div class="relative bg-white rounded-lg shadow">
+                    <div class="flex justify-between items-start p-4 rounded-t border-b">
+                        <h3 class="text-3xl font-semibold text-lilac-100">
+                            Order Details
+                        </h3>
+                        <button type="button" id="close" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-lilac-100 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
+                        </button>
+                    </div>
+                    <div class="border-b">
+                        <ul class="flex mx-2">
+                            <li id="order-tab" class="p-2 cursor-pointer hover:bg-gray-300 border-b-4 border-lilac-100">Order Details</li>
+                            <li id="customer-tab" class="p-2 cursor-pointer hover:bg-gray-300">Customer Details</li>
+                            <li id="vehicle-tab" class="p-2 cursor-pointer hover:bg-gray-300">Vehicle Details</li>
+                        </ul>
+                    </div>
+                    <div id="order" class="py-4">
+                        <div class="mx-6 grid spec-container lg:grid-cols-2 lg:grid-rows-5 gap-x-5 grid-cols-1 grid-row-10">
+                            <div class="my-2">
+                                <p class="font-bold">Order ID</p>
+                                <p id="selected-id"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Transaction ID</p>
+                                <p id="selected-transaction-id"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Rent Application Date</p>
+                                <p id="selected-application-date"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Total Price</p>
+                                <p id="selected-total-price"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Payment Method</p>
+                                <p id="selected-payment-method"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Payment Expiry Time</p>
+                                <p id="selected-payment-expiry-time"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Pick up time</p>
+                                <p id="selected-pickup-time"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Drop off time</p>
+                                <p id="selected-dropoff-time"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Pick up location</p>
+                                <p id="selected-pickup-location"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Drop off location</p>
+                                <p id="selected-dropoff-location"></p>
+                            </div>
+                        </div>
+                        <div class="mx-6 my-4">
+                            <p class="font-bold">Note</p>
+                            <p id="selected-note"></p>
+                        </div>
+                    </div>
+                    <div id="customer" class="hidden">
+                        <div class="mx-6 my-4 grid spec-container lg:grid-cols-2 lg:grid-rows-3 gap-x-5 grid-cols-1 grid-row-6 auto-rows-auto">
+                            <div class="my-2">
+                                <p class="font-bold">Customer Name</p>
+                                <p id="selected-user-name"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Customer Email</p>
+                                <p id="selected-user-email"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Phone Number 1</p>
+                                <p id="selected-user-phone-1"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Phone Number 2</p>
+                                <p id="selected-user-phone-2"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Address (ID)</p>
+                                <p id="selected-user-address-id"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Address (MLG)</p>
+                                <p id="selected-user-address-mlg"></p>
+                            </div>
+                        </div>
+                        <p class="font-bold mx-6">Documents Preview</p>
+                        <div class="mx-6 flex">
+                            <div class="my-2">
+                                <embed id="selected-id-card-1" width="100" height="100" class="cursor-pointer">
+                            </div>
+                            <div class="my-2">
+                                <embed id="selected-id-card-2" width="100" height="100" class="cursor-pointer">
+                            </div>
+                            <div class="my-2">
+                                <embed id="selected-driver-license" width="100" height="100" class="cursor-pointer">
+                            </div>
+                        </div>
+                    </div>
+                    <div id="vehicle" class="hidden">
+                        <div class="mx-6 my-4 grid spec-container lg:grid-cols-2 lg:grid-rows-5 gap-x-5 grid-cols-1 grid-row-9">
+                            <div class="my-2">
+                                <p class="font-bold">Vehicle ID</p>
+                                <p id="selected-vehicle-id"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Vehicle Name</p>
+                                <p id="selected-vehicle-name"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Vehicle Type</p>
+                                <p id="selected-vehicle-type"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Vehicle Rent Price</p>
+                                <p id="selected-vehicle-price"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Year</p>
+                                <p id="selected-vehicle-year"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">CC</p>
+                                <p id="selected-vehicle-cc"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Transmission</p>
+                                <p id="selected-vehicle-transmission"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Fuel</p>
+                                <p id="selected-vehicle-fuel"></p>
+                            </div>
+                            <div class="my-2">
+                                <p class="font-bold">Total Unit</p>
+                                <p id="selected-vehicle-unit"></p>
+                            </div>
+                        </div>
+                        <div class="mx-6 my-4">
+                            <p class="font-bold">Image</p>
+                            <img id="selected-vehicle-image" class="h-64"></img>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
+        <script src="{{ asset('js/dashboard_modal_script.js') }}" defer></script>
     </x-base-body>
 </x-base-layout>
diff --git a/resources/views/rent-form.blade.php b/resources/views/rent-form.blade.php
index 67f1913..bca33ea 100644
--- a/resources/views/rent-form.blade.php
+++ b/resources/views/rent-form.blade.php
@@ -29,6 +29,11 @@
         </div>
         <div class="w-full max-w-7xl mx-auto rent-form my-4 px-20 py-10 bg-white shadow-md rounded-lg ">
             <h1 class="font-extrabold text-4xl text-lilac-100">Customer Rent Form</h1>
+            @if($errors->any())
+            <div class="bg-red bg-opacity-75 text-white p-2 rounded-md border border-red">
+                <p>Data tidak sesuai</p>
+            </div>
+            @endif
             <form action="{{ url('rent/'.$vehicle->type.'/'.$vehicle->id) }}" method="post" enctype="multipart/form-data" class="flex flex-wrap">
                 @csrf
                 <div class="left-col basis-1/2">
@@ -72,11 +77,11 @@
                     <x-text-area id="address-mlg" class="block w-4/5" name="address_mlg" required />
                     <div class="date-time flex">    
                         <div class="date basis-6/12">
-                            <x-label for="dropoff_date" value="Pick Up Date" class="block font-bold text-base pt-4"/>
+                            <x-label for="dropoff_date" value="Drop Off Date" class="block font-bold text-base pt-4"/>
                             <x-input id="dropoff-date" class="block" type="date" name="dropoff_date" value="{{ date('Y-m-d', strtotime('tomorrow')) }}" required />
                         </div>
                         <div class="time basis-3/12 ml-8">
-                            <x-label for="dropoff_time" value="Pick Up Time" class="block font-bold text-base pt-4"/>
+                            <x-label for="dropoff_time" value="Drop Off Time" class="block font-bold text-base pt-4"/>
                             <x-input id="dropoff-time" class="block" type="time" name="dropoff_time" value="{{ explode(' ', gmdate('Y-m-d h:i \G\M\T'))[1] }}" required />
                         </div>
                     </div>
diff --git a/routes/web.php b/routes/web.php
index c59b33c..84c33c9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -69,8 +69,9 @@
 Route::middleware(['auth', 'admin.authenticated'])-> group(function () {
     Route::get('/dashboard/customers', [AdminController::class, 'getCustomersDashboard'])->name('customers-dahboard');
     Route::get('/dashboard/orders', [AdminController::class, 'getOrdersDashboard'])->name('orders-dashboard');
-    Route::get('/dashboard/orders/acceptance/{id}', [AdminController::class, 'acceptOrder'])->name('accept-order');
-    Route::get('/dashboard/orders/rejection/{id}', [AdminController::class, 'rejectOrder'])->name('reject-order');
+    Route::get('/order-details/{id}', [AdminController::class, 'getOrderDetails'])->name('order-details');
+    Route::post('/dashboard/orders/acceptance/{id}', [AdminController::class, 'acceptOrder'])->name('accept-order');
+    Route::post('/dashboard/orders/rejection/{id}', [AdminController::class, 'rejectOrder'])->name('reject-order');
     Route::get('/dashboard/vehicles/car', [AdminController::class, 'getVehiclesDashboardCar'])->name('vehicles-dashboard-car');
     Route::get('/dashboard/vehicles/motor', [AdminController::class, 'getVehiclesDashboardMotor'])->name('vehicles-dashboard-motor');
     Route::post('/dashboard/vehicles/car/done', [AdminController::class, 'doneVehicle'])->name('done-vehicle');
diff --git a/tailwind.config.js b/tailwind.config.js
index 5d7b57d..5653066 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
             current: 'currentColor',
             'black': '#000000',
             'white': '#FFFFFF',
+            'light-red': '#FDD4D4',
             'red': '#FF5050',
             'gray': {
                 50:'#5D5D94',
@@ -31,9 +32,14 @@ module.exports = {
                 400: '#DDDEF5'
             },
             'mint': {
+                50: '#1BCE7F',
                 100: '#25DE8D',
                 200: '#83EEBF',
                 300: '#A6F1D0'
+            }, 
+            'yellow': {
+                100: '#AC9D16',
+                200: '#FAFDD4'
             }
         },
         extend: {
diff --git a/webpack.mix.js b/webpack.mix.js
index 0bfcac7..987216e 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -11,7 +11,7 @@ const mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/js/app.js', 'public/js').js('resources/js/navbar_script.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
+mix.js('resources/js/app.js', 'public/js').js('resources/js/navbar_script.js', 'public/js').js('resources/js/dashboard_modal_script.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
     require('postcss-import'),
     require('tailwindcss'),
     require('autoprefixer'),