Fleet Tracker Pro Documentation

Installation

Quick Start (Auto Installer)

1. Upload all files to your web server
2. Navigate to http://yourdomain.com/install
3. Follow the 5-step installation wizard
4. Login and start tracking!

Manual Installation

For advanced users who prefer manual setup:

1. Install Dependencies

composer install --optimize-autoloader --no-dev

2. Configure Environment

cp env.example.txt .env
# Edit .env with your database credentials

3. Generate Keys

php artisan key:generate
php artisan jwt:secret

4. Import Database

mysql -u username -p database_name < database/sql/vtc_database_table.sql

5. Import Demo Data (Optional)

php artisan db:seed --class=DemoDataSeeder

6. Set Permissions

chmod -R 775 storage bootstrap/cache
chown -R www-data:www-data storage bootstrap/cache

See README.md for complete manual installation instructions.

Features Overview

Real-Time GPS Tracking

• Live vehicle location on interactive maps
• Route history replay
• Speed and direction indicators
• Multiple vehicle tracking simultaneously
• Customizable map markers and colors

Comprehensive Reporting

12+ report types available:

1. Parking Analysis - Identify parking locations and durations
2. Mileage Tracking - Monitor kilometers and maintenance schedules
3. Vehicle Health - Track performance metrics
4. Working Hours - Business hours compliance
5. Visit Reports - Customer location visits
6. Zone Violations - Geofence breach alerts
7. Speed Violations - Speeding incidents
8. Fuel Consumption - Fuel usage and costs
9. Route Efficiency - Route optimization
10. After Hours Activity - Off-hours monitoring
11. Inspection Schedule - Maintenance tracking
12. Driver Scoring - Driver behavior analysis

Geofencing

• Create circular geofences (Places)
• Create polygon geofences (Regions)
• Entry/exit detection
• Configurable alerts
• Assign vehicles to specific zones

User & Permission Management

• Role-based access control
• Granular permissions per module
• Multi-tenant architecture
• User activity tracking

Getting Started

1. First Login

After installation, login with your admin credentials:

• Navigate to http://yourdomain.com
• Enter your email and password
• Click "Login"

2. Add Your First Vehicle

1. Go to Vehicles → Vehicle List
2. Click + Add Vehicle
3. Fill in vehicle details:
   • Device ID (from GPS tracker)
   • Vehicle Name
   • License Plate
   • Driver Name (optional)
   • Category (optional)
4. Click Save

3. Create a Geofence

1. Go to Settings → Places or Regions
2. Click + Add New
3. Click on map to set location or draw polygon
4. Set radius (for places) or complete polygon (for regions)
5. Assign vehicles
6. Click Save

4. Generate Your First Report

1. Go to Reports menu
2. Select a report type (e.g., Parking Analysis)
3. Choose vehicle and date range
4. Click Generate Report
5. Export or print as needed

JavaScript Libraries

Complete reference for all JavaScript libraries and helper functions used in the system.

HTTP & API Communication

http Object

Central HTTP client for making API requests with automatic loading indicators and error handling.

http.post({
    url: '/vehicles-list',
    data: { filter: 'active' }
}).then((response) => {
    console.log(response.data);
}).catch((error) => {
    console.error(error);
});

http.get({
    url: '/api/vehicle/details',
    params: { id: 123 }
}).then((response) => {
    console.log(response.data);
});

// Encode data
const postModel = Base64Helper.encode({ id: 123, name: 'Vehicle' });

// Decode data
const decoded = Base64Helper.decode(encodedString);

Map Management (Leaflet)

const myMap = new LeafletMap();
myMap.initMap('mapDiv', {
    zoomLevelDefault: 13,
    enablePolygonDrawing: true,
    chunkedLoading: true
});

const markers = [{
    id: 'vehicle-123',
    coord: [40.7128, -74.0060],
    label: 'Vehicle Name',
    popup: 'Vehicle Details',
    icon: {
        name: 'ti ti-car',
        color: 'red',
        direction: 45
    },
    draggable: false
}];
myMap.pinMarkers(markers);

// Remove specific marker
myMap.removeMarkers('vehicle-123');

// Remove all markers
myMap.removeMarkers();

myMap.makeMarkerDraggable('vehicle-123', true, function(markerId, newLatLng) {
    console.log('Marker moved to:', newLatLng);
});

const polygonId = myMap.addPolygon({
    coords: [
        [40.7128, -74.0060],
        [40.7580, -73.9855],
        [40.7614, -73.9776]
    ],
    color: '#d32f2f',
    fillColor: '#ffcdd2',
    fillOpacity: 0.3,
    label: 'Geofence Area'
});

myMap.removePolygon(polygonId);

myMap.focusMarker('vehicle-123');

// Fit to all markers
myMap.fitBounds();

// Fit to specific markers
myMap.fitBounds(['vehicle-123', 'vehicle-456']);

Table Management (Tabulator)

const table = createTabulator('#myTable', {
    buttons: [
        {
            label: __('Add New'),
            icon: 'fas fa-plus',
            icon_color: 'success',
            func: addNewRow
        }
    ],
    data: myData,
    movableRows: true,
    columns: [
        {
            title: __('Name'),
            field: 'name',
            editor: 'input',
            validator: 'required'
        },
        {
            title: __('Status'),
            field: 'status_id',
            formatter: function(cell) {
                return cell.getValue() == 1 ? 'Active' : 'Inactive';
            }
        },
        {
            title: __('Action'),
            formatter: function() {
                return `
                    <button class="btn btn-sm edit-btn">Edit</button>
                    <button class="btn btn-sm delete-btn">Delete</button>
                `;
            },
            cellClick: function(e, cell) {
                if (e.target.closest('.edit-btn')) {
                    editRow(cell.getRow().getData());
                }
            }
        }
    ]
});

