🚗 Department of Motor Traffic (DMT) - Time Tracking Research App

A responsive, multi-lingual web application designed to track and analyze the efficiency of the vehicle transfer process at the Department of Motor Traffic, Sri Lanka.

---

📖 Project Overview

This application serves as a comprehensive data-collection tool to support research on process efficiency and delay identification. By tracking the exact time users spend at each step of the vehicle transfer process (from document checking to fee payment and book collection), the application helps authorities pinpoint bottlenecks and optimize service delivery.

Previously, tracking such metrics manually was error-prone and tedious. This solution digitalizes the process, providing real-time data collection directly into Google Sheets while offering users a helpful guide in their preferred language.

✨ Key Features

• 🌐 Multi-lingual Support: Seamlessly switch between English, Sinhala, and Tamil to accommodate all citizens.
• ⏱️ Granular Time Tracking: Dedicated "Waiting Phase" and "Processing Phase" timers for every counter step.
• 📋 Smart Document Checklist: Built-in verification for required documents (Revenue License, Deed of Sale, NIC, Insurance, etc.).
• 🚦 Dynamic Workflow: Automatically routes users based on service type (One Day vs. Normal) and document availability. Includes an "Information Counter" fallback for users with missing documents.
• 📊 Automated Data Collection: Directly integrates with Google Apps Script to securely save tracking data, timestamps, and step durations to a Google Sheet for research analysis.
• 📱 Mobile-First Design: Optimized for mobile usage via QR code access directly at the DMT premises.

🛠️ Tech Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
• Backend / Database: Google Apps Script (Web App API), Google Sheets
• Architecture: Single Page Application (SPA) driven by Vanilla JS DOM manipulation (No heavy frameworks).

🔍 How It Works (User Flow)

1. Language & Registration: Users select their language and enter basic details (Name, Registration Number, Mobile).
2. Service Selection: Users choose between "One Day Service" or "Normal Service", and select their vehicle class.
3. Document Verification: A checklist ensures users have all necessary paperwork before entering the queue.
4. Step-by-Step Tracking: Users are guided through each physical counter step at the facility. They interact with the app to log wait times vs. processing times.
5. Completion & Analysis: Total times are summarized for the admin, and the granular data is sent to the research database to establish average durations and identify peak traffic patterns.

---

🚀 Setup Instructions

1. Set Up Google Sheets for Data Collection

1. Go to Google Sheets and create a new spreadsheet
2. Name it "DMT Time Tracking Research" or any name you prefer
3. Open the spreadsheet and click on Extensions > Apps Script
4. Delete any existing code and paste the code from server-setup.gs
5. Click Deploy > New deployment
6. Click the gear icon ⚙️ next to "Select type" and choose Web app
7. Configure:
   • Description: "DMT Research Data Collector"
   • Execute as: Me
   • Who has access: Anyone
8. Click Deploy
9. Authorize the app when prompted
10. Copy the Web App URL (it will look like: https://script.google.com/macros/s/ABC123.../exec)

2. Update the Website Code

1. Open script.js
2. Find the line: const response = await fetch('YOUR_SCRIPT_URL', {
3. Replace 'YOUR_SCRIPT_URL' with the URL you copied from step 10
4. Save the file

3. Deploy Your Website

Option A: Host on GitHub Pages (Free)

1. Create a GitHub account if you don't have one
2. Create a new repository
3. Upload index.html, script.js, and styles.css (and all other files)
4. Go to Settings > Pages
5. Enable GitHub Pages
6. Your website URL will be: https://yourusername.github.io/repositoryname

Option B: Host on Netlify (Free)

1. Go to Netlify
2. Drag and drop your folder with all project files
3. Get your website URL

Option C: Local Testing

1. Simply open index.html in a web browser
2. Note: You'll need to deploy online for QR code access from mobile devices

4. Create QR Code

1. Go to any QR code generator (e.g., qr-code-generator.com)
2. Enter your website URL
3. Download and print the QR code
4. Place it at the Department of Motor Traffic location

---

📈 Data Collected

The Google Sheet will automatically collect:

• Timestamp: When the user completed the process
• Name, Vehicle Number, Mobile Number: User identifiers
• Service: Type of service selected (Car, Motorcycle, General)
• Granular Step Times: Time spent at each counter in seconds (Document checks, payments, etc.)
• Total Time: Complete process duration

🎯 Research Use

This data will allow researchers to mathematically analyze:

• Average time spent per step (Waiting vs. Processing)
• Key bottlenecks and systemic delays in the process
• Service efficiency comparisons between different vehicle types
• Peak time patterns and congestion points
• Viable opportunities for infrastructure or process improvement

🔒 Privacy Note

All data collected by this application is strictly used for research purposes to improve service efficiency at the Department of Motor Traffic. No sensitive data is sold or shared.