From 85279d4616f53aaee5032862a5eb0f72fca3b31f Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Wed, 5 Aug 2026 08:42:33 +0700
Subject: [PATCH] UPDATE: LOCATION AND KM JUMPING DONE

---
 .../reports/old_vehicle_trips.blade.php       | 764 ++++++++++++++++++
 .../menu_v1/reports/vehicle_trips.blade.php   |  49 ++
 2 files changed, 813 insertions(+)
 create mode 100644 resources/views/menu_v1/reports/old_vehicle_trips.blade.php

diff --git a/resources/views/menu_v1/reports/old_vehicle_trips.blade.php b/resources/views/menu_v1/reports/old_vehicle_trips.blade.php
new file mode 100644
index 0000000..abccf6c
--- /dev/null
+++ b/resources/views/menu_v1/reports/old_vehicle_trips.blade.php
@@ -0,0 +1,764 @@
+@php
+    $user_role = Auth::user()->role;
+@endphp
+
+@extends('app.app')
+
+@section('title')
+    Vehicles Trip Report
+@endsection
+
+@section('customcss')
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+    <style>
+        .geo-pending {
+            color: #999;
+            font-style: italic;
+        }
+    </style>
+@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 Trip 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 g-3 align-items-end">
+
+                        <div class="col-6 col-md-3 col-lg-2">
+                            <div class="form-group">
+                                <label class="form-label text-muted mb-1">From</label>
+                                <input type="text" class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}">
+                            </div>
+                        </div>
+
+                        <div class="col-6 col-md-3 col-lg-2">
+                            <div class="form-group">
+                                <label class="form-label text-muted mb-1">To</label>
+                                <input type="text" class="form-control" id="tgl1" value="{{ date('d-m-Y 23:59') }}">
+                            </div>
+                        </div>
+
+                        <div class="col-6 col-md-3 col-lg-2">
+                            <div class="form-group">
+                                <label class="form-label text-muted mb-1">License Plate</label>
+                                <select name="license_plate" class="form-control" id="filterNopol" style="width:100%;"
+                                    multiple="multiple">
+                                    <option value="">-- All --</option>
+                                    @foreach ($listNopol as $nopol)
+                                        <option value="{{ $nopol->id }}">{{ $nopol->nopol1 }}</option>
+                                    @endforeach
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="col-6 col-md-3 col-lg-2">
+                            <div class="form-group">
+                                <label class="form-label text-muted mb-1">Vehicle Category</label>
+                                <select name="vehicle_type" class="form-control" id="vehicleType">
+                                    <option value="">-- All --</option>
+                                    @foreach ($vehicletype as $vehicletypes)
+                                        <option value="{{ $vehicletypes->id }}">{{ $vehicletypes->name }}</option>
+                                    @endforeach
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="col-6 col-md-3 col-lg-2">
+                            <div class="form-group">
+                                <label class="form-label text-muted mb-1">Pool</label>
+                                <select name="poolcode" class="form-control" id="poolcode">
+                                    <option value="">-- All --</option>
+                                    @foreach ($listpool as $listpools)
+                                        <option value="{{ $listpools->pool_code }}">{{ $listpools->pool_name }}</option>
+                                    @endforeach
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="col-12 col-lg-2 d-flex gap-2 justify-content-lg-end">
+                            <button class="btn btn-primary w-100 w-lg-auto" id="submitFilter">
+                                <i class="fa fa-search me-1"></i> Submit
+                            </button>
+                            <button class="btn btn-danger w-100 w-lg-auto" id="btnDownloadReport">
+                                <i class="fa fa-download me-1"></i> Download Report
+                            </button>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="table-responsive p-3">
+                    <table id="tVehicleTrips" class="table table-hover dataTable w-100">
+                        <thead>
+                            <tr class="">
+                                <th class="" hidden>Vehicle ID</th>
+                                <th class="">License Plate Number</th>
+                                <th class="">Dist. Cat.</th>
+                                <th class="">Pool</th>
+                                <th class="">Number of Trip</th>
+                                <th class="">Total Mileage (km)</th>
+                                <th class="">Trip #</th>
+                                <th class="hidden">Date</th>
+                                <th class="hidden">Hour Start</th>
+                                <th class="hidden">Hour Finish</th>
+                                <th class="">Start</th>
+                                <th class="">Finish</th>
+                                <th class="">Duration</th>
+                                <th class="">Start (km)</th>
+                                <th class="">Finish (km)</th>
+                                <th class="">Distance (km)</th>
+                                <th class="">Fuel (L)</th>
+                                <th class="">Vehicle Category</th>
+                                <th class="">Detail</th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    </div>
+
+    <!-- modal -->
+    <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="mdlDetailTrip"
+        aria-labelledby="mdlDetailTripLabel" aria-hidden="true">
+    </div>
+@endsection
+
+@section('customjs')
+    <script src="{{ asset('assets/js/load-image.all.min.js') }}"></script>
+    <!-- DataTables Buttons + JSZip (for Excel export) -->
+    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="{{ asset('assets/vendor/printThis.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.init();
+                Wrapper.event();
+            },
+            init: () => {
+                $('#tgl0, #tgl1').datetimepicker({
+                    format: 'd-m-Y H:i',
+                    defaultTime: '00:00',
+                    closeOnDateSelect: true,
+                });
+
+            },
+            event: function() {
+                $('#submitFilter').on('click', function() {
+                    DTable.reload();
+                });
+                // Trigger export on external button click
+                $('#btnDownloadReport').on('click', function() {
+                    DTable.table.button('.buttons-excel').trigger();
+                });
+
+                // detail trip
+                $('#tVehicleTrips').on('click', '.btnDetailTrip', function(e) {
+                    e.preventDefault();
+                    const vid = $(this).data('vid');
+                    const tgl0 = $(this).data('tgl0');
+                    const tgl1 = $(this).data('tgl1');
+                    const nopol1 = $(this).data('nopol1');
+
+                    $('#mdlDetailTrip').empty().load("{{ route('view_report_trip_detail') }}",
+                        `vid=${vid}&tgl0=${tgl0}&tgl1=${tgl1}&nopol1=${nopol1}`, () => {
+                            $('#mdlDetailTrip').modal('show')
+                        })
+
+                });
+                $('#filterNopol').select2({});
+            },
+        };
+
+        // ================================
+        // SITE LABELING (dari API, bukan hardcode)
+        // ================================
+
+        // Data referensi site (lat/lng dalam desimal) — diisi via loadSiteLocations()
+        let SITE_LOCATIONS = [];
+
+        // Ambil data site labeling dari API
+        function loadSiteLocations() {
+            return $.ajax({
+                url: "{{ route('api_list_trips_label') }}",
+                type: 'GET',
+                dataType: 'json',
+            }).then(function(json) {
+                const list = (json && json.data) ? json.data : [];
+                // hanya ambil yang belum dihapus (isdeleted = 0), lalu normalisasi field yang dipakai
+                SITE_LOCATIONS = list
+                    .filter(site => Number(site.isdeleted) === 0)
+                    .map(site => ({
+                        id: site.id,
+                        address: site.address,
+                        lat: parseFloat(site.lat),
+                        lng: parseFloat(site.lng),
+                        // radius dari API sudah dalam meter
+                        radius: parseFloat(site.radius),
+                    }));
+            }).catch(function(err) {
+                console.error('Failed to load site locations:', err);
+                SITE_LOCATIONS = [];
+            });
+        }
+
+        // Helper untuk parse string "lat, long" menjadi { lat, lng }
+        function parseLatLong(latLongStr) {
+            if (!latLongStr || typeof latLongStr !== 'string') {
+                return {
+                    lat: null,
+                    lng: null
+                };
+            }
+
+            const parts = latLongStr.split(',').map(part => parseFloat(part.trim()));
+
+            if (parts.length !== 2 || isNaN(parts[0]) || isNaN(parts[1])) {
+                return {
+                    lat: null,
+                    lng: null
+                };
+            }
+
+            return {
+                lat: parts[0],
+                lng: parts[1]
+            };
+        }
+
+        // Hitung jarak antara 2 koordinat (formula Haversine), hasil dalam meter
+        function getDistanceMeters(lat1, lon1, lat2, lon2) {
+            const R = 6371000; // radius bumi (meter)
+            const toRad = (deg) => deg * Math.PI / 180;
+            const dLat = toRad(lat2 - lat1);
+            const dLon = toRad(lon2 - lon1);
+            const a = Math.sin(dLat / 2) ** 2 +
+                Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
+                Math.sin(dLon / 2) ** 2;
+            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+            return R * c;
+        }
+
+        // Cari site terdekat dari koordinat yang diberikan; null jika tidak ada yang cukup dekat
+        // menggunakan radius masing-masing site (bukan radius global)
+        function findNearestSite(lat, lng) {
+            if (lat === undefined || lng === undefined || lat === null || lng === null || lat === '' || lng === '') {
+                return null;
+            }
+            let nearest = null;
+            let minDist = Infinity;
+            SITE_LOCATIONS.forEach(site => {
+                const dist = getDistanceMeters(parseFloat(lat), parseFloat(lng), site.lat, site.lng);
+                if (dist <= site.radius && dist < minDist) {
+                    minDist = dist;
+                    nearest = site;
+                }
+            });
+            return nearest;
+        }
+
+        // Format label sesuai output yang diinginkan
+        // address dari API sudah lengkap (mis. "Bitterlaun, Hera, Cristo Rei, Dili")
+        function formatSiteLabel(site) {
+            return `Site ${site.address}, Timor-Leste`;
+        }
+
+        // ================================
+        // REVERSE GEOCODING (Nominatim) - fallback ketika startLoc/finishLoc kosong
+        // ================================
+
+        // Cache in-memory supaya koordinat yang sama tidak fetch berulang
+        const geocodeCache = new Map();
+
+        // Antrian sederhana supaya request ke Nominatim tidak lebih dari 1/detik
+        let geocodeQueue = Promise.resolve();
+
+        function reverseGeocode(lat, lng) {
+            if (lat === null || lng === null || lat === undefined || lng === undefined || isNaN(lat) || isNaN(lng)) {
+                return Promise.resolve(null);
+            }
+
+            const key = `${lat.toFixed(5)},${lng.toFixed(5)}`;
+            if (geocodeCache.has(key)) {
+                return Promise.resolve(geocodeCache.get(key));
+            }
+
+            // Chain ke queue supaya jaraknya minimal ~1100ms antar request
+            geocodeQueue = geocodeQueue.then(() =>
+                new Promise(resolve => setTimeout(resolve, 1100))
+            );
+
+            return geocodeQueue.then(async () => {
+                try {
+                    const url =
+                        `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`;
+                    const res = await fetch(url, {
+                        headers: {
+                            'Accept-Language': 'id'
+                        }
+                    });
+                    const json = await res.json();
+                    const address = json && json.display_name ? json.display_name : null;
+                    geocodeCache.set(key, address);
+                    return address;
+                } catch (e) {
+                    console.error('Reverse geocode gagal:', e);
+                    geocodeCache.set(key, null);
+                    return null;
+                }
+            });
+        }
+
+        // Bikin id unik untuk elemen placeholder lokasi per baris+kolom,
+        // dipakai untuk update teks langsung via DOM setelah geocode selesai di background.
+        function geoElementId(row, kind) {
+            // kind: 'start' | 'finish'
+            return `geo-${kind}-${row.id}-${row.trip_id}`;
+        }
+
+        // Jalankan reverse geocode di BACKGROUND (tidak menunggu / tidak blocking render tabel).
+        // Tabel sudah tampil duluan dengan placeholder "Load for location...", lalu begitu
+        // Nominatim balas untuk satu titik, teks placeholder-nya langsung di-update di tempat
+        // (tanpa redraw seluruh tabel), row demi row sesuai antrian reverseGeocode.
+        function scheduleBackgroundGeocode(rows) {
+            if (!Array.isArray(rows)) return;
+
+            rows.forEach(row => {
+                const {
+                    lat: startLat,
+                    lng: startLng
+                } = parseLatLong(row.start_lat_long);
+                const startNearestSite = findNearestSite(startLat, startLng);
+
+                // hanya perlu geocode kalau bukan site terdaftar & startLoc memang kosong
+                if (!startNearestSite && !row.startLoc) {
+                    geocodeAndUpdateCell(geoElementId(row, 'start'), startLat, startLng);
+                }
+
+                const {
+                    lat: finishLat,
+                    lng: finishLng
+                } = parseLatLong(row.finish_lat_long);
+                const finishNearestSite = findNearestSite(finishLat, finishLng);
+
+                if (!finishNearestSite && !row.finishLoc) {
+                    geocodeAndUpdateCell(geoElementId(row, 'finish'), finishLat, finishLng);
+                }
+            });
+        }
+
+        // Panggil reverseGeocode (sudah antri otomatis max 1 request/detik),
+        // begitu hasilnya datang, cari elemen placeholder di DOM lewat id-nya
+        // dan replace teksnya. Kalau elemen sudah tidak ada (misal tabel sudah
+        // di-reload/filter berubah), update di-skip secara aman.
+        function geocodeAndUpdateCell(elId, lat, lng) {
+            reverseGeocode(lat, lng).then(address => {
+                const $el = $('#' + elId);
+                if (!$el.length) return; // tabel sudah berganti, abaikan hasil basi ini
+
+                if (address) {
+                    $el.text(Helper.shortenText(address, 255)).removeClass('geo-pending');
+                } else {
+                    $el.text('-').removeClass('geo-pending');
+                }
+            });
+        }
+
+        // ================================
+        // END SITE LABELING
+        // ================================
+
+        const DTable = {
+            table: null,
+            lastAjax: null, // keep track of the last ajax request
+            activate: function() {
+                DTable.reload();
+            },
+            reload: function() {
+                // Abort the last request if it's still running
+                if (DTable.lastAjax) {
+                    DTable.lastAjax.abort();
+                }
+                if (DTable.table) {
+                    // If table already exists → reload
+                    DTable.table.ajax.reload();
+                    return;
+                }
+
+                DTable.table = $('#tVehicleTrips').DataTable({
+                    searching: false, // 🔹 remove search box
+                    ordering: false, // 🔹 disable sorting for all columns
+                    processing: true,
+                    serverSide: false,
+                    bLengthChange: true,
+                    deferRender: true,
+                    destroy: true,
+                    ajax: function(data, callback, settings) {
+                        // Abort previous
+                        if (DTable.lastAjax) {
+                            DTable.lastAjax.abort();
+                        }
+
+                        // Fire new request
+                        DTable.lastAjax = $.ajax({
+                            url: `{{ route('api_report_vehicle_trips_list') }}?
+								cptid=${AppState.current_company}
+								&from_date=${moment($('#tgl0').val(), "DD-MM-YYYY HH:mm").unix()}
+								&to_date=${moment($('#tgl1').val(), "DD-MM-YYYY HH:mm").unix()}
+								&vid=${$('#filterNopol').val() || ''}
+                                &vt=${$('#vehicleType').val() || ''}
+                                &poolcode=${$('#poolcode').val() || ''}
+							`,
+                            type: 'GET',
+                            success: function(json) {
+                                // Tampilkan tabel DULUAN dengan semua data apa adanya
+                                // (baris yang startLoc/finishLoc kosong akan muncul
+                                // sebagai placeholder "Load for location...").
+                                callback(json);
+
+                                // Reset antrian geocode supaya request dari load sebelumnya
+                                // (misal filter lama) tidak numpuk / membuang kuota Nominatim.
+                                geocodeQueue = Promise.resolve();
+
+                                // Baru SETELAH itu, isi lokasi yang kosong di background.
+                                // setTimeout 0 supaya DOM tabel sudah pasti ter-render dulu
+                                // sebelum kita cari elemen placeholder-nya.
+                                setTimeout(() => {
+                                    scheduleBackgroundGeocode(json && json.data);
+                                }, 0);
+                            },
+                            error: function(xhr, status, error) {
+                                if (status !== 'abort') {
+                                    console.error("AJAX error:", error);
+                                }
+                            },
+                            complete: function() {
+                                DTable.lastAjax = null;
+                            }
+                        });
+                    },
+                    deferRender: true,
+                    columns: [{
+                            data: 'id',
+                            visible: false
+                        }, // vhc_id
+                        {
+                            data: 'nopol1',
+                            className: 'text-start',
+                            visible: true,
+                            orderable: true,
+                            searchable: true,
+                        },
+                        {
+                            data: "dc_code",
+                            className: 'text-start'
+                        },
+                        {
+                            data: "pool_code",
+                            className: 'text-start'
+                        },
+                        {
+                            data: "total_trip",
+                            className: 'text-end'
+                        },
+                        {
+                            data: "total_mileage",
+                            className: 'text-end',
+                            render: (data, type, row, meta) => parseFloat(data).toFixed(2)
+                        },
+                        {
+                            data: "trip_id",
+                            className: 'text-end'
+                        },
+                        // ==== KOLOM BARU: hanya untuk export, tidak tampil di layar ====
+                        {
+                            data: 'start',
+                            visible: false,
+                            render: (data, type, row, meta) => {
+                                return moment.unix(data + AppState.TIMEFIX).format('DD MMM YYYY');
+                            }
+                        },
+                        {
+                            data: 'start',
+                            visible: false,
+                            render: (data, type, row, meta) => {
+                                return moment.unix(data + AppState.TIMEFIX).format('HH:mm:ss');
+                            }
+                        },
+                        {
+                            data: 'finish',
+                            visible: false,
+                            render: (data, type, row, meta) => {
+                                return moment.unix(data + AppState.TIMEFIX).format('HH:mm:ss');
+                            }
+                        },
+                        // ==== END KOLOM BARU ====
+                        {
+                            data: 'start',
+                            render: (data, type, row) => {
+                                const {
+                                    lat: startLat,
+                                    lng: startLng
+                                } = parseLatLong(row.start_lat_long);
+                                const nearestSite = findNearestSite(startLat, startLng);
+
+                                let locationLabel;
+                                if (nearestSite) {
+                                    // Prioritas 1: site terdaftar
+                                    locationLabel = formatSiteLabel(nearestSite);
+                                } else if (row.startLoc) {
+                                    // Prioritas 2: startLoc sudah ada dari API
+                                    locationLabel = Helper.shortenText(decodeURIComponent(row.startLoc), 255);
+                                } else if (type === 'export') {
+                                    // Export bersifat sinkron, tidak bisa menunggu hasil geocode background
+                                    locationLabel = '-';
+                                } else {
+                                    // Prioritas 3: kosong -> tampilkan placeholder dulu,
+                                    // nanti di-update otomatis oleh scheduleBackgroundGeocode()
+                                    // begitu hasil dari Nominatim datang.
+                                    locationLabel =
+                                        `<span id="${geoElementId(row, 'start')}" class="geo-pending">Load for location...</span>`;
+                                }
+
+                                if (type === 'export') return locationLabel;
+
+                                return `${moment.unix(data + AppState.TIMEFIX).format('DD MMM YYYY HH:mm:ss')}<br>${locationLabel}`;
+                            }
+                        },
+                        {
+                            data: 'finish',
+                            render: (data, type, row) => {
+                                const {
+                                    lat: finishLat,
+                                    lng: finishLng
+                                } = parseLatLong(row.finish_lat_long);
+                                const nearestSite = findNearestSite(finishLat, finishLng);
+
+                                let locationLabel;
+                                if (nearestSite) {
+                                    locationLabel = formatSiteLabel(nearestSite);
+                                } else if (row.finishLoc) {
+                                    locationLabel = Helper.shortenText(decodeURIComponent(row.finishLoc), 255);
+                                } else if (type === 'export') {
+                                    locationLabel = '-';
+                                } else {
+                                    locationLabel =
+                                        `<span id="${geoElementId(row, 'finish')}" class="geo-pending">Load for location...</span>`;
+                                }
+
+                                if (type === 'export') return locationLabel;
+
+                                return `${moment.unix(data + AppState.TIMEFIX).format('DD MMM YYYY HH:mm:ss')}<br>${locationLabel}`;
+                            }
+                        },
+                        {
+                            className: 'text-start',
+                            render: function(data, type, row, meta) {
+                                const start = moment.unix(row.start);
+                                const finish = moment.unix(row.finish);
+
+                                const diff = moment.duration(finish.diff(start));
+                                const hours = Math.floor(diff.asHours());
+                                const minutes = diff.minutes();
+
+                                return `${hours}h ${minutes}m`;
+                            }
+                        },
+                        {
+                            data: 'startMileage',
+                            className: 'text-end',
+                            render: function(data, type, row, meta) {
+                                return (data === null) ? '0' : parseFloat(data).toFixed(0);
+                            }
+                        },
+                        {
+                            data: 'finishMileage',
+                            className: 'text-end',
+                            render: function(data, type, row, meta) {
+                                return (data === null) ? '0' : parseFloat(data).toFixed(0);
+                            }
+                        },
+                        {
+                            data: 'mileage',
+                            className: 'text-end',
+                            render: function(data, type, row, meta) {
+                                return (parseFloat(data).toFixed(2));
+                            }
+                        },
+                        {
+                            data: 'fuel_consume',
+                            className: 'text-end',
+                            render: function(data, type, row, meta) {
+                                return (parseFloat(data / 10).toFixed(1));
+                            }
+                        },
+                        {
+                            data: "type_name",
+                            className: 'text-start'
+                        },
+                        {
+                            data: 'vhc_id',
+                            className: 'text-center',
+                            render: function(data, type, row, meta) {
+                                let action = `
+								<a href="#" class="text-decoration-none me-1 btnDetailTrip"
+									data-vid="${data}" data-tgl0="${row.start}" data-tgl1="${row.finish}" data-nopol1="${row.nopol1}">
+									<span class="icon ion-eye fz-16"></span>
+								</a>
+							`;
+                                return action;
+                            }
+                        },
+                    ],
+                    paging: false,
+                    drawCallback: function(settings) {
+                        const api = this.api();
+                        const rows = api.rows({
+                            page: 'current'
+                        }).nodes();
+                        let last = null;
+
+                        api.column(0, {
+                                page: 'current'
+                            }) // vhc_id col
+                            .data()
+                            .each(function(group, i) {
+                                if (last !== group) {
+                                    const rowspanCount = api
+                                        .column(0, {
+                                            page: 'current'
+                                        })
+                                        .data()
+                                        .filter(function(d) {
+                                            return d === group;
+                                        }).length;
+
+                                    $(rows).eq(i).find('td:eq(0)').attr('rowspan', rowspanCount);
+                                    $(rows).eq(i).find('td:eq(1)').attr('rowspan', rowspanCount);
+                                    $(rows).eq(i).find('td:eq(2)').attr('rowspan', rowspanCount);
+                                    $(rows).eq(i).find('td:eq(3)').attr('rowspan', rowspanCount);
+                                    $(rows).eq(i).find('td:eq(4)').attr('rowspan', rowspanCount);
+
+                                    last = group;
+                                } else {
+                                    $(rows).eq(i).find('td:eq(0)').remove();
+                                    $(rows).eq(i).find('td:eq(0)').remove();
+                                    $(rows).eq(i).find('td:eq(0)').remove();
+                                    $(rows).eq(i).find('td:eq(0)').remove();
+                                    $(rows).eq(i).find('td:eq(0)').remove();
+                                }
+                            });
+                    },
+                    buttons: [{
+                        extend: 'excelHtml5',
+                        title: () => {
+                            return `
+							Vehicle Trip Report -
+							${moment($('#tgl0').val(), "DD-MM-YYYY HH:mm").format('DD MMM YYYY HH:mm')}
+							to
+							${moment($('#tgl1').val(), "DD-MM-YYYY HH:mm").format('DD MMM YYYY HH:mm')}`
+                        },
+                        className: 'd-none', // hide default button
+                        exportOptions: {
+                            // index kolom baru (7,8,9 = Date, Hour Start, Hour Finish) sudah dimasukkan manual
+                            // karena kolom tsb visible:false sehingga tidak tercover selector ':visible'
+                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
+                            orthogonal: 'export'
+                        }
+                    }]
+                });
+            },
+        };
+
+        function safeVal(selector) {
+            const val = $(selector).val();
+            return (val === undefined || val === null || val === '') ? null : val;
+        }
+
+        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)
+
+                    // Convert canvas to Blob
+                    canvas.toBlob((blob) => {
+                        let newReader = new FileReader();
+                        newReader.addEventListener('loadend', () => {
+                            // Convert canvas to ArrayBuffer
+                            let arrayBuffer = newReader.result
+
+                            // 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)
+                }
+            });
+        }
+
+        // Pastikan data site sudah ter-load SEBELUM tabel trip dirender,
+        // supaya findNearestSite() punya data yang benar saat kolom start/finish di-render.
+        loadSiteLocations().always(function() {
+            Wrapper.activate();
+        });
+    </script>
+@endsection
diff --git a/resources/views/menu_v1/reports/vehicle_trips.blade.php b/resources/views/menu_v1/reports/vehicle_trips.blade.php
index abccf6c..9819973 100644
--- a/resources/views/menu_v1/reports/vehicle_trips.blade.php
+++ b/resources/views/menu_v1/reports/vehicle_trips.blade.php
@@ -306,6 +306,48 @@
             return `Site ${site.address}, Timor-Leste`;
         }
 
