fleetmap-reports 2.0.356 → 2.0.358

package/.claude/worktrees/eager-stonebraker-c08ac7/src/stop-report.js

@@ -0,0 +1,242 @@
+const { devicesToProcess, deviceName } = require('./util/device')
+const automaticReports = require('./automaticReports')
+const traccarHelper = require('./util/traccar')
+const { getNearestPOIs, insideGeofence, loadGroupsData } = require('./util/geofence')
+const {
+  getTranslations, convertToLocaleString, convertMS,
+  getLanguage
+} = require('./util/utils')
+const jsPDF = require('jspdf')
+const { headerFromUser, addTable } = require('./util/pdfDocument')
+const { getStyle } = require('./reportStyle')
+const { getUserPartner } = require('fleetmap-partners')
+const { calculateStopDuration } = require('./util/trips')
+
+const fileName = 'StopReport'
+
+async function createStopReport (from, to, userData, traccar) {
+  console.log('Create StopReport')
+  const reportData = []
+
+  const report = await createStopReportByDevice(from, to, userData, traccar)
+  reportData.push(report)
+
+  return reportData
+}
+
+async function createStopReportByDevice (from, to, userData, traccar) {
+  const devices = devicesToProcess(userData)
+
+  const allData = {
+    devices: []
+  }
+
+  await loadGroupsData(userData, traccar)
+
+  const sliced = automaticReports.sliceArray(devices, 5)
+
+  let deviceCount = 0
+  for (const slice of sliced) {
+    const allInOne = await traccarHelper.getAllInOne(traccar, from, to, slice, true, false, true, false, deviceCount, devices.length)
+    console.log('Stops:' + allInOne.stops.length)
+
+    if (allInOne.stops.length > 0) {
+      allData.devices.push(...processDevices(from, to, slice, allInOne, userData))
+    }
+    deviceCount = deviceCount + slice.length
+  }
+
+  return allData
+}
+
+function processDevices (from, to, devices, data, userData) {
+  const devicesResult = []
+
+  devices.forEach(d => {
+    const deviceStops = data.stops.filter(t => t.deviceId === d.id)
+    const route = data.route.filter(t => t.deviceId === d.id)
+
+    deviceStops.forEach(stop => {
+      stop.stopDuration = calculateStopDuration(stop)
+    })
+
+    if (deviceStops.length && route.length && !route[0].attributes.ignition) {
+      deviceStops[0].startTime = undefined
+    }
+
+    const filteredStops = deviceStops.filter(s => s.stopDuration > (userData.minimumStopMinutes ? userData.minimumStopMinutes * 60 * 1000 : 0))
+
+    filteredStops.forEach(stop => {
+      const routeInsideGeofence = route.filter(p =>
+        new Date(p.fixTime).getTime() >= new Date(stop.startTime).getTime() &&
+          new Date(p.fixTime).getTime() <= new Date(stop.endTime).getTime())
+
+      const nearestPOIs = getNearestPOIs(stop.longitude, stop.latitude, userData.geofences)
+      if (nearestPOIs.length > 0) {
+        stop.endPOIName = nearestPOIs[0].p.name
+      }
+
+      routeInsideGeofence.every(p => {
+        const geofence = userData.geofences.filter(g => g && g.area.startsWith('POLYGON')).find(g =>
+          insideGeofence({ latitude: p.latitude, longitude: p.longitude }, g)
+        )
+        if (geofence) {
+          const group = userData.groups.find(g => g.geofenceIds && g.geofenceIds.includes(geofence.id))
+          stop.geofenceName = geofence.name
+          stop.geofenceGroup = (group && group.name) || ''
+          return false
+        }
+        return true
+      })
+    })
+
+    if (filteredStops.length > 0) {
+      const deviceData = {
+        device: d,
+        from,
+        to,
+        stops: filteredStops
+      }
+
+      devicesResult.push(deviceData)
+    }
+  })
+
+  return devicesResult
+}
+
+async function exportStopReportToPDF (userData, reportData) {
+  console.log('Export stop report to PDF')
+
+  const timezone = userData.user.attributes.timezone
+  const translations = getTranslations(userData)
+  const lang = getLanguage(userData)
+  const stopsData = userData.byDriver ? reportData.drivers : reportData.devices
+
+  const headers = [
+    translations.report.start,
+    translations.report.end,
+    translations.report.address,
+    translations.report.idleTime,
+    translations.report.event_ignitionOff,
+    translations.report.zone
+  ]
+
+  if (stopsData) {
+    // eslint-disable-next-line new-cap
+    const doc = new jsPDF.jsPDF('l')
+    await headerFromUser(doc, translations.report.titleTripReport, userData.user)
+
+    stopsData.forEach(function (d, index) {
+      const data = []
+      const name = deviceName(d.device)
+      const group = userData.groups.find(g => d.device.groupId === g.id)
+
+      const space = index === 0 ? 8 : 0
+      if (index) {
+        doc.addPage()
+      }
+
+      doc.setFontSize(13)
+      doc.text(name, 20, space + 20)
+      doc.setFontSize(11)
+      doc.text(group ? translations.report.group + ': ' + group.name : '', 200, space + 20)
+      doc.text(convertToLocaleString(d.from, lang, timezone) + ' - ' + convertToLocaleString(d.to, lang, timezone), 20, space + 25)
+      doc.text(translations.report.minimumMinutes + ': ' + userData.minimumStopMinutes + ' ' + translations.report.minutes, 20, space + 35)
+
+      d.stops.forEach(a => {
+        data.push([
+          getStopStart(userData.user, a),
+          getStopEnd(userData.user, a),
+          a.endPOIName || a.address,
+          convertMS(a.engineHours, true),
+          convertMS(a.stopDuration, true),
+          (a.geofenceName || '') + (a.geofenceGroup ? ' (' + a.geofenceGroup + ')' : '')
+        ])
+      })
+
+      const footValues = [
+        'Total:' + d.stops.length,
+        '', '', '',
+        convertMS(d.stops.reduce((a, b) => a + b.engineHours, 0), true),
+        convertMS(d.stops.reduce((a, b) => a + b.stopDuration, 0), true)]
+
+      const style = getStyle(getUserPartner(userData.user))
+      addTable(doc,
+        headers, data, footValues, style,
+        space + 45,
+        {
+          4: { halign: 'right' },
+          5: { halign: 'right' }
+        })
+    })
+    return doc
+  }
+}
+
+function exportStopReportToExcel (userData, reportData) {
+  console.log('Export stop report to Excel')
+
+  const translations = getTranslations(userData)
+
+  const settings = {
+    sheetName: translations.report.titleStopReport, // The name of the sheet
+    fileName // The name of the spreadsheet
+  }
+
+  const headers = [
+    { label: translations.report.vehicle, value: 'name' },
+    { label: translations.report.start, value: 'start' },
+    { label: translations.report.end, value: 'end' },
+    { label: translations.report.address, value: 'address' },
+    { label: translations.report.idleTime, value: 'idleTime' },
+    { label: translations.report.event_ignitionOff, value: 'stopTime' },
+    { label: translations.report.zone, value: 'zone' }
+  ]
+
+  let data = []
+  if (reportData.devices) {
+    reportData.devices.forEach(d => {
+      data = data.concat([{}])
+      data = data.concat(d.stops.map(a => {
+        return {
+          name: a.deviceName,
+          start: getStopStart(userData.user, a),
+          end: getStopEnd(userData.user, a),
+          address: a.endPOIName || a.address,
+          idleTime: convertMS(a.engineHours, true),
+          stopTime: convertMS(a.stopDuration, true),
+          zone: (a.geofenceName || '') + (a.geofenceGroup ? ' (' + a.geofenceGroup + ')' : '')
+        }
+      }))
+      // Totals
+      data = data.concat([{
+        name: d.stops.length,
+        idleTime: convertMS(d.stops.reduce((a, b) => a + b.engineHours, 0), true),
+        stopTime: convertMS(d.stops.reduce((a, b) => a + b.stopDuration, 0), true)
+      }])
+      data = data.concat([{}])
+    })
+    console.log(data)
+    return {
+      headers,
+      data,
+      settings
+    }
+  }
+}
+
+function getStopStart (user, stop) {
+  return stop.startTime ? convertToLocaleString(stop.startTime, user.attributes.lang, user.attributes.timezone) : ''
+}
+
+function getStopEnd (user, stop) {
+  return stop.endTime ? convertToLocaleString(stop.endTime, user.attributes.lang, user.attributes.timezone) : ''
+}
+
+exports.createStopReport = createStopReport
+exports.exportStopReportToPDF = exportStopReportToPDF
+exports.exportStopReportToExcel = exportStopReportToExcel
+exports.create = createStopReport
+exports.exportToPDF = exportStopReportToPDF
+exports.exportToExcel = exportStopReportToExcel