// Add row
table.addRow({ name: 'New Item', status_id: 1 });

// Update data
table.updateData([{ id: 1, name: 'Updated Name' }]);

// Get all data
const allData = table.getData();

const localizedOptions = tabulatorLocalize();
// Returns object with pagination, headerFilters texts in current language

UI/UX Components

// Success notification
showNotification('success', __('Data saved successfully'));

// Error notification
showNotification('error', __('An error occurred'));

// Info notification
showNotification('info', __('Please wait'));

// Warning notification
showNotification('warning', __('Check your input'));

showConfirmDialog({
    title: __('Delete Vehicle'),
    message: __('Are you sure you want to delete this vehicle?'),
    confirmText: __('Delete'),
    cancelText: __('Cancel'),
    type: 'danger',
    onConfirm: function() {
        // Delete action here
        deleteVehicle(vehicleId);
    }
});

// After adding new content to DOM
popoverInit();

// Get current theme
const currentTheme = getTheme();

// Set theme
setTheme('dark');  // or 'light'

Localization

// Simple translation
const text = __('Welcome');

// Translation with placeholders
const message = __('Hello :name', { name: 'John' });

// Use in HTML
document.title = __('Vehicle Tracking System');

Helper Functions

const uniqueId = rand_id();
// Example: 'x8k2n9m4p'

menuSets({
    actives: ['vehicles', 'tracking'],
    shows: ['reports']
});

onAppReady(function() {
    // Initialize your code here
    initializeMap();
    loadVehicles();
});

Charts (ApexCharts)

const speedChart = new ApexCharts(document.querySelector("#speedChart"), {
    series: [{
        name: __('Speed'),
        data: speedData
    }],
    chart: {
        type: 'line',
        height: 350
    },
    xaxis: {
        categories: timeLabels
    },
    yaxis: {
        title: {
            text: __('Speed (km/h)')
        }
    }
});
speedChart.render();

Complete Example

// Initialize when app is ready
onAppReady(function() {
    // Set active menu
    menuSets({
        actives: ['vehicles'],
        shows: []
    });

    // Initialize map
    const myMap = new LeafletMap();
    myMap.initMap('mapDiv', {
        zoomLevelDefault: 13,
        enablePolygonDrawing: false
    });

    // Load vehicles data
    http.post({
        url: '/vehicles-list'
    }).then((response) => {
        const data = response.data;

        // Create table
        const table = createTabulator('#vehiclesTable', {
            data: data,
            buttons: [{
                label: __('Add Vehicle'),
                icon: 'fas fa-plus',
                icon_color: 'success',
                func: function() {
                    showVehicleForm();
                }
            }],
            columns: [
                {
                    title: __('Name'),
                    field: 'name',
                    editor: 'input'
                },
                {
                    title: __('Status'),
                    field: 'status',
                    formatter: function(cell) {
                        const value = cell.getValue();
                        return value == 1 
                            ? '<span class="badge bg-success">Active</span>'
                            : '<span class="badge bg-danger">Inactive</span>';
                    }
                }
            ]
        });

        // Add markers to map
        const markers = data.map(vehicle => ({
            id: vehicle.did,
            coord: [vehicle.latitude, vehicle.longitude],
            label: vehicle.name,
            popup: `
                <strong>${vehicle.name}</strong><br>
                Speed: ${vehicle.speed} km/h
            `,
            icon: {
                name: 'ti ti-car',
                color: vehicle.status == 1 ? 'green' : 'red'
            }
        }));
        
        myMap.pinMarkers(markers);
        myMap.fitBounds();

        showNotification('success', __('Vehicles loaded successfully'));
    }).catch((error) => {
        showNotification('error', __('Failed to load vehicles'));
    });
});

API Reference

Authentication

All API requests require JWT authentication token in the header:

Authorization: Bearer {your_jwt_token}

Main Endpoints

Vehicles

• POST /api/vehicles/list - Get all vehicles
• POST /api/vehicles/add - Add new vehicle
• POST /api/vehicles/update - Update vehicle
• POST /api/vehicles/delete - Delete vehicle

Reports

• POST /api/reports/parking-analysis - Parking analysis data
• POST /api/reports/mileage-tracking - Mileage data
• POST /api/reports/vehicle-health - Vehicle health data
• And more... (see API documentation for complete list)

Users

• GET /api/users/me - Get current user profile
• PATCH /api/users/me - Update profile
• POST /api/users - Create user

Troubleshooting

Installation Issues

Database Connection Error

• Verify database credentials in .env
• Ensure MySQL service is running
• Check database user has proper permissions
• Try connecting manually: mysql -u username -p

500 Internal Server Error

• Check storage/ and bootstrap/cache/ are writable
• Run: php artisan config:clear
• Check error logs in storage/logs/laravel.log
• Enable debug mode temporarily: APP_DEBUG=true in .env

Blank Page

• Verify APP_KEY is set in .env
• Run: php artisan key:generate
• Clear browser cache and cookies
• Check file permissions

Common Issues

Maps Not Loading

• Check internet connection (maps use external tile servers)
• Verify no JavaScript errors in browser console (F12)
• Check if map div has height set

No Vehicle Data Showing

• Ensure GPS device is sending data
• Check vts_device_logs table for entries
• Verify date range is correct
• Check vehicle status is "Active with Customer" (sts = 3)