vasuzex 2.1.19 → 2.1.21

package/framework/Services/Media/MediaManager.js

@@ -37,23 +37,25 @@ export class MediaManager {
     const cached = await this.getCachedThumbnail(cacheKey);
     
     if (cached) {
+      // Detect content type from cached buffer
+      const contentType = await this.detectContentType(cached);
       return {
         buffer: cached,
         fromCache: true,
-        contentType: 'image/jpeg',
+        contentType,
       };
     }
 
     // Generate thumbnail
-    const thumbnail = await this.generateThumbnail(imagePath, width, height);
+    const result = await this.generateThumbnail(imagePath, width, height);
     
     // Cache it
-    await this.cacheThumbnail(cacheKey, thumbnail);
+    await this.cacheThumbnail(cacheKey, result.buffer);
 
     return {
-      buffer: thumbnail,
+      buffer: result.buffer,
       fromCache: false,
-      contentType: 'image/jpeg',
+      contentType: result.contentType,
     };
   }
 
@@ -78,19 +80,47 @@ export class MediaManager {
     const storage = this.app.make('storage');
     const imageBuffer = await storage.get(imagePath);
 
-    const thumbnail = await sharp(imageBuffer)
+    // Detect image metadata
+    const image = sharp(imageBuffer);
+    const metadata = await image.metadata();
+    const hasAlpha = metadata.hasAlpha;
+    const originalFormat = metadata.format;
+
+    // Build the sharp pipeline
+    let pipeline = sharp(imageBuffer)
       .resize(width, height, {
         fit: this.config.thumbnails.fit,
         position: this.config.thumbnails.position,
         withoutEnlargement: true,
-      })
-      .jpeg({
+      });
+
+    // Choose output format based on input format and transparency
+    let contentType = 'image/jpeg';
+    
+    if (originalFormat === 'webp') {
+      // Preserve WebP format (supports transparency and good compression)
+      pipeline = pipeline.webp({
+        quality: this.config.thumbnails.quality,
+      });
+      contentType = 'image/webp';
+    } else if (hasAlpha) {
+      // For PNG or other formats with transparency, use PNG
+      pipeline = pipeline.png({
+        quality: this.config.thumbnails.quality,
+        compressionLevel: 9,
+      });
+      contentType = 'image/png';
+    } else {
+      // For opaque images, use JPEG for best compression
+      pipeline = pipeline.jpeg({
         quality: this.config.thumbnails.quality,
         progressive: true,
-      })
-      .toBuffer();
+      });
+    }
+
+    const thumbnail = await pipeline.toBuffer();
 