package/.claude/worktrees/eager-stonebraker-c08ac7/src/templates/ActivityReportTemplate.mjml

@@ -0,0 +1,51 @@
+<mjml>
+    <mj-body background-color="#fff" font-size="13px" padding-right="0px" padding-left="0px">
+        <mj-section padding="10px 5px 0px 5px" >
+            <mj-column width="60%" style="float: left" text-align="left">
+                <mj-text>
+                    <span style="font-size:18px;font-weight: bold">{{ translations.titleActivityReport }}</span>
+                </mj-text>
+            </mj-column>
+            <mj-column width="40%">
+                <mj-image width="120px" :src="url + '/' + logo"></mj-image>
+            </mj-column>
+        </mj-section>
+        <mj-section>
+            <mj-section padding="0px">
+                <mj-table>
+                    <tr style="font-size:11px">
+                        <th colspan="3" style="text-align: left">
+                            <span style="font-weight: bold;font-size:12px">{{ translations.from }} {{reportData.from.toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone })}} {{ translations.to }} {{reportData.to.toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone })}}</span>
+                        </th>
+                    </tr>
+                </mj-table>
+            </mj-section>
+            <mj-section>
+                <mj-table>
+                    <tr :style="'font-size:10px;background-color:'+color+';color:white'">
+                        <th>{{ translations.vehicle }}</th>
+                        <th>{{ translations.group }}</th>
+                        <th>{{ translations.distance }}</th>
+                        <th>{{ translations.startOdometer }}</th>
+                        <th>{{ translations.endOdometer }}</th>
+                        <th>{{ translations.avgSpeed }}</th>
+                        <th>{{ translations.maxSpeed }}</th>
+                        <th>{{ translations.engineHours }}</th>
+                        <th>{{ translations.spentFuel }}</th>
+                    </tr>
+                    <tr style="font-size:9px" v-for="device in reportData.devices" v-bind:key="device.deviceId">
+                        <th>{{device.device.name}}</th>
+                        <th>{{device.device.groupName}}</th>
+                        <th>{{(device.summary[0].distance/1000).toFixed(0)}}</th>
+                        <th>{{(device.summary[0].startOdometer/1000).toFixed(0)}}</th>
+                        <th>{{(device.summary[0].endOdometer/1000).toFixed(0)}}</th>
+                        <th>{{Math.round(device.summary[0].averageSpeed * 1.85200)}}</th>
+                        <th>{{Math.round(device.summary[0].maxSpeed * 1.85200)}}</th>
+                        <th>{{convertMS(device.summary[0].engineHours)}}</th>
+                        <th>{{device.summary[0].convertedSpentFuel >= 0 ? device.summary[0].convertedSpentFuel : 0}}</th>
+                    </tr>
+                </mj-table>
+            </mj-section>
+        </mj-section>
+    </mj-body>
+</mjml>

