diff --git a/app/Http/Controllers/ReportsController.php b/app/Http/Controllers/ReportsController.php
new file mode 100644
index 0000000..8751f5c
--- /dev/null
+++ b/app/Http/Controllers/ReportsController.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Storage;
+use Validator;
+use Auth;
+use App\Responses;
+use App\Helper;
+use App\Models\Vehicles;
+use App\Models\Devices;
+use App\Models\VehiclesDetail;
+use App\Models\Users;
+
+class ReportsController extends Controller
+{
+	public function view_report_vehicle_trips(Request $req)
+	{
+		$data = [
+			// 'lanes' => ConfRates::getLanesActive(),
+			// 'provs' => Region::listProv(),
+			// 'vendors' => Users::getUsersActiveByRole(Users::ROLE_VENDOR),
+			// 'truck_types' => ConfTruckTypes::listTruckTypes(ConfTruckTypes::IS_ACTIVE),
+		];
+
+		return view('menu_v1.reports.vehicle_trips', $data);
+	}
+
+
+}
diff --git a/app/Http/Controllers/TrackController.php b/app/Http/Controllers/TrackController.php
index d6cccaf..26dc4af 100755
--- a/app/Http/Controllers/TrackController.php
+++ b/app/Http/Controllers/TrackController.php
@@ -143,8 +143,8 @@ class TrackController extends Controller
                 $filter["start_date"] = $req->start_date;
                 $filter["end_date"] = $req->end_date;
 
-                $filter["start_date"] = strtotime(gmdate("Y-m-d H:i:s", $req->start_date));
-                $filter["end_date"] = strtotime(gmdate("Y-m-d H:i:s", $req->end_date));
+                // $filter["start_date"] = strtotime(gmdate("Y-m-d H:i:s", $req->start_date));
+                // $filter["end_date"] = strtotime(gmdate("Y-m-d H:i:s", $req->end_date));
 
                 $filter["limit"] = 100000;
             } else {
diff --git a/app/Models/Tracks.php b/app/Models/Tracks.php
index 50d3842..c809e2e 100755
--- a/app/Models/Tracks.php
+++ b/app/Models/Tracks.php
@@ -436,85 +436,88 @@ class Tracks extends Model
         $query .= " GROUP BY v.id ORDER BY tr.crt_d DESC LIMIT 500";
 
         $list = DB::select($query, $params);
-
+		// dd($list);
         // Post-processing per row
-        foreach ($list as $_list) {
-            $_list->vhc_sum_milleage =
-                optional(
-                    DB::select(
-                        "SELECT SUM(pre_milleage) as vhc_sum_milleage FROM " .
-                            self::T_TRACKS .
-                            " WHERE vhc_id = ?",
-                        [$_list->vid]
-                    )
-                )[0]->vhc_sum_milleage ?? "";
+        // foreach ($list as $_list) {
+        //     $_list->vhc_sum_milleage =
+        //         optional(
+        //             DB::select(
+        //                 "SELECT SUM(pre_milleage) as vhc_sum_milleage FROM " .
+        //                     self::T_TRACKS .
+        //                     " WHERE vhc_id = ?",
+        //                 [$_list->vid]
+        //             )
+        //         )[0]->vhc_sum_milleage ?? "";
 
-            $_list->lst_idle_at =
-                optional(
-                    DB::select(
-                        "SELECT crt_s FROM " .
-                            self::T_TRACKS .
-                            " WHERE stts_engine = ? AND vhc_id = ? AND crt_s >= (
-                    SELECT crt_s FROM " .
-                            self::T_TRACKS .
-                            " WHERE stts_engine IN (?, ?) AND vhc_id = ? AND crt_s <= ? ORDER BY id DESC LIMIT 1
-                ) ORDER BY id ASC LIMIT 1",
-                        [
-                            self::STTS_EN_IDLING,
-                            $_list->vid,
-                            self::STTS_EN_STOPING,
-                            self::STTS_EN_MOVING,
-                            $_list->vid,
-                            $_list->lst_loc_crt_s,
-                        ]
-                    )
-                )[0]->crt_s ?? "";
+        //     $_list->lst_idle_at =
+        //         optional(
+        //             DB::select(
+        //                 "SELECT crt_s FROM " .
+        //                     self::T_TRACKS .
+        //                     " WHERE stts_engine = ? AND vhc_id = ? AND crt_s >= (
+        //             SELECT crt_s FROM " .
+        //                     self::T_TRACKS .
+        //                     " WHERE stts_engine IN (?, ?) AND vhc_id = ? AND crt_s <= ? ORDER BY id DESC LIMIT 1
+        //         ) ORDER BY id ASC LIMIT 1",
+        //                 [
+        //                     self::STTS_EN_IDLING,
+        //                     $_list->vid,
+        //                     self::STTS_EN_STOPING,
+        //                     self::STTS_EN_MOVING,
+        //                     $_list->vid,
+        //                     $_list->lst_loc_crt_s,
+        //                 ]
+        //             )
+        //         )[0]->crt_s ?? "";
 
-            $_list->lst_stop_at =
-                optional(
-                    DB::select(
-                        "SELECT crt_s FROM " .
-                            self::T_TRACKS .
-                            " WHERE stts_engine = ? AND vhc_id = ? AND crt_s >= (
-                    SELECT crt_s FROM " .
-                            self::T_TRACKS .
-                            " WHERE stts_engine IN (?, ?) AND vhc_id = ? AND crt_s <= ? ORDER BY id DESC LIMIT 1
-                ) ORDER BY id ASC LIMIT 1",
-                        [
-                            self::STTS_EN_STOPING,
-                            $_list->vid,
-                            self::STTS_EN_IDLING,
-                            self::STTS_EN_MOVING,
-                            $_list->vid,
-                            $_list->lst_loc_crt_s,
-                        ]
-                    )
-                )[0]->crt_s ?? "";
+        //     $_list->lst_stop_at =
+        //         optional(
+        //             DB::select(
+        //                 "SELECT crt_s FROM " .
+        //                     self::T_TRACKS .
+        //                     " WHERE stts_engine = ? AND vhc_id = ? AND crt_s >= (
+        //             SELECT crt_s FROM " .
+        //                     self::T_TRACKS .
+        //                     " WHERE stts_engine IN (?, ?) AND vhc_id = ? AND crt_s <= ? ORDER BY id DESC LIMIT 1
+        //         ) ORDER BY id ASC LIMIT 1",
+        //                 [
+        //                     self::STTS_EN_STOPING,
+        //                     $_list->vid,
+        //                     self::STTS_EN_IDLING,
+        //                     self::STTS_EN_MOVING,
+        //                     $_list->vid,
+        //                     $_list->lst_loc_crt_s,
+        //                 ]
+        //             )
+        //         )[0]->crt_s ?? "";
 
