From 6a10785ec8b45e9976b85b20632c9a56669bf0e5 Mon Sep 17 00:00:00 2001
From: kyle <t72chevy@hotmail.com>
Date: Mon, 2 Feb 2026 23:23:00 +0100
Subject: [PATCH] fix: correct Traccar Client setup instructions

- Remove unreliable QR code scanning, add direct app store links
- Fix server URL to use HTTP (not HTTPS) for port 5055
- OsmAnd protocol doesn't use SSL
- Emphasize that official Traccar Client app is required

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 backend/src/gps/traccar-client.service.ts |  8 ++---
 frontend/src/pages/GpsTracking.tsx        | 37 ++++++++++++++---------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/backend/src/gps/traccar-client.service.ts b/backend/src/gps/traccar-client.service.ts
index 7adc21a..ca790fe 100644
--- a/backend/src/gps/traccar-client.service.ts
+++ b/backend/src/gps/traccar-client.service.ts
@@ -343,7 +343,7 @@ export class TraccarClientService implements OnModuleInit {
 
   /**
    * Get the device port URL for mobile app configuration
-   * Returns hostname:port for Traccar Client app to connect to
+   * Returns full HTTP URL - port 5055 uses OsmAnd protocol without SSL
    */
   getDeviceServerUrl(): string {
     const port = this.configService.get<string>('TRACCAR_DEVICE_PORT') || '5055';
@@ -352,10 +352,10 @@ export class TraccarClientService implements OnModuleInit {
     const traccarUrl = this.getTraccarUrl();
     try {
       const url = new URL(traccarUrl);
-      // Return just hostname:port (no protocol - the app handles that)
-      return `${url.hostname}:${port}`;
+      // Return HTTP URL (not HTTPS) - OsmAnd protocol on port 5055 doesn't use SSL
+      return `http://${url.hostname}:${port}`;
     } catch {
-      return `localhost:${port}`;
+      return `http://localhost:${port}`;
     }
   }
 
diff --git a/frontend/src/pages/GpsTracking.tsx b/frontend/src/pages/GpsTracking.tsx
index 89699b2..f278caf 100644
--- a/frontend/src/pages/GpsTracking.tsx
+++ b/frontend/src/pages/GpsTracking.tsx
@@ -776,23 +776,32 @@ export function GpsTracking() {
                   </div>
                 )}
 
-                {/* QR Code for Traccar Client app */}
-                <div className="bg-white p-4 rounded-lg border border-border">
+                {/* Manual Configuration - Traccar Client doesn't reliably scan QR codes */}
+                <div className="bg-blue-50 dark:bg-blue-950/30 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
                   <div className="flex items-center gap-2 mb-3">
-                    <QrCode className="h-5 w-5 text-primary" />
-                    <span className="text-sm font-medium text-foreground">Scan with Traccar Client</span>
+                    <Smartphone className="h-5 w-5 text-blue-600" />
+                    <span className="text-sm font-medium text-blue-800 dark:text-blue-200">Download Traccar Client</span>
                   </div>
-                  <div className="flex justify-center">
-                    {/* Traccar Client expects: serverUrl?id=xxx&interval=xxx&accuracy=high */}
-                    <QRCodeSVG
-                      value={`https://${enrollmentResult.serverUrl.replace(/:\d+$/, '')}?id=${enrollmentResult.deviceIdentifier}&interval=${settings?.updateIntervalSeconds || 60}&accuracy=high`}
-                      size={180}
-                      level="M"
-                      includeMargin={true}
-                    />
+                  <div className="flex gap-2 justify-center mb-3">
+                    <a
+                      href="https://apps.apple.com/app/traccar-client/id843156974"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
+                    >
+                      iOS App Store
+                    </a>
+                    <a
+                      href="https://play.google.com/store/apps/details?id=org.traccar.client"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700"
+                    >
+                      Google Play
+                    </a>
                   </div>
-                  <p className="text-xs text-center text-muted-foreground mt-2">
-                    Open Traccar Client → Settings → Scan QR Code
+                  <p className="text-xs text-center text-blue-700 dark:text-blue-300">
+                    Must use official Traccar Client app (not other GPS apps)
                   </p>
                 </div>