package/.claude/worktrees/eager-stonebraker-c08ac7/src/templates/EmptyReportTemplate.mjml

@@ -0,0 +1,25 @@
+<mjml>
+    <mj-body background-color="#fff" font-size="13px" padding-right="0px" padding-left="0px">
+        <mj-section   padding-bottom="10px" padding-top="20px">
+            <mj-column  width="60%">
+                <mj-text>
+                    <span style="font-size:25px">{{ translations['title'+reportData.reportType] }}</span>
+                </mj-text>
+            </mj-column>
+            <mj-column width="40%">
+                <mj-image width="120px" :src="url + '/' + logo"></mj-image>
+            </mj-column>
+        </mj-section>
+        <mj-section>
+            <mj-text>
+                <span style="font-weight: bold;font-size:11px">
+                    {{ translations.from }} {{ device.from.toLocaleDateString(user.attributes.lang, { timeZone: user.attributes.timezone }) }}
+                    {{ translations.to }} {{ device.to.toLocaleDateString(user.attributes.lang, { timeZone: user.attributes.timezone }) }}</span>
+            </mj-text>
+            <mj-text>
+                <span style="font-size:25px">Relatório sem dados</span>
+            </mj-text>
+        </mj-section>
+
+    </mj-body>
+</mjml>

package/.claude/worktrees/eager-stonebraker-c08ac7/src/templates/EventsReportTemplate.mjml

