Dashboard Overview
Live fleet data analytics and performance indicators
| Reg No | Type of Vehicle | Region | Operational Site | Assigned Responsible Person | Start Odometer | Monthly Budget KM | Service Interval | Service Status | Actions |
|---|
| # | Responsible Person | Operational Region | Operational Site | License Code / Details | Contact / Phone | Mobile PIN | Actions |
|---|
| Date | Reg No | Type of Vehicle | Region | Site | Assigned Responsible Person | Odometer Start (KM) | Odometer End (KM) | Distance (KM) | Over Daily Budget (KM) | Last Service KM | Comments | Actions |
|---|
Below is a computed list of vehicles that have either exceeded their service intervals, or are within 1,500 km of their scheduled service limits.
Below are vehicle problems, breakdowns, and safety faults submitted directly by drivers from their mobile phones.
FLEETOPS ANALYTICS
Corporate Operations & Budget Audit
Monthly Km Budget Overruns
List of vehicles that exceeded their allocated monthly budget limits.
| Reg No | Vehicle Type | Region | Operational Site | Assigned Responsible Person | Budget | Actual KM | Overrun |
|---|
Global Note to Drivers All Regions
Type a message/announcement that will show on all driver phones when they sign in, before they select a vehicle or log odometer readings. If empty, the driver goes directly into the program.
Region Configuration Editor
Configure Regions and their sub-Sites. Region Admins can only view and manage their assigned region's data.
Accessibility & App Colors
Choose background and font colors that are comfortable for your eyes, or select a preset theme.
Preset Themes
Custom Colors
Super Admin: Database Operations
Download a complete JSON snapshot of the live Firebase database. Save these files into your local data/ folder to keep your local testing environment perfectly synced with the live server.
Help Center & Documentation
Guides, FAQs, and reference materials for drivers and managers.
System Architecture & Data Flow Diagram
Admin: Region Pool Setup
Configure shared region pools and mapping for drivers to access via their mobile app.
1. Create the Region Pool Profile
- Access the central FleetOps dashboard: Launch Dashboard
- Go to Vehicle Responsible Person in the sidebar.
- Click the + Add Person button in the top header.
- Fill out the profile fields:
- Full Name: e.g.,
Mining Region Pool - Assigned Region: Choose your region
- Assigned Site: e.g.,
Poolor leave blank - Mobile Login PIN: Set a unique 4-digit PIN (e.g.
1111)
- Full Name: e.g.,
Driver: Phone Setup & Logging
Get started with the mobile web app, install desktop shortcut, and submit closing odometer.
1. Install to Home Screen
- Open Chrome (Android) or Safari (iPhone) and navigate to the capture link: Launch Mobile Capture
- Chrome: Tap the 3-dots in top right → Select Add to Home screen.
- Safari: Tap Share button → Select Add to Home Screen.
Frequently Asked Questions
You can download or view the full review report file at /system_critique_2026.md. Here is the summary review:
🌟 Strengths (Why the program is successful)
- Laser-Focused Utility: It tracks actual vs. budget kilometers, flags overruns, and keeps photo audits without unnecessary complexity.
- Excel-Style Usability: Drag-and-resize table column borders, wrapping, and headers mimic Excel while saving securely to a database.
- Offline Capability: Caching user roles and region pools ensures pages load instantly, even in poor connectivity areas.
- Accountability: Mobile login PIN security and photo uploads keep supervisors accountable.
⚠️ Vulnerabilities & Long-Term Risks
- Monolithic Codebase: The core logic of the app (
app.js) is inside a single 6,000-line file. A single typo anywhere can crash the entire system. - Client-Side Aggregation: Calculations are done on the browser. While fast now, it will slow down as logs accumulate over 10,000+ entries.
- Open Database Rules: The Firestore database utilizes open rules for quick logins. While easy, it is vulnerable to external script tampering.
🚀 Recommended Step-by-Step Roadmap
Here is a detailed, step-by-step roadmap on how we can address and improve each of the three vulnerabilities:
How to Improve it: Adopt ES Modules (JavaScript Modules) to split
app.js into separate, focused files using JavaScript's native imports/exports.Proposed File Structure:
index.html(Importsmain.jswith<script type="module">)src/state.js(Holds global variables, filters, and configuration)src/database.js(Handles Firebase configuration, auth, and database.onSnapshot()listeners)src/tables.js(Manages column resizing, layout persistence, and spreadsheet renderings)src/reports.js(Contains PDF generation, photo reports, and Excel export scripts)src/themes.js(Controls the color preset configurations and DOM overrides)
How to Improve it:
- Firebase Cloud Functions (Backend Aggregation): Move the math heavy calculations to the server. When a driver submits a daily log from their mobile phone, a backend serverless function can run instantly to update the vehicle's aggregate metadata (like
currentOdo,ytdDistance, andserviceStatus). - Firestore Pagination and Query Limits: Update the admin dashboard queries to fetch only the logs needed for the current view (e.g. using
.limit(50)and page cursors) rather than fetching all historical logs simultaneously. - Archival System: Create an automated task to archive logs older than 1 year into a separate historical collection, keeping the active collection small and fast.
allow read, write: if true;), meaning anyone with your Firebase project ID could theoretically write scripts to edit, delete, or corrupt your fleet data.How to Improve it: Apply strict Firestore Security Rules to validate that requests are coming from authenticated, authorized users.
Basic Rules Example:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Vehicles & Drivers: Admins can write, anyone logged-in can read
match /vehicles/{vehicle} {
allow read: if request.auth != null;
allow write: if request.auth != null && request.auth.token.email != null;
}
// Daily Logs: Drivers can write their own logs; Admins have full access
match /logs/{log} {
allow read, write: if request.auth != null;
}
// Issues & Accident Files: Authentic users can submit reports
match /issues/{issue} {
allow create, read: if request.auth != null;
allow update, delete: if request.auth != null && request.auth.token.email != null;
}
}
}
For Computers (Clear Browser Cache):
- Open the mobile app demo on your computer (/km/).
- Press F12 on your keyboard to open Developer Tools.
- Click the double arrow (
>>) at the top menu next to Network, and select Application. - In the left-side list under Application, click on Storage.
- Click the Clear site data button in the middle, and then reload the page.
For Mobile Phones (Clear Mobile Cache):
- Android (Google Chrome): Tap the three dots menu in Chrome, then tap the circular Reload icon at the top of the menu.
- iPhone (Safari): Close the app, go to your iPhone's Settings app > Safari > **Advanced** > **Website Data**. Swipe left on
fleetwatcher.co.zaand tap Delete.
- Re-check your vehicle's dashboard cluster for the exact mileage.
- Ensure you didn't accidentally miskey a number (e.g. typing 1234 instead of 12340).
- Each vehicle has a configured Service Interval (KM) in the Vehicle Registry (e.g., 10,000 KM).
- The system continuously calculates mileage logged since the last recorded service (which defaults to the starting odometer reading if no service has been logged yet).
- A Service Warning (yellow badge) is triggered when a vehicle is within 1,500 KM of its next scheduled service milestone.
- A Due for Service (red badge) is triggered once the current odometer reading meets or exceeds the next scheduled service threshold.
Once a physical service is completed, it must be logged in the database. A Super Admin resets the status by adjusting the vehicle's last service odometer milestone in the logs database, which shifts the next service target forward by the configured interval and resets all active warnings/danger alerts back to a healthy state.
- The KM Capture App is fully optimized to cache your logged entries in the local browser database.
- You will receive a confirmation that your entry has been queued locally.
- Once your mobile phone regains network or Wi-Fi connection, the app will automatically push the cached data to the central Firestore cloud.
| Role | Permissions |
|---|---|
| Super Admin | Full database read/write access. Can add/modify operational regions, set global budgets, and view dashboard analytics across all regions. |
| Region Admin | Can read/write vehicles, responsible persons, and daily logs. Restricted entirely to their assigned operational region scope. |
| Operator | Read-only dashboard view and log checking. Ideal for monitoring teams and generating PDF/Excel reports. |
- Excel Export: Click the "Export Excel" button at the top header from the Vehicle Registry, Drivers Registry, Daily Operations Logs, or Reports page to instantly download a professionally formatted spreadsheet — branded title band, styled header row, zebra-striped rows, auto-sized columns, a frozen header with filters, and red highlighting on overrun/exceeded/missing values.
- PDF Branding: Every PDF export (Vehicle Registry, Drivers Registry, Daily Operations Logs, Service & Alerts, and Reports) now opens with the same branded Thorburn Security Solutions title band and navy header row as the Excel exports, with zebra-striped rows and color-coded status/overrun badges, for a consistent look across both formats.
- Live Reports Preview: The Operational Reports screen's preview card is always shown in the same white, spreadsheet-styled "paper" look as the finished Excel/PDF export — not just after you export — so what you see on screen while choosing filters is exactly what you'll get in the file.
- Service & Alerts PDF: Click "Export PDF" at the top of the Service & Alerts page to download a signature-ready report covering both the Maintenance Schedule Alerts and the Driver Reported Issues & Vehicle Faults sections.
- PDF Report: Navigate to the Reports page, choose your filter criteria, and click the "Print / Save PDF" button to download a formatted, signature-ready compliance document.
- New Reports: You can now export the new "Missing Daily Logs Report" (which tracks specific missed dates) and the "Underutilized Vehicles Report" directly to Excel as well!
- 5-Day PDF Limit on Daily Operations Logs: To keep printed audit sheets a manageable size, the "Export PDF" button on the Daily Operations Logs page only works if the earliest and latest dates in your current filter are 5 days apart or less — this applies to any date range, past or recent. If it's blocked, narrow the date filter (e.g. a Custom Range spanning 5 days or fewer) and try again. This limit doesn't apply to Excel exports.
- Go to the Theme & Colors section in the sidebar menu.
- Click on the Dark Mode (Default) preset button.
- The application will instantly reset back to its standard, highly readable slate and sky blue dashboard color palette.
- It calculates the total distance the vehicle actually drove during the selected period.
- It calculates what the expected budget distance was for that specific time frame.
- It displays the Last Movement Date, which looks at the vehicle's entire historical database to tell you the exact date it was last driven.
- Vehicles with 0% utilization are highlighted in red, and those below 20% are highlighted in orange.
- Go to the Theme & Colors section in the sidebar menu, and scroll down to Super Admin: Database Operations.
- Click the Export Full Database (JSON) button. This will safely download three files —
vehicles.json,daily_logs.json, anddrivers.json— to your Downloads folder. - To sync this downloaded data to your local computer's offline environment, copy those three files into the
data/folder of your local project directory, overwriting the existing copies.
Android (Chrome):
- Open Google Chrome and navigate to:
https://fleetwatcher.co.za/km/ - Tap the three dots (menu) in the top-right corner.
- Select Add to Home screen or Install app.
iPhone (Safari):
- Open Safari and navigate to:
https://fleetwatcher.co.za/km/ - Tap the Share button (square icon with an arrow pointing up at the bottom).
- Scroll down the menu and select Add to Home Screen, then tap Add in the top right.
- Take Photo: Opens your mobile device's camera app directly to capture a new photo.
- From Gallery: Opens your device's photo gallery to choose pre-existing photos.
- You can capture multiple photos in a single session by tapping "Take Photo" repeatedly. They will be added to the queue in a grid before you upload them.
- Mechanical fault: Pick what is wrong, rate how serious it is (Minor / Needs attention / Urgent), optionally add a description, then tap SEND REPORT.
- Accident: Tap the red Accident? Report it here button instead. Fill in the date, time, and location, describe what happened, and note whether another vehicle or third party was involved, then submit.
- Go to the Reports page in the main dashboard.
- Select the Vehicle Photos Report, pick the vehicle, and click the **Run Report** button.
- Locate the photo to delete in the report table.
- Click the red **Delete** button next to "View Full Size" in the Actions column. Confirm the deletion, and the photo will be permanently removed from the central database.
- Service & Alerts Page: Unresolved issues appear inside the Driver Reported Issues & Vehicle Faults section. You will see a red alert count badge next to "Service & Alerts" in the sidebar. You can click Resolve & Close to close them.
- Vehicle Photos Report (Reports Page): Any accident or issue photos submitted by drivers will automatically load into the report, labeled as Driver (Accident/Issue Report) in the Uploaded By column.
- Click on the Theme & Colors section in the sidebar.
- Choose from the **12 preset themes** (Dark Mode Default, Soft Light Mode, High Contrast, Cozy Amber, Cool Slate, Forest Moss, Deep Ocean, Cyberpunk, Desert Sand, Midnight Plum, Crimson Velvet, and Nord Frost) or create a custom one by tweaking background, sidebar, primary, and font colors.
- The theme settings are automatically saved and loaded on your device.
- Resize Columns: Hover over the border line of any column header, then click and drag left or right to change its width.
- Automatic Saving: The moment you release your mouse, your column layouts are stored in your browser's local cache. The next time you open the screen or reload the app, your columns will stay exactly as you adjusted them.
- Go to the Theme & Colors section in the sidebar, and scroll down to the Custom Colors panel.
- Under the Font Size selector, pick anything from Tiny (smallest) down through Double Extra Small, Extra Small, Small (Default), Medium, Large, up to Extra Large (biggest).
- The text size across the entire application will update instantly to fit your density preference.
- On the Odometer Capture Screen, enter the closing odometer reading from the dashboard.
- Before tapping save, check the checkbox labeled "Vehicle Serviced Today".
- Tap **SAVE**. The system will save this reading as the vehicle's new Last Service KM milestone and clear any active overdue alarms in the administrator dashboard automatically.
- Go to the Operational Reports page.
- Select the report named "Responsible Person Vehicles & Security Pin" from the dropdown list.
- This consolidated sheet displays the driver name, contact phone, their mobile application login PIN, and all vehicles assigned under their control in a single table view.