Feat: Geolocation

src/components/NotificationPanel.js

@@ -12,7 +12,13 @@ const NotificationPanel = ({
   onSendTest,
   onCopyLink,
   copyFeedback,
-  ntfyPreviewUrl
+  ntfyPreviewUrl,
+  location,
+  locationLoading,
+  locationSaving,
+  locationError,
+  onDetectLocation,
+  onClearLocation
 }) => {
   return (
     <div className="mb-6 border border-gray-200 rounded-lg p-4 bg-gray-50">
@@ -171,6 +177,50 @@ const NotificationPanel = ({
         </div>
       </div>
 
+      <div className="mt-6 border border-blue-100 bg-blue-50 rounded-lg p-4">
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+          <div>
+            <h3 className="text-lg font-semibold text-blue-900">Standort für Entfernungssortierung</h3>
+            <p className="text-sm text-blue-800">
+              Der Standort wird für die Entfernungskalkulation im Monitoring genutzt. Nur für dich sichtbar.
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => onDetectLocation?.()}
+              className="px-4 py-2 rounded-md bg-blue-600 text-white text-sm disabled:opacity-60"
+              disabled={!onDetectLocation || locationLoading || locationSaving}
+            >
+              {locationSaving ? 'Speichere...' : 'Standort ermitteln'}
+            </button>
+            {location && (
+              <button
+                type="button"
+                onClick={() => onClearLocation?.()}
+                className="px-4 py-2 rounded-md border border-blue-300 text-blue-700 text-sm bg-white disabled:opacity-60"
+                disabled={!onClearLocation || locationSaving}
+              >
+                Entfernen
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="mt-3 text-sm text-blue-900">
+          {locationLoading ? (
+            <p>Standort wird geladen...</p>
+          ) : location ? (
+            <p>
+              Aktueller Standort: {location.lat.toFixed(4)}, {location.lon.toFixed(4)} (
+              {location.updatedAt ? new Date(location.updatedAt).toLocaleString('de-DE') : 'Zeit unbekannt'})
+            </p>
+          ) : (
+            <p>Kein Standort hinterlegt.</p>
+          )}
+        </div>
+        {locationError && <p className="mt-2 text-sm text-red-600">{locationError}</p>}
+      </div>
+
       <div className="flex items-center justify-end mt-4 gap-3">
         <button
           type="button"