@@ -0,0 +1,75 @@
+<mjml>
+  <mj-head>
+  </mj-head>
+  <mj-body background-color="#fff" font-size="13px" padding-right="0px" padding-left="0px">
+    <mj-section padding="10px 5px 0px 5px" >
+        <mj-column width="60%" style="float: left" text-align="left">
+            <mj-text>
+                <span style="font-size:18px;font-weight: bold">{{ translations.titleEventsReport }}</span>
+            </mj-text>
+        </mj-column>
+        <mj-column width="40%">
+            <mj-image width="120px" :src="url + '/' + logo"></mj-image>
+        </mj-column>
+    </mj-section>
+    <mj-section  v-for="(device, index) in reportData.devices" v-bind:key="device.deviceId" padding="0px">
+      <mj-column>
+          <mj-wrapper border="1px solid #000000" padding="20px 10px">
+            <mj-table>
+              <tr>
+                <th colspan="4" style="text-align: left">
+                    <span style="font-weight: bold;font-size:13px">{{device.device.name}}{{device.device.attributes.license_plate ? ', ' +device.device.attributes.license_plate : ''}}{{device.device.model ? ', ' + device.device.model : ''}}</span>
+                    <span style="float:right; font-size:11px">{{ device.device.groupName ? translations.group + ': ' + device.device.groupName : ''}}</span><br/>
+                    <span style="font-size:11px">{{ translations.from }} {{ device.from.toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone }) }} {{ translations.to }} {{ device.to.toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone }) }}</span>
+                </th>
+              </tr>
+              <tr style="font-size:10px">
+                 <th><span style="font-weight: bold;">{{ translations.event_ignitionOn }}</span></th>
+                 <th><span style="font-weight: bold;">{{ translations.event_ignitionOff }}</span></th>
+                 <th><span style="font-weight: bold;">{{ translations.event_geofenceEnter }}</span></th>
+                 <th><span style="font-weight: bold;">{{ translations.event_geofenceExit}}</span></th>
+                 <th><span style="font-weight: bold;">{{ translations.event_deviceOverspeed}}</span></th>
+              </tr>
+              <tr style="font-size:10px">
+                 <th>{{ device.alerts.filter(a => a.type === 'ignitionOn').length }}</th>
+                 <th>{{ device.alerts.filter(a => a.type === 'ignitionOff').length }}</th>
+                 <th>{{ device.alerts.filter(a => a.type === 'geofenceEnter').length }}</th>
+                 <th>{{ device.alerts.filter(a => a.type === 'geofenceExit').length }}</th>
+                 <th>{{ device.alerts.filter(a => a.type === 'deviceOverspeed').length }}</th>
+              </tr>
+              <tr style="font-size:10px">
+                 <th><span style="font-weight: bold;">{{ translations.event_driverChanged }}</span></th>
+                 <th><span style="font-weight: bold;">{{ translations.event_powerOn }}</span></th>
+                 <th><span style="font-weight: bold;">{{ translations.event_sos }}</span></th>
+                 <th><span style="font-weight: bold;">{{ translations.event_deviceFuelDrop}}</span></th>
+              </tr>
+              <tr style="font-size:10px">
+                 <th>{{ device.alerts.filter(a => a.type === 'driverChanged').length }}</th>
+                 <th>{{ device.alerts.filter(a => a.type === 'alarm' && a.attributes.alarm === 'powerOn').length }}</th>
+                 <th>{{ device.alerts.filter(a => a.type === 'alarm' && a.attributes.alarm === 'sos').length }}</th>
+                 <th>{{ device.alerts.filter(a => a.type === 'deviceFuelDrop').length }}</th>
+              </tr>
+           </mj-table>
+           <mj-table>
+              <tr :style="'font-size:10px;background-color:'+color+';color:white'">
+                 <th rowspan="2">{{ translations.eventType }}</th>
+                 <th rowspan="2">{{ translations.date }}</th>
+                 <th rowspan="2">{{ translations.address }}</th>
+                 <th rowspan="2">{{ translations.info }}</th>
+              </tr>
+              <mj-section v-for="(alert, index) in device.alerts" v-bind:key="alert.deviceId">
+                  <tr :style="index%2 ? 'text-align: center;background-color:#E3E3E3' : 'text-align: center;background-color:#FFFFFF'" >
+                     <td style="font-size:10px">{{ alert.type === 'alarm' ? translations['event_'+alert.attributes.alarm] : translations['event_'+alert.type] }}</td>
+                     <td style="font-size:10px">{{alert.position ?
+                      new Date(alert.position.fixTime).toLocaleTimeString(user.attributes.lang, { timeZone: user.attributes.timezone, hour12:false }) :
+                      new Date(alert.serverTime).toLocaleTimeString(user.attributes.lang, { timeZone: user.attributes.timezone, hour12:false })}}</td>
+                     <td style="font-size:10px">{{alert.geofenceName ? alert.geofenceName : (alert.position ? alert.position.address : '')}}</td>
+                     <td style="font-size:10px">{{getAlertInfo(alert)}}</td>
+                  </tr>
+              </mj-section>
+            </mj-table>
+          </mj-wrapper>
+       </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>