-            $_list->lst_heartbeat =
-                optional(
-                    DB::select(
-                        "SELECT COUNT(id) as lst_heartbeat FROM " .
-                            self::T_TRACKS .
-                            " WHERE vhc_id = ? AND action = 'heartbeat' AND crt BETWEEN ? AND ? LIMIT 1",
-                        [$_list->vid, $now - 600, $now]
-                    )
-                )[0]->lst_heartbeat ?? "";
-        }
+        //     $_list->lst_heartbeat =
+        //         optional(
+        //             DB::select(
+        //                 "SELECT COUNT(id) as lst_heartbeat FROM " .
+        //                     self::T_TRACKS .
+        //                     " WHERE vhc_id = ? AND action = 'heartbeat' AND crt BETWEEN ? AND ? LIMIT 1",
+        //                 [$_list->vid, $now - 600, $now]
+        //             )
+        //         )[0]->lst_heartbeat ?? "";
+        // }
 
         return $list;
     }
 
     public static function lastMoveTracks($vid, $filter = [])
     {
+		// dd($vid, $filter);
         $now = time();
         $params = [];
         $query = "SELECT";
         $query .= " v.id as vid,v.device_id,v.nopol1,v.nopol2,v.nopol3";
         $query .= " ,tr.id as master_id,tr.latitude,tr.longitude,tr.speed,tr.orientation";
+        // ,(tr.crt + ( 7 * 3600 )) AS lst_loc_crt
+        // ,(tr.crt_d + ( 7 * 3600 )) AS lst_loc_crt_d
         $query .= "
-        ,(tr.crt + ( 7 * 3600 )) AS lst_loc_crt
-        ,(tr.crt_d + ( 7 * 3600 )) AS lst_loc_crt_d
+        ,tr.crt AS lst_loc_crt
+        ,tr.crt_d AS lst_loc_crt_d
         ,tr.crt_s AS lst_loc_crt_s";
         $query .= " ,tr.ignition,tr.stts_engine";
         $query .= " ,tr.pre_milleage,tr.sum_milleage,tr.vhc_milleage,v.sum_milleage AS vhc_sum_milleage_1";
@@ -563,61 +566,88 @@ class Tracks extends Model
         $query .= " ;";
         $rawTracks = DB::select($query, $params);
         $rawTracks = collect($rawTracks);
+		// dd($rawTracks->toJson(JSON_PRETTY_PRINT));
+		// dd($rawTracks);
 
-        $filtered = collect();
-        $zeroBlock = collect();
-        $tempBlock = collect();
+		// //  filter
+        // $filtered = collect();
+        // $zeroBlock = collect();
+        // $tempBlock = collect();
 
-        $lastIndex = $rawTracks->count() - 1;
+        // $lastIndex = $rawTracks->count() - 1;
 
-        foreach ($rawTracks as $i => $track) {
-            $isZero = $track->speed == 0;
+        // foreach ($rawTracks as $i => $track) {
+        //     $isZero = $track->speed == 0;
 
-            if ($i === $lastIndex) {
-                if ($isZero) {
-                    $zeroBlock->push($track);
-                } else {
-                    if ($zeroBlock->isNotEmpty()) {
-                        $tempBlock = $zeroBlock;
-                        $tempBlock->push($track);
+        //     if ($i === $lastIndex) {
+        //         if ($isZero) {
+        //             $zeroBlock->push($track);
+        //         } else {
+        //             if ($zeroBlock->isNotEmpty()) {
+        //                 $tempBlock = $zeroBlock;
+        //                 $tempBlock->push($track);
 
-                        $zerosOnly = $tempBlock->filter(fn($t) => $t->speed == 0);
+        //                 $zerosOnly = $tempBlock->filter(fn($t) => $t->speed == 0);
 
-                        if ($zerosOnly->count() === 1) {
-                            $filtered->push($zerosOnly->first());
-                        } elseif ($zerosOnly->count() > 1) {
-                            $filtered->push($zerosOnly->first());
-                            $filtered->push($zerosOnly->last());
-                        }
-                    } else {
-                        $filtered->push($track);
-                    }
-                }
-                continue;
-            }
+        //                 if ($zerosOnly->count() === 1) {
+        //                     $filtered->push($zerosOnly->first());
+        //                 } elseif ($zerosOnly->count() > 1) {
+        //                     $filtered->push($zerosOnly->first());
+        //                     $filtered->push($zerosOnly->last());
+        //                 }
+        //             } else {
+        //                 $filtered->push($track);
+        //             }
+        //         }
+        //         continue;
+        //     }
+		// 	// 
+        //     if ($isZero) {
+        //         $zeroBlock->push($track);
+        //     } else {
+        //         if ($zeroBlock->isNotEmpty()) {
+        //             $filtered->push($zeroBlock->first());
+        //             $zeroBlock = collect();
+        //         }
+        //         $filtered->push($track);
+        //     }
+        // }
 
-            if ($isZero) {
-                $zeroBlock->push($track);
-            } else {
-                if ($zeroBlock->isNotEmpty()) {
-                    $filtered->push($zeroBlock->first());
-                    $zeroBlock = collect();
-                }
-                $filtered->push($track);
-            }
-        }
+        // if ($zeroBlock->isNotEmpty() && $rawTracks->last()->speed == 0) {
+        //     if ($zeroBlock->count() === 1) {
+        //         $filtered->push($zeroBlock->first());
+        //     } else {
+        //         $filtered->push($zeroBlock->first());
+        //         $filtered->push($zeroBlock->last());
+        //     }
+        // }
+
+		// grouping by trip
+		$groupTrip = [];
+		$temp = [];
+
+		// loop from top to bottom
+		foreach ($rawTracks as $item) {
+			if ($item->ignition == 4) {
+				// collect data when ignition is 4
+				$temp[] = $item;
+			} else {
+				// if ignition != 4, save group if exists then reset
+				if (!empty($temp)) {
+					$groupTrip[] = $temp;
+					$temp = [];
+				}
+			}
+		}
+		// add last collected group if any
+		if (!empty($temp)) {
+			$groupTrip[] = $temp;
+		}
+		// dd($groupTrip);
 
-        if ($zeroBlock->isNotEmpty() && $rawTracks->last()->speed == 0) {
-            if ($zeroBlock->count() === 1) {
-                $filtered->push($zeroBlock->first());
-            } else {
-                $filtered->push($zeroBlock->first());
-                $filtered->push($zeroBlock->last());
-            }
-        }
 
         // return $filtered->take(500);
-        return $filtered;
+        return $groupTrip;
     }
 
     public static function nearestInCircle($lat, $lng, $rad, $filter = [])