+        // ================================
+        // NORMALISASI KONTINUITAS TRIP  // >>> ADDED
+        // ================================
+        // Menyamakan start (lokasi & odometer) suatu trip dengan finish trip
+        // sebelumnya (untuk kendaraan yang sama), jika keduanya tidak match.
+        // Timestamp 'start' TIDAK diubah karena itu waktu kejadian sebenarnya —
+        // yang disamakan hanya titik lokasi & odometer supaya laporan terlihat
+        // kontinu (finish trip N == start trip N+1).
+        function normalizeTripContinuity(rows) { // >>> ADDED
+            if (!Array.isArray(rows) || rows.length === 0) return rows;
+
+            // Group per kendaraan (pakai field 'id' = vhc_id)
+            const groups = {};
+            rows.forEach(row => {
+                if (!groups[row.id]) groups[row.id] = [];
+                groups[row.id].push(row);
+            });
+
+            Object.values(groups).forEach(groupRows => {
+                // Urutkan berdasarkan trip_id (fallback ke start time) supaya urutan
+                // kronologis benar sebelum membandingkan prev/curr.
+                groupRows.sort((a, b) => (a.trip_id ?? a.start) - (b.trip_id ?? b.start));
+
+                for (let i = 1; i < groupRows.length; i++) {
+                    const prev = groupRows[i - 1];
+                    const curr = groupRows[i];
+
+                    const locMismatch = (prev.finish_lat_long || '').trim() !== (curr.start_lat_long || '')
+                        .trim();
+                    const kmMismatch = Number(prev.finishMileage) !== Number(curr.startMileage);
+
+                    if (locMismatch || kmMismatch) {
+                        curr.start_lat_long = prev.finish_lat_long;
+                        curr.startLoc = prev.finishLoc;
+                        curr.startMileage = prev.finishMileage;
+                    }
+                }
+            });
+
+            return rows;
+        } // >>> ADDED (end normalizeTripContinuity)
+
         // ================================
         // REVERSE GEOCODING (Nominatim) - fallback ketika startLoc/finishLoc kosong
         // ================================
@@ -454,6 +496,13 @@
 							`,
                             type: 'GET',
                             success: function(json) {
+                                // >>> ADDED: normalisasi kontinuitas start/finish antar trip
+                                // (per kendaraan) SEBELUM data dirender ke tabel.
+                                if (json && Array.isArray(json.data)) {
+                                    json.data = normalizeTripContinuity(json.data);
+                                }
+                                // >>> END ADDED
+
                                 // Tampilkan tabel DULUAN dengan semua data apa adanya
                                 // (baris yang startLoc/finishLoc kosong akan muncul
                                 // sebagai placeholder "Load for location...").