package/.claude/worktrees/eager-stonebraker-c08ac7/src/templates/FuelDropReportTemplate.mjml

@@ -0,0 +1,60 @@
+<mjml>
+    <mj-body background-color="#fff" font-size="13px" padding-right="0px" padding-left="0px">
+        <mj-section   padding-bottom="10px" padding-top="20px">
+            <mj-column width="100%">
+                <mj-text>
+                    <span style="font-size:25px">{{ translations.titleFuelDropReport }}</span>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-section>
+            <mj-section padding-bottom="15px">
+                <mj-table>
+                    <tr style="font-size:12px">
+                        <th colspan="3" style="text-align: left">
+                            <span style="font-weight: bold;font-size:12px">{{ translations.from }} {{ reportData.from.toLocaleDateString(user.attributes.lang, { timeZone: user.attributes.timezone }) }} {{ translations.to }} {{ reportData.to.toLocaleDateString(user.attributes.lang, { timeZone: user.attributes.timezone }) }}</span>
+                        </th>
+                    </tr>
+                    <tr style="font-size:12px">
+                        <th><span style="font-weight: bold;">{{ translations.vehicles }}</span></th>
+                        <th><span style="font-weight: bold;">{{ translations.totalFuelDrops }}</span></th>
+                        <th><span style="font-weight: bold;">{{ translations.totalFuelDropLiters }} (L)</span></th>
+                    </tr>
+                    <tr style="font-size:10px">
+                        <th>{{reportData.totalDevices}}</th>
+                        <th>{{reportData.totalFuelDrops}}</th>
+                        <th>{{reportData.totalFuelDropLiters}}</th>
+                    </tr>
+                </mj-table>
+            </mj-section>
+            <mj-section>
+                <mj-table>
+                    <tr :style="'font-size:10px;background-color:'+color+';color:white'">
+                        <th>{{ translations.date }}</th>
+                        <th>{{ translations.address }}</th>
+                        <th>{{ translations.totalFuelDropLiters }} (L)</th>
+                        <th>{{ translations.driver }}</th>
+                    </tr>
+                    <mj-section v-for="(device, index) in reportData.devices" v-bind:key="device.deviceId" >
+                        <tr>
+                            <th colspan="4"><span style="float:left;font-weight: bold;font-size:11px">{{device.device.name}}</span><span style="float:right; font-size:11px">Depósito:{{device.device.attributes.fuel_tank_capacity}}L</span></th>
+                        </tr>
+                        <tr style="font-size:9px" v-for="(alert, index) in device.alerts" v-bind:key="device.deviceId">
+                            <th>{{alert.position.fixTime.substring(0, 10)}} {{alert.position.fixTime.substring(11, 19)}}</th>
+                            <th>{{alert.position.geofenceName ? alert.position.geofenceName : alert.position.address}}</th>
+                            <th>{{alert.fuelDropLiters}}</th>
+                            <th>{{alert.position.driverName ? alert.position.driverName : ''}}</th>
+                        </tr>
+                    </mj-section>
+                </mj-table>
+            </mj-section>
+        </mj-section>
+        <mj-section>
+            <mj-column width="100%">
+                <mj-text align="left" font-family="Ubuntu, Helvetica, Arial, sans-serif">
+                    {{ translations.unsubscribeFuelDropReport.replace('%url%', url) }}
+                </mj-text>
+            </mj-column>
+        </mj-section>
+    </mj-body>
+</mjml>

