feat: tính năng chia sẻ khẩn cấp

frontend/src/components/AddPhotoModal.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
 import { X, Upload, Image as ImageIcon, Loader2 } from 'lucide-react';
 import { useNotification } from '@/hooks/useNotification';
 import { useTourStore } from '@/store/useTourStore';
+import { processImageModeration } from '@/hooks/useImageModeration';
 
 interface AddPhotoModalProps {
   isOpen: boolean;
@@ -14,6 +15,7 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [previews, setPreviews] = useState<string[]>([]);
   const [isUploading, setIsUploading] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const notify = useNotification();
   const fetchTour = useTourStore(state => state.fetchTour);
@@ -26,34 +28,52 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
       const newValidFiles: File[] = [];
       const newValidPreviews: string[] = [];
 
-      for (const file of files) {
-        // 1. Kiểm tra cơ bản: Tệp có dung lượng hay không
-        if (!file || file.size === 0) {
-          notify({ title: 'Lỗi tệp', message: `Tệp ${file.name} trống hoặc không khả dụng.`, type: 'error' });
-          continue;
+      setIsProcessing(true);
+      notify({ title: 'Đang kiểm duyệt...', message: 'Đang kiểm tra và lọc hình ảnh của bạn...', type: 'info' });
+
+      try {
+        for (const file of files) {
+          // 1. Kiểm tra cơ bản: Tệp có dung lượng hay không
+          if (!file || file.size === 0) {
+            notify({ title: 'Lỗi tệp', message: `Tệp ${file.name} trống hoặc không khả dụng.`, type: 'error' });
+            continue;
+          }
+
+          // 2. Chạy kiểm duyệt hình ảnh
+          const moderationResult = await processImageModeration(file);
+          if (moderationResult.blocked) {
+            notify({ title: 'Ảnh bị từ chối', message: `Ảnh ${file.name} chứa nội dung không phù hợp và bị chặn.`, type: 'error' });
+            continue;
+          }
+
+          const processedFile = moderationResult.file;
+          const previewUrl = URL.createObjectURL(processedFile);
+
+          // 3. Kiểm tra tính toàn vẹn: Thử load ảnh vào bộ nhớ để xác nhận file "tồn tại" và đọc được
+          const isValidImage = await new Promise<boolean>((resolve) => {
+            const img = new Image();
+            img.onload = () => resolve(true);
+            img.onerror = () => resolve(false);
+            img.src = previewUrl;
+          });
+
+          if (isValidImage) {
+            newValidFiles.push(processedFile);
+            newValidPreviews.push(previewUrl);
+          } else {
+            URL.revokeObjectURL(previewUrl); // Thu hồi ngay nếu không hợp lệ
+            notify({ title: 'Lỗi ảnh', message: `Không thể đọc nội dung ảnh: ${file.name}. Vui lòng kiểm tra lại file.`, type: 'error' });
+          }
         }
 
-        const previewUrl = URL.createObjectURL(file);
-
-        // 2. Kiểm tra tính toàn vẹn: Thử load ảnh vào bộ nhớ để xác nhận file "tồn tại" và đọc được
-        const isValidImage = await new Promise<boolean>((resolve) => {
-          const img = new Image();
-          img.onload = () => resolve(true);
-          img.onerror = () => resolve(false);
-          img.src = previewUrl;
-        });
-
-        if (isValidImage) {
-          newValidFiles.push(file);
-          newValidPreviews.push(previewUrl);
-        } else {
-          URL.revokeObjectURL(previewUrl); // Thu hồi ngay nếu không hợp lệ
-          notify({ title: 'Lỗi ảnh', message: `Không thể đọc nội dung ảnh: ${file.name}. Vui lòng kiểm tra lại file.`, type: 'error' });
-        }
+        setSelectedFiles(prev => [...prev, ...newValidFiles]);
+        setPreviews(prev => [...prev, ...newValidPreviews]);
+      } catch (err) {
+        console.error('File checking error:', err);
+        notify({ title: 'Lỗi', message: 'Lỗi trong quá trình kiểm duyệt ảnh.', type: 'error' });
+      } finally {
+        setIsProcessing(false);
       }
-
-      setSelectedFiles(prev => [...prev, ...newValidFiles]);
-      setPreviews(prev => [...prev, ...newValidPreviews]);
     }
   };
 
@@ -130,6 +150,7 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
     }
   };
 
