@jhits/plugin-images 0.0.14 → 0.0.15

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

@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import { Search, Grid3x3, List } from 'lucide-react';
+
+interface ImageManagerToolbarProps {
+    search: string;
+    setSearch: (value: string) => void;
+    viewMode: 'grid' | 'list';
+    setViewMode: (mode: 'grid' | 'list') => void;
+}
+
+export function ImageManagerToolbar({
+    search,
+    setSearch,
+    viewMode,
+    setViewMode
+}: ImageManagerToolbarProps) {
+    return (
+        <div className="px-4">
+            <div className="flex flex-col sm:flex-row items-center gap-4 p-2 bg-dashboard-card/30 backdrop-blur-xl border border-dashboard-border/40 rounded-2xl shadow-sm">
+                <div className="relative flex-1 group w-full">
+                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-dashboard-text-secondary/40 group-focus-within:text-primary transition-colors duration-300" size={18} />
+                    <input
+                        type="text"
+                        placeholder="Search assets by filename..."
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                        className="w-full pl-12 pr-6 py-3 bg-transparent border-none outline-none text-sm font-semibold text-dashboard-text placeholder:text-dashboard-text-secondary/30"
+                    />
+                </div>
+
+                <div className="flex items-center gap-1.5 p-1.5 bg-dashboard-bg/50 rounded-xl border border-dashboard-border/40">
+                    <button
+                        onClick={() => setViewMode('grid')}
+                        className={`p-2.5 rounded-lg transition-all ${
+                            viewMode === 'grid'
+                                ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                                : 'text-dashboard-text-secondary hover:text-primary hover:bg-primary/5'
+                        }`}
+                        title="Grid View"
+                    >
+                        <Grid3x3 size={18} />
+                    </button>
+                    <button
+                        onClick={() => setViewMode('list')}
+                        className={`p-2.5 rounded-lg transition-all ${
+                            viewMode === 'list'
+                                ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                                : 'text-dashboard-text-secondary hover:text-primary hover:bg-primary/5'
+                        }`}
+                        title="List View"
+                    >
+                        <List size={18} />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,120 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { Eye, Trash2, Activity, Circle, CheckCircle2 } from 'lucide-react';
+import { ImageMetadata } from '../types';
+
+interface ImageTableProps {
+    images: ImageMetadata[];
+    isImageInUse: (filename: string) => boolean;
+    getImageUsage: (filename: string) => any[];
+    formatFileSize: (bytes: number) => string;
+    formatDate: (date: string) => string;
+    onViewFull: (url: string) => void;
+    onDelete: (image: ImageMetadata) => void;
+}
+
+export function ImageTable({
+    images,
+    isImageInUse,
+    getImageUsage,
+    formatFileSize,
+    formatDate,
+    onViewFull,
+    onDelete
+}: ImageTableProps) {
+    return (
+        <div className="bg-dashboard-card/40 rounded-2xl overflow-hidden border border-dashboard-border/40 shadow-sm">
+            <table className="w-full text-left border-collapse">
+                <thead>
+                    <tr className="text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest border-b border-dashboard-border/40 bg-dashboard-bg/20">
+                        <th className="px-8 py-5">Asset Reference</th>
+                        <th className="px-8 py-5">File Size</th>
+                        <th className="px-8 py-5">Uploaded</th>
+                        <th className="px-8 py-5">Usage Status</th>
+                        <th className="px-8 py-5 text-right">Actions</th>
+                    </tr>
+                </thead>
+                <tbody className="divide-y divide-dashboard-border/30">
+                    {images.map((image) => {
+                        const usage = getImageUsage(image.filename);
+                        const inUse = isImageInUse(image.filename);
+                        
+                        return (
+                            <tr key={image.id} className="group hover:bg-primary/[0.03] transition-colors">
+                                <td className="px-8 py-4">
+                                    <div className="flex items-center gap-4">
+                                        <div className={`size-12 relative bg-dashboard-bg/50 rounded-xl overflow-hidden border transition-all ${
+                                            inUse ? 'border-primary/30' : 'border-dashboard-border/60'
+                                        }`}>
+                                            <Image
+                                                src={image.url}
+                                                alt={image.filename}
+                                                fill
+                                                className="object-cover"
+                                                unoptimized
+                                            />
+                                        </div>
+                                        <div className="min-w-0">
+                                            <p className="font-bold text-dashboard-text text-sm tracking-tight group-hover:text-primary transition-colors truncate max-w-[250px]" title={image.filename}>
+                                                {image.filename}
+                                            </p>
+                                            <p className="text-[9px] font-medium text-dashboard-text-secondary opacity-60 uppercase tracking-widest">Media Asset</p>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td className="px-8 py-4">
+                                    <span className="text-xs font-semibold text-dashboard-text/70">
+                                        {formatFileSize(image.size)}
+                                    </span>
+                                </td>
+                                <td className="px-8 py-4">
+                                    <span className="text-xs font-semibold text-dashboard-text/70">
+                                        {formatDate(image.uploadedAt)}
+                                    </span>
+                                </td>
+                                <td className="px-8 py-4">
+                                    {inUse ? (
+                                        <span className="inline-flex items-center gap-2 px-3 py-1 bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 rounded-full text-[9px] font-bold uppercase tracking-wider">
+                                            <CheckCircle2 size={10} />
+                                            Active{usage.length > 0 ? ` (${usage.length})` : ''}
+                                        </span>
+                                    ) : (
+                                        <span className="inline-flex items-center gap-2 px-3 py-1 bg-dashboard-bg/50 border border-dashboard-border/60 text-dashboard-text-secondary/60 rounded-full text-[9px] font-bold uppercase tracking-wider">
+                                            <Circle size={10} />
+                                            Unlinked
+                                        </span>
+                                    )}
+                                </td>
+                                <td className="px-8 py-4 text-right">
+                                    <div className="flex items-center justify-end gap-1.5">
+                                        <button
+                                            onClick={() => onViewFull(image.url)}
+                                            className="p-2.5 text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 rounded-lg transition-all active:scale-90"
+                                            title="View Image"
+                                        >
+                                            <Eye size={18} />
+                                        </button>
+                                        <button
+                                            onClick={() => onDelete(image)}
+                                            className={`p-2.5 rounded-lg transition-all active:scale-90 ${
+                                                inUse 
+                                                    ? 'text-neutral-300 cursor-not-allowed opacity-20' 
+                                                    : 'text-dashboard-text-secondary hover:text-red-500 hover:bg-red-500/10'
+                                            }`}
+                                            disabled={inUse}
+                                            title="Delete Image"
+                                        >
+                                            <Trash2 size={18} />
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                        );
+                    })}
+                </tbody>
+            </table>
+        </div>
+    );
+}

package/src/views/ImageManager/types.ts

@@ -0,0 +1,27 @@
+export interface ImageMetadata {
+    id: string;
+    filename: string;
+    url: string;
+    size: number;
+    mimeType: string;
+    uploadedAt: string;
+}
+
+export interface ImageUsage {
+    imageId: string;
+    filename: string;
+    usage: Array<{
+        plugin: string;
+        type: string;
+        title: string;
+        id: string;
+        url?: string;
+    }>;
+}
+
+export interface StorageStats {
+    totalImages: number;
+    totalSize: number;
+    usedImages: number;
+    availableImages: number;
+}