package/.claude/worktrees/eager-stonebraker-c08ac7/src/templates/IdleReportTemplate.mjml

@@ -0,0 +1,54 @@
+<mjml>
+    <mj-body background-color="#fff" font-size="13px" padding-right="0px" padding-left="0px">
+        <mj-section padding="10px 5px 0px 5px" >
+            <mj-column width="60%" style="float: left" text-align="left">
+                <mj-text>
+                    <span style="font-size:18px;font-weight: bold">{{ translations.titleIdleReport }}</span>
+                </mj-text>
+            </mj-column>
+            <mj-column width="40%">
+                <mj-image width="120px" :src="url + '/' + logo"></mj-image>
+        </mj-column>
+    </mj-section>
+    <mj-section  v-for="(device, index) in reportData.devices" v-bind:key="device.deviceId" >
+        <mj-column>
+            <mj-wrapper border="1px solid #000000" padding="20px 10px">
+                <mj-table>
+                    <tr style="font-size:12px">
+                        <th colspan="4" style="text-align: left">
+                    <span style="font-weight: bold;font-size:12px">
+                        {{device.device.name}}{{device.device.attributes.license_plate ? ', ' +device.device.attributes.license_plate : ''}}{{device.device.model ? ', ' + device.device.model : ''}}</span>
+                            <span style="float:right; font-weight: bold;font-size:11px">
+                        {{ device.device.groupName ? translations.group + ': ' + device.device.groupName : ''}}</span><br/>
+                            <span style="font-weight: bold;font-size:11px">
+                        {{ translations.from }} {{ reportData.from.toLocaleDateString(user.attributes.lang, { timeZone: user.attributes.timezone }) }}
+                                {{ translations.to }} {{ reportData.to.toLocaleDateString(user.attributes.lang, { timeZone: user.attributes.timezone }) }}</span>
+                        </th>
+                    </tr>
+                </mj-table>
+                <mj-table>
+                    <tr :style="'font-size:10px;background-color:'+color+';color:white'">
+                    <th>{{ translations.date }}</th>
+                    <th>{{ translations.address }}</th>
+                    <th>{{ translations.duration }}</th>
+                    <th>{{ translations.driver }}</th>
+                </tr>
+                <tr style="font-size:9px" v-for="(idleEvent) in device.idleEvents" v-bind:key="idleEvent.deviceId">
+                    <th>{{new Date(idleEvent.position.fixTime).toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone, hour12:false })}}</th>
+                    <th><a target=_blank :href="`${url}/#/map?vehicleName=${device.device.name}&date=${new Date(idleEvent.position.fixTime).toISOString()}`">{{idleEvent.position.address}}</a></th>
+                    <th>{{convertMS(idleEvent.idleTime, true)}}</th>
+                    <th>{{idleEvent.driver}}</th>
+                </tr>
+                </mj-table>
+            </mj-wrapper>
+        </mj-column>
+</mj-section>
+<mj-section>
+    <mj-column width="100%">
+        <mj-text align="left" font-family="Ubuntu, Helvetica, Arial, sans-serif">
+            {{ translations.unsubscribeIdleReport.replace('%url%', url) }}
+        </mj-text>
+    </mj-column>
+</mj-section>
+</mj-body>
+</mjml>

