@jhits/plugin-images 0.0.14 → 0.0.15

package/src/utils/fallback.ts

@@ -4,35 +4,65 @@
  * Also handles URL construction for image filenames
  */
 
+// If set, this URL will be used as a fallback for static images, served directly by Nginx/CDN.
+// Example: NEXT_PUBLIC_STATIC_IMAGE_BASE_URL=https://cdn.yourdomain.com/static-uploads
+const STATIC_IMAGE_BASE_URL = process.env.NEXT_PUBLIC_STATIC_IMAGE_BASE_URL || '';
+
 /**
- * Returns the URL for the fallback "image not found" image
- * Served from the plugin's API route
+ * Returns the URL for the fallback "image not found" image.
+ * Uses a static file from public/ so it works without any API/dashboard dependency.
  */
 export function getFallbackImageUrl(): string {
-    return '/api/plugin-images/fallback';
+    return `/noimagefound.jpg`;
 }
 
 /**
  * Constructs the full image URL from a filename or URL
  * - If it's already a full URL (http://, https://, or starts with /), returns as-is
- * - If it's a filename, constructs `/api/uploads/${filename}`
+ * - If it's a filename, constructs relative URL to /api/uploads/
  */
 export function constructImageUrl(src: string | null | undefined): string | null {
     if (!src || typeof src !== 'string') {
         return null;
     }
 
-    // If it's already a full URL (absolute or relative), return as-is
-    if (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('/')) {
+    // If it's already an absolute URL (http:// or https://), return as-is
+    if (src.startsWith('http://') || src.startsWith('https://')) {
+        return src;
+    }
+
+    // If it starts with /api/uploads, return as-is (already relative API path)
+    if (src.startsWith('/api/uploads/')) {
         return src;
     }
 
-    // Otherwise, it's a filename - construct the API URL
+    // If it starts with / but is not an API path, it might be a local asset, keep as-is
+    if (src.startsWith('/')) {
+        return src;
+    }
+
+    // Otherwise, it's a raw filename - construct the relative API URL
     return `/api/uploads/${src}`;
 }
 
 /**
- * Validates if a URL is valid and can be used with Next.js Image component
+ * Constructs a direct static URL for the image, using STATIC_IMAGE_BASE_URL if available.
+ * This is intended for use as a fallback when API-driven serving fails.
+ */
+export function constructStaticImageUrl(filename: string | null | undefined): string | null {
+  if (!filename || !STATIC_IMAGE_BASE_URL) {
+    return null;
+  }
+  // Ensure filename doesn't start with /api/uploads/ if it was passed through from constructImageUrl
+  const cleanFilename = filename.startsWith('/api/uploads/') ? filename.replace('/api/uploads/', '') : filename;
+  
+  // Ensure base URL ends with a slash
+  const baseUrl = STATIC_IMAGE_BASE_URL.endsWith('/') ? STATIC_IMAGE_BASE_URL : `${STATIC_IMAGE_BASE_URL}/`;
+  return `${baseUrl}${cleanFilename}`;
+}
+
+/**
+ * Validates if a URL is valid
  */
 export function isValidImageUrl(url: string | null | undefined): boolean {
     if (!url || typeof url !== 'string') {
@@ -41,14 +71,18 @@ export function isValidImageUrl(url: string | null | undefined): boolean {
 
     // Check if it's a valid URL format
     try {
-        // For relative URLs (starting with /), they're valid
+        // Absolute URLs (including http/https)
+        if (url.startsWith('http://') || url.startsWith('https://')) {
+            new URL(url);
+            return true;
+        }
+
+        // Relative URLs starting with /
         if (url.startsWith('/')) {
             return true;
         }
 
-        // For absolute URLs, validate the URL format
-        new URL(url);
-        return true;
+        return false;
     } catch {
         return false;
     }
@@ -70,4 +104,3 @@ export function getSafeImageUrl(src: string | null | undefined): string {
     
     return getFallbackImageUrl();
 }
-

package/src/utils/transforms.ts

@@ -29,23 +29,20 @@ export function getImageTransform(
     caller?: string
 ): string {
     const { scale, positionX, positionY, baseScale = 1 } = options;
+    
+    // We combine baseScale (which brings image to min-cover size) with user's zoom scale
     const totalScale = baseScale * scale;
 
-    // 1. Center the image (if using top:50% left:50%)
+    // Center via translate -50% -50% (if top:50% left:50% is used)
     const center = needsCentering ? 'translate(-50%, -50%)' : '';
     
-    // 2. Apply the scaling (base x zoom) FIRST
-    // This ensures the position offset is relative to the scaled visual size
-    const zoom = `scale(${totalScale})`;
-    
-    // 3. Apply the offset (positionX/Y) AFTER scaling
-    // Position values are stored as percentage of CONTAINER
-    // Since scale is applied first, the translate is relative to the scaled visual size
+    // Position offset (stored as % of container)
+    // We apply this AFTER scaling so it moves relative to the scaled visual size
     const offset = `translate(${positionX}%, ${positionY}%)`;
-
-    // Combining them: Center first, then scale, then move
-    // Order matters: scale before translate ensures position is relative to visual size
-    return `${center} ${zoom} ${offset}`.trim();
+    
+    // Order: Center -> Move -> Scale
+    // This ensures position is relative to visual container space
+    return `${center} ${offset} scale(${totalScale})`.trim();
 }
 
 export function getImageFilter(brightness: number = 100, blur: number = 0): string | undefined {

package/src/views/ImageManager/components/CleanupLibraryModal.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import React from 'react';
+import { X, Zap, Loader2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { StorageStats } from '../types';
+
+interface CleanupLibraryModalProps {
+    isOpen: boolean;
+    stats: StorageStats | null;
+    unusedCount: number;
+    isCleaning: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+}
+
+export function CleanupLibraryModal({
+    isOpen,
+    stats,
+    unusedCount,
+    isCleaning,
+    onClose,
+    onConfirm
+}: CleanupLibraryModalProps) {
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/60 backdrop-blur-md">
+                    <motion.div 
+                        initial={{ opacity: 0, scale: 0.9, y: 20 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.9, y: 20 }}
+                        className="glass-panel w-full max-w-lg rounded-[3rem] shadow-2xl overflow-hidden flex flex-col border border-white/10 dark:border-black/10"
+                    >
+                        <div className="p-10 pb-6 flex justify-between items-center shrink-0">
+                            <div>
+                                <h2 className="text-3xl font-black text-dashboard-text uppercase tracking-tighter leading-none mb-2">Library Optimization</h2>
+                                <p className="text-[10px] font-black text-amber-500 uppercase tracking-[0.2em]">Maintenance Mode</p>
+                            </div>
+                            <button 
+                                onClick={onClose} 
+                                className="hover:rotate-90 hover:text-red-500 transition-all p-3 bg-dashboard-bg rounded-2xl border border-dashboard-border active:scale-90"
+                            >
+                                <X size={24} />
+                            </button>
+                        </div>
+                        
+                        <div className="px-10 pb-10 space-y-8">
+                            <div className="flex items-center gap-4 p-6 bg-amber-500/5 border border-amber-500/20 rounded-3xl">
+                                <Zap className="text-amber-500 shrink-0" size={32} />
+                                <div className="min-w-0">
+                                    <p className="text-sm font-black text-amber-500 uppercase tracking-tight">Mass Deletion Warning</p>
+                                    <p className="text-xs text-dashboard-text-secondary font-medium mt-1 leading-relaxed italic">
+                                        {unusedCount} standalone assets will be purged from the cloud repository.
+                                    </p>
+                                </div>
+                            </div>
+                            
+                            <div className="p-8 bg-dashboard-bg/50 border border-dashboard-border rounded-[2rem] space-y-4">
+                                <div className="flex items-center justify-between">
+                                    <span className="text-[10px] font-black text-dashboard-text-secondary uppercase tracking-widest opacity-60">Repository Total</span>
+                                    <span className="text-sm font-black text-dashboard-text">{stats?.totalImages || 0}</span>
+                                </div>
+                                <div className="flex items-center justify-between border-t border-dashboard-border/30 pt-4">
+                                    <span className="text-[10px] font-black text-primary uppercase tracking-widest">Active Assets</span>
+                                    <span className="text-sm font-black text-primary">{stats?.usedImages || 0}</span>
+                                </div>
+                                <div className="flex items-center justify-between border-t border-dashboard-border/30 pt-4">
+                                    <span className="text-[10px] font-black text-red-500 uppercase tracking-widest">Purge Bundle</span>
+                                    <span className="text-sm font-black text-red-500">{unusedCount}</span>
+                                </div>
+                            </div>
+
+                            <div className="flex gap-4 pt-4">
+                                <button
+                                    onClick={onClose}
+                                    className="flex-1 py-4 bg-dashboard-bg text-dashboard-text-secondary border border-dashboard-border rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-dashboard-card transition-all active:scale-[0.98]"
+                                >
+                                    Abort
+                                </button>
+                                <button
+                                    onClick={onConfirm}
+                                    disabled={isCleaning}
+                                    className="flex-1 py-4 bg-red-500 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] shadow-xl shadow-red-500/20 hover:bg-red-600 transition-all active:scale-[0.98] flex items-center justify-center gap-3"
+                                >
+                                    {isCleaning && <Loader2 size={16} className="animate-spin" />}
+                                    Initialize Purge
+                                </button>
+                            </div>
+                        </div>
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>
+    );
+}

package/src/views/ImageManager/components/DeleteImageModal.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { X, AlertTriangle, ExternalLink, Loader2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ImageMetadata } from '../types';
+
+interface DeleteImageModalProps {
+    isOpen: boolean;
+    image: ImageMetadata | null;
+    inUse: boolean;
+    usage: any[];
+    isDeleting: boolean;
+    formatFileSize: (bytes: number) => string;
+    formatDate: (date: string) => string;
+    onClose: () => void;
+    onConfirm: () => void;
+}
+
+export function DeleteImageModal({
+    isOpen,
+    image,
+    inUse,
+    usage,
+    isDeleting,
+    formatFileSize,
+    formatDate,
+    onClose,
+    onConfirm
+}: DeleteImageModalProps) {
+    return (
+        <AnimatePresence>
+            {isOpen && image && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/60 backdrop-blur-md">
+                    <motion.div 
+                        initial={{ opacity: 0, scale: 0.9, y: 20 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.9, y: 20 }}
+                        className="glass-panel w-full max-w-lg rounded-[3rem] shadow-2xl overflow-hidden flex flex-col border border-white/10 dark:border-black/10"
+                    >
+                        <div className="p-10 pb-6 flex justify-between items-center shrink-0">
+                            <div>
+                                <h2 className="text-3xl font-black text-dashboard-text uppercase tracking-tighter leading-none mb-2">Purge Asset</h2>
+                                <p className="text-[10px] font-black text-red-500 uppercase tracking-[0.2em]">Destructive Action</p>
+                            </div>
+                            <button 
+                                onClick={onClose} 
+                                className="hover:rotate-90 hover:text-red-500 transition-all p-3 bg-dashboard-bg rounded-2xl border border-dashboard-border active:scale-90"
+                            >
+                                <X size={24} />
+                            </button>
+                        </div>
+                        
+                        <div className="px-10 pb-10 space-y-8">
+                            {inUse ? (
+                                <div className="space-y-6">
+                                    <div className="flex items-center gap-4 p-6 bg-red-500/5 border border-red-500/20 rounded-3xl">
+                                        <AlertTriangle className="text-red-500 shrink-0" size={32} />
+                                        <div>
+                                            <p className="text-sm font-black text-red-500 uppercase tracking-tight">System Integrity Violation</p>
+                                            <p className="text-xs text-dashboard-text-secondary font-medium mt-1 leading-relaxed italic">
+                                                This asset is actively connected to content and cannot be purged while linked.
+                                            </p>
+                                        </div>
+                                    </div>
+                                    
+                                    {(usage.length > 0) && (
+                                        <div className="space-y-4">
+                                            <p className="text-[10px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] ml-1">Active Connections:</p>
+                                            <div className="space-y-3 max-h-[250px] overflow-y-auto pr-2 custom-scrollbar">
+                                                {usage.map((item, idx) => (
+                                                    <div key={idx} className="flex items-center justify-between p-4 bg-dashboard-bg/50 border border-dashboard-border rounded-2xl group hover:border-primary/30 transition-all">
+                                                        <div>
+                                                            <p className="text-xs font-black text-dashboard-text uppercase tracking-tight">{item.title}</p>
+                                                            <p className="text-[9px] font-bold text-dashboard-text-secondary uppercase tracking-widest opacity-60 mt-0.5">{item.plugin} • {item.type}</p>
+                                                        </div>
+                                                        {item.url && (
+                                                            <a
+                                                                href={item.url}
+                                                                target="_blank"
+                                                                rel="noopener noreferrer"
+                                                                className="p-3 bg-dashboard-card text-primary rounded-xl border border-dashboard-border group-hover:bg-primary group-hover:text-white transition-all shadow-sm"
+                                                            >
+                                                                <ExternalLink size={14} />
+                                                            </a>
+                                                        )}
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            ) : (
+                                <div className="space-y-8">
+                                    <div className="flex items-center gap-6 p-6 bg-dashboard-bg/50 border border-dashboard-border rounded-[2rem]">
+                                        <div className="size-24 relative bg-dashboard-card rounded-2xl overflow-hidden border border-dashboard-border shadow-inner">
+                                            <Image
+                                                src={image.url}
+                                                alt={image.filename}
+                                                fill
+                                                className="object-cover"
+                                                unoptimized
+                                            />
+                                        </div>
+                                        <div className="min-w-0">
+                                            <p className="text-lg font-black text-dashboard-text uppercase tracking-tight truncate">{image.filename}</p>
+                                            <div className="flex flex-col gap-1 mt-1">
+                                                <span className="text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest opacity-60">{formatFileSize(image.size)}</span>
+                                                <span className="text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest opacity-60">{formatDate(image.uploadedAt)}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <p className="text-sm text-dashboard-text-secondary font-medium leading-relaxed text-center italic px-4 opacity-70">
+                                        Are you certain you wish to permanently purge this asset from the repository? This operation is irreversible.
+                                    </p>
+                                </div>
+                            )}
+                            
+                            <div className="flex gap-4 pt-4 border-t border-dashboard-border/50">
+                                <button
+                                    onClick={onClose}
+                                    className="flex-1 py-4 bg-dashboard-bg text-dashboard-text-secondary border border-dashboard-border rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-dashboard-card hover:text-dashboard-text transition-all active:scale-[0.98]"
+                                >
+                                    Abort Protocol
+                                </button>
+                                {!inUse && (
+                                    <button
+                                        onClick={onConfirm}
+                                        disabled={isDeleting}
+                                        className="flex-1 py-4 bg-red-500 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] shadow-xl shadow-red-500/20 hover:bg-red-600 transition-all active:scale-[0.98] flex items-center justify-center gap-3"
+                                    >
+                                        {isDeleting && <Loader2 size={16} className="animate-spin" />}
+                                        Confirm Purge
+                                    </button>
+                                )}
+                            </div>
+                        </div>
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>
+    );
+}

package/src/views/ImageManager/components/ImageGrid.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import React from 'react';
+import { Maximize2, Trash2, CheckCircle2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ImageMetadata } from '../types';
+
+interface ImageGridProps {
+    images: ImageMetadata[];
+    isImageInUse: (filename: string) => boolean;
+    getImageUsage: (filename: string) => any[];
+    formatFileSize: (bytes: number) => string;
+    onViewFull: (url: string) => void;
+    onDelete: (image: ImageMetadata) => void;
+}
+
+export function ImageGrid({
+    images,
+    isImageInUse,
+    getImageUsage,
+    formatFileSize,
+    onViewFull,
+    onDelete
+}: ImageGridProps) {
+    return (
+        <div className="columns-2 sm:columns-3 lg:columns-4 xl:columns-5 gap-6 space-y-6">
+            <AnimatePresence mode="popLayout">
+                {images.map((image, index) => {
+                    const usage = getImageUsage(image.filename);
+                    const inUse = isImageInUse(image.filename);
+                    
+                    return (
+                        <motion.div 
+                            key={image.id}
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, scale: 0.9 }}
+                            transition={{ duration: 0.3, delay: index * 0.02 }}
+                            className="break-inside-avoid mb-6 group relative"
+                        >
+                            {/* Main Card Container */}
+                            <div className={`relative bg-dashboard-card/40 rounded-2xl overflow-hidden border transition-all duration-500 shadow-sm group-hover:shadow-xl group-hover:shadow-primary/10 ${
+                                inUse 
+                                    ? 'border-dashboard-border/40' 
+                                    : 'border-dashboard-border/60 group-hover:border-primary/30'
+                            }`}>
+                                {/* The Image - Full Bleed */}
+                                <img
+                                    src={image.url}
+                                    alt={image.filename}
+                                    className="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700 block"
+                                    crossOrigin="anonymous"
+                                    loading="lazy"
+                                />
+                                
+                                {/* 1. Permanent Status Badge (Top Right) */}
+                                {inUse && (
+                                    <div className="absolute top-3 right-3 px-2.5 py-1 bg-emerald-500/90 backdrop-blur-sm text-white text-[8px] font-bold uppercase tracking-wider rounded-full flex items-center gap-1.5 shadow-lg shadow-emerald-500/20 z-20">
+                                        <CheckCircle2 size={10} />
+                                        In Use
+                                    </div>
+                                )}
+
+                                {/* 2. SMART HOVER OVERLAY */}
+                                <div className="absolute inset-0 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col justify-between p-5">
+                                    <div className="absolute inset-0 bg-gradient-to-b from-black/10 via-black/40 to-black/70 backdrop-blur-[1px]" />
+
+                                    {/* Action Buttons (Center) */}
+                                    <div className="relative z-20 flex-1 flex items-center justify-center gap-2.5 translate-y-2 group-hover:translate-y-0 transition-transform duration-300">
+                                        <button
+                                            onClick={() => onViewFull(image.url)}
+                                            className="p-3 bg-white text-primary rounded-xl hover:scale-105 active:scale-95 transition-all shadow-xl"
+                                            title="View Image"
+                                        >
+                                            <Maximize2 size={18} />
+                                        </button>
+                                        <button
+                                            onClick={() => onDelete(image)}
+                                            className={`p-3 rounded-xl shadow-xl transition-all hover:scale-105 active:scale-95 ${
+                                                inUse
+                                                    ? 'bg-white/10 text-white/30 cursor-not-allowed'
+                                                    : 'bg-red-500 text-white hover:bg-red-600'
+                                            }`}
+                                            title={inUse ? 'Image is in use' : 'Delete Image'}
+                                            disabled={inUse}
+                                        >
+                                            <Trash2 size={18} />
+                                        </button>
+                                    </div>
+
+                                    {/* Metadata Footer (Bottom) */}
+                                    <div className="relative z-20 space-y-1.5 translate-y-2 group-hover:translate-y-0 transition-transform duration-300 delay-75">
+                                        <p className="text-[11px] font-bold text-white tracking-tight truncate w-full" title={image.filename}>
+                                            {image.filename}
+                                        </p>
+                                        <div className="flex items-center justify-between border-t border-white/10 pt-1.5">
+                                            <span className="text-[9px] font-bold text-white/60 uppercase tracking-widest">
+                                                {formatFileSize(image.size)}
+                                            </span>
+                                            {inUse ? (
+                                                <span className="text-[9px] text-emerald-400 font-bold uppercase">
+                                                    {usage.length > 0 ? `${usage.length} Uses` : 'Active'}
+                                                </span>
+                                            ) : (
+                                                <span className="text-[9px] text-white/40 font-bold uppercase">
+                                                    Available
+                                                </span>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </motion.div>
+                    );
+                })}
+            </AnimatePresence>
+        </div>
+    );
+}

package/src/views/ImageManager/components/ImageManagerHeader.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import React from 'react';
+import { FileImage, Zap, Loader2, Upload, RefreshCw } from 'lucide-react';
+
+interface ImageManagerHeaderProps {
+    uploading: boolean;
+    unusedCount: number;
+    onUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onRefresh: () => void;
+    onShowCleanup: () => void;
+}
+
+export function ImageManagerHeader({
+    uploading,
+    unusedCount,
+    onUpload,
+    onRefresh,
+    onShowCleanup
+}: ImageManagerHeaderProps) {
+    return (
+        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-8 px-4">
+            <div className="space-y-3">
+                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/15 border border-primary/30 text-primary text-[10px] font-bold uppercase tracking-wider shadow-sm">
+                    <FileImage size={12} />
+                    <span>Media Library</span>
+                </div>
+                <div>
+                    <h1 className="text-4xl font-bold text-dashboard-text tracking-tight leading-none mb-2">
+                        Images <span className="text-primary">&</span> Media
+                    </h1>
+                    <p className="text-sm text-dashboard-text-secondary font-medium max-w-md leading-relaxed opacity-80">
+                        Upload and manage your images. See exactly where they are used across your website.
+                    </p>
+                </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+                {unusedCount > 0 && (
+                    <button
+                        onClick={onShowCleanup}
+                        className="group flex items-center gap-3 px-6 py-3.5 bg-dashboard-card/50 border border-dashboard-border/40 text-amber-600 rounded-2xl text-[10px] font-bold uppercase tracking-widest transition-all hover:bg-amber-500/10 hover:border-amber-500/20 active:scale-95 shadow-sm"
+                    >
+                        <Zap size={16} />
+                        Cleanup Library
+                    </button>
+                )}
+                
+                <label className="group relative flex items-center gap-3 px-7 py-3.5 bg-primary text-white rounded-2xl text-[10px] font-bold uppercase tracking-widest overflow-hidden transition-all hover:scale-[1.02] active:scale-95 shadow-lg shadow-primary/20 cursor-pointer">
+                    {uploading ? <Loader2 size={18} className="relative z-10 animate-spin" /> : <Upload size={18} className="relative z-10" />}
+                    <span className="relative z-10">{uploading ? 'Uploading...' : 'Upload Media'}</span>
+                    <input 
+                        type="file" 
+                        accept="image/*" 
+                        multiple 
+                        onChange={onUpload}
+                        className="hidden"
+                        disabled={uploading}
+                    />
+                </label>
+                
+                <button
+                    onClick={onRefresh}
+                    className="p-3.5 bg-dashboard-card/50 border border-dashboard-border/40 text-dashboard-text-secondary hover:text-primary hover:border-primary/30 transition-all rounded-2xl active:scale-95"
+                    title="Refresh Gallery"
+                >
+                    <RefreshCw size={18} />
+                </button>
+            </div>
+        </div>
+    );
+}

package/src/views/ImageManager/components/ImageManagerStats.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import { Image as ImageIcon, Database, CheckCircle2, Activity } from 'lucide-react';
+import { StorageStats } from '../types';
+
+interface ImageManagerStatsProps {
+    stats: StorageStats;
+    formatFileSize: (bytes: number) => string;
+}
+
+export function ImageManagerStats({ stats, formatFileSize }: ImageManagerStatsProps) {
+    return (
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 px-4">
+            <div className="bg-dashboard-card/50 border border-dashboard-border/40 p-5 rounded-2xl relative overflow-hidden group transition-all duration-500">
+                <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:scale-105 group-hover:text-primary transition-all duration-700">
+                    <ImageIcon size={80} />
+                </div>
+                <div className="relative z-10">
+                    <label className="text-[10px] font-bold text-primary uppercase tracking-widest mb-1 block opacity-80">Total Assets</label>
+                    <p className="text-2xl font-bold text-dashboard-text tracking-tight">{stats.totalImages}</p>
+                    <p className="text-[9px] text-dashboard-text-secondary mt-1 font-semibold uppercase opacity-60">Optimized Library</p>
+                </div>
+            </div>
+            
+            <div className="bg-dashboard-card/50 border border-dashboard-border/40 p-5 rounded-2xl relative overflow-hidden group transition-all duration-500">
+                <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:scale-105 group-hover:text-amber-500 transition-all duration-700">
+                    <Database size={80} />
+                </div>
+                <div className="relative z-10">
+                    <label className="text-[10px] font-bold text-amber-500 uppercase tracking-widest mb-1 block opacity-80">Storage Usage</label>
+                    <p className="text-2xl font-bold text-dashboard-text tracking-tight">{formatFileSize(stats.totalSize)}</p>
+                    <p className="text-[9px] text-dashboard-text-secondary mt-1 font-semibold uppercase opacity-60">Cloud-optimized Storage</p>
+                </div>
+            </div>
+            
+            <div className="bg-dashboard-card/50 border border-dashboard-border/40 p-5 rounded-2xl relative overflow-hidden group transition-all duration-500">
+                <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:scale-105 group-hover:text-emerald-500 transition-all duration-700">
+                    <CheckCircle2 size={80} />
+                </div>
+                <div className="relative z-10">
+                    <label className="text-[10px] font-bold text-emerald-500 uppercase tracking-widest mb-1 block opacity-80">Active Images</label>
+                    <p className="text-2xl font-bold text-dashboard-text tracking-tight">{stats.usedImages}</p>
+                    <p className="text-[9px] text-dashboard-text-secondary mt-1 font-semibold uppercase opacity-60">Linked to Website</p>
+                </div>
+            </div>
+            
+            <div className="bg-dashboard-card/50 border border-dashboard-border/40 p-5 rounded-2xl relative overflow-hidden group transition-all duration-500">
+                <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:scale-105 group-hover:text-neutral-500 transition-all duration-700">
+                    <Activity size={80} />
+                </div>
+                <div className="relative z-10">
+                    <label className="text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest mb-1 block opacity-80">Unused Assets</label>
+                    <p className="text-2xl font-bold text-dashboard-text tracking-tight">{stats.availableImages}</p>
+                    <p className="text-[9px] text-dashboard-text-secondary mt-1 font-semibold uppercase opacity-60">Ready for Removal</p>
+                </div>
+            </div>
+        </div>
+    );
+}