-
+
- Guided cover stories +
- Guest uploads with approvals +
- Protected high-res downloads +
{{company_name}}
{{company_tagline}}
Get in touch
+ PicPeak Showcase
+
+ Share the story of {{company_name}}
+{{company_tagline}}
+ +-
+
- Private invites +
- Secure links for every guest +
- Curated delivery +
- Highlight every favourite instantly +
- Fully branded +
- Colours, typography, and logo that match you +
+
+
+
+
+
+
+
+
+ 
+ PicPeak Gallery
+
+
+
+
+
+โPicPeak makes delivery feel like part of the celebration. Our couples relive the day the moment they open the link.โ
+ +
+ Why teams pick PicPeak
+
+ Design-first galleries with the workflow you already love
+Bring the PicPeak admin experience to your clients with branded, secure, and responsive public pages.
+
+
+
+
+
+
+
+
+Beautiful by default
+Every gallery inherits your PicPeak theme, typography, and colour palette automatically.
+Guided storytelling
+Create anchored sections, spotlight favourite collections, and embed testimonials that build trust.
+Secure sharing
+Password gates, expiring links, and download protection keep every celebration personal.
+
+
+ Launch in minutes
+-
+
-
+
Brand it once
+PicPeak automatically applies your logo, colours, and support details.
+
+ -
+
Curate sections
+Highlight hero stories, featured galleries, and timeline moments with simple HTML blocks.
+
+ -
+
Share confidently
+Send a single link that greets guests before they enter their private gallery.
+
+
+
+ 
+ PicPeak dashboard — trusted by studios worldwide.
+
+
+
+
+ Showcase highlights
+
+ Curated sample galleries that mirror your client experience
+Drop in featured stories, welcome messages, and callouts that prepare guests for what comes next.
+
+
+
+
+
+
+Signature Galleries
+Use responsive cards to preview your most loved collections or vendor partnerships.
+Welcome timelines
+Guide guests from arrival to download with steps that feel effortless and on-brand.
+
+ Client notes
+
+ Experiences that keep guests coming back
+
+
+ โ Harper & Elias
+
+
+ โ Jordan Rivera, Photographer
+
+
+โFrom the welcome page to the final download, everything felt like us. PicPeak turned our gallery into part of the celebration.โ+
โThe public landing page gives every collection a narrative. Our couples feel the care we put into every image.โ+
+
+
+
+ Ready to welcome your guests?
+Create a PicPeak landing page that matches your studio and introduces every celebration with confidence.
+
+ Contact us
+ Review features
+
+
{photos.map((photo, index) => {
const isDeleting = deletingPhotos.has(photo.id);
+ const commentCount = photo.comment_count ?? 0;
+ const averageRating = photo.average_rating ?? 0;
+ const likeCount = photo.like_count ?? 0;
return (
= ({
)}
{/* Feedback Indicators (moved to bottom-right to avoid covering category) */}
- {(photo.comment_count > 0 || photo.average_rating > 0 || photo.like_count > 0) && (
+ {(commentCount > 0 || averageRating > 0 || likeCount > 0) && (
- {photo.average_rating > 0 && (
-
+ {averageRating > 0 && (
+
= ({
const queryClient = useQueryClient();
const currentPhoto = photos[currentIndex];
+ const averageRating = currentPhoto?.average_rating ?? 0;
+ const likeCount = currentPhoto?.like_count ?? 0;
+ const favoriteCount = currentPhoto?.favorite_count ?? 0;
+
+ if (!currentPhoto) {
+ return null;
+ }
// Fetch feedback for current photo
- const { data: feedbackData } = useQuery({
+ const { data: feedbackData } = useQuery({
queryKey: ['admin-photo-feedback', eventId, currentPhoto?.id],
queryFn: () => feedbackService.getEventFeedback(eventId.toString(), {
photoId: currentPhoto?.id.toString(),
@@ -45,6 +57,8 @@ export const AdminPhotoViewer: React.FC = ({
enabled: !!currentPhoto
});
+ const comments = (feedbackData?.feedback ?? []).filter((item): item is PhotoFeedback => item.feedback_type === 'comment');
+
const goToPrevious = () => {
setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
};
@@ -304,41 +318,41 @@ export const AdminPhotoViewer: React.FC = ({
{/* Feedback Stats */}
+ {commentCount > 0 && (
+
diff --git a/frontend/src/components/admin/AdminPhotoViewer.tsx b/frontend/src/components/admin/AdminPhotoViewer.tsx
index b4b0927..3b8d2a0 100644
--- a/frontend/src/components/admin/AdminPhotoViewer.tsx
+++ b/frontend/src/components/admin/AdminPhotoViewer.tsx
@@ -1,15 +1,20 @@
import React, { useState } from 'react';
-import { X, ChevronLeft, ChevronRight, Download, Trash2, Tag, Calendar, HardDrive, Eye, MousePointer, MessageSquare, Star, Heart, ThumbsUp, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import { X, ChevronLeft, ChevronRight, Download, Trash2, Tag, Calendar, HardDrive, Eye, MousePointer, MessageSquare, Star, Heart, 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 { feedbackService, type PhotoFeedback, type FeedbackSummary } from '../../services/feedback.service';
import { Button } from '../common';
import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
+type AdminFeedbackResponse = {
+ feedback: PhotoFeedback[];
+ summary?: FeedbackSummary;
+};
+
interface AdminPhotoViewerProps {
photos: AdminPhoto[];
initialIndex: number;
@@ -34,9 +39,16 @@ export const AdminPhotoViewer: React.FC
- {currentPhoto.average_rating > 0 && (
+ {averageRating > 0 && (
= ({
{/* Comments List */}
- {feedbackData.feedback && feedbackData.feedback.filter(f => f.feedback_type === 'comment').length > 0 && (
+ {comments.length > 0 && (
Avg Rating
Likes
Favorites
Comments
{expandedComments && (
- {feedbackData.feedback
- .filter(f => f.feedback_type === 'comment')
- .map((comment) => (
+ {comments.map((comment) => (
= ({
);
-};
\ No newline at end of file
+};
diff --git a/frontend/src/components/admin/AdminSidebar.tsx b/frontend/src/components/admin/AdminSidebar.tsx
index f638951..f4616c8 100644
--- a/frontend/src/components/admin/AdminSidebar.tsx
+++ b/frontend/src/components/admin/AdminSidebar.tsx
@@ -121,11 +121,20 @@ const StorageInfo: React.FC = () => {
);
}
- const usagePercent = Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100);
+ const limitInUse = storageInfo.storage_soft_limit || storageInfo.storage_limit || 1;
+ const usagePercent = limitInUse
+ ? Math.round((storageInfo.total_used / limitInUse) * 100)
+ : 0;
+ const isOverSoftLimit = limitInUse && storageInfo.total_used >= limitInUse;
+ const progressBarClass = isOverSoftLimit ? 'bg-red-600' : 'bg-primary-600';
+ const containerClass = isOverSoftLimit
+ ? 'bg-red-50 border border-red-200'
+ : 'bg-neutral-100';
+ const softLimitDisplay = settingsService.formatBytes(limitInUse);
return (
@@ -459,7 +471,7 @@ export const AdminPhotoViewer: React.FC = ({
)}
{/* No feedback message */}
- {(!feedbackData.feedback || feedbackData.feedback.length === 0) && (
+ {comments.length === 0 && (
@@ -475,4 +487,4 @@ export const AdminPhotoViewer: React.FCNo feedback for this photo yet.
)}
- ;
diff --git a/frontend/src/components/admin/BackupDashboard.d.ts b/frontend/src/components/admin/BackupDashboard.d.ts
new file mode 100644
index 0000000..b608d26
--- /dev/null
+++ b/frontend/src/components/admin/BackupDashboard.d.ts
@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+
+export const BackupDashboard: ComponentType;
diff --git a/frontend/src/components/admin/BackupHistory.d.ts b/frontend/src/components/admin/BackupHistory.d.ts
new file mode 100644
index 0000000..4b750b1
--- /dev/null
+++ b/frontend/src/components/admin/BackupHistory.d.ts
@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+
+export const BackupHistory: ComponentType;
diff --git a/frontend/src/components/admin/CMSEditor.tsx b/frontend/src/components/admin/CMSEditor.tsx
index 78002bb..636225b 100644
--- a/frontend/src/components/admin/CMSEditor.tsx
+++ b/frontend/src/components/admin/CMSEditor.tsx
@@ -1,5 +1,5 @@
import React, { useState, useCallback } from 'react';
-import { useEditor, EditorContent } from '@tiptap/react';
+import { useEditor, EditorContent, type Editor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Link from '@tiptap/extension-link';
import HardBreak from '@tiptap/extension-hard-break';
@@ -107,10 +107,11 @@ export const CMSEditor: React.FC = ({ content, onChange, onSave,
},
});
- const updateCounts = useCallback((editor: any) => {
- const text = editor.state.doc.textContent;
- setCharCount(editor.storage.characterCount.characters());
- setWordCount(text.trim().split(/\s+/).filter(word => word.length > 0).length);
+ const updateCounts = useCallback((editorInstance: Editor) => {
+ const textContent = editorInstance.state.doc.textContent;
+ setCharCount(editorInstance.storage.characterCount.characters());
+ const words = textContent.trim().split(/\s+/).filter((word: string) => word.length > 0);
+ setWordCount(words.length);
}, []);
// Update editor content when prop changes
@@ -568,4 +569,4 @@ export const CMSEditor: React.FC = ({ content, onChange, onSave,
);
};
-CMSEditor.displayName = 'CMSEditor';
\ No newline at end of file
+CMSEditor.displayName = 'CMSEditor';
diff --git a/frontend/src/components/admin/FeedbackModerationPanel.tsx b/frontend/src/components/admin/FeedbackModerationPanel.tsx
index d15fe8b..a0d8c8c 100644
--- a/frontend/src/components/admin/FeedbackModerationPanel.tsx
+++ b/frontend/src/components/admin/FeedbackModerationPanel.tsx
@@ -1,14 +1,11 @@
import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
-import {
- MessageSquare,
- Eye,
- EyeOff,
- Trash2,
- AlertCircle,
+import {
+ MessageSquare,
+ EyeOff,
+ Trash2,
CheckCircle,
- Clock,
User
} from 'lucide-react';
import { parseISO } from 'date-fns';
@@ -16,7 +13,7 @@ import { toast } from 'react-toastify';
import { Card, Loading, Button } from '../common';
import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
-import { feedbackService } from '../../services/feedback.service';
+import { feedbackService, type FeedbackResponse, type PhotoFeedback } from '../../services/feedback.service';
import { useLocalizedDate } from '../../hooks/useLocalizedDate';
interface FeedbackModerationPanelProps {
@@ -38,7 +35,7 @@ export const FeedbackModerationPanel: React.FC = (
const [showAll, setShowAll] = useState(false);
// Fetch pending feedback
- const { data: feedbackData, isLoading } = useQuery({
+ const { data: feedbackData, isLoading } = useQuery({
queryKey: ['event-feedback-moderation', eventId],
queryFn: () => feedbackService.getEventFeedback(eventId.toString(), {
type: 'comment',
@@ -77,12 +74,12 @@ export const FeedbackModerationPanel: React.FC = (
);
}
- const pendingComments = feedbackData?.feedback || [];
+ const pendingComments: PhotoFeedback[] = feedbackData?.feedback || [];
const hasPending = pendingComments.length > 0;
return (
-
+
);
-};
\ No newline at end of file
+};
diff --git a/frontend/src/components/admin/BackupConfiguration.d.ts b/frontend/src/components/admin/BackupConfiguration.d.ts
new file mode 100644
index 0000000..78d4eca
--- /dev/null
+++ b/frontend/src/components/admin/BackupConfiguration.d.ts
@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+
+export const BackupConfiguration: ComponentType
{t('admin.storageUsed')}
@@ -134,14 +143,14 @@ const StorageInfo: React.FC = () => {
- {t('admin.storagePercent', { percent: usagePercent, limit: settingsService.formatBytes(storageInfo.storage_limit) })} + {t('admin.storagePercent', { percent: usagePercent, limit: softLimitDisplay })}
+
{t('feedback.pendingModeration', 'Pending Moderation')}
diff --git a/frontend/src/components/admin/ImageProtectionSettings.tsx b/frontend/src/components/admin/ImageProtectionSettings.tsx
deleted file mode 100644
index 1ce2e4c..0000000
--- a/frontend/src/components/admin/ImageProtectionSettings.tsx
+++ /dev/null
@@ -1,341 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Shield, Eye, Lock, AlertTriangle, Info } from 'lucide-react';
-import { Button, Card, Toggle, Select, Input, Textarea } from '../common';
-import { settingsService } from '../../services/settings.service';
-import { toast } from 'react-toastify';
-
-interface ProtectionSettings {
- default_protection_level: 'basic' | 'standard' | 'enhanced' | 'maximum';
- default_image_quality: number;
- enable_devtools_protection: boolean;
- max_image_requests_per_minute: number;
- suspicious_activity_threshold: number;
- enable_canvas_rendering: boolean;
- default_fragmentation_level: number;
- enable_overlay_protection: boolean;
- protection_warning_message: string;
-}
-
-export const ImageProtectionSettings: React.FC = () => {
- const { t } = useTranslation();
- const [settings, setSettings] = useState
{t('feedback.pendingModeration', 'Pending Moderation')}
diff --git a/frontend/src/components/admin/ImageProtectionSettings.tsx b/frontend/src/components/admin/ImageProtectionSettings.tsx
deleted file mode 100644
index 1ce2e4c..0000000
--- a/frontend/src/components/admin/ImageProtectionSettings.tsx
+++ /dev/null
@@ -1,341 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Shield, Eye, Lock, AlertTriangle, Info } from 'lucide-react';
-import { Button, Card, Toggle, Select, Input, Textarea } from '../common';
-import { settingsService } from '../../services/settings.service';
-import { toast } from 'react-toastify';
-
-interface ProtectionSettings {
- default_protection_level: 'basic' | 'standard' | 'enhanced' | 'maximum';
- default_image_quality: number;
- enable_devtools_protection: boolean;
- max_image_requests_per_minute: number;
- suspicious_activity_threshold: number;
- enable_canvas_rendering: boolean;
- default_fragmentation_level: number;
- enable_overlay_protection: boolean;
- protection_warning_message: string;
-}
-
-export const ImageProtectionSettings: React.FC = () => {
- const { t } = useTranslation();
- const [settings, setSettings] = useState({
- default_protection_level: 'standard',
- default_image_quality: 85,
- enable_devtools_protection: true,
- max_image_requests_per_minute: 30,
- suspicious_activity_threshold: 10,
- enable_canvas_rendering: false,
- default_fragmentation_level: 3,
- enable_overlay_protection: true,
- protection_warning_message: 'Images in this gallery are protected from unauthorized download.'
- });
- const [isLoading, setIsLoading] = useState(true);
- const [isSaving, setIsSaving] = useState(false);
-
- useEffect(() => {
- loadSettings();
- }, []);
-
- const loadSettings = async () => {
- try {
- setIsLoading(true);
- const response = await settingsService.getSettings();
-
- // Map settings from API response
- const protectionSettings: ProtectionSettings = {
- default_protection_level: response.default_protection_level || 'standard',
- default_image_quality: parseInt(response.default_image_quality) || 85,
- enable_devtools_protection: response.enable_devtools_protection !== false,
- max_image_requests_per_minute: parseInt(response.max_image_requests_per_minute) || 30,
- suspicious_activity_threshold: parseInt(response.suspicious_activity_threshold) || 10,
- enable_canvas_rendering: response.enable_canvas_rendering === true,
- default_fragmentation_level: parseInt(response.default_fragmentation_level) || 3,
- enable_overlay_protection: response.enable_overlay_protection !== false,
- protection_warning_message: response.protection_warning_message || settings.protection_warning_message
- };
-
- setSettings(protectionSettings);
- } catch (error) {
- console.error('Failed to load protection settings:', error);
- toast.error('Failed to load protection settings');
- } finally {
- setIsLoading(false);
- }
- };
-
- const saveSettings = async () => {
- try {
- setIsSaving(true);
-
- // Convert settings to API format
- const apiSettings = Object.entries(settings).reduce((acc, [key, value]) => {
- acc[key] = typeof value === 'boolean' ? value : value.toString();
- return acc;
- }, {} as Record);
-
- await settingsService.updateSettings(apiSettings);
- toast.success('Protection settings saved successfully');
- } catch (error) {
- console.error('Failed to save protection settings:', error);
- toast.error('Failed to save protection settings');
- } finally {
- setIsSaving(false);
- }
- };
-
- const updateSetting = (key: keyof ProtectionSettings, value: any) => {
- setSettings(prev => ({ ...prev, [key]: value }));
- };
-
- const protectionLevels = [
- { value: 'basic', label: 'Basic - Minimal protection, best performance' },
- { value: 'standard', label: 'Standard - Balanced protection and performance' },
- { value: 'enhanced', label: 'Enhanced - Strong protection with good performance' },
- { value: 'maximum', label: 'Maximum - Strongest protection, may impact performance' }
- ];
-
- const getProtectionLevelIcon = (level: string) => {
- switch (level) {
- case 'basic': return
-
-
-
-
-
-
-
-
- );
- }
-
- return (
-
-
-
- Image Protection Settings
- Configure security measures for photo galleries
-
-
-
-
- {/* Protection Level */}
-
-
-
-
- {/* Image Quality */}
-
-
- updateSetting('default_image_quality', parseInt(e.target.value))}
- className="w-full"
- />
-
- Lower quality = Better protection
- Higher quality = Better image
-
-
-
- {/* DevTools Protection */}
-
-
-
-
- Detect and respond to browser developer tools
-
-
- updateSetting('enable_devtools_protection', checked)}
- />
-
-
- {/* Canvas Rendering */}
-
-
-
-
- Render images on canvas instead of img tags (stronger protection)
-
-
- updateSetting('enable_canvas_rendering', checked)}
- />
-
-
- {/* Fragmentation Level */}
- {settings.enable_canvas_rendering && (
-
-
- updateSetting('default_fragmentation_level', parseInt(e.target.value))}
- className="w-full"
- />
-
- Low fragmentation
- High fragmentation
-
-
- )}
-
- {/* Rate Limiting */}
-
-
-
- updateSetting('max_image_requests_per_minute', parseInt(e.target.value))}
- />
-
-
-
- updateSetting('suspicious_activity_threshold', parseInt(e.target.value))}
- />
-
-
-
- {/* Overlay Protection */}
-
-
-
-
- Add transparent overlays to prevent easy screenshot extraction
-
-
- updateSetting('enable_overlay_protection', checked)}
- />
-
-
- {/* Warning Message */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Image Protection Settings
-Configure security measures for photo galleries
-
- {/* Protection Level */}
-
-
-
-
- {/* Image Quality */}
-
-
- updateSetting('default_image_quality', parseInt(e.target.value))}
- className="w-full"
- />
-
-
- {/* DevTools Protection */}
-
- Lower quality = Better protection
- Higher quality = Better image
-
-
- updateSetting('enable_devtools_protection', checked)}
- />
-
-
- {/* Canvas Rendering */}
-
-
-
- - Detect and respond to browser developer tools -
-
- updateSetting('enable_canvas_rendering', checked)}
- />
-
-
- {/* Fragmentation Level */}
- {settings.enable_canvas_rendering && (
-
-
-
- - Render images on canvas instead of img tags (stronger protection) -
-
-
- updateSetting('default_fragmentation_level', parseInt(e.target.value))}
- className="w-full"
- />
-
- )}
-
- {/* Rate Limiting */}
-
- Low fragmentation
- High fragmentation
-
-
-
-
- {/* Overlay Protection */}
-
-
- updateSetting('max_image_requests_per_minute', parseInt(e.target.value))}
- />
-
-
-
- updateSetting('suspicious_activity_threshold', parseInt(e.target.value))}
- />
-
-
- updateSetting('enable_overlay_protection', checked)}
- />
-
-
- {/* Warning Message */}
-
-
-
- - Add transparent overlays to prevent easy screenshot extraction -
-
-
-