package/.claude/worktrees/eager-stonebraker-c08ac7/src/templates/KmsReportGroupByDayTemplate.mjml

@@ -0,0 +1,43 @@
+<mjml>
+    <mj-body background-color="#fff" font-size="13px" padding-right="0px" padding-left="0px">
+        <mj-section padding="10px 5px 0px 5px" >
+            <mj-column width="60%" style="float: left" text-align="left">
+                <mj-text>
+                    <span style="font-size:18px;font-weight: bold">{{ translations.titleKmsReport }}</span>
+                </mj-text>
+            </mj-column>
+            <mj-column width="40%">
+                <mj-image width="120px" :src="url + '/' + logo"></mj-image>
+            </mj-column>
+        </mj-section>
+        <mj-section  v-for="(device, index) in reportData.devices" v-bind:key="device.deviceId" >
+            <mj-table>
+                <tr style="font-size:12px">
+                    <th colspan="4" style="text-align: left">
+                        <span style="font-weight: bold;font-size:12px">{{device.device.name}}{{device.device.attributes.license_plate ? ', ' +device.device.attributes.license_plate : ''}}{{device.device.model ? ', ' + device.device.model : ''}}</span>
+                        <span style="float:right; font-weight: bold;font-size:11px">{{ device.device.groupName ? translations.group + ': ' + device.device.groupName : ''}}</span><br/>
+                        <span style="font-weight: bold;font-size:11px">{{ translations.from }} {{ reportData.from.toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone }) }} {{ translations.to }} {{ reportData.to.toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone }) }}</span>
+                    </th>
+                </tr>
+            </mj-table>
+            <mj-section>
+                <mj-table>
+                    <tr :style="'font-size:10px;background-color:'+color+';color:white'">
+                        <th>{{ translations.date }}</th>
+                        <th>{{ translations.distance }} (Kms)</th>
+                    </tr>
+                    <mj-section v-for="(day, index) in device.days" v-bind:key="index">
+                        <tr :style="index%2 ? 'text-align: center;background-color:#E3E3E3' : 'text-align: center;background-color:#FFFFFF'" >
+                            <td style="font-size:10px">{{ day.date.toLocaleDateString(user.attributes.lang, { timeZone: user.attributes.timezone, hour12:false }) }} - {{ weekDays[day.date.getDay()] }}</td>
+                            <td style="font-size:10px">{{ (day.kms/1000).toFixed(0) }}</td>
+                        </tr>
+                    </mj-section>
+                    <tr :style="'font-size:10px;background-color:'+color+';color:white'">
+                        <td></td>
+                        <td>{{ (device.days.reduce((a, b) => a + b.kms, 0) / 1000).toFixed(0) }}</td>
+                    </tr>
+                </mj-table>
+            </mj-section>
+        </mj-section>
+    </mj-body>
+</mjml>

package/.claude/worktrees/eager-stonebraker-c08ac7/src/templates/KmsReportTemplate.mjml