+
   return (
     <div className="fixed inset-0 z-[2500] flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
@@ -177,10 +198,19 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
           )}
 
           <button 
-            disabled={isUploading || selectedFiles.length === 0}
+            disabled={isUploading || isProcessing || selectedFiles.length === 0}
             className="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white font-black uppercase tracking-widest rounded-2xl flex items-center justify-center gap-2 shadow-lg shadow-blue-100 transition-all active:scale-95"
           >
-            {isUploading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Xác nhận tải lên'}
+            {isUploading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : isProcessing ? (
+              <>
+                <Loader2 className="w-5 h-5 animate-spin" />
+                Đang xử lý ảnh...
+              </>
+            ) : (
+              'Xác nhận tải lên'
+            )}
           </button>
         </form>
       </div>

frontend/src/components/CoordinateSelectModal.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { X, MapPin } from 'lucide-react';
+import { X, MapPin, Search, Loader2 } from 'lucide-react';
 import { MapContainer, TileLayer, Marker, useMap, useMapEvents } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+import { useTranslation } from '../hooks/useTranslation';
 
 // Fix Leaflet default marker icon bug
 const DefaultIcon = L.icon({
@@ -55,10 +56,16 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
   initialLng,
   onSelect
 }) => {
+  const { t } = useTranslation();
   const defaultCenter: [number, number] = [10.7769, 106.7009]; // TP.HCM default
   const [position, setPosition] = useState<[number, number]>(defaultCenter);
   const [hasSelected, setHasSelected] = useState(false);
 
+  // Search States
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<any[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+
   useEffect(() => {
     if (isOpen) {
       if (typeof initialLat === 'number' && typeof initialLng === 'number' && !isNaN(initialLat) && !isNaN(initialLng)) {
@@ -68,6 +75,8 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
         setPosition(defaultCenter);
         setHasSelected(false);
       }
+      setSearchQuery('');
+      setSearchResults([]);
     }
   }, [isOpen, initialLat, initialLng]);
 
@@ -83,6 +92,31 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
     onClose();
   };
 
+  const handleSearch = async () => {
+    if (!searchQuery.trim()) return;
+    setIsSearching(true);
+    try {
+      const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery)}&accept-language=vi&limit=5`);
+      if (res.ok) {
+        const data = await res.json();
+        setSearchResults(data);
+      }
+    } catch (e) {
+      console.error('Error during Nominatim search:', e);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleSelectResult = (place: any) => {
+    const lat = parseFloat(place.lat);
+    const lng = parseFloat(place.lon);
+    setPosition([lat, lng]);
+    setHasSelected(true);
+    setSearchResults([]);
+    setSearchQuery(place.display_name);
+  };
+
   return (
     <div className="fixed inset-0 z-[6000] flex items-center justify-center p-4 animate-in fade-in duration-200">
       {/* Backdrop */}
@@ -92,33 +126,75 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
       />
 
       {/* Content */}
-      <div className="relative w-full max-w-2xl h-[550px] bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col border border-gray-100 animate-in zoom-in-95 duration-200">
+      <div className="relative w-full max-w-2xl h-[550px] bg-white dark:bg-slate-900 rounded-3xl shadow-2xl overflow-hidden flex flex-col border border-gray-100 dark:border-slate-800 animate-in zoom-in-95 duration-200">
         {/* Header */}
-        <div className="p-4 border-b border-gray-100 flex items-center justify-between bg-white shrink-0">
+        <div className="p-4 border-b border-gray-100 dark:border-slate-800/80 flex items-center justify-between bg-white dark:bg-slate-900 shrink-0">
           <div className="flex items-center gap-2">
             <MapPin className="w-5 h-5 text-blue-500" />
             <div className="text-left">
-              <h3 className="font-extrabold text-sm text-gray-900">Chọn vị trí trên bản đồ</h3>
-              <p className="text-[10px] text-gray-400 font-bold uppercase tracking-wider">Click lên bản đồ để chọn tọa độ</p>
+              <h3 className="font-extrabold text-sm text-gray-900 dark:text-white">{t('chooseLocationMap')}</h3>
+              <p className="text-[10px] text-gray-400 font-bold uppercase tracking-wider">{t('clickMapSelectCoords')}</p>
             </div>
           </div>
           <button 
             onClick={onClose}
-            className="p-1.5 hover:bg-gray-100 rounded-full transition-all text-gray-400 hover:text-gray-600"
+            className="p-1.5 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition-all text-gray-400 hover:text-gray-650"
           >
             <X className="w-5 h-5" />
           </button>
         </div>
 
         {/* Map Body */}
-        <div className="flex-1 bg-gray-50 relative min-h-[300px]" style={{ zIndex: 10 }}>
+        <div className="flex-1 bg-gray-50 dark:bg-slate-950 relative min-h-[300px]" style={{ zIndex: 10 }}>
+          
+          {/* Floating Search Panel */}
+          <div className="absolute top-4 left-4 right-4 sm:right-auto z-[1000] sm:w-80 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md rounded-2xl border border-slate-150 dark:border-slate-800 shadow-xl p-2 flex flex-col gap-1.5">
+            <div className="flex items-center gap-2">
+              <div className="flex-1 relative flex items-center">
+                <input
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                  placeholder={t('searchPlaceholder')}
+                  className="w-full bg-slate-50 dark:bg-slate-800 border-0 outline-none rounded-xl pl-8 pr-3 py-2 text-xs text-slate-800 dark:text-slate-100"
+                />
+                <Search className="w-3.5 h-3.5 text-slate-400 absolute left-2.5" />
+              </div>
+              <button
+                type="button"
+                onClick={handleSearch}
+                disabled={isSearching}
+                className="bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-bold px-3 py-2 rounded-xl text-xs transition-all active:scale-95 shrink-0 flex items-center gap-1"
+              >
+                {isSearching ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : t('confirm')}
+              </button>
+            </div>
+
+            {searchResults.length > 0 && (
+              <div className="max-h-48 overflow-y-auto divide-y divide-gray-100 dark:divide-slate-800/50 bg-white dark:bg-slate-900 rounded-xl border border-slate-150 dark:border-slate-800 shadow-inner">
+                {searchResults.map((r, i) => (
+                  <button
+                    key={i}
+                    type="button"
+                    onClick={() => handleSelectResult(r)}
+                    className="w-full text-left px-3 py-2.5 text-[10px] text-gray-700 dark:text-slate-350 hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors truncate block"
+                    title={r.display_name}
+                  >
+                    {r.display_name}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
           <MapContainer
             center={position}
             zoom={13}
+            attributionControl={false}
             style={{ width: '100%', height: '100%', zIndex: 1 }}
           >
             <TileLayer
-              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
               url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             />
             <MapClickEvents onClick={handleMapClick} />
@@ -131,29 +207,29 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
         </div>
 
         {/* Footer */}
-        <div className="p-4 border-t border-gray-100 flex items-center justify-between bg-white shrink-0">
-          <div className="text-xs text-gray-500">
+        <div className="p-4 border-t border-gray-100 dark:border-slate-800/80 flex items-center justify-between bg-white dark:bg-slate-900 shrink-0">
+          <div className="text-xs text-gray-500 dark:text-slate-400">
             {hasSelected ? (
-              <span className="font-semibold text-gray-700">
-                Tọa độ: {position[0].toFixed(6)}, {position[1].toFixed(6)}
+              <span className="font-semibold text-gray-700 dark:text-slate-200">
+                {t('coordsLabel')}: {position[0].toFixed(6)}, {position[1].toFixed(6)}
               </span>
             ) : (
-              <span className="italic text-gray-400">Chưa chọn vị trí</span>
+              <span className="italic text-gray-400 dark:text-slate-500">{t('noCoordsSelected')}</span>
             )}
           </div>
           <div className="flex gap-2">
             <button
               onClick={onClose}
-              className="px-4 py-2 border border-gray-200 hover:bg-gray-50 text-gray-700 rounded-xl text-xs font-bold transition-all"
+              className="px-4 py-2 border border-gray-200 dark:border-slate-800 hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300 rounded-xl text-xs font-bold transition-all animate-fade-in"
             >
-              Hủy
+              {t('cancel')}
             </button>
             <button
               onClick={handleConfirm}
               disabled={!hasSelected}
-              className="px-5 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed text-white rounded-xl text-xs font-bold transition-all shadow-md shadow-blue-500/10"
+              className="px-5 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-200 disabled:text-gray-400 dark:disabled:bg-slate-800 dark:disabled:text-slate-650 disabled:cursor-not-allowed text-white rounded-xl text-xs font-bold transition-all shadow-md shadow-blue-500/10"
             >
-              Xác nhận
+              {t('confirm')}
             </button>
           </div>
         </div>

frontend/src/components/ItineraryTimeline.tsx

@@ -201,7 +201,7 @@ export const ItineraryTimeline = ({
   }, [legs]);
 
   return (
-    <div className="max-w-2xl mx-auto p-0 bg-gray-50 min-h-screen">
+    <div id="itinerary-timeline-print-zone" className="max-w-2xl mx-auto p-0 bg-gray-50 min-h-screen">
       <div className="px-2 pt-4">
         {legs.length === 0 ? (
           <div className="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200">
@@ -397,7 +397,10 @@ export const ItineraryTimeline = ({
                                   {isEndPoint && (
                                     <span className="inline-block px-2 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
                                   )}
-                                  <h3 className={`font-semibold text-lg ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`}>
+                                  <h3 
+                                    onClick={() => onNavigate?.(location)}
+                                    className={`font-semibold text-lg cursor-pointer hover:text-blue-600 transition-colors select-none ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`}
+                                  >
                                     {location.name}
                                   </h3>
                                   <div className="flex items-center text-sm text-gray-500 mt-1">

frontend/src/components/PublicPhotoModal.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { X, Send, MessageSquare, User, Loader2, Calendar, MapPin, Download, Edit, Heart } from 'lucide-react';
+import { X, Send, MessageSquare, User, Loader2, Calendar, MapPin, Download, Edit, Heart, Trash2 } from 'lucide-react';
 import { io } from 'socket.io-client';
 import { CoordinateSelectModal } from './CoordinateSelectModal';
+import { useTranslation } from '../hooks/useTranslation';
 
 interface Comment {
   id: string;
@@ -46,6 +47,7 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
   onLoginSuccess,
   onUpdatePhoto
 }) => {
+  const { t } = useTranslation();
   const [comments, setComments] = useState<Comment[]>([]);
   const [newComment, setNewComment] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -260,6 +262,12 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
       }
     });
 
+    socket.on('photoCommentDeleted', (deleted: any) => {
+      if (deleted.photoId === photo.id) {
+        setComments(prev => prev.filter(c => c.id !== deleted.id));
+      }
+    });
+
     return () => {
       socket.disconnect();
     };
@@ -348,6 +356,28 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
     }
   };
 
+  const handleDeleteComment = async (commentId: string) => {
+    if (!confirm(t('confirmDeleteComment') || 'Bạn có chắc chắn muốn xóa bình luận này không?')) return;
+    try {
+      const token = localStorage.getItem('token') || localStorage.getItem('guest_token');
+      const res = await fetch(`/api/v1/public-photos/comments/${commentId}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+      if (res.ok) {
+        setComments(prev => prev.filter(c => c.id !== commentId));
+      } else {
+        const err = await res.json();
+        alert(err.message || 'Lỗi khi xóa bình luận.');
+      }
+    } catch (error) {
+      console.error('Lỗi khi xóa bình luận:', error);
+      alert('Không thể kết nối đến máy chủ.');
+    }
+  };
+
   const isAuthorized = currentUser?.isAdmin || 
     (currentUser && photo.uploader && currentUser.id === photo.uploader.id) ||
     (currentUser && photo.uploaderId && currentUser.id === photo.uploaderId);
