diff --git a/frontend/src/components/admin/BulkCategoryModal.tsx b/frontend/src/components/admin/BulkCategoryModal.tsx new file mode 100644 index 00000000..9017c1ba --- /dev/null +++ b/frontend/src/components/admin/BulkCategoryModal.tsx @@ -0,0 +1,102 @@ +import React, { useState } from 'react'; +import { FolderOpen, X } from 'lucide-react'; +import { useTranslation } from 'react-i18next'; +import { Button, Card } from '../common'; + +interface CategoryOption { + id: number; + name: string; +} + +interface BulkCategoryModalProps { + isOpen: boolean; + onClose: () => void; + onConfirm: (categoryId: number | null) => Promise; + photoCount: number; + categories: CategoryOption[]; + isLoading: boolean; +} + +export const BulkCategoryModal: React.FC = ({ + isOpen, + onClose, + onConfirm, + photoCount, + categories, + isLoading, +}) => { + const { t } = useTranslation(); + const [selectedCategoryId, setSelectedCategoryId] = useState(null); + + if (!isOpen) return null; + + const handleConfirm = async () => { + await onConfirm(selectedCategoryId); + }; + + const handleClose = () => { + setSelectedCategoryId(null); + onClose(); + }; + + return ( +
+ +
+
+

+ {t('photos.moveToCategory', 'Move {{count}} photos to category', { count: photoCount })} +

+ +
+ +
+ + +
+ +
+ + +
+
+
+
+ ); +}; + +BulkCategoryModal.displayName = 'BulkCategoryModal';