@@ -0,0 +1,44 @@
+<mjml>
+    <mj-body background-color="#fff" font-size="13px" padding-right="0px" padding-left="0px">
+        <mj-section padding="10px 5px 0px 5px" >
+            <mj-column width="60%" style="float: left" text-align="left">
+                <mj-text>
+                    <span style="font-size:18px;font-weight: bold">{{ translations.titleKmsReport }}</span>
+                </mj-text>
+            </mj-column>
+            <mj-column width="40%">
+                <mj-image width="120px" :src="url + '/' + logo"></mj-image>
+            </mj-column>
+        </mj-section>
+        <mj-section>
+            <mj-section padding-bottom="15px">
+                <mj-table>
+                    <tr style="font-size:11px">
+                        <th colspan="3" style="text-align: left">
+                            <span style="font-weight: bold;font-size:12px">
+                            {{ translations.from }}
+                            {{ reportData.from && reportData.from.toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone })}}
+                            {{ translations.to }}
+                            {{ reportData.to && reportData.to.toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone })}}
+                            </span>
+                        </th>
+                    </tr>
+                </mj-table>
+            </mj-section>
+            <mj-section>
+                <mj-table>
+                    <tr :style="'font-size:10px;background-color:'+color+';color:white'">
+                        <th>{{ translations.vehicle }}</th>
+                        <th>{{ translations.group }}</th>
+                        <th>{{ translations.distance }} (Kms)</th>
+                    </tr>
+                    <tr style="font-size:9px" v-for="device in reportData.devices" v-bind:key="device.deviceId">
+                        <th>{{device.device.name}}</th>
+                        <th>{{device.device.groupName}}</th>
+                        <th>{{(device.summary.distance/1000).toFixed(0)}}</th>
+                    </tr>
+                </mj-table>
+            </mj-section>
+        </mj-section>
+    </mj-body>
+</mjml>

package/.claude/worktrees/eager-stonebraker-c08ac7/src/templates/LocationReportTemplate.mjml

@@ -0,0 +1,37 @@
+<mjml>
+  <mj-body background-color="#fff" font-size="13px" padding-right="0px" padding-left="0px">
+      <mj-section padding="10px 5px 0px 5px" >
+          <mj-column width="60%" style="float: left" text-align="left">
+              <mj-text>
+                  <span style="font-size:18px;font-weight: bold">{{ translations.titleLocationReport }}</span>
+              </mj-text>
+          </mj-column>
+          <mj-column width="40%">
+              <mj-image width="120px" :src="url + '/' + logo"></mj-image>
+          </mj-column>
+      </mj-section>
+    <mj-section  v-for="(device, index) in reportData.devices" v-bind:key="device.deviceId" >
+        <mj-wrapper border="1px solid #000000" padding="20px 10px">
+            <mj-column width="100%">
+              <mj-text align="left" font-family="Ubuntu, Helvetica, Arial, sans-serif">
+                <span style="font-weight: bold;font-size:12px">{{device.device.name}}{{device.device.attributes.license_plate ? ', ' +device.device.attributes.license_plate : ''}}{{device.device.model ? ', ' + device.device.model : ''}}</span>
+                <span style="float:right; font-weight: bold;font-size:11px">{{ device.device.groupName ? translations.group + ': ' + device.device.groupName : ''}}</span><br/>
+                <span style="font-weight: bold;font-size:11px">
+                    {{ translations.from }}
+                    {{ device.from && device.from instanceof Date && device.from.toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone, hour12:false })}}
+                    {{ translations.to }}
+                    {{ device.to && device.to instanceof Date && device.to.toLocaleString(user.attributes.lang, { timeZone: user.attributes.timezone, hour12:false })}}
+                </span>
+              </mj-text>
+            </mj-column>
+        </mj-wrapper>
+    </mj-section>
+    <mj-section>
+            <mj-column width="100%">
+                <mj-text align="left" font-family="Ubuntu, Helvetica, Arial, sans-serif">
+                  {{ translations.unsubscribeLocationsReport && translations.unsubscribeLocationsReport.replace('%url%', url) }}
+                </mj-text>
+            </mj-column>
+        </mj-section>
+  </mj-body>
+</mjml>