@@ -630,7 +660,7 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
             <div>
               <h3 className="text-lg font-black tracking-tight text-white flex items-center gap-2">
                 <MessageSquare className="w-5 h-5 text-emerald-500" />
-                Bình luận cộng đồng
+                {t('commentSectionTitle')}
               </h3>
               <p className="text-xs text-slate-400 mt-1">Ảnh chia sẻ công khai trên bản đồ</p>
             </div>
@@ -641,7 +671,7 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
             {isLoading ? (
               <div className="flex flex-col items-center justify-center py-12 text-slate-500 gap-2">
                 <Loader2 className="w-8 h-8 animate-spin text-emerald-500" />
-                <span className="text-xs font-semibold">Đang tải bình luận...</span>
+                <span className="text-xs font-semibold">{t('loading')}</span>
               </div>
             ) : comments.length === 0 ? (
               <div className="flex flex-col items-center justify-center py-16 text-slate-500 gap-3">
@@ -661,9 +691,23 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
                       <div className="bg-slate-800/55 p-3.5 rounded-2xl rounded-tl-none border border-slate-800 shadow-lg">
                         <div className="flex justify-between items-center mb-1">
                           <span className="text-xs font-black text-slate-200 truncate">{c.userName}</span>
-                          <span className="text-[9px] font-medium text-slate-500">
-                            {new Date(c.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                          </span>
+                          <div className="flex items-center gap-2">
+                            <span className="text-[9px] font-medium text-slate-500">
+                              {new Date(c.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                            </span>
+                            {(currentUser?.isAdmin || 
+                              currentUser?.id === c.userId || 
+                              currentUser?.id === photo.uploaderId || 
+                              currentUser?.id === photo.uploader?.id) && (
+                              <button
+                                onClick={() => handleDeleteComment(c.id)}
+                                className="text-slate-500 hover:text-rose-500 transition-colors p-0.5"
+                                title={t('delete') || "Xóa"}
+                              >
+                                <Trash2 className="w-3.5 h-3.5" />
+                              </button>
+                            )}
+                          </div>
                         </div>
                         <p className="text-sm text-slate-300 leading-relaxed break-words">{c.content}</p>
                       </div>
@@ -672,6 +716,7 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
                 );
               })
             )}
+
             <div ref={commentsEndRef} />
           </div>
 

frontend/src/components/UserManagementModal.tsx

@@ -7,10 +7,14 @@ interface UserManagementModalProps {
 }
 
 export const UserManagementModal: React.FC<UserManagementModalProps> = ({ isOpen, onClose }) => {
-  const [activeTab, setActiveTab] = useState<'users' | 'photos' | 'trash'>('users');
+  const [activeTab, setActiveTab] = useState<'users' | 'photos' | 'trash' | 'filters'>('users');
   const [users, setUsers] = useState<any[]>([]);
   const [photos, setPhotos] = useState<any[]>([]);
   const [trashPhotos, setTrashPhotos] = useState<any[]>([]);
+  const [moderationSetting, setModerationSetting] = useState({ blockNsfw: false, blurFaces: false });
+  const [wordFilters, setWordFilters] = useState<any[]>([]);
+  const [newWord, setNewWord] = useState('');
+  const [newReplacement, setNewReplacement] = useState('');
   const [loading, setLoading] = useState(false);
   const [photosLoading, setPhotosLoading] = useState(false);
   const [trashLoading, setTrashLoading] = useState(false);
@@ -105,6 +109,84 @@ export const UserManagementModal: React.FC<UserManagementModalProps> = ({ isOpen
     }
   };
 
+  const fetchModerationSettings = async () => {
+    try {
+      const res = await fetch('/api/v1/moderation/settings');
+      if (res.ok) {
+        const data = await res.json();
+        setModerationSetting({ blockNsfw: data.blockNsfw, blurFaces: data.blurFaces });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const fetchWordFilters = async () => {
+    try {
+      const res = await fetch('/api/v1/admin/moderation/word-filters', {
+        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setWordFilters(data);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleUpdateModeration = async (field: 'blockNsfw' | 'blurFaces', value: boolean) => {
+    const updated = { ...moderationSetting, [field]: value };
+    setModerationSetting(updated);
+    try {
+      await fetch('/api/v1/admin/moderation', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`
+        },
+        body: JSON.stringify(updated)
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleAddWordFilter = async () => {
+    if (!newWord.trim()) return;
+    try {
+      const res = await fetch('/api/v1/admin/moderation/word-filters', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`
+        },
+        body: JSON.stringify({ word: newWord, replacement: newReplacement })
+      });
+      if (res.ok) {
+        setNewWord('');
+        setNewReplacement('');
+        fetchWordFilters();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleDeleteWordFilter = async (id: string) => {
+    try {
+      const res = await fetch(`/api/v1/admin/moderation/word-filters/${id}`, {
+        method: 'DELETE',
+        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+      });
+      if (res.ok) {
+        fetchWordFilters();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   useEffect(() => {
     if (isOpen) {
       if (activeTab === 'users') {
@@ -113,6 +195,9 @@ export const UserManagementModal: React.FC<UserManagementModalProps> = ({ isOpen
         fetchPhotos();
       } else if (activeTab === 'trash') {
         fetchTrashPhotos();
+      } else if (activeTab === 'filters') {
+        fetchModerationSettings();
+        fetchWordFilters();
       }
     }
   }, [isOpen, activeTab]);
@@ -212,6 +297,15 @@ export const UserManagementModal: React.FC<UserManagementModalProps> = ({ isOpen
             <Trash2 className="w-4 h-4" />
             Ảnh rác
           </button>
+          <button
+            onClick={() => setActiveTab('filters')}
+            className={`py-4 px-4 font-bold text-sm transition-all border-b-2 -mb-[2px] flex items-center gap-2 ${
+              activeTab === 'filters' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-400 hover:text-gray-600'
+            }`}
+          >
+            <Shield className="w-4 h-4" />
+            Bộ lọc
+          </button>
         </div>
 
         {/* Content Body */}
@@ -409,6 +503,121 @@ export const UserManagementModal: React.FC<UserManagementModalProps> = ({ isOpen
               </div>
             )
           )}
+
+          {activeTab === 'filters' && (
+            <div className="space-y-6 text-gray-800">
+              <div className="bg-gray-50/50 p-6 rounded-2xl border border-gray-100/80 space-y-4 text-left">
+                <h3 className="text-sm font-black uppercase text-blue-600 tracking-wider flex items-center gap-1.5">
+                  ⚙️ Cấu hình kiểm duyệt hình ảnh
+                </h3>
+                
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 bg-white rounded-xl border border-gray-100 shadow-sm">
+                  <div className="flex flex-col text-left">
+                    <span className="text-sm font-bold text-gray-800">Lọc hình ảnh khiêu dâm (NSFW)</span>
+                    <span className="text-xs text-gray-400 mt-0.5">Tự động phát hiện và chặn tải lên các hình ảnh có nội dung người lớn nhạy cảm.</span>
+                  </div>
+                  <button
+                    onClick={() => handleUpdateModeration('blockNsfw', !moderationSetting.blockNsfw)}
+                    className={`w-14 h-8 rounded-full transition-all relative p-1 cursor-pointer shrink-0 ${
+                      moderationSetting.blockNsfw ? 'bg-blue-600' : 'bg-gray-200'
+                    }`}
+                  >
+                    <div className={`w-6 h-6 bg-white rounded-full shadow-md transition-all absolute top-1 ${
+                      moderationSetting.blockNsfw ? 'right-1' : 'left-1'
+                    }`} />
+                  </button>
+                </div>
+
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 bg-white rounded-xl border border-gray-100 shadow-sm">
+                  <div className="flex flex-col text-left">
+                    <span className="text-sm font-bold text-gray-800">Tự động làm mờ khuôn mặt</span>
+                    <span className="text-xs text-gray-400 mt-0.5">Tự động nhận diện khuôn mặt người trong ảnh để làm mờ bảo mật trước khi lưu trữ.</span>
+                  </div>
+                  <button
+                    onClick={() => handleUpdateModeration('blurFaces', !moderationSetting.blurFaces)}
+                    className={`w-14 h-8 rounded-full transition-all relative p-1 cursor-pointer shrink-0 ${
+                      moderationSetting.blurFaces ? 'bg-blue-600' : 'bg-gray-200'
+                    }`}
+                  >
+                    <div className={`w-6 h-6 bg-white rounded-full shadow-md transition-all absolute top-1 ${
+                      moderationSetting.blurFaces ? 'right-1' : 'left-1'
+                    }`} />
+                  </button>
+                </div>
+              </div>
+
+              <div className="bg-gray-50/50 p-6 rounded-2xl border border-gray-100/80 space-y-4 text-left">
+                <h3 className="text-sm font-black uppercase text-blue-600 tracking-wider flex items-center gap-1.5">
+                  📝 Cấu hình bộ lọc văn bản
+                </h3>
+
+                {/* Add Word Filter Form */}
+                <div className="flex flex-col sm:flex-row gap-3 bg-white p-4 rounded-xl border border-gray-100 shadow-sm">
+                  <div className="flex-1">
+                    <label className="block text-[10px] uppercase font-black text-gray-400 mb-1">Từ cấm</label>
+                    <input
+                      type="text"
+                      placeholder="Nhập từ cấm..."
+                      value={newWord}
+                      onChange={(e) => setNewWord(e.target.value)}
+                      className="w-full px-4 py-2 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 bg-gray-50/20"
+                    />
+                  </div>
+                  <div className="flex-1">
+                    <label className="block text-[10px] uppercase font-black text-gray-400 mb-1">Từ thay thế</label>
+                    <input
+                      type="text"
+                      placeholder="Nhập từ thay thế..."
+                      value={newReplacement}
+                      onChange={(e) => setNewReplacement(e.target.value)}
+                      className="w-full px-4 py-2 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 bg-gray-50/20"
+                    />
+                  </div>
+                  <div className="flex items-end">
+                    <button
+                      onClick={handleAddWordFilter}
+                      className="w-full sm:w-auto px-5 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-xl text-xs font-bold transition-all shadow-md active:scale-95 cursor-pointer h-[38px] flex items-center justify-center shrink-0"
+                    >
+                      Thêm bộ lọc
+                    </button>
+                  </div>
+                </div>
+
+                {/* Word Filter List */}
+                {wordFilters.length === 0 ? (
+                  <div className="text-center py-8 text-gray-400 italic text-xs">Chưa cấu hình bộ lọc từ khóa nào.</div>
+                ) : (
+                  <div className="border border-gray-100 rounded-2xl overflow-hidden shadow-sm bg-white">
+                    <table className="w-full text-left border-collapse">
+                      <thead>
+                        <tr className="text-gray-400 text-xs uppercase border-b border-gray-100 bg-gray-50/30">
+                          <th className="py-2.5 px-4 font-bold">Từ cấm</th>
+                          <th className="py-2.5 px-4 font-bold">Từ thay thế</th>
+                          <th className="py-2.5 px-4 font-bold text-right">Thao tác</th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-gray-50">
+                        {wordFilters.map((wf) => (
+                          <tr key={wf.id} className="hover:bg-gray-50/30">
+                            <td className="py-2.5 px-4 text-xs font-bold text-red-500">{wf.word}</td>
+                            <td className="py-2.5 px-4 text-xs font-semibold text-green-600">{wf.replacement}</td>
+                            <td className="py-2.5 px-4 text-right">
+                              <button
+                                onClick={() => handleDeleteWordFilter(wf.id)}
+                                className="p-1.5 text-gray-400 hover:text-red-500 rounded-lg hover:bg-red-50 transition-colors cursor-pointer"
+                              >
+                                <Trash2 className="w-3.5 h-3.5" />
+                              </button>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>