+ {/* Date display - hidden on small screens */}
+
- {/* Center - Logo and PicPeak text */}
- {format(new Date(), 'PPPP')}
+ {/* Center - Logo and PicPeak text - hidden on small screens to prevent overlap */}
+
PicPeak
+
+ {/* Mobile Logo - shown only on small screens */}
+
PicPeak
+
+ PicPeak
+
{/* Right side actions */}
+ PicPeak
+
diff --git a/frontend/src/components/admin/AdminLayout.tsx b/frontend/src/components/admin/AdminLayout.tsx
index c99ed93..d684633 100644
--- a/frontend/src/components/admin/AdminLayout.tsx
+++ b/frontend/src/components/admin/AdminLayout.tsx
@@ -6,9 +6,10 @@ import { useSessionTimeout } from '../../hooks/useSessionTimeout';
import { AdminSidebar } from './AdminSidebar';
import { AdminHeader } from './AdminHeader';
import { MaintenanceBanner } from './MaintenanceBanner';
+import { MandatoryPasswordChangeModal } from './MandatoryPasswordChangeModal';
export const AdminLayout: React.FC = () => {
- const { isAuthenticated, isLoading } = useAdminAuth();
+ const { isAuthenticated, isLoading, mustChangePassword } = useAdminAuth();
const [sidebarOpen, setSidebarOpen] = useState(false);
// Handle session timeout
@@ -31,6 +32,9 @@ export const AdminLayout: React.FC = () => {
return (
= ({
const [currentIndex, setCurrentIndex] = useState(initialIndex);
const [isDeleting, setIsDeleting] = useState(false);
const [showCategoryMenu, setShowCategoryMenu] = useState(false);
+ const [expandedComments, setExpandedComments] = useState(false);
+ const queryClient = useQueryClient();
const currentPhoto = photos[currentIndex];
+ // Fetch feedback for current photo
+ const { data: feedbackData } = useQuery({
+ queryKey: ['admin-photo-feedback', eventId, currentPhoto?.id],
+ queryFn: () => feedbackService.getEventFeedback(eventId.toString(), {
+ photoId: currentPhoto?.id.toString(),
+ status: 'all' // Get all comments including unapproved
+ }),
+ enabled: !!currentPhoto
+ });
+
const goToPrevious = () => {
setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
};
@@ -88,6 +102,30 @@ export const AdminPhotoViewer: React.FC = ({
}
};
+ // Mutations for feedback moderation
+ const moderateFeedbackMutation = useMutation({
+ mutationFn: ({ feedbackId, action }: { feedbackId: string; action: 'approve' | 'hide' | 'reject' }) =>
+ feedbackService.moderateFeedback(feedbackId, action),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['admin-photo-feedback', eventId, currentPhoto?.id] });
+ toast.success('Feedback moderated successfully');
+ },
+ onError: () => {
+ toast.error('Failed to moderate feedback');
+ }
+ });
+
+ const deleteFeedbackMutation = useMutation({
+ mutationFn: (feedbackId: string) => feedbackService.deleteFeedback(feedbackId),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['admin-photo-feedback', eventId, currentPhoto?.id] });
+ toast.success('Feedback deleted successfully');
+ },
+ onError: () => {
+ toast.error('Failed to delete feedback');
+ }
+ });
+
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
switch (e.key) {
@@ -256,6 +294,177 @@ export const AdminPhotoViewer: React.FC = ({
)}
+ {/* Feedback Section */}
+ {feedbackData && (
+
+ {/* Mandatory Password Change Modal */}
+ {mustChangePassword &&
);
})}
diff --git a/frontend/src/components/admin/AdminPhotoViewer.tsx b/frontend/src/components/admin/AdminPhotoViewer.tsx
index 868abf2..b4b0927 100644
--- a/frontend/src/components/admin/AdminPhotoViewer.tsx
+++ b/frontend/src/components/admin/AdminPhotoViewer.tsx
@@ -1,10 +1,12 @@
import React, { useState } from 'react';
-import { X, ChevronLeft, ChevronRight, Download, Trash2, Tag, Calendar, HardDrive, Eye, MousePointer } from 'lucide-react';
+import { X, ChevronLeft, ChevronRight, Download, Trash2, Tag, Calendar, HardDrive, Eye, MousePointer, MessageSquare, Star, Heart, ThumbsUp, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
import { format } from 'date-fns';
import { toast } from 'react-toastify';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { AdminPhoto } from '../../services/photos.service';
import { photosService } from '../../services/photos.service';
+import { feedbackService } from '../../services/feedback.service';
import { Button } from '../common';
import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
@@ -28,9 +30,21 @@ export const AdminPhotoViewer: React.FC {
/>
)}
- {/* Sidebar */}
- setSidebarOpen(false)} />
+ {/* Sidebar - disabled when password change required */}
+ = ({
)}
+
+ {/* Feedback Indicators */}
+ {(photo.comment_count > 0 || photo.average_rating > 0 || photo.like_count > 0) && (
+
+ setSidebarOpen(false)} />
+
{/* Main content */}
- {/* Header */}
- setSidebarOpen(true)} />
+ {/* Header - disabled when password change required */}
+
+ {/* Page content - disabled when password change required */}
+
diff --git a/frontend/src/components/admin/AdminPhotoGrid.tsx b/frontend/src/components/admin/AdminPhotoGrid.tsx
index eaad59a..0831661 100644
--- a/frontend/src/components/admin/AdminPhotoGrid.tsx
+++ b/frontend/src/components/admin/AdminPhotoGrid.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { Check, Download, Trash2, Eye, Package } from 'lucide-react';
+import { Check, Download, Trash2, Eye, Package, MessageSquare, Star } from 'lucide-react';
import { toast } from 'react-toastify';
import { AdminPhoto } from '../../services/photos.service';
@@ -246,6 +246,24 @@ export const AdminPhotoGrid: React.FC
+ setSidebarOpen(true)} />
+
{/* Maintenance mode banner */}
+ {photo.comment_count > 0 && (
+
+ )}
+
+ )}
+ {photo.average_rating > 0 && (
+
+
+ )}
+
+
+
+
+ {/* Feedback Stats */}
+
+ )}
+
{/* Navigation info */}
+
+
+ {/* Feedback Stats */}
+
+ {currentPhoto.average_rating > 0 && (
+
+
+ {/* Comments List */}
+ {feedbackData.feedback && feedbackData.feedback.filter(f => f.feedback_type === 'comment').length > 0 && (
+
+
+ )}
+
+ {currentPhoto.like_count > 0 && (
+
+
+ Avg Rating
+
+
+ )}
+
+ {currentPhoto.favorite_count > 0 && (
+
+
+ Likes
+
+
+ )}
+
+ {feedbackData.feedback && (
+
+
+ Favorites
+
+
+ )}
+
+
+ Comments
+
+
+
+ {expandedComments && (
+
+ )}
+
+ {/* No feedback message */}
+ {(!feedbackData.feedback || feedbackData.feedback.length === 0) && (
+
+ {feedbackData.feedback
+ .filter(f => f.feedback_type === 'comment')
+ .map((comment) => (
+
+ )}
+
+
+ ))}
+
+
+
+
+
+
+ {/* Comment Status Badge */}
+ + {comment.guest_name || 'Anonymous'} +
++ {format(new Date(comment.created_at), 'MMM d, yyyy h:mm a')} +
+
+ {!comment.is_approved && !comment.is_hidden && (
+
+
+ + {comment.comment_text} +
+ + {/* Moderation Actions */} +
+ {!comment.is_approved && (
+
+ )}
+
+ {!comment.is_hidden && (
+
+ )}
+
+ {comment.is_hidden && (
+
+ )}
+
+
+
+ No feedback for this photo yet.
+ )} +
diff --git a/frontend/src/components/admin/CategoryManager.tsx b/frontend/src/components/admin/CategoryManager.tsx
index ccc5b65..5ca1bbd 100644
--- a/frontend/src/components/admin/CategoryManager.tsx
+++ b/frontend/src/components/admin/CategoryManager.tsx
@@ -2,10 +2,12 @@ import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Plus, Edit2, Trash2, Loader2 } from 'lucide-react';
import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
import { categoriesService, type PhotoCategory } from '../../services/categories.service';
import { Button } from '../common';
export const CategoryManager: React.FC = () => {
+ const { t } = useTranslation();
const queryClient = useQueryClient();
const [isAdding, setIsAdding] = useState(false);
const [editingId, setEditingId] = useState
- No categories yet. Create your first category to organize photos.
+ {t('categories.noCategoriesYet')}
)}
@@ -153,7 +155,7 @@ export const CategoryManager: React.FC = () => {
-
@@ -120,7 +122,7 @@ export const CategoryManager: React.FC = () => {
value={newCategoryName}
onChange={(e) => setNewCategoryName(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleCreate()}
- placeholder="Category name"
+ placeholder={t('categories.categoryName')}
className="flex-1 px-3 py-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-primary-500"
autoFocus
/>
@@ -133,7 +135,7 @@ export const CategoryManager: React.FC = () => {
{createMutation.isPending ? (
Photo Categories
+ {t('categories.title')}
{!isAdding && (
)}
{categories.length === 0 ? (
) : (
@@ -204,14 +206,14 @@ export const CategoryManager: React.FC = () => {