-    return thumbnail;
+    return { buffer: thumbnail, contentType };
   }
 
   /**
@@ -139,22 +169,27 @@ export class MediaManager {
    */
   async getCachedThumbnail(cacheKey) {
     try {
-      const cachePath = join(this.cacheDir, `${cacheKey}.jpg`);
-      
-      if (!existsSync(cachePath)) {
-        return null;
-      }
+      // Try all supported image extensions
+      for (const ext of ['.webp', '.png', '.jpg']) {
+        const cachePath = join(this.cacheDir, `${cacheKey}${ext}`);
+        
+        if (!existsSync(cachePath)) {
+          continue;
+        }
 
-      // Check if cache expired
-      const stats = await stat(cachePath);
-      const age = Date.now() - stats.mtimeMs;
-      
-      if (age > this.cacheTTL) {
-        await unlink(cachePath);
-        return null;
-      }
+        // Check if cache expired
+        const stats = await stat(cachePath);
+        const age = Date.now() - stats.mtimeMs;
+        
+        if (age > this.cacheTTL) {
+          await unlink(cachePath);
+          continue;
+        }
 
-      return await readFile(cachePath);
+        return await readFile(cachePath);
+      }
+      
+      return null;
     } catch (error) {
       return null;
     }
@@ -165,7 +200,15 @@ export class MediaManager {
    */
   async cacheThumbnail(cacheKey, buffer) {
     try {
-      const cachePath = join(this.cacheDir, `${cacheKey}.jpg`);
+      // Detect format from buffer to use correct extension
+      const metadata = await sharp(buffer).metadata();
+      const formatMap = {
+        webp: '.webp',
+        png: '.png',
+        jpeg: '.jpg',
+      };
+      const ext = formatMap[metadata.format] || '.jpg';
+      const cachePath = join(this.cacheDir, `${cacheKey}${ext}`);
       await mkdir(dirname(cachePath), { recursive: true });
       await writeFile(cachePath, buffer);
     } catch (error) {
@@ -180,12 +223,12 @@ export class MediaManager {
   async getCacheStats() {
     try {
       const files = await readdir(this.cacheDir);
-      const jpgFiles = files.filter(f => f.endsWith('.jpg'));
+      const imageFiles = files.filter(f => f.endsWith('.jpg') || f.endsWith('.png') || f.endsWith('.webp'));
 
       let totalSize = 0;
       let expiredCount = 0;
 
-      for (const file of jpgFiles) {
+      for (const file of imageFiles) {
         const filePath = join(this.cacheDir, file);
         const stats = await stat(filePath);
         totalSize += stats.size;
@@ -197,7 +240,7 @@ export class MediaManager {
       }
 
       return {
-        total: jpgFiles.length,
+        total: imageFiles.length,
         size: totalSize,
         sizeFormatted: this.formatBytes(totalSize),
         expired: expiredCount,
@@ -223,11 +266,11 @@ export class MediaManager {
   async clearExpiredCache() {
     try {
       const files = await readdir(this.cacheDir);
-      const jpgFiles = files.filter(f => f.endsWith('.jpg'));
+      const imageFiles = files.filter(f => f.endsWith('.jpg') || f.endsWith('.png') || f.endsWith('.webp'));
 
       let cleared = 0;
 
-      for (const file of jpgFiles) {
+      for (const file of imageFiles) {
         const filePath = join(this.cacheDir, file);
         const stats = await stat(filePath);
         const age = Date.now() - stats.mtimeMs;
@@ -251,14 +294,14 @@ export class MediaManager {
   async clearAllCache() {
     try {
       const files = await readdir(this.cacheDir);
-      const jpgFiles = files.filter(f => f.endsWith('.jpg'));
+      const imageFiles = files.filter(f => f.endsWith('.jpg') || f.endsWith('.png') || f.endsWith('.webp'));
 
-      for (const file of jpgFiles) {
+      for (const file of imageFiles) {
         const filePath = join(this.cacheDir, file);
         await unlink(filePath);
       }
 
-      return jpgFiles.length;
+      return imageFiles.length;
     } catch (error) {
       console.error('Failed to clear cache:', error.message);
       return 0;
@@ -293,6 +336,25 @@ export class MediaManager {
     return types[ext] || 'application/octet-stream';
   }
 
+  /**
+   * Detect content type from buffer
+   */
+  async detectContentType(buffer) {
+    try {
+      const metadata = await sharp(buffer).metadata();
+      const formatMap = {
+        jpeg: 'image/jpeg',
+        png: 'image/png',
+        gif: 'image/gif',
+        webp: 'image/webp',
+        svg: 'image/svg+xml',
+      };
+      return formatMap[metadata.format] || 'image/jpeg';
+    } catch (error) {
+      return 'image/jpeg';
+    }
+  }
+
   /**
    * Format bytes to human readable
    */

package/frontend/react-ui/components/DataTable/CellComponents/RowActionsCell.jsx

@@ -42,7 +42,10 @@ export function RowActionsCell({
 }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const menuRef = useRef(null);
-  const isPending = hasApproval && row.approval_status === 'pending';
+  
+  // Determine which approval actions to show based on current status
+  const showApprove = hasApproval && (row.approval_status === 'pending' || row.approval_status === 'rejected');
+  const showReject = hasApproval && (row.approval_status === 'pending' || row.approval_status === 'approved');
 
   // Close menu when clicking outside
   useEffect(() => {
@@ -106,10 +109,10 @@ export function RowActionsCell({
 
         {isMenuOpen && (
           <div className="absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 py-1">
-            {/* Approval Actions - Only show when pending */}
-            {hasApproval && isPending && (
+            {/* Approval Actions - Show based on current status */}
+            {(showApprove || showReject) && (
               <>
-                {onApprove && (
+                {showApprove && onApprove && (
                   <button
                     onClick={() => {
                       onApprove(row);
@@ -118,10 +121,10 @@ export function RowActionsCell({
                     className="w-full flex items-center gap-3 px-4 py-2 text-sm text-emerald-700 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/30"
                   >
                     <CheckCircle className="h-4 w-4" />
-                    <span>Approve</span>
+                    <span>{row.approval_status === 'rejected' ? 'Re-approve' : 'Approve'}</span>
                   </button>
                 )}
-                {onReject && (
+                {showReject && onReject && (
                   <button
                     onClick={() => {
                       onReject(row);
@@ -130,7 +133,7 @@ export function RowActionsCell({
                     className="w-full flex items-center gap-3 px-4 py-2 text-sm text-rose-700 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/30"
                   >
                     <XCircle className="h-4 w-4" />
-                    <span>Reject</span>
+                    <span>{row.approval_status === 'approved' ? 'Revoke/Reject' : 'Reject'}</span>
                   </button>
                 )}
                 <div className="border-t border-gray-200 dark:border-gray-700 my-1" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasuzex",
-  "version": "2.1.19",
+  "version": "2.1.21",
   "description": "Laravel-inspired framework for Node.js monorepos - V2 with optimized dependencies",
   "type": "module",
   "main": "./framework/index.js",