diff --git a/resources/views/app/app.blade.php b/resources/views/app/app.blade.php
index fc22308..98fcee2 100755
--- a/resources/views/app/app.blade.php
+++ b/resources/views/app/app.blade.php
@@ -15,6 +15,7 @@
     <link href="{{ asset('assets/vendor/DataTables/datatables.css') }}" rel="stylesheet">
     <link href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
     <link href="{{ asset('assets/css/meus.css') }}" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha512-f0tzWhCwVFS3WeYaofoLWkTP62ObhewQ1EZn65oSYDZUg1+CyywGKkWzm8BxaJj5HGKI72PnMH9jYyIFz+GH7g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
         .landscape-photo {
             max-height: max(21vh, 210px);
@@ -75,6 +76,8 @@
     <script src="{{ asset('assets/js/moment.min.js') }}"></script>
     <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
     <script src="{{ asset('assets/js/helper.js') }}"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
     <script>
         const AppState = {
             user_role: {
diff --git a/resources/views/menu_v1/dashboard.blade.php b/resources/views/menu_v1/dashboard.blade.php
index f9aab50..5763216 100755
--- a/resources/views/menu_v1/dashboard.blade.php
+++ b/resources/views/menu_v1/dashboard.blade.php
@@ -21,6 +21,10 @@
             display: none;
         }
 
+		.leaflet-routing-container {
+			display: none !important;
+		}
+
         #openLeftSideBar1Mobile {
             display: none;
         }
@@ -402,11 +406,11 @@
                     <div>
                         <div class="mb-2">
                             <label class="text-muted">From</label>
-                            <input class="form-control" type="date" id="historyStartDate">
+                            <input class="form-control" id="historyStartDate">
                         </div>
                         <div class="mb-3">
                             <label class="text-muted">To</label>
-                            <input class="form-control" type="date" id="historyEndDate">
+                            <input class="form-control" id="historyEndDate">
                         </div>
                     </div>
                     <div id="infoMove-plots" class="infoMove-plots">
@@ -519,9 +523,11 @@
     <script src="{{ asset('assets/vendor/leaflet-1.7.1/leaflet-src.js') }}"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdn.jsdelivr.net/npm/leaflet-rotatedmarker@0.2.0/leaflet.rotatedMarker.min.js"></script>
-    {{-- <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script> --}}
+    <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
+
     <script>
         'use strict';
+		
         const State = {
             isDrawPolygon: 0,
             timingRouteAnimation: 100,
@@ -737,6 +743,13 @@
                     $('#rightSideBar1').addClass('d-none');
                     $('#openRightSideBar1').removeClass('d-none');
                 }
+
+				$('#historyStartDate, #historyEndDate').datetimepicker({
+					format:'d-m-Y H:i',
+					defaultTime:'00:00',
+					closeOnDateSelect: true,
+					// mask:true
+				});
             },
             calcIdlingDur: function(lst_idle_unix, lst_speed) {
                 let now = moment();
@@ -760,19 +773,19 @@
                 };
             },
             calcPeriodeDate: function(startDate, endDate) {
-                if (startDate.format('YYYY-MM-DD') === 'Invalid date') {
+                if (startDate.format('YYYY-MM-DD HH:mm') === 'Invalid date') {
                     Helper.toast('Warning', 'just now', 'Start date of the period is not valid');
                     return {
                         isValid: false
                     };
                 }
-                if (endDate.format('YYYY-MM-DD') === 'Invalid date') {
+                if (endDate.format('YYYY-MM-DD HH:mm') === 'Invalid date') {
                     Helper.toast('Warning', 'just now', 'End date of the period is not valid');
                     return {
                         isValid: false
                     };
                 }
-                endDate.add(23, 'hour').add(59, 'minutes').add(59, 'seconds');
+                // endDate.add(23, 'hour').add(59, 'minutes').add(59, 'seconds');
                 const duration = moment.duration(endDate.diff(startDate));
                 const diffDays = duration.days();
                 if (diffDays > 30) {
@@ -814,7 +827,7 @@
                 // Leaflet.map = L.map('map').setView([-7.1451449, 109.9776078], 8); // centering javanese province
                 // Leaflet.map = L.map('map').setView([-7.8241413, 112.9071746], 9); // centering east java province
                 // Leaflet.map = L.map('map').setView([-6.2106272, 106.8477106], 9); // centering east java province
-                Leaflet.map = L.map('map').setView([-8.90507, 125.9945732], 10); // centering east java province
+                Leaflet.map = L.map('map').setView([-8.90507, 125.9945732], 10); // centering timor leste
                 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                     attribution: 'Map data &copy; <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                     // maxZoom: 20,
@@ -887,6 +900,11 @@
                 if (locs.constructor === Array) {
                     let circles = [];
                     for (let i = 0; i < locs.length; i++) {
+						// invisible circle
+						if(locs[i].options?.markerOpacity == 0){
+							locs[i].options.opacity = 0
+							locs[i].options.fill = false
+						}
                         let circle = L.circle([locs[i].lat, locs[i].lng], locs[i]?.options);
                         circle.bindPopup(locs[i]?.label || '');
                         circle.bindTooltip(locs[i]?.label || '');
@@ -914,6 +932,31 @@
                 if (cb) cb(polyline);
                 return polyline;
             },
+            addRoutes: function(locs = [], cb = null) {
+                let latLngs = [];
+                for (let i = 0; i < locs.length; i++) {
+                    latLngs.push([locs[i].lat, locs[i].lng]);
+                }
+				let routes = L.Routing.control({
+					waypoints: latLngs.reverse(), // reverse to make first point as start
+					// router: L.Routing.osrmv1(),
+					router: L.Routing.osrmv1({
+						serviceUrl: "https://brilianapps.britimorleste.tl/osrm-backend/route/v1",
+					}),
+					show: false,
+					itinerary: null, // 👈 completely removes the panel
+					addWaypoints: false, // ❌ prevent adding points by clicking
+					draggableWaypoints: false, // ❌ prevent dragging markers
+					routeWhileDragging: false, // optional: don’t reroute while dragging
+					createMarker: () => null,
+					lineOptions:{
+						styles: [{ color: locs[0]?.options?.color, weight: 5, opacity: 0.7 }],
+					},
+				}).addTo(Leaflet.map)
+
+                if (cb) cb(routes);
+                return routes;
+            },
             // start custom polylines
             addCustomPolylines: function(locs = [], cb = null) {
                 const radius = 0.5 /* corner smooth radius, keep value in range 0 - 0.5 to avoid artifacts */
@@ -1077,6 +1120,7 @@
                         if (cb) cb();
                     }
                 } else if (type == 'eventRemoveRouteStartEnd') {
+					// console.log('clear route eventRemoveRouteStartEnd');
                     if (State.eventRemoveRouteStartEnd) {
                         window.dispatchEvent(State.eventRemoveRouteStartEnd);
                         if (cb) cb();
@@ -1251,7 +1295,7 @@
                     $('#infoMovement').addClass('d-none');
                 } else if (type == State.stts_filterDetail.lastMove) { // last movement
                     $('#infoVehicles').addClass('d-none');
-                    $('#infoDriver').addClass('d-none');
+                    // $('#infoDriver').addClass('d-none');
                     $('#infoJob').addClass('d-none');
                     $('#infoMovement').removeClass('d-none');
                     $('#infoMovement').addClass('d-block');
@@ -1353,7 +1397,11 @@
             eventListMovement: function() {
                 $('#infoMove-plots').on('click', '.plotMove-item', function(e) {
                     let tr = JSON.parse(decodeURIComponent(window.atob($(e.target).closest('.plotMove-item').data('obj'))));
+					// console.log("tr", tr);
+					
                     let arrIdx = Helper.getIndexReversedSequence(tr.key_index - 1, Trucks.last_move.length - 1);
+					// console.log("arrIdx", arrIdx);
+					
                     PgBar.setCrntVal(arrIdx);
                     Menu.createMarkerDetailPlotMovement(tr);
                 })
@@ -1457,36 +1505,50 @@
                 });
             },
             eventFilterHistoryDate: function() {
-                $('#historyStartDate').on('change', function(e) {
+                $('#historyStartDate, #historyEndDate').on('change', function(e) {
+					const date0 = moment($('#historyStartDate').val(), "DD-MM-YYYY HH:mm")
+					const date1 = moment($('#historyEndDate').val(), "DD-MM-YYYY HH:mm")
                     const {
                         isValid,
                         data
-                    } = Wrapper.calcPeriodeDate(moment($('#historyStartDate').val()), moment($('#historyEndDate').val()))
+                    } = Wrapper.calcPeriodeDate(
+						date0,
+						date1
+					)
                     if (!isValid) return false;
-                    State.historyStartDate = data.startDate.unix();
-                    State.historyEndDate = data.endDate.unix();
+					// console.log("isValid", isValid, data);
+					
+                    State.historyStartDate = date0.unix();
+                    State.historyEndDate = date1.unix();
 
                     Leaflet.clearLayer('eventRemoveRouteStartEnd');
                     Trucks.bundleShowRouteTruck(false);
                 });
-                $('#historyEndDate').on('change', function(e) {
-                    const {
-                        isValid,
-                        data
-                    } = Wrapper.calcPeriodeDate(moment($('#historyStartDate').val()), moment($('#historyEndDate').val()))
-                    if (!isValid) return false;
-                    State.historyStartDate = data.startDate.unix();
-                    State.historyEndDate = data.endDate.unix();
+                // $('#historyEndDate').on('change', function(e) {
+                //     const {
+                //         isValid,
+                //         data
+                //     } = Wrapper.calcPeriodeDate(moment($('#historyStartDate').val()), moment($('#historyEndDate').val()))
+                //     if (!isValid) return false;
+                //     State.historyStartDate = data.startDate.unix();
+                //     State.historyEndDate = data.endDate.unix();
 
-                    Leaflet.clearLayer('eventRemoveRouteStartEnd');
-                    Trucks.bundleShowRouteTruck(false);
-                });
+                //     Leaflet.clearLayer('eventRemoveRouteStartEnd');
+                //     Trucks.bundleShowRouteTruck(false);
+                // });
                 $('#historyStartDate').on('clearFilterHistoryDate', function(e) {
-                    State.historyStartDate = '';
-                    State.historyEndDate = '';
-                    $('#historyStartDate').val('');
-                    $('#historyEndDate').val('');
-                });
+					// default date today
+                    State.historyStartDate = moment().startOf('day').unix();
+                    State.historyEndDate = moment().endOf('day').unix();
+					$('#historyStartDate').val(moment().startOf('day').format('DD-MM-YYYY HH:mm'));
+					$('#historyEndDate').val(moment().endOf('day').format('DD-MM-YYYY HH:mm'));
+
+					// // for testing purpose
+                    // State.historyStartDate = '1756054800';
+                    // State.historyEndDate = '1756141140';
+					// $('#historyStartDate').val("25-08-2025 00:00");
+					// $('#historyEndDate').val("25-08-2025 23:59");
+				});
             },
             handlerFilterPopupVhcMarker: function(markers) {
                 if (State.inShowLastMove) {
@@ -2453,7 +2515,7 @@
             //                     <p id="" class="mb-0">JNE</p>
             //                 </div>
             //                 <div class="col-auto">
-            //                     <small class="text-muted">Destination</small>
+                                // <small class="text-muted">Destination</small>
             //                     <p id="" class="mb-0">JKT-01</p></div>
             //             </div>
             //         </li>
@@ -2501,13 +2563,16 @@
             bundleShowRouteTruck: async function(cache = false) {
                 Menu.clearListMovements();
                 if (State.inShowVid != State.loadedLastMoveVid) $('#historyStartDate').trigger('clearFilterHistoryDate');
-                Trucks.last_move = await Trucks.getLastMove(State.inShowVid, cache);
+
+				const getLastMove = await Trucks.getLastMove(State.inShowVid, cache);
+				Trucks.last_move = getLastMove.flat()
+				
                 if (Trucks.last_move.length < 1) {
                     Helper.toast('Data Not Found', 'just now', 'There are no last data', 'bg-warning');
                     Trucks.last_move = null;
                     return false;
                 }
-                Trucks.showLastMoveToView(Trucks.last_move);
+                Trucks.showLastMoveToView(getLastMove);
             },
             getLastMove: async function(vid, cache = false) {
                 State.loadedLastMoveVid = vid;
@@ -2568,84 +2633,208 @@
             showLastMoveToView: function(truckRoutes) {
                 // Leaflet.clearLayer('eventAboutTruck');
                 Leaflet.hideLayer('eventHideAllTruck');
-                Trucks.routeStartEnd(truckRoutes);
+                // Trucks.routeStartEnd(truckRoutes);
+                Trucks.routeStartEndGroupTrip(truckRoutes);
             },
-            routeStartEnd: function(truckRoutes) {
-                let key_length = truckRoutes.length;
-                let polyTruckRoutes = truckRoutes.map((obj, key) => {
-                    obj.key_index = key + 1 // key_length - key;
-                    // lists per detail info movement
-                    Menu.showToListMovement(obj);
-                    return {
-                        lat: obj.latitude,
-                        lng: obj.longitude,
-                        options: {
-                            // polyline
-                            smoothFactor: 1.0,
-                            noClip: true,
-                            bubblingMouseEvents: false,
-                            // circle
-                            radius: 2,
-                        },
-                        // circle
-                        // label: `<b>${obj.key_index}</b><br>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}<br>${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>Speed: ${(typeof obj.speed != 'undefined') ? obj.speed : '0'}<br>${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
-                        // label: `<b>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</b><br>${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
-                        label: `<b>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</b><br>${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
-                    }
-                });
+            // routeStartEnd: function(truckRoutes) {
+            //     let key_length = truckRoutes.length;
+            //     let polyTruckRoutes = truckRoutes.map((obj, key) => {
+					
+            //         obj.key_index = key + 1 // key_length - key;
+            //         // lists per detail info movement
+            //         Menu.showToListMovement(obj);
+            //         return {
+            //             lat: obj.latitude,
+            //             lng: obj.longitude,
+            //             options: {
+            //                 // polyline
+            //                 smoothFactor: 1.0,
+            //                 noClip: true,
+            //                 bubblingMouseEvents: false,
+            //                 // circle
+            //                 radius: 5,
+			// 				// markerOpacity: 0
+            //             },
+            //             // circle
+            //             // label: `<b>${obj.key_index}</b><br>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}<br>${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>Speed: ${(typeof obj.speed != 'undefined') ? obj.speed : '0'}<br>${Number(obj.latitude).toFixed(5)} - ${Number(obj.longitude).toFixed(6)}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
+            //             // label: `<b>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</b><br>${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
+            //             label: `<b>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</b><br>${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
+            //         }
+            //     });
 
-                let polyline = Leaflet.addPolylines(polyTruckRoutes);
-                Leaflet.map.fitBounds(polyline.getBounds());
-                // let ctrWaypoint = Leaflet.addWaypoints(polyTruckRoutes.slice(0, 100))
+            //     let polyline = Leaflet.addPolylines(polyTruckRoutes);
+            //     Leaflet.map.fitBounds(polyline.getBounds());
+            //     // let ctrWaypoint = Leaflet.addWaypoints(polyTruckRoutes.slice(0, 100))
 
-                Leaflet.addCircles(polyTruckRoutes, function(circle, i) {
-                    window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
-                        circle.remove();
-                    });
-                    circle.on('click', function() {
-                        PgBar.syncToPlotTravelHistory(i);
-                    })
-                });
+            //     Leaflet.addCircles(polyTruckRoutes, function(circle, i) {
+            //         window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
+            //             circle.remove();
+            //         });
+            //         circle.on('click', function() {
+            //             PgBar.syncToPlotTravelHistory(i);
+            //         })
+            //     });
 
-                let start = truckRoutes.at(-1);
-                let finish = truckRoutes.at(0);
-                // ${(start?.city_text || start?.state_tex || 'address't)} - ${(start?.postcode || 'postcode')}
-                // ${(finish?.city_text || finish?.state_text || 'address')} - ${(finish?.postcode || 'postcode')}
-                let startMarker = Leaflet.addMarkers({
-                    lat: start.latitude,
-                    lng: start.longitude,
-                    label: `<b>Start Poin</b><br>${start.nopol1} ${start.nopol2} ${start.nopol3}<br>${moment.unix(start?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}<br>${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}<br>${decodeURIComponent(start.fulladdress || 'address')}`,
-                    // label: `<b>Start Poin</b><br>${start.nopol1} ${start.nopol2} ${start.nopol3}<br>${moment.unix(start?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}<br>${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}<br>${decodeURIComponent(start.fulladdress || 'address')}`,
-                    options: {
-                        icon: Icon.titikAwal(),
-                        // rotationAngle: 290
-                    }
-                });
-                let finishMarker = Leaflet.addMarkers({
-                    lat: finish.latitude,
-                    lng: finish.longitude,
-                    label: `<b>End Poin</b><br>${finish.nopol1} ${finish.nopol2} ${finish.nopol3}<br>${moment.unix(finish?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}<br>${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}<br>${decodeURIComponent(finish.fulladdress || 'address')}`,
-                    //label: `<b>End Poin</b><br>${finish.nopol1} ${finish.nopol2} ${finish.nopol3}<br>${moment.unix(finish?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}<br>${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}<br>${decodeURIComponent(finish.fulladdress || 'address')}`,
-                    options: {
-                        icon: Icon.titikAkhir()
-                    }
-                });
+            //     let start = truckRoutes.at(-1);
+            //     let finish = truckRoutes.at(0);
+            //     // ${(start?.city_text || start?.state_tex || 'address't)} - ${(start?.postcode || 'postcode')}
+            //     // ${(finish?.city_text || finish?.state_text || 'address')} - ${(finish?.postcode || 'postcode')}
+            //     let startMarker = Leaflet.addMarkers({
+            //         lat: start.latitude,
+            //         lng: start.longitude,
+            //         label: `<b>Start Poin</b><br>${start.nopol1} ${start.nopol2} ${start.nopol3}<br>${moment.unix(start?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}<br>${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}<br>${decodeURIComponent(start.fulladdress || 'address')}`,
+            //         // label: `<b>Start Poin</b><br>${start.nopol1} ${start.nopol2} ${start.nopol3}<br>${moment.unix(start?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}<br>${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}<br>${decodeURIComponent(start.fulladdress || 'address')}`,
+            //         options: {
+            //             icon: Icon.titikAwal(),
+            //             // rotationAngle: 290
+            //         }
+            //     });
+            //     let finishMarker = Leaflet.addMarkers({
+            //         lat: finish.latitude,
+            //         lng: finish.longitude,
+            //         label: `<b>End Poin</b><br>${finish.nopol1} ${finish.nopol2} ${finish.nopol3}<br>${moment.unix(finish?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}<br>${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}<br>${decodeURIComponent(finish.fulladdress || 'address')}`,
+            //         //label: `<b>End Poin</b><br>${finish.nopol1} ${finish.nopol2} ${finish.nopol3}<br>${moment.unix(finish?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof finish.lst_speed != 'undefined') ? finish.lst_speed : '0'}<br>${Number(finish.latitude).toFixed(5)},${Number(finish.longitude).toFixed(6)}<br>${decodeURIComponent(finish.fulladdress || 'address')}`,
+            //         options: {
+            //             icon: Icon.titikAkhir()
+            //         }
+            //     });
+
+            //     // remove marker, circle, event listener and all about this marker
+            //     State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
+            //         startMarker,
+            //         finishMarker,
+            //         polyline,
+            //         polyline,
+            //     });
+            //     window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
+            //         startMarker.removeEventListener('click');
+            //         startMarker.removeEventListener('moveend');
+            //         startMarker.remove();
+            //         finishMarker.removeEventListener('click');
+            //         finishMarker.removeEventListener('moveend');
+            //         finishMarker.remove();
+            //         polyline.remove();
+            //         e.currentTarget.removeEventListener(e.type,
+            //             handler); // window.removeEventListener('remove', this.handler, true);
+            //         State.eventRemoveRouteStartEnd = null;
+            //         State.inShowLastMove = null;
+
+            //         PgBar.tglMenuPlayback(false);
+            //         PgBar.reset();
+            //     });
+
+            //     PgBar.setMinMax(0, truckRoutes.length - 1);
+            // },
+            routeStartEndGroupTrip: function(truckRoutes) {
+				const colors = [
+					"#2980B9",  // Dark Blue
+					"#C0392B", // Dark Red
+					"#27AE60", // Dark Green
+					"#D35400", // Dark Orange
+					"#F39C12", // Dark Yellow/Gold
+				]
+				let i = 1
+				let polyTruckRoutes = truckRoutes.map((groupTrip, key0) => {
+					return groupTrip.map((obj, key) => {
+						obj.key_index = i++
+						// console.log("obj", obj.key_index);
+						
+						Menu.showToListMovement(obj)
+						
+						// add start end marker per group trip
+						if(key == 0 || key == groupTrip.length - 1)
+							Leaflet.addMarkers({
+								lat: obj.latitude,
+								lng: obj.longitude,
+								label: `
+									<b>Start Poin</b><br>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}<br>
+									${moment.unix(obj?.lst_loc_crt).format('DD MMM YYYY HH:mm')}<br>
+									Speed: ${(typeof obj.lst_speed != 'undefined') ? obj.lst_speed : '0'}<br>
+									${Number(obj.latitude).toFixed(5)},${Number(obj.longitude).toFixed(6)}<br>
+									${decodeURIComponent(obj.fulladdress || 'address')}
+								`,
+								// label: `<b>Start Poin</b><br>${start.nopol1} ${start.nopol2} ${start.nopol3}<br>${moment.unix(start?.lst_loc_crt_d).utcOffset(9 * 60).format('DD MMM YYYY HH:mm:ss')}<br>Speed: ${(typeof start.lst_speed != 'undefined') ? start.lst_speed : '0'}<br>${Number(start.latitude).toFixed(5)},${Number(start.longitude).toFixed(6)}<br>${decodeURIComponent(start.fulladdress || 'address')}`,
+								options: {
+									icon: (key == 0) ? Icon.titikAkhir() : (key == (groupTrip.length - 1)) ? Icon.titikAwal() : null,
+									// rotationAngle: 290
+								}
+							})
+
+						return {
+							lat: obj.latitude,
+							lng: obj.longitude,
+							options: {
+								// polyline
+								color : colors[key0 % colors.length],
+								smoothFactor : 0,
+								noClip : true,
+								bubblingMouseEvents : false,
+								// circle
+								radius: 5,
+								markerOpacity: 0
+							},
+							label: `<b>${obj.nopol1} ${obj.nopol2} ${obj.nopol3}</b><br>${moment.unix(obj?.lst_loc_crt_d).format('DD MMM YYYY HH:mm:ss')}<br>${decodeURIComponent(obj?.fulladdress || 'address')}`,
+							// startLast : (key == 0) ? 0 : (key == (groupTrip.length - 1)) ? 1 : null,
+						}
+					})					
+				})
+				// console.log("truckRoutes update", polyTruckRoutes);
+
+				polyTruckRoutes.forEach((poly, idx) => {
+					// console.log("poly", poly);					
+					let polyline = Leaflet.addRoutes(poly)
+					// let polyline = Leaflet.addPolylines(poly)
+					// if(idx == 0)
+						// Leaflet.map.fitBounds(polyline.getBounds());
+
+
+					// let circlesStartStop = [...poly.filter((p, i) => i == 0 || i == (poly.length - 1))]
+					let circlesStartStop = []
+					// console.log("circlesStartStop", circlesStartStop);
+					
+					Leaflet.addCircles(poly, function(circle, i) {
+						if(i == 0 || i == (polyTruckRoutes.length - 1))
+							circlesStartStop.push(circle)
+
+						window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
+							circle.remove();
+						});
+						circle.on('click', function() {
+							PgBar.syncToPlotTravelHistory(i);
+						})
+					});
+					
+					// // remove marker, circle, event listener and all about this marker
+					State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
+						detail: {
+							polyline,
+							circlesStartStop
+						}
+					});
+
+					window.addEventListener('eventRemoveRouteStartEnd', function (e) {
+					// console.log("circlesStartStop", circlesStartStop);
+						polyline.remove();
+						circlesStartStop.forEach(c => c.remove())
+					});
+					// State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
+					// 	polyline,
+					// 	circlesStartStop,
+					// });
+					// console.log("polyline", polyline);
+					// console.log("circlesStartStop", circlesStartStop);
+					// console.log("State.eventRemoveRouteStartEnd", State.eventRemoveRouteStartEnd);
+					
+				})
 
-                // remove marker, circle, event listener and all about this marker
-                State.eventRemoveRouteStartEnd = new CustomEvent('eventRemoveRouteStartEnd', {
-                    startMarker,
-                    finishMarker,
-                    polyline,
-                    polyline,
-                });
                 window.addEventListener('eventRemoveRouteStartEnd', function handler(e) {
-                    startMarker.removeEventListener('click');
-                    startMarker.removeEventListener('moveend');
-                    startMarker.remove();
-                    finishMarker.removeEventListener('click');
-                    finishMarker.removeEventListener('moveend');
-                    finishMarker.remove();
-                    polyline.remove();
+                    // startMarker.removeEventListener('click');
+                    // startMarker.removeEventListener('moveend');
+                    // startMarker.remove();
+                    // finishMarker.removeEventListener('click');
+                    // finishMarker.removeEventListener('moveend');
+                    // finishMarker.remove();
+                    // polyline.remove();
                     e.currentTarget.removeEventListener(e.type,
                         handler); // window.removeEventListener('remove', this.handler, true);
                     State.eventRemoveRouteStartEnd = null;
@@ -2655,7 +2844,7 @@
                     PgBar.reset();
                 });
 
-                PgBar.setMinMax(0, truckRoutes.length - 1);
+                PgBar.setMinMax(0, Trucks.last_move.length - 1);
             },
             routePerPoint: function() {
                 Leaflet.addMarkers(truckRoutes.routes.map((obj) => {
diff --git a/resources/views/menu_v1/reports/vehicle_trips.blade.php b/resources/views/menu_v1/reports/vehicle_trips.blade.php
new file mode 100644
index 0000000..1971291
--- /dev/null
+++ b/resources/views/menu_v1/reports/vehicle_trips.blade.php
@@ -0,0 +1,614 @@
+@php
+    $user_role = Auth::user()->role;
+@endphp
+
+@extends('app.app')
+
+@section('title')
+    Vehicles
+@endsection
+
+@section('customcss')
+@endsection
+
+@section('content')
+    <div class="container-fluid">
+        <div class="content">
+            <div class="card">
+                <div class="card-header">
+                    <div class="row d-flex align-items-center">
+                        <div class="col-3">
+                            <p class="card-title text-bold mb-0">Vehicle Trips Report</p>
+                        </div>
+                        @if ($user_role == \App\Models\Users::ROLE_VENDOR || $user_role == \App\Models\Users::ROLE_ADMIN)
+                            @can('vehicle.create')
+                                <!-- <div class="col text-end">
+                                    <button id="btnMdlNewVhc" class="btn btn-sm btn-danger">Add New Vehicle</button>
+                                </div> -->
+                            @endcan
+
+                            {{-- <div class="col-auto text-end ps-0">
+                                <button class="btn btn-sm btn-danger">Upload</button>
+                            </div> --}}
+                        @endif
+                        <div class="col-auto text-end ps-0">
+                            <!-- <button class="btn btn-sm btn-danger">Download</button> -->
+                        </div>
+                    </div>
+                </div>
+                <div class="card-body">
+					<!-- filter -->
+					<div class="row">
+						<div class="col-2">
+							<div class="form-group">
+								<label class="text-muted">From</label>
+								<input type="date" class="form-control"id="tgl0" value="2025-08-01">
+							</div>
+						</div>
+						<div class="col-2">
+							<div class="form-group">
+								<label class="text-muted">To</label>
+								<input type="date" class="form-control" id="tgl1" value="2025-08-28">
+							</div>
+						</div>
+						<div class="col-2 d-flex align-items-end">
+							<!-- <button class="btn btn-sm btn-danger">Filter</button> -->
+                            <button class="btn btn-sm btn-danger">Download</button>
+						</div>
+
+					</div>
+					</div>
+                    <div class="table-responsive p-2">
+                        <table id="tVehicleTrips" class="table table-hover dataTable ">
+                            <thead>
+                                <tr class="">
+                                    <!-- <th class="">#</th> -->
+                                    <!-- <th class="text-center">Action</th> -->
+                                    <th class="">Vehicle Name</th>
+                                    <th class="">License Plate Number</th>
+                                    <th class="">Number of Trips</th>
+                                    <th class="">Total Milage (km)</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+								<tr>
+									<td>24-679</td>
+									<td>24-679</td>
+									<td>26</td>
+									<td>442.3</td>
+								</tr>
+								<tr>
+									<td>24-682</td>
+									<td>24-682</td>
+									<td>28</td>
+									<td>312.7</td>
+								</tr>
+								<tr>
+									<td>24-877</td>
+									<td>24-877</td>
+									<td>15</td>
+									<td>276.4</td>
+								</tr>
+								<tr>
+									<td>A.16-347</td>
+									<td>A.16-347</td>
+									<td>37</td>
+									<td>543.2</td>
+								</tr>
+								<tr>
+									<td>AL2025-B21</td>
+									<td>AL2025-B21</td>
+									<td>18</td>
+									<td>295.4</td>
+								</tr>
+								<tr>
+									<td>B.16-542</td>
+									<td>B.16-542</td>
+									<td>32</td>
+									<td>478.2</td>
+								</tr>
+								<tr>
+									<td>B.24-264</td>
+									<td>B.24-264</td>
+									<td>24</td>
+									<td>188.4</td>
+								</tr>
+								<tr>
+									<td>B.24-274</td>
+									<td>B.24-274</td>
+									<td>33</td>
+									<td>440.1</td>
+								</tr>
+								<tr>
+									<td>Ford Ranger</td>
+									<td>26-199</td>
+									<td>30</td>
+									<td>631.4</td>
+								</tr>
+								<tr>
+									<td>Nissan AD</td>
+									<td>B.10-517</td>
+									<td>27</td>
+									<td>375.9</td>
+								</tr>
+								<tr>
+									<td>Triton</td>
+									<td>A.29-127</td>
+									<td>26</td>
+									<td>508.2</td>
+								</tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+	<!-- modal -->
+@endsection
+
+@section('customjs')
+    <script src="{{ asset('assets/js/load-image.all.min.js') }}"></script>
+    <script>
+        'use strict';
+        const State = {
+            file_jimp_worker: "{{ asset('assets/js/worker/jimp.js') }}",
+            storage_lara: "{{ asset('storage') }}/",
+            dvc_type: {
+                built_in: "{{ \App\Models\Devices::TYPE_BUILT_IN }}",
+                portable: "{{ \App\Models\Devices::TYPE_PORTABLE }}",
+            },
+        };
+
+        const Wrapper = {
+            activate: function() {
+                Wrapper.event();
+                DTable.activate();
+            },
+            event: function() {
+                $('#add-device_id').select2({
+                    dropdownParent: $('#mdlNewVhc'),
+                });
+                $('#add-brand').select2({
+                    dropdownParent: $('#mdlNewVhc'),
+                });
+                $('#add-type').select2({
+                    dropdownParent: $('#mdlNewVhc'),
+                });
+                $('#add-model').select2({
+                    dropdownParent: $('#mdlNewVhc'),
+                });
+                $('#add-dcurrent').select2({
+                    dropdownParent: $('#mdlNewVhc'),
+                });
+                $('#add-dassign').select2({
+                    dropdownParent: $('#mdlNewVhc'),
+                });
+                $('#add-vendor_id').select2({
+                    dropdownParent: $('#mdlNewVhc'),
+                });
+
+                $('#edt-device_id').select2({
+                    dropdownParent: $('#mdlEdtVhc'),
+                });
+                $('#edt-brand').select2({
+                    dropdownParent: $('#mdlEdtVhc'),
+                });
+                $('#edt-type').select2({
+                    dropdownParent: $('#mdlEdtVhc'),
+                });
+                $('#edt-model').select2({
+                    dropdownParent: $('#mdlEdtVhc'),
+                });
+                $('#edt-dcurrent').select2({
+                    dropdownParent: $('#mdlEdtVhc'),
+                });
+                $('#edt-dassign').select2({
+                    dropdownParent: $('#mdlEdtVhc'),
+                });
+                $('#edt-vendor_id').select2({
+                    dropdownParent: $('#mdlEdtVhc'),
+                });
+            },
+        };
+
+        const DTable = {
+            activate: function() {
+                DTable.reload();
+            },
+            reload: function() {
+                $('#tVehicleTrips').DataTable();
+                // if (Driver.Table.firstInitDataTable == 1) { loadTableSkeletonLoading() } else { Driver.Table.firstInitDataTable = 1; }
+                // $('#tVehicles').DataTable({
+                //     processing: true,
+                //     serverSide: false,
+                //     bLengthChange: true,
+                //     deferRender: true,
+                //     destroy: true,
+                //     ajax: {
+                //         url: "{{ route('api_report_vehicle_trips_list') }}?cptid=" + AppState.current_company,
+                //         type: 'GET',
+                //         complete: function() {
+                //             // removeTableSkeletonLoading()
+                //         },
+                //     },
+                //     deferRender: true,
+                //     columns: [{
+                //             data: 'DT_RowIndex',
+                //             className: 'text-end',
+                //             visible: true,
+                //             orderable: true,
+                //             searchable: true,
+                //         },
+                //         {
+                //             data: 'action',
+                //             className: 'text-center',
+                //             visible: true,
+                //             orderable: true,
+                //             searchable: true,
+                //             render: function(data, type, row, meta) {
+                //                 let action = `
+				// 					<a href="#" class="text-decoration-none me-1 btnEdtVhc">
+				// 						<span class="icon ion-eye fz-16"></span>
+				// 					</a>
+				// 				`;
+                //                 // <a href="#" class="text-decoration-none text-danger btnDelVhc">
+                //                 //     <span class="icon ion-trash-b fz-16"></span>
+                //                 // </a>
+                //                 return action;
+                //             }
+                //         },
+                //         {
+                //             data: 'name',
+                //             className: 'text-start text-nowrap',
+                //             visible: true,
+                //             orderable: true,
+                //             searchable: true,
+                //             render: function(data, type, row, meta) {
+                //                 return `
+                //                     <img src="${State.storage_lara}${row.fvhc_img}" class="img-fluid thumb-img-table" /><br>
+                //                     ${row.nopol1} ${row.nopol2} ${row.nopol3}
+                //                 `;
+                //             },
+                //             createdCell: function(td, cellData, rowData, row, col) {
+                //                 $(td).attr('data-vid', rowData.vid);
+                //                 $(td).attr('data-name', rowData.name);
+                //                 $(td).attr('data-nopol1', rowData.nopol1);
+                //                 $(td).attr('data-nopol2', rowData.nopol2);
+                //                 $(td).attr('data-nopol3', rowData.nopol3);
+                //             },
+                //         },
+                //         // {
+                //         //     data: 'stnk_img',
+                //         //     className: 'text-start text-nowrap',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         // exp: ${row.stnk_exp?.split('-').reverse().join('-') || ''}
+                //         //         return `
+                //     //             <img src="${State.storage_lara}${data}" class="img-fluid thumb-img-table" /><br>
+                //     //             ${row.nopol1} ${row.nopol2} ${row.nopol3}<br>
+                //     //             exp: ${moment(row.stnk_exp).format('DD MMM YYYY') || '-'}
+                //     //         `;
+                //         //     },
+                //         // },
+                //         {
+                //             data: 'tax_exp',
+                //             className: 'text-end text-nowrap',
+                //             visible: true,
+                //             orderable: true,
+                //             searchable: true,
+                //             render: function(data, type, row, meta) {
+                //                 // return (`${data?.split('-').reverse().join('-') || '-'}`);
+                //                 return (`${moment(data).format('DD MMM YYYY') || '-'}`);
+                //             },
+                //         },
+                //         // {
+                //         //     data: 'kir_exp',
+                //         //     className: 'text-end text-nowrap',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return (`${moment(data).format('DD MMM YYYY') || '-'}`);
+                //         //     },
+                //         // },
+                //         {
+                //             data: 'crt',
+                //             className: 'text-end text-nowrap',
+                //             visible: true,
+                //             orderable: true,
+                //             searchable: true,
+                //             render: function(data, type, row, meta) {
+                //                 return moment.unix(data).format('DD MMM YYYY');
+                //             },
+                //         },
+                //         @if ($user_role != \App\Models\Users::ROLE_VENDOR)
+                //             {
+                //                 data: 'device_id',
+                //                 className: 'text-end text-nowrap',
+                //                 visible: true,
+                //                 orderable: true,
+                //                 searchable: true,
+                //                 render: function(data, type, row, meta) {
+                //                     return `<span class="d-none">${data}</span>` + Helper.splitEvery4Char(`${data}`);
+                //                 },
+                //             },
+                //         @endif
+                //         // {
+                //         //     data: 'dc_fullname',
+                //         //     className: 'text-start text-nowrap',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return (
+                //         //             `${data}<br>` +
+                //         //             `<a href="tel:0${row.dc_phone}">${Helper.splitEvery4Char('0'+row.dc_phone)}</a>` +
+                //         //             ` || ` +
+                //         //             `<a href="https://api.whatsapp.com/send/?phone=62${row.dc_phone}&text=Halo&app_absent=0" class="bg-light" target="_blank"><i class="text-success ion-social-whatsapp"></i></a>`
+                //         //         );
+                //         //     },
+                //         // },
+                //         // {
+                //         //     data: 'da_fullname',
+                //         //     className: 'text-start text-nowrap',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return (
+                //         //             `${data}<br>` +
+                //         //             `<a href="tel:0${row.da_phone}">${Helper.splitEvery4Char('0'+row.da_phone)}</a>` +
+                //         //             ` || ` +
+                //         //             `<a href="https://api.whatsapp.com/send/?phone=62${row.da_phone}&text=Halo&app_absent=0" class="bg-light" target="_blank"><i class="text-success ion-social-whatsapp"></i></a>`
+                //         //         );
+                //         //     },
+                //         // },
+                //         {
+                //             data: 'type_name',
+                //             className: 'text-start text-nowrap',
+                //             visible: true,
+                //             orderable: true,
+                //             searchable: true,
+                //             render: function(data, type, row, meta) {
+                //                 // return (`${row.brand_name}<br>-<br>${data}`);
+                //                 return data;
+                //             },
+                //         },
+                //         {
+                //             data: 'vyear',
+                //             className: 'text-end',
+                //             visible: true,
+                //             orderable: true,
+                //             searchable: true,
+                //             render: function(data, type, row, meta) {
+                //                 return (`${(data || '-')}`);
+                //             },
+                //         },
+                //         // {
+                //         //     data: 'cc',
+                //         //     className: 'text-start',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return (`${(data || '0')} CC`);
+                //         //     },
+                //         // },
+                //         // {
+                //         //     data: 'vin',
+                //         //     className: 'text-start text-nowrap',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return (`${Helper.splitEvery4Char(data || '-')}`);
+                //         //     },
+                //         // },
+                //         // {
+                //         //     data: 'en',
+                //         //     className: 'text-start text-nowrap',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return (`${Helper.splitEvery4Char(data || '-')}`);
+                //         //     },
+                //         // },
+                //         // {
+                //         //     data: 'vcolor',
+                //         //     className: 'text-start',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return (`${(data || '-')}`);
+                //         //     },
+                //         // },
+                //         // {
+                //         //     data: 'fuel_type',
+                //         //     className: 'text-start',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return (`${(data || '-')}`);
+                //         //     },
+                //         // },
+                //         // {
+                //         //     data: 'tnkb_color',
+                //         //     className: 'text-start text-nowrap',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return (`${(data || '-')}`);
+                //         //     },
+                //         // },
+                //         // {
+                //         //     data: 'regis_year',
+                //         //     className: 'text-end',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return (`${(data || '-')}`);
+                //         //     },
+                //         // },
+                //         // {
+                //         //     data: 'speed_limit',
+                //         //     className: 'text-end',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         // },
+                //         // {
+                //         //     data: 'fuel_capacity',
+                //         //     className: 'text-end',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         // },
+                //         // {
+                //         //     data: 'fuel_drop_treshold',
+                //         //     className: 'text-end',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         // },
+                //         // {
+                //         //     data: 'max_pressure',
+                //         //     className: 'text-end',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         // },
+                //         // {
+                //         //     data: 'alert_zones',
+                //         //     className: 'text-start',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         // },
+                //         // {
+                //         //     data: 'is_track_holiday_text',
+                //         //     className: 'text-start',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         // },
+                //         // {
+                //         //     data: 'track_schedule',
+                //         //     className: 'text-end',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         // },
+                //         {
+                //             data: 'sum_milleage',
+                //             className: 'text-end',
+                //             visible: true,
+                //             orderable: true,
+                //             searchable: true,
+                //             render: function(data, type, row, meta) {
+                //                 return Number(data).toFixed(2);
+                //             }
+                //         },
+                //         // {
+                //         //     data: 'cameras',
+                //         //     className: 'text-start',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         // },
+                //         {
+                //             data: 'company_name',
+                //             className: 'text-start text-nowrap',
+                //             visible: true,
+                //             orderable: true,
+                //             searchable: true,
+                //             render: function(data, type, row, meta) {
+                //                 return data || '-';
+                //             }
+                //         },
+                //         // {
+                //         //     data: 'group_name',
+                //         //     className: 'text-start text-nowrap',
+                //         //     visible: true,
+                //         //     orderable: true,
+                //         //     searchable: true,
+                //         //     render: function(data, type, row, meta) {
+                //         //         return data || 'All Group';
+                //         //     }
+                //         // },
+                //     ],
+                // });
+            },
+        };
+
+        function safeVal(selector) {
+            const val = $(selector).val();
+            return (val === undefined || val === null || val === '') ? null : val;
+        }
+
+        const Filter = {
+            activate: function() {
+                Filter.event();
+            },
+            event: function() {},
+            triggerFilterCompany: function() {
+                DTable.reload();
+            },
+        }
+
+        async function convertImgHtmlToFile(imgHtml, imgWidth, imgHeight, mimeType, fileName) {
+            return new Promise((resolve, reject) => {
+                try {
+                    let canvas = document.createElement("canvas")
+
+                    // Draw image to canvas.
+                    canvas.width = imgWidth
+                    canvas.height = imgHeight
+                    let ctx = canvas.getContext('2d')
+                    ctx.drawImage(imgHtml, 0, 0)
+
+                    // Convert canvas to ImageState.
+                    let imageData = ctx.getImageData(0, 0, imgWidth, imgHeight)
+                    // console.log(imageState.data.byteLength + ' bytes.')
+
+                    // Convert canvas to Blob
+                    canvas.toBlob((blob) => {
+                        let newReader = new FileReader();
+                        newReader.addEventListener('loadend', () => {
+                            // Convert canvas to ArrayBuffer
+                            let arrayBuffer = newReader.result
+                            // console.log(arrayBuffer.byteLength + ' bytes.')
+
+                            // Convert ArrayBuffer to Blob
+                            // let blob = new Blob([arrayBuffer], {type: mimeType})
+
+                            // Dispay Blob content in an Image.
+                            // console.log(URL.createObjectURL(blob))
+
+                            // Generate as file
+                            let newFile = new File([arrayBuffer], fileName, {
+                                type: mimeType,
+                                lastModified: new Date(),
+                                size: arrayBuffer.byteLength,
+                            })
+                            resolve(newFile)
+                        });
+                        newReader.readAsArrayBuffer(blob);
+                    }, mimeType);
+                } catch (e) {
+                    reject(e.message)
+                }
+            });
+        }
+
+        Wrapper.activate();
+    </script>
+@endsection
diff --git a/resources/views/template/navbar.blade.php b/resources/views/template/navbar.blade.php
index f1f14ce..8c71fe7 100755
--- a/resources/views/template/navbar.blade.php
+++ b/resources/views/template/navbar.blade.php
@@ -42,6 +42,18 @@
                         </a>
                     </li>
                 @endcan
+                @if (auth()->user()->can('config_truck_type.view') || auth()->user()->can('config_master_device.view') || auth()->user()->can('config_logs_gps.view'))
+                    <li class="nav-item dropdown {{ Request::segment(1) == 'reports' ? 'active' : '' }}">
+                        <a class="nav-link dropdown-toggle" href="#" id="dropdownConfig" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Reports
+                        </a>
+                        <ul class="dropdown-menu" style="right: 0; left: auto;" aria-labelledby="dropdownConfig">
+							<li>
+								<a class="dropdown-item {{ Request::segment(2) == 'vehicle-trips' ? 'active' : '' }}" href="{{ route('view_report_vehicle_trips') }}" title="">Vehicle Trips</a>
+							</li>
+                        </ul>
+                    </li>
+                @endif
                 @if (auth()->user()->can('config_truck_type.view') || auth()->user()->can('config_master_device.view') || auth()->user()->can('config_logs_gps.view'))
                     <li class="nav-item dropdown {{ Request::segment(1) == 'config' ? 'active' : '' }}">
                         <a class="nav-link dropdown-toggle" href="#" id="dropdownConfig" role="button" data-bs-toggle="dropdown" aria-expanded="false">
diff --git a/routes/web.php b/routes/web.php
index 763a5b7..fd50081 100755
--- a/routes/web.php
+++ b/routes/web.php
@@ -153,6 +153,11 @@ Route::middleware(["auth", "auth.user"])->group(function () {
     );
     Route::get("/config/logbook_keys", "LogbookKeysController@view_lgb_keys")->name("view_config_lgb_keys");
 
+	// reports
+    Route::get("/reports/vehicle-trips", "ReportsController@view_report_vehicle_trips")->name("view_report_vehicle_trips");
+    Route::get("/reports/vehicle-trips-list", "ReportsController@api_report_vehicle_trips_list")->name("api_report_vehicle_trips_list");
+
+
     Route::get("/user/vendor/transactions", "MenuController@view_user_vendor_transaction")->name(
         "view_user_vendor_transaction"
     );