Nagadder/field-force-tracker-pro

1document.addEventListener('DOMContentLoaded', function() {2    // Employee data3    const employees = [4        { name: "Jacek Michalowski", id: "Yes", passport: "", passportExp: "2025-10-15", license: "", licenseExp: "", medical: "Yes", medicalExp: "2025-10-31" },5        { name: "Sarel O'Neil", id: "Yes", passport: "", passportExp: "2025-10-15", license: "", licenseExp: "", medical: "Yes", medicalExp: "2026-07-03" },6        { name: "Werner Swart", id: "Yes", passport: "Yes", passportExp: "2032-12-04", license: "Yes", licenseExp: "2026-03-03", medical: "Yes", medicalExp: "2025-10-30" },7        { name: "Byron Nienaber", id: "Yes", passport: "No", passportExp: "2025-10-15", license: "Yes", licenseExp: "2028-12-05", medical: "Yes", medicalExp: "2026-02-18" },8        { name: "Morne Heyneke", id: "Yes", passport: "No", passportExp: "2025-10-15", license: "Yes", licenseExp: "2028-11-23", medical: "Yes", medicalExp: "2025-10-30" },9        { name: "Willem Steyn", id: "Yes", passport: "", passportExp: "2025-10-15", license: "", licenseExp: "", medical: "Yes", medicalExp: "2026-02-18" },10        { name: "Nathan O'Neil", id: "Yes", passport: "", passportExp: "2025-10-15", license: "", licenseExp: "", medical: "Yes", medicalExp: "2026-02-17" },11        { name: "Ruan Ferreira", id: "Yes", passport: "No", passportExp: "2025-10-15", license: "Yes", licenseExp: "2029-11-20", medical: "No", medicalExp: "2025-10-13" },12        { name: "Teo Van Der Merwe", id: "Yes", passport: "Yes", passportExp: "TBC", license: "Yes", licenseExp: "2026-04-06", medical: "Yes", medicalExp: "2026-02-18" },13        { name: "Ruben Truter", id: "Yes", passport: "Yes", passportExp: "TBC", license: "Yes", licenseExp: "2028-08-23", medical: "No", medicalExp: "2025-10-13" }14    ];15 16    // Vehicle data17    const vehicles = [18        { reg: "HY 48VW GP", make: "Havaal H2", driver: "Jenette Ungerer", disk: "Yes", diskExp: "2026-08-31", km: 0, nextService: "30 000" },19        { reg: "CL 74TS GP", make: "Pajero 3.2 DI-D GLS A/T", driver: "Steven Malinsky", disk: "Yes", diskExp: "2026-08-31", km: 0, nextService: "30 000" },20        { reg: "TST 967 GP", make: "Hyundai H100 2.6i", driver: "Delivery Vehicle", disk: "Yes", diskExp: "", km: 196979, nextService: "13 021" },21        { reg: "LS 15 GM GP", make: "JAC N56 2.8 TD F/C D/S Truck", driver: "Pool Vehicle", disk: "Yes", diskExp: "2026-04-30", km: 6224, nextService: "8 776" },22        { reg: "HY 52PW GP", make: "Havaal H1 1.5VVT", driver: "Kevin McLoghry", disk: "Yes", diskExp: "2026-08-31", km: 165000, nextService: "15 000" },23        { reg: "JW 60RP GP", make: "Havaal H1 1.5VVT", driver: "Arie Claassens", disk: "Yes", diskExp: "2026-01-31", km: 91642, nextService: "13 358" },24        { reg: "DM 44JT GP", make: "Ranger 2.2 TDCi XL D/CAB", driver: "Ruan Ferreira", disk: "Yes", diskExp: "2026-08-31", km: 240000, nextService: "15 000" },25        { reg: "JL 19YW GP", make: "Ranger 2.2 TDCi XL D/CAB", driver: "Mark Isaacs", disk: "Yes", diskExp: "", km: 315000, nextService: "15 000" },26        { reg: "CH 25RS GP", make: "Chev Utility 1.4 S/C P/U", driver: "Pool Vehicle", disk: "Yes", diskExp: "", km: 272630, nextService: "2 370" },27        { reg: "CR 05MS GP", make: "Chev Utility 1.4 S/C P/U", driver: "Byron Nienaber", disk: "Yes", diskExp: "2026-07-31", km: 263027, nextService: "6 973" },28        { reg: "CW 72ZR GP", make: "Chev Utility 1.4 S/C P/U", driver: "Pool Vehicle", disk: "Yes", diskExp: "2026-01-31", km: 203003, nextService: "6 997" },29        { reg: "LL 05 DB GP", make: "Isuzu D-Max 1.9 Ddi HR LS A/T E-CAB", driver: "Jacek Michalowski", disk: "Yes", diskExp: "2025-10-31", km: 75319, nextService: "14 681" },30        { reg: "LT 78YY GP", make: "Isuzu D-Max 1.9 Ddi HR LS A/T E-CAB", driver: "Sarel O'Neil", disk: "Yes", diskExp: "", km: 45000, nextService: "15 000" },31        { reg: "LT 78YW GP", make: "Isuzu D-Max 1.9 Ddi HR LS A/T E-CAB", driver: "Gene Luckhoff", disk: "Yes", diskExp: "", km: 30000, nextService: "15 000" },32        { reg: "LZ 18WD GP", make: "Isuzu D-Max 1.9 Ddi HR LS A/T E-CAB", driver: "Phillip Jacobs", disk: "Yes", diskExp: "", km: 11028, nextService: "3 972" },33        { reg: "LZ 18VR GP", make: "Isuzu D-Max 1.9 Ddi HR LS A/T E-CAB", driver: "Anton Koen", disk: "Yes", diskExp: "2026-09-30", km: 30080, nextService: "14 920" }34    ];35 36    // Populate employee table37    const employeeTable = document.getElementById('employeeTable');38    employees.forEach(emp => {39        const row = document.createElement('tr');40        41        // Function to create status cell42        const createStatusCell = (status, exp) => {43            const cell = document.createElement('td');44            cell.className = 'px-6 py-4 whitespace-nowrap';45            46            const div = document.createElement('div');47            div.className = 'flex items-center';48            49            const statusDiv = document.createElement('div');50            statusDiv.className = `h-3 w-3 rounded-full mr-2 ${status ? 'bg-green-500' : 'bg-red-500'}`;51            52            const textDiv = document.createElement('div');53            textDiv.className = 'text-sm text-gray-900';54            textDiv.textContent = status ? 'Valid' : 'Invalid';55            56            if (status && exp) {57                const expDiv = document.createElement('div');58                expDiv.className = 'text-xs text-gray-500';59                expDiv.textContent = `Exp: ${exp}`;60                textDiv.appendChild(expDiv);61            }62            63            div.appendChild(statusDiv);64            div.appendChild(textDiv);65            cell.appendChild(div);66            return cell;67        };68        69        // Name cell70        const nameCell = document.createElement('td');71        nameCell.className = 'px-6 py-4 whitespace-nowrap';72        const nameDiv = document.createElement('div');73        nameDiv.className = 'text-sm font-medium text-gray-900';74        nameDiv.textContent = emp.name;75        nameCell.appendChild(nameDiv);76        77        // Append all cells78        row.appendChild(nameCell);79        row.appendChild(createStatusCell(emp.id === "Yes"));80        row.appendChild(createStatusCell(emp.passport === "Yes", emp.passportExp));81        row.appendChild(createStatusCell(emp.license === "Yes", emp.licenseExp));82        row.appendChild(createStatusCell(emp.medical === "Yes", emp.medicalExp));83        84        employeeTable.appendChild(row);85    });86 87    // Populate vehicle table88    const vehicleTable = document.getElementById('vehicleTable');89    vehicles.forEach(vehicle => {90        const row = document.createElement('tr');91        92        // Reg Nr93        const regCell = document.createElement('td');94        regCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';95        regCell.textContent = vehicle.reg;96        97        // Make98        const makeCell = document.createElement('td');99        makeCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';100        makeCell.textContent = vehicle.make;101        102        // Driver103        const driverCell = document.createElement('td');104        driverCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';105        driverCell.textContent = vehicle.driver;106        107        // Disk status108        const diskCell = document.createElement('td');109        diskCell.className = 'px-6 py-4 whitespace-nowrap';110        const diskDiv = document.createElement('div');111        diskDiv.className = 'flex items-center';112        113        const diskStatusDiv = document.createElement('div');114        diskStatusDiv.className = `h-3 w-3 rounded-full mr-2 ${vehicle.disk === "Yes" ? 'bg-green-500' : 'bg-red-500'}`;115        116        const diskTextDiv = document.createElement('div');117        diskTextDiv.className = 'text-sm text-gray-900';118        diskTextDiv.textContent = vehicle.disk === "Yes" ? 'Valid' : 'Invalid';119        120        if (vehicle.diskExp) {121            const diskExpDiv = document.createElement('div');122            diskExpDiv.className = 'text-xs text-gray-500';123            diskExpDiv.textContent = `Exp: ${vehicle.diskExp}`;124            diskTextDiv.appendChild(diskExpDiv);125        }126        127        diskDiv.appendChild(diskStatusDiv);128        diskDiv.appendChild(diskTextDiv);129        diskCell.appendChild(diskDiv);130        131        // Next service132        const serviceCell = document.createElement('td');133        serviceCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';134        135        const progressDiv = document.createElement('div');136        progressDiv.className = 'flex items-center';137        138        const progressBarDiv = document.createElement('div');139        progressBarDiv.className = 'w-full bg-gray-200 rounded-full h-2.5 mr-2';140        141        const progressFillDiv = document.createElement('div');142        progressFillDiv.className = 'bg-blue-600 h-2.5 rounded-full';143        144        // Simple progress calculation for demo purposes145        const nextService = parseInt(vehicle.nextService.replace(/\s/g, ''));146        const currentKm = parseInt(vehicle.km);147        const progress = Math.min(100, (currentKm / (currentKm + nextService)) * 100);148        149        progressFillDiv.style.width = `${progress}%`;150        progressBarDiv.appendChild(progressFillDiv);151        152        progressDiv.appendChild(progressBarDiv);153        progressDiv.innerHTML += `<span class="text-xs">${vehicle.nextService} km</span>`;154        serviceCell.appendChild(progressDiv);155        156        // Append all cells157        row.appendChild(regCell);158        row.appendChild(makeCell);159        row.appendChild(driverCell);160        row.appendChild(diskCell);161        row.appendChild(serviceCell);162        163        vehicleTable.appendChild(row);164    });165 166    // Add hover effect to table rows167    const tableRows = document.querySelectorAll('tbody tr');168    tableRows.forEach(row => {169        row.addEventListener('mouseenter', () => {170            row.classList.add('bg-gray-50');171        });172        row.addEventListener('mouseleave', () => {173            row.classList.remove('bg-gray-50');174        });175    });176});