@jhits/plugin-images 0.0.13 → 0.0.14

package/dist/views/ImageManager.js

@@ -1,9 +1,237 @@
 /**
  * Image Manager View
- * Main view for managing uploaded images
+ * Full-featured image management with CRUD operations and usage tracking
  */
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { Search, Trash2, Upload, Image as ImageIcon, Grid3x3, List, Loader2, AlertTriangle, CheckCircle, ExternalLink, X, RefreshCw, Eye, HardDrive, CheckCircle2, Circle, Trash } from 'lucide-react';
+import Image from 'next/image';
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}
 export function ImageManagerView({ siteId, locale }) {
-    return (_jsx("div", { className: "min-h-screen bg-dashboard-bg p-8", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsx("h1", { className: "text-4xl font-black uppercase tracking-tighter text-dashboard-text mb-8", children: "Image Manager" }), _jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 mb-8", children: "This plugin provides image upload and management functionality. Use the ImagePicker component in other plugins to select images." })] }) }));
+    const [images, setImages] = useState([]);
+    const [usageData, setUsageData] = useState({});
+    const [stats, setStats] = useState(null);
+    const [mappedImages, setMappedImages] = useState(new Set());
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState('');
+    const [viewMode, setViewMode] = useState('grid');
+    const [uploading, setUploading] = useState(false);
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [showCleanupModal, setShowCleanupModal] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [cleaning, setCleaning] = useState(false);
+    const [refreshKey, setRefreshKey] = useState(0);
+    const fetchImages = useCallback(async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/plugin-images/list');
+            const data = await response.json();
+            if (data.images) {
+                setImages(data.images);
+                setStats(data.stats || null);
+                setMappedImages(new Set(data.mappedImages || []));
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch images:', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    const fetchUsageData = useCallback(async () => {
+        try {
+            const response = await fetch('/api/plugin-images/usage');
+            const data = await response.json();
+            if (data.images) {
+                const usageMap = {};
+                data.images.forEach((img) => {
+                    usageMap[img.filename] = img.usage;
+                });
+                setUsageData(usageMap);
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch usage data:', error);
+        }
+    }, []);
+    useEffect(() => {
+        fetchImages();
+        fetchUsageData();
+    }, [fetchImages, fetchUsageData, refreshKey]);
+    const handleUpload = async (e) => {
+        const files = e.target.files;
+        if (!files || files.length === 0)
+            return;
+        setUploading(true);
+        try {
+            for (const file of Array.from(files)) {
+                const formData = new FormData();
+                formData.append('file', file);
+                const response = await fetch('/api/plugin-images/upload', {
+                    method: 'POST',
+                    body: formData,
+                });
+                const data = await response.json();
+                if (data.success && data.image) {
+                    setImages(prev => [data.image, ...prev]);
+                }
+            }
+        }
+        catch (error) {
+            console.error('Upload failed:', error);
+        }
+        finally {
+            setUploading(false);
+            if (e.target)
+                e.target.value = '';
+        }
+    };
+    const handleDelete = async () => {
+        if (!selectedImage)
+            return;
+        setDeleting(true);
+        try {
+            const response = await fetch(`/api/plugin-images/uploads/${selectedImage.filename}`, {
+                method: 'DELETE',
+            });
+            if (response.ok) {
+                setImages(prev => prev.filter(img => img.id !== selectedImage.id));
+                setShowDeleteModal(false);
+                setSelectedImage(null);
+            }
+            else {
+                const error = await response.json();
+                alert(error.error || 'Failed to delete image');
+            }
+        }
+        catch (error) {
+            console.error('Delete failed:', error);
+            alert('Failed to delete image');
+        }
+        finally {
+            setDeleting(false);
+        }
+    };
+    const handleCleanup = async () => {
+        setCleaning(true);
+        try {
+            const unusedImages = images.filter(img => !isImageInUse(img.filename));
+            let deletedCount = 0;
+            let failedCount = 0;
+            for (const image of unusedImages) {
+                try {
+                    const response = await fetch(`/api/plugin-images/uploads/${image.filename}`, {
+                        method: 'DELETE',
+                    });
+                    if (response.ok) {
+                        deletedCount++;
+                    }
+                    else {
+                        failedCount++;
+                    }
+                }
+                catch {
+                    failedCount++;
+                }
+            }
+            if (deletedCount > 0) {
+                setImages(prev => prev.filter(img => isImageInUse(img.filename)));
+            }
+            setShowCleanupModal(false);
+            if (failedCount > 0) {
+                alert(`Deleted ${deletedCount} images. ${failedCount} failed.`);
+            }
+            else {
+                alert(`Successfully deleted ${deletedCount} unused image${deletedCount !== 1 ? 's' : ''}.`);
+            }
+        }
+        catch (error) {
+            console.error('Cleanup failed:', error);
+            alert('Failed to cleanup images');
+        }
+        finally {
+            setCleaning(false);
+        }
+    };
+    const getUnusedImagesCount = () => {
+        return images.filter(img => !isImageInUse(img.filename)).length;
+    };
+    const handleRefresh = () => {
+        setRefreshKey(prev => prev + 1);
+    };
+    const filteredImages = useMemo(() => {
+        return images.filter(img => search === '' ||
+            img.filename.toLowerCase().includes(search.toLowerCase()));
+    }, [images, search]);
+    const getImageUsage = (filename) => {
+        return usageData[filename] || [];
+    };
+    const isImageMapped = (filename) => {
+        return mappedImages.has(filename);
+    };
+    const isImageInUse = (filename) => {
+        return isImageMapped(filename) || getImageUsage(filename).length > 0;
+    };
+    return (_jsxs("div", { className: "h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2", children: "Images" }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: "Upload and manage your media library" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [stats && stats.availableImages > 0 && (_jsxs("button", { onClick: () => setShowCleanupModal(true), className: "inline-flex items-center gap-2 px-4 py-3 bg-red-500/10 text-red-600 dark:text-red-400 rounded-full text-[10px] font-bold uppercase tracking-widest hover:bg-red-500/20 transition-all", title: `Remove ${stats.availableImages} unused images`, children: [_jsx(Trash, { size: 16 }), "Clean Up"] })), _jsxs("label", { className: "inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 cursor-pointer", children: [uploading ? (_jsx(Loader2, { size: 16, className: "animate-spin" })) : (_jsx(Upload, { size: 16 })), uploading ? 'Uploading...' : 'Upload', _jsx("input", { type: "file", accept: "image/*", multiple: true, onChange: handleUpload, className: "hidden", disabled: uploading })] }), _jsx("button", { onClick: handleRefresh, className: "p-3 bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors", title: "Refresh", children: _jsx(RefreshCw, { size: 16 }) })] })] }), stats && (_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mb-8", children: [_jsxs("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("div", { className: "p-2 bg-primary/10 rounded-xl", children: _jsx(ImageIcon, { className: "text-primary", size: 20 }) }), _jsx("span", { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Total Images" })] }), _jsx("p", { className: "text-2xl font-black text-neutral-900 dark:text-white", children: stats.totalImages })] }), _jsxs("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("div", { className: "p-2 bg-amber-500/10 rounded-xl", children: _jsx(HardDrive, { className: "text-amber-500", size: 20 }) }), _jsx("span", { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Storage Used" })] }), _jsx("p", { className: "text-2xl font-black text-neutral-900 dark:text-white", children: formatFileSize(stats.totalSize) })] }), _jsxs("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("div", { className: "p-2 bg-red-500/10 rounded-xl", children: _jsx(CheckCircle2, { className: "text-red-500", size: 20 }) }), _jsx("span", { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "In Use" })] }), _jsx("p", { className: "text-2xl font-black text-neutral-900 dark:text-white", children: stats.usedImages })] }), _jsxs("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-2xl p-5 border border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("div", { className: "p-2 bg-green-500/10 rounded-xl", children: _jsx(Circle, { className: "text-green-500", size: 20 }) }), _jsx("span", { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Available" })] }), _jsx("p", { className: "text-2xl font-black text-neutral-900 dark:text-white", children: stats.availableImages })] })] })), _jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6", children: [_jsxs("div", { className: "relative flex-1 max-w-md", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400", size: 18 }), _jsx("input", { type: "text", placeholder: "Search images...", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full pl-12 pr-4 py-3 bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-300 dark:border-neutral-700 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-primary/50" })] }), _jsxs("div", { className: "flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800/50 rounded-full p-1 border border-neutral-300 dark:border-neutral-700", children: [_jsx("button", { onClick: () => setViewMode('grid'), className: `p-2 rounded-full transition-all ${viewMode === 'grid'
+                                    ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
+                                    : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "Grid View", children: _jsx(Grid3x3, { size: 18 }) }), _jsx("button", { onClick: () => setViewMode('list'), className: `p-2 rounded-full transition-all ${viewMode === 'list'
+                                    ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
+                                    : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "List View", children: _jsx(List, { size: 18 }) })] })] }), loading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx(Loader2, { size: 32, className: "animate-spin text-primary" }) })) : filteredImages.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-20 text-center", children: [_jsx("div", { className: "w-24 h-24 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center mb-6", children: _jsx(ImageIcon, { size: 40, className: "text-neutral-400" }) }), _jsx("h3", { className: "text-xl font-bold text-neutral-600 dark:text-neutral-400 mb-2", children: search ? 'No images found' : 'No images yet' }), _jsx("p", { className: "text-neutral-500 dark:text-neutral-500 mb-6", children: search ? 'Try a different search term' : 'Upload your first image to get started' }), !search && (_jsxs("label", { className: "inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 cursor-pointer", children: [_jsx(Upload, { size: 16 }), "Upload Image", _jsx("input", { type: "file", accept: "image/*", onChange: handleUpload, className: "hidden" })] }))] })) : viewMode === 'grid' ? (_jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: filteredImages.map((image) => {
+                    const usage = getImageUsage(image.filename);
+                    const inUse = isImageInUse(image.filename);
+                    return (_jsxs("div", { className: `group relative bg-neutral-100 dark:bg-neutral-800 rounded-2xl overflow-hidden border transition-all hover:shadow-lg ${inUse
+                            ? 'border-amber-300 dark:border-amber-700'
+                            : 'border-neutral-200 dark:border-neutral-700 hover:border-primary/50'}`, children: [_jsxs("div", { className: "aspect-square relative bg-neutral-200 dark:bg-neutral-700", children: [_jsx(Image, { src: image.url, alt: image.filename, fill: true, className: "object-cover", unoptimized: true }), _jsxs("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100", children: [_jsx("button", { onClick: () => window.open(image.url, '_blank'), className: "p-2 bg-white dark:bg-neutral-900 rounded-full text-primary hover:bg-primary/10 transition-colors", title: "View full size", children: _jsx(Eye, { size: 16 }) }), _jsx("button", { onClick: () => {
+                                                    setSelectedImage(image);
+                                                    setShowDeleteModal(true);
+                                                }, className: `p-2 bg-white dark:bg-neutral-900 rounded-full transition-colors ${inUse
+                                                    ? 'text-neutral-400 cursor-not-allowed'
+                                                    : 'text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'}`, title: inUse ? 'Cannot delete - image is in use' : 'Delete', disabled: inUse, children: _jsx(Trash2, { size: 16 }) })] }), inUse && (_jsxs("div", { className: "absolute top-2 right-2 px-2 py-1 bg-red-500 text-white text-[10px] font-bold uppercase rounded-full flex items-center gap-1 shadow-lg", children: [_jsx(CheckCircle, { size: 10 }), "In Use"] }))] }), _jsxs("div", { className: "p-3", children: [_jsx("p", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300 truncate", title: image.filename, children: image.filename }), _jsxs("div", { className: "flex items-center justify-between mt-1", children: [_jsx("p", { className: "text-[10px] text-neutral-500", children: formatFileSize(image.size) }), inUse ? (_jsx("p", { className: "text-[10px] text-red-500 dark:text-red-400 font-bold", children: usage.length > 0 ? `${usage.length} ref${usage.length > 1 ? 's' : ''}` : 'mapped' })) : (_jsx("p", { className: "text-[10px] text-green-500 dark:text-green-400 font-bold", children: "available" }))] })] })] }, image.id));
+                }) })) : (_jsx("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-2xl overflow-hidden border border-neutral-200 dark:border-neutral-700", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { className: "bg-neutral-200 dark:bg-neutral-700/50", children: _jsxs("tr", { children: [_jsx("th", { className: "text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Preview" }), _jsx("th", { className: "text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Filename" }), _jsx("th", { className: "text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Size" }), _jsx("th", { className: "text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Uploaded" }), _jsx("th", { className: "text-left px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Status" }), _jsx("th", { className: "text-right px-4 py-3 text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-neutral-200 dark:divide-neutral-700", children: filteredImages.map((image) => {
+                                const usage = getImageUsage(image.filename);
+                                const inUse = isImageInUse(image.filename);
+                                return (_jsxs("tr", { className: `transition-colors ${inUse
+                                        ? 'bg-amber-50/30 dark:bg-amber-900/5 hover:bg-amber-50/50 dark:hover:bg-amber-900/10'
+                                        : 'hover:bg-neutral-200/50 dark:hover:bg-neutral-700/30'}`, children: [_jsx("td", { className: "px-4 py-3", children: _jsx("div", { className: `w-12 h-12 relative bg-neutral-200 dark:bg-neutral-700 rounded-lg overflow-hidden ring-2 ${inUse ? 'ring-red-400 dark:ring-red-600' : 'ring-transparent'}`, children: _jsx(Image, { src: image.url, alt: image.filename, fill: true, className: "object-cover", unoptimized: true }) }) }), _jsx("td", { className: "px-4 py-3", children: _jsx("p", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300 truncate max-w-[200px]", title: image.filename, children: image.filename }) }), _jsx("td", { className: "px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400", children: formatFileSize(image.size) }), _jsx("td", { className: "px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400", children: formatDate(image.uploadedAt) }), _jsx("td", { className: "px-4 py-3", children: inUse ? (_jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-red-500/10 text-red-600 dark:text-red-400 text-xs font-bold rounded-full", children: [_jsx(CheckCircle, { size: 12 }), "In Use", usage.length > 0 ? ` (${usage.length})` : ''] })) : (_jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-green-500/10 text-green-600 dark:text-green-400 text-xs font-medium rounded-full", children: [_jsx(Circle, { size: 12 }), "Available"] })) }), _jsx("td", { className: "px-4 py-3 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { onClick: () => window.open(image.url, '_blank'), className: "p-2 text-neutral-500 hover:text-primary hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-lg transition-colors", title: "View", children: _jsx(Eye, { size: 16 }) }), _jsx("button", { onClick: () => {
+                                                            setSelectedImage(image);
+                                                            setShowDeleteModal(true);
+                                                        }, className: `p-2 rounded-lg transition-colors ${inUse
+                                                            ? 'text-neutral-400 cursor-not-allowed'
+                                                            : 'text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'}`, title: inUse ? 'Cannot delete - image is in use' : 'Delete', disabled: inUse, children: _jsx(Trash2, { size: 16 }) })] }) })] }, image.id));
+                            }) })] }) })), showDeleteModal && selectedImage && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: _jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-xl font-bold text-neutral-900 dark:text-white", children: "Delete Image" }), _jsx("button", { onClick: () => {
+                                        setShowDeleteModal(false);
+                                        setSelectedImage(null);
+                                    }, className: "p-2 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 rounded-lg", children: _jsx(X, { size: 20 }) })] }), (() => {
+                            const usage = getImageUsage(selectedImage.filename);
+                            const inUse = isImageInUse(selectedImage.filename);
+                            const isMapped = isImageMapped(selectedImage.filename);
+                            return (_jsxs(_Fragment, { children: [inUse ? (_jsxs("div", { className: "mb-6", children: [_jsxs("div", { className: "flex items-center gap-2 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl mb-4", children: [_jsx(AlertTriangle, { className: "text-red-500 shrink-0", size: 24 }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200", children: isMapped && usage.length === 0
+                                                                    ? 'This image is mapped to content'
+                                                                    : 'This image is currently in use' }), _jsx("p", { className: "text-xs text-red-600 dark:text-red-400 mt-1", children: isMapped && usage.length === 0
+                                                                    ? 'The image is linked via semantic ID mapping.'
+                                                                    : 'Please remove the image from all content before deleting.' })] })] }), (usage.length > 0) && (_jsxs("div", { className: "space-y-2 max-h-[200px] overflow-y-auto", children: [_jsx("p", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Used in:" }), usage.map((item, idx) => (_jsxs("div", { className: "flex items-center justify-between p-3 bg-neutral-100 dark:bg-neutral-800 rounded-lg", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: item.title }), _jsxs("p", { className: "text-xs text-neutral-500", children: [item.plugin, " - ", item.type] })] }), item.url && (_jsx("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", className: "p-2 text-primary hover:bg-primary/10 rounded-lg transition-colors", children: _jsx(ExternalLink, { size: 16 }) }))] }, idx)))] })), isMapped && usage.length === 0 && (_jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 mt-2", children: "This image is being used through semantic ID mappings. Delete the mapping first." }))] })) : (_jsxs("div", { className: "mb-6", children: [_jsxs("div", { className: "flex items-center gap-4 mb-4", children: [_jsx("div", { className: "w-20 h-20 relative bg-neutral-200 dark:bg-neutral-700 rounded-lg overflow-hidden shrink-0", children: _jsx(Image, { src: selectedImage.url, alt: selectedImage.filename, fill: true, className: "object-cover", unoptimized: true }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-neutral-900 dark:text-white", children: selectedImage.filename }), _jsx("p", { className: "text-sm text-neutral-500", children: formatFileSize(selectedImage.size) }), _jsx("p", { className: "text-sm text-neutral-500", children: formatDate(selectedImage.uploadedAt) })] })] }), _jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: "Are you sure you want to delete this image? This action cannot be undone." })] })), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx("button", { onClick: () => {
+                                                    setShowDeleteModal(false);
+                                                    setSelectedImage(null);
+                                                }, className: "px-4 py-2 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", children: "Cancel" }), !inUse && (_jsxs("button", { onClick: handleDelete, disabled: deleting, className: "px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50 flex items-center gap-2", children: [deleting && _jsx(Loader2, { size: 16, className: "animate-spin" }), "Delete"] }))] })] }));
+                        })()] }) })), showCleanupModal && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: _jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-xl font-bold text-neutral-900 dark:text-white", children: "Clean Up Unused Images" }), _jsx("button", { onClick: () => setShowCleanupModal(false), className: "p-2 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 rounded-lg", children: _jsx(X, { size: 20 }) })] }), _jsxs("div", { className: "mb-6", children: [_jsxs("div", { className: "flex items-center gap-2 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl mb-4", children: [_jsx(AlertTriangle, { className: "text-amber-500 shrink-0", size: 24 }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-amber-800 dark:text-amber-200", children: "Warning: This action cannot be undone" }), _jsxs("p", { className: "text-xs text-amber-600 dark:text-amber-400 mt-1", children: [getUnusedImagesCount(), " unused image", getUnusedImagesCount() !== 1 ? 's' : '', " will be permanently deleted."] })] })] }), _jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 mb-4", children: "This will delete all images that are not currently in use by any content (blogs, newsletters, or user avatars)." }), _jsxs("div", { className: "p-3 bg-neutral-100 dark:bg-neutral-800 rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-neutral-600 dark:text-neutral-400", children: "Total images:" }), _jsx("span", { className: "font-bold text-neutral-900 dark:text-white", children: stats?.totalImages || 0 })] }), _jsxs("div", { className: "flex items-center justify-between text-sm mt-2", children: [_jsx("span", { className: "text-neutral-600 dark:text-neutral-400", children: "In use:" }), _jsx("span", { className: "font-bold text-red-500", children: stats?.usedImages || 0 })] }), _jsxs("div", { className: "flex items-center justify-between text-sm mt-2", children: [_jsx("span", { className: "text-neutral-600 dark:text-neutral-400", children: "Will be deleted:" }), _jsx("span", { className: "font-bold text-red-500", children: getUnusedImagesCount() })] })] })] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx("button", { onClick: () => setShowCleanupModal(false), className: "px-4 py-2 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", children: "Cancel" }), _jsxs("button", { onClick: handleCleanup, disabled: cleaning, className: "px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50 flex items-center gap-2", children: [cleaning && _jsx(Loader2, { size: 16, className: "animate-spin" }), cleaning ? 'Deleting...' : `Delete ${getUnusedImagesCount()} Images`] })] })] }) }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhits/plugin-images",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Image management and storage plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"

package/src/api/list/index.ts

@@ -4,65 +4,183 @@
  */
 
 import { NextRequest, NextResponse } from 'next/server';
-import { readdir, stat } from 'fs/promises';
+import { readdir, stat, readFile } from 'fs/promises';
 import path from 'path';
 
 const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+const mappingsPath = path.join(process.cwd(), 'data', 'image-mappings.json');
+
+interface BlogDoc {
+    _id: string;
+    slug?: string;
+    title?: string;
+    image?: { id?: string; src?: string };
+    contentBlocks?: any[];
+}
+
+interface UserDoc {
+    _id: string;
+    name?: string;
+    email?: string;
+    image?: string;
+}
+
+async function queryDatabase(): Promise<{ blogFilenames: Set<string>; userFilenames: Set<string> }> {
+    const blogFilenames = new Set<string>();
+    const userFilenames = new Set<string>();
+    
+    try {
+        const { MongoClient } = await import('mongodb');
+        const uri = process.env.DATABASE_URL || process.env.MONGODB_URI;
+        if (!uri) return { blogFilenames, userFilenames };
+
+        const client = new MongoClient(uri);
+        await client.connect();
+        const db = client.db();
+
+        // Get blogs
+        const blogs = await db.collection('blogs').find({}).project({ image: 1, contentBlocks: 1 }).toArray() as BlogDoc[];
+        
+        for (const blog of blogs) {
+            // Featured image
+            if (blog.image?.id) blogFilenames.add(blog.image.id);
+            if (blog.image?.src) blogFilenames.add(blog.image.src);
+            
+            // Content blocks - recursively find image.src
+            if (blog.contentBlocks) {
+                const findImages = (obj: any) => {
+                    if (!obj || typeof obj !== 'object') return;
+                    if (Array.isArray(obj)) {
+                        obj.forEach(findImages);
+                        return;
+                    }
+                    if (obj.src && typeof obj.src === 'string' && !obj.src.startsWith('http')) {
+                        blogFilenames.add(obj.src);
+                    }
+                    if (obj.children) findImages(obj.children);
+                    if (obj.data) findImages(obj.data);
+                };
+                findImages(blog.contentBlocks);
+            }
+        }
+
+        // Get users with avatars
+        const users = await db.collection('users').find({ image: { $exists: true, $ne: null } }).project({ image: 1 }).toArray() as UserDoc[];
+        for (const user of users) {
+            if (user.image && user.image.includes('/api/uploads/')) {
+                const filename = user.image.split('/api/uploads/')[1];
+                if (filename) userFilenames.add(filename);
+            }
+        }
+
+        await client.close();
+    } catch (error) {
+        console.error('Error querying database for list:', error);
+    }
+    
+    return { blogFilenames, userFilenames };
+}
+
+function extractMappings(): { mappedFilenames: Set<string>; semanticIdToFilename: Record<string, string> } {
+    const mappedFilenames = new Set<string>();
+    const semanticIdToFilename: Record<string, string> = {};
+    
+    try {
+        const mappingsContent = require('fs').readFileSync(mappingsPath, 'utf-8');
+        const mappings = JSON.parse(mappingsContent);
+        Object.entries(mappings).forEach(([semanticId, mapping]) => {
+            const filename = typeof mapping === 'string' ? mapping : (mapping as any).filename;
+            if (filename) {
+                mappedFilenames.add(filename);
+                semanticIdToFilename[semanticId] = filename;
+            }
+        });
+    } catch {}
+    
+    return { mappedFilenames, semanticIdToFilename };
+}
 
 export async function GET(request: NextRequest) {
     try {
         const { searchParams } = new URL(request.url);
         const page = parseInt(searchParams.get('page') || '1');
-        const limit = parseInt(searchParams.get('limit') || '20');
+        const limit = parseInt(searchParams.get('limit') || '1000');
         const search = searchParams.get('search') || '';
 
-        // Read uploads directory
         let files: string[] = [];
+        let totalSize = 0;
+        
         try {
             files = await readdir(uploadsDir);
         } catch (error) {
-            // Directory doesn't exist yet
             return NextResponse.json({
                 images: [],
                 total: 0,
                 page: 1,
                 limit,
+                stats: {
+                    totalImages: 0,
+                    totalSize: 0,
+                    usedImages: 0,
+                    availableImages: 0,
+                }
             });
         }
 
-        // Filter image files and get metadata
         const imageExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif'];
         const imageFiles = files.filter(file => {
             const ext = path.extname(file).toLowerCase();
             return imageExtensions.includes(ext);
         });
 
-        // Apply search filter if provided
-        const filteredFiles = search
-            ? imageFiles.filter(file => file.toLowerCase().includes(search.toLowerCase()))
-            : imageFiles;
-
-        // Sort by modification time (newest first)
         const filesWithStats = await Promise.all(
-            filteredFiles.map(async (filename) => {
+            imageFiles.map(async (filename) => {
                 const filePath = path.join(uploadsDir, filename);
-                const stats = await stat(filePath);
-                return {
-                    filename,
-                    mtime: stats.mtime,
-                    size: stats.size,
-                };
+                try {
+                    const stats = await stat(filePath);
+                    totalSize += stats.size;
+                    return {
+                        filename,
+                        mtime: stats.mtime,
+                        size: stats.size,
+                    };
+                } catch {
+                    return { filename, mtime: new Date(), size: 0 };
+                }
             })
         );
 
-        filesWithStats.sort((a, b) => b.mtime.getTime() - a.mtime.getTime());
+        // Get mappings
+        const { mappedFilenames, semanticIdToFilename } = extractMappings();
+        
+        // Get database references
+        const { blogFilenames, userFilenames } = await queryDatabase();
+
+        // An image is "in use" if it's in mappings OR referenced in database
+        // First resolve database references through mappings, then check
+        const inUseFilenames = new Set<string>();
+        
+        // Add mapped filenames
+        mappedFilenames.forEach(f => inUseFilenames.add(f));
+        
+        // Add database references (check if they resolve through mappings)
+        [...blogFilenames, ...userFilenames].forEach(idOrFilename => {
+            const resolved = semanticIdToFilename[idOrFilename] || idOrFilename;
+            inUseFilenames.add(resolved);
+        });
+
+        const usedCount = filesWithStats.filter(f => inUseFilenames.has(f.filename)).length;
+
+        const filteredFiles = search
+            ? filesWithStats.filter(file => file.filename.toLowerCase().includes(search.toLowerCase()))
+            : filesWithStats;
+
+        filteredFiles.sort((a, b) => b.mtime.getTime() - a.mtime.getTime());
 
-        // Paginate
         const start = (page - 1) * limit;
         const end = start + limit;
-        const paginatedFiles = filesWithStats.slice(start, end);
+        const paginatedFiles = filteredFiles.slice(start, end);
 
-        // Build image metadata
         const images = paginatedFiles.map(({ filename, mtime, size }) => {
             const ext = path.extname(filename).toLowerCase();
             const mimeType = ext === '.png' ? 'image/png' : 
@@ -84,6 +202,13 @@ export async function GET(request: NextRequest) {
             total: filteredFiles.length,
             page,
             limit,
+            stats: {
+                totalImages: imageFiles.length,
+                totalSize,
+                usedImages: usedCount,
+                availableImages: imageFiles.length - usedCount,
+            },
+            mappedImages: Array.from(mappedFilenames),
         });
     } catch (error) {
         console.error('List images error:', error);

package/src/api/router.ts

@@ -69,6 +69,14 @@ export async function handleImagesApi(
             }
         }
 
+        // Route: /api/plugin-images/usage (get image usage across plugins)
+        else if (route === 'usage') {
+            if (method === 'GET') {
+                const usageModule = await import('./usage/route');
+                return await usageModule.GET(req);
+            }
+        }
+
         // Method not allowed
         return NextResponse.json(
             { error: `Method ${method} not allowed for route: ${route || '/'}` },