feat: cho phép người dùng chọn tọa độ trên bản đồ khi sửa ảnh

frontend/src/pages/MyPhotosPage.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useMemo } from 'react';
 import { ChevronLeft, Image as ImageIcon, Download, Calendar, MapPin, Loader2, Filter, X, Trash2, Edit } from 'lucide-react';
 import { useNotification } from '@/hooks/useNotification';
 import { useConfirm } from '@/hooks/useConfirm';
+import { CoordinateSelectModal } from '../components/CoordinateSelectModal';
 
 export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
   const [photos, setPhotos] = useState<any[]>([]);
@@ -19,6 +20,7 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
   const [editLat, setEditLat] = useState<number | ''>('');
   const [editLng, setEditLng] = useState<number | ''>('');
   const [isSavingEdit, setIsSavingEdit] = useState(false);
+  const [isMapOpen, setIsMapOpen] = useState(false);
 
   useEffect(() => {
     if (selectedPhotoForDisplay) {
@@ -345,6 +347,17 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
                             </div>
                           </div>
 
+                          <div className="flex justify-start">
+                            <button
+                              type="button"
+                              onClick={() => setIsMapOpen(true)}
+                              className="flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700 hover:text-gray-900 rounded-xl text-[10px] font-bold transition-all"
+                            >
+                              <MapPin className="w-3.5 h-3.5 text-rose-500" />
+                              Chọn trên bản đồ
+                            </button>
+                          </div>
+
                           <div className="flex justify-end gap-2 mt-2">
                             <button
                               onClick={() => setIsEditing(false)}
@@ -470,6 +483,16 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
           </div>
         {}
       </div>
+      <CoordinateSelectModal
+        isOpen={isMapOpen}
+        onClose={() => setIsMapOpen(false)}
+        initialLat={typeof editLat === 'number' ? editLat : undefined}
+        initialLng={typeof editLng === 'number' ? editLng : undefined}
+        onSelect={(lat, lng) => {
+          setEditLat(lat);
+          setEditLng(lng);
+        }}
+      />
     </div>
   );
 };