From b93d05455892fad453ace9f4c72bd2fdd44d32dd Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Mon, 3 Nov 2025 19:47:31 +0100
Subject: [PATCH] Improve QR test page: better error handling and de-emphasize
 vessel info

- Enhanced error handling to show HTTP status codes (e.g., "HTTP 404: Not Found")
- Moved vessel information to collapsible section at bottom
- Clear vessel default values (was pre-filled with test data)
- Added note explaining vessel info is metadata only, not used in calculations
- Made vessel fields visually de-emphasized with gray text and optional labels
---
 app/qr-test/page.tsx | 87 +++++++++++++++++++++++++++-----------------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/app/qr-test/page.tsx b/app/qr-test/page.tsx
index fcac1e0..8ec82ec 100644
--- a/app/qr-test/page.tsx
+++ b/app/qr-test/page.tsx
@@ -13,8 +13,8 @@ export default function QRTestPage() {
   const [fuelAmount, setFuelAmount] = useState('500');
   const [fuelUnit, setFuelUnit] = useState<'liters' | 'gallons'>('liters');
   const [customAmount, setCustomAmount] = useState('5');
-  const [vesselName, setVesselName] = useState('Test Yacht');
-  const [imo, setImo] = useState('1234567');
+  const [vesselName, setVesselName] = useState('');
+  const [imo, setImo] = useState('');
 
   // Response state
   const [isLoading, setIsLoading] = useState(false);
@@ -99,6 +99,20 @@ export default function QRTestPage() {
         body: JSON.stringify(requestData),
       });
 
+      // Check HTTP status first
+      if (!res.ok) {
+        let errorMessage = `HTTP ${res.status}: ${res.statusText}`;
+        try {
+          const errorData = await res.json();
+          if (errorData.error) {
+            errorMessage = errorData.error;
+          }
+        } catch {
+          // Not JSON, use status text
+        }
+        throw new Error(errorMessage);
+      }
+
       const result = await res.json();
 
       if (!result.success) {
@@ -199,37 +213,6 @@ export default function QRTestPage() {
               </select>
             </div>
 
-            {/* Vessel Information */}
-            <div className="mb-6 p-4 bg-gray-50 rounded-lg">
-              <h3 className="text-sm font-semibold text-gray-700 mb-3">Vessel Information (Optional)</h3>
-              <div className="space-y-3">
-                <div>
-                  <label className="block text-xs font-medium text-gray-600 mb-1">
-                    Vessel Name
-                  </label>
-                  <input
-                    type="text"
-                    value={vesselName}
-                    onChange={(e) => setVesselName(e.target.value)}
-                    placeholder="e.g., Test Yacht"
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
-                  />
-                </div>
-                <div>
-                  <label className="block text-xs font-medium text-gray-600 mb-1">
-                    IMO Number
-                  </label>
-                  <input
-                    type="text"
-                    value={imo}
-                    onChange={(e) => setImo(e.target.value)}
-                    placeholder="e.g., 1234567"
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
-                  />
-                </div>
-              </div>
-            </div>
-
             {/* Conditional Fields */}
             {calculationType === 'distance' && (
               <div className="space-y-4 mb-6">
@@ -312,6 +295,44 @@ export default function QRTestPage() {
               </div>
             )}
 
+            {/* Vessel Information - Optional Metadata */}
+            <details className="mb-6">
+              <summary className="cursor-pointer text-sm font-medium text-gray-500 hover:text-gray-700 mb-3 flex items-center">
+                <span>Optional: Vessel Information (metadata only - not used in calculations)</span>
+              </summary>
+              <div className="mt-3 p-4 bg-gray-50 rounded-lg border border-gray-200">
+                <p className="text-xs text-gray-600 mb-3 italic">
+                  Note: Vessel name and IMO are stored as metadata only. They are not used in carbon calculations.
+                </p>
+                <div className="space-y-3">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-600 mb-1">
+                      Vessel Name
+                    </label>
+                    <input
+                      type="text"
+                      value={vesselName}
+                      onChange={(e) => setVesselName(e.target.value)}
+                      placeholder="e.g., My Yacht (optional)"
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-600 mb-1">
+                      IMO Number
+                    </label>
+                    <input
+                      type="text"
+                      value={imo}
+                      onChange={(e) => setImo(e.target.value)}
+                      placeholder="e.g., 1234567 (optional)"
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+            </details>
+
             {/* Generate Button */}
             <button
               onClick={handleGenerate}