From ea7d688f7cce0465328baa9bf940faa99a8b1f03 Mon Sep 17 00:00:00 2001
From: kenilkb <kenil@tech4biz.org>
Date: Wed, 15 Jul 2026 18:23:19 +0530
Subject: [PATCH] Refactor: Add Open in New Tab for PDFs/Docs, upgrade details
 modal to 2-column lg, and enhance document cover thumbnails

---
 .../features/assets/components/AssetCard.tsx  | 123 ++++++------
 .../assets/components/AssetDetailsModal.tsx   | 176 +++++++++---------
 .../assets/components/AssetViewerModal.tsx    |  24 +++
 3 files changed, 178 insertions(+), 145 deletions(-)

diff --git a/Channel-Frontend/src/features/assets/components/AssetCard.tsx b/Channel-Frontend/src/features/assets/components/AssetCard.tsx
index ce186b3..758ed36 100644
--- a/Channel-Frontend/src/features/assets/components/AssetCard.tsx
+++ b/Channel-Frontend/src/features/assets/components/AssetCard.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 
-  Globe, 
   FileText, 
-  Image as ImageIcon, 
   File, 
   Eye, 
   MoreVertical, 
@@ -14,8 +12,7 @@ import {
   ExternalLink, 
   Download, 
   Clock, 
-  AlertCircle,
-  BookOpen
+  AlertCircle
 } from 'lucide-react';
 import type { Asset } from '../../../types/assets';
 import type { User } from '../../../types/auth';
@@ -69,13 +66,7 @@ export const AssetCard: React.FC<AssetCardProps> = ({
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
   };
 
-  const getAssetIcon = (type: string) => {
-    if (type === 'case_study') return BookOpen;
-    if (type === 'url') return Globe;
-    if (type.includes('pdf')) return FileText;
-    if (type.includes('image') || type.includes('png') || type.includes('jpg')) return ImageIcon;
-    return File;
-  };
+
 
   const isRenderable = (type: string, url: string) => {
     const isOffice = type.includes('word') || type.includes('presentation') || type.includes('sheet') || 
@@ -104,7 +95,7 @@ export const AssetCard: React.FC<AssetCardProps> = ({
     return resolvedUrl;
   };
 
-  const Icon = getAssetIcon(asset.type);
+
 
   const isImage = asset.type.includes('image') || asset.type.includes('png') || asset.type.includes('jpg') || asset.url.match(/\.(png|jpe?g|gif|svg|webp)$/i);
   const isPdf = asset.type.includes('pdf') || asset.url.toLowerCase().endsWith('.pdf');
@@ -112,8 +103,8 @@ export const AssetCard: React.FC<AssetCardProps> = ({
   const isPresentation = asset.type.includes('presentation') || asset.url.toLowerCase().endsWith('.pptx') || asset.url.toLowerCase().endsWith('.ppt');
   const isSpreadsheet = asset.type.includes('sheet') || asset.url.toLowerCase().endsWith('.xlsx') || asset.url.toLowerCase().endsWith('.xls') || asset.url.toLowerCase().endsWith('.csv');
   
-  const hasBanner = isImage || (asset.type === 'case_study' && !!asset.thumbnailUrl);
-  const bannerSrc = (asset.type === 'case_study' && asset.thumbnailUrl) ? asset.thumbnailUrl : asset.url;
+  const hasBanner = isImage || !!asset.thumbnailUrl;
+  const bannerSrc = asset.thumbnailUrl ? asset.thumbnailUrl : asset.url;
 
   return (
     <motion.div 
@@ -234,83 +225,95 @@ export const AssetCard: React.FC<AssetCardProps> = ({
             />
           ) : null}
 
-          {/* Fallbacks / simulated thumbnails */}
           <div 
             id={`fallback-${asset.id}`} 
-            className="w-full h-full flex items-center justify-center"
+            className="w-full h-full flex items-center justify-center bg-ink-50"
             style={{ display: hasBanner ? 'none' : 'flex' }}
           >
             {isPdf ? (
-              <div className="flex flex-col items-center justify-center w-full h-full p-4 relative">
-                <div className="w-14 h-18 bg-ink-0 border border-ink-200 shadow-sm rounded flex flex-col justify-between p-1.5 relative overflow-hidden">
-                  <div className="absolute top-0 right-0 left-0 bg-red-600 text-ink-0 py-0.5 text-[8px] font-extrabold uppercase text-center tracking-wider">
-                    PDF
+              <div className="flex flex-col items-center justify-center w-full h-full p-4 relative bg-red-500/[0.03] hover:bg-red-500/[0.06] transition-colors">
+                <div className="w-[105px] h-[135px] bg-ink-0 border border-red-500/20 shadow-md rounded-lg flex flex-col justify-between p-3 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
+                  <div className="absolute top-0 right-0 left-0 bg-red-600 text-ink-0 py-1 text-[8px] font-extrabold uppercase text-center tracking-wider font-sans">
+                    PDF Document
                   </div>
-                  <div className="space-y-1 mt-4">
-                    <div className="h-1 bg-ink-200 rounded w-5/6" />
+                  <div className="space-y-1.5 mt-6 flex-grow pt-1">
+                    <div className="h-1 bg-ink-200 rounded w-11/12" />
                     <div className="h-1 bg-ink-200 rounded w-full" />
-                    <div className="h-1 bg-ink-200 rounded w-4/5" />
+                    <div className="h-1 bg-ink-250 rounded w-10/12" />
+                    <div className="h-1 bg-ink-200 rounded w-full" />
+                    <div className="h-1 bg-ink-200 rounded w-3/4" />
                   </div>
-                  <div className="flex items-center justify-between text-[7px] text-ink-400 font-bold border-t border-ink-100 pt-0.5 mt-1">
-                    <span>PDF</span>
-                    <FileText className="w-2.5 h-2.5 text-red-500" />
+                  <div className="flex items-center justify-between text-[7px] text-ink-400 font-bold border-t border-ink-100 pt-1 mt-1 font-sans">
+                    <span>PDF RESOURCE</span>
+                    <FileText className="w-3 h-3 text-red-650" />
                   </div>
                 </div>
               </div>
             ) : isPresentation ? (
-              <div className="flex flex-col items-center justify-center w-full h-full p-4">
-                <div className="w-18 h-13 bg-amber-500 border border-amber-600 shadow-sm rounded-lg flex flex-col justify-between p-1.5 relative overflow-hidden">
-                  <div className="h-1.5 bg-ink-0/90 rounded w-3/4 mb-1" />
-                  <div className="space-y-1">
+              <div className="flex flex-col items-center justify-center w-full h-full p-4 bg-amber-500/[0.03] hover:bg-amber-500/[0.06] transition-colors">
+                <div className="w-[125px] h-[90px] bg-amber-500 border border-amber-600 shadow-md rounded-lg flex flex-col justify-between p-2.5 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
+                  <div className="h-2 bg-ink-0/90 rounded w-3/4 mb-1" />
+                  <div className="space-y-1 flex-grow">
                     <div className="h-1 bg-ink-0/60 rounded w-full" />
-                    <div className="h-1 bg-ink-0/60 rounded w-5/6" />
+                    <div className="h-1 bg-ink-0/60 rounded w-11/12" />
+                    <div className="h-1 bg-ink-0/60 rounded w-10/12" />
                   </div>
-                  <div className="flex items-center justify-between text-[7px] text-ink-0/80 font-bold pt-0.5">
-                    <span>SLIDE</span>
-                    <span className="font-extrabold">PPTX</span>
+                  <div className="flex items-center justify-between text-[7px] text-ink-0/80 font-bold pt-1 border-t border-amber-400">
+                    <span>PRESENTATION</span>
+                    <span className="font-extrabold uppercase">PPTX</span>
                   </div>
                 </div>
               </div>
             ) : isWord ? (
-              <div className="flex flex-col items-center justify-center w-full h-full p-4">
-                <div className="w-14 h-18 bg-ink-0 border border-ink-200 shadow-sm rounded flex flex-col justify-between p-1.5 relative overflow-hidden">
-                  <div className="absolute top-0 right-0 left-0 bg-blue-600 text-ink-0 py-0.5 text-[8px] font-extrabold uppercase text-center tracking-wider">
-                    DOC
+              <div className="flex flex-col items-center justify-center w-full h-full p-4 bg-blue-500/[0.03] hover:bg-blue-500/[0.06] transition-colors">
+                <div className="w-[105px] h-[135px] bg-ink-0 border border-blue-500/20 shadow-md rounded-lg flex flex-col justify-between p-3 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
+                  <div className="absolute top-0 right-0 left-0 bg-blue-600 text-ink-0 py-1 text-[8px] font-extrabold uppercase text-center tracking-wider font-sans">
+                    Word Doc
                   </div>
-                  <div className="space-y-1 mt-4">
+                  <div className="space-y-1.5 mt-6 flex-grow pt-1">
+                    <div className="h-1 bg-ink-200 rounded w-11/12" />
                     <div className="h-1 bg-ink-200 rounded w-full" />
-                    <div className="h-1 bg-ink-200 rounded w-5/6" />
+                    <div className="h-1 bg-ink-250 rounded w-10/12" />
                     <div className="h-1 bg-ink-200 rounded w-full" />
                   </div>
-                  <div className="flex items-center justify-between text-[7px] text-ink-400 font-bold border-t border-ink-100 pt-0.5 mt-1">
-                    <span>WORD</span>
-                    <FileText className="w-2.5 h-2.5 text-blue-500" />
+                  <div className="flex items-center justify-between text-[7px] text-ink-400 font-bold border-t border-ink-100 pt-1 mt-1 font-sans">
+                    <span>DOCX RESOURCE</span>
+                    <FileText className="w-3 h-3 text-blue-650" />
                   </div>
                 </div>
               </div>
             ) : isSpreadsheet ? (
-              <div className="flex flex-col items-center justify-center w-full h-full p-4">
-                <div className="w-16 h-13 bg-emerald-600 border border-emerald-700 shadow-sm rounded-lg flex flex-col justify-between p-1.5 relative overflow-hidden">
-                  <div className="grid grid-cols-3 gap-0.5 mt-0.5">
-                    <div className="h-1.5 bg-ink-0/90 rounded-sm" />
-                    <div className="h-1.5 bg-ink-0/70 rounded-sm" />
-                    <div className="h-1.5 bg-ink-0/70 rounded-sm" />
-                    <div className="h-1.5 bg-ink-0/60 rounded-sm" />
-                    <div className="h-1.5 bg-ink-0/80 rounded-sm" />
-                    <div className="h-1.5 bg-ink-0/60 rounded-sm" />
+              <div className="flex flex-col items-center justify-center w-full h-full p-4 bg-emerald-500/[0.03] hover:bg-emerald-500/[0.06] transition-colors">
+                <div className="w-[115px] h-[90px] bg-ink-0 border border-emerald-500/20 shadow-md rounded-lg flex flex-col justify-between p-2 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
+                  <div className="absolute top-0 right-0 left-0 bg-emerald-650 text-ink-0 py-1 text-[7px] font-extrabold uppercase text-center tracking-wider font-sans">
+                    Spreadsheet
                   </div>
-                  <div className="flex items-center justify-between text-[7px] text-emerald-100 font-bold pt-0.5">
-                    <span>SHEET</span>
-                    <span className="font-extrabold">XLSX</span>
+                  <div className="grid grid-cols-3 gap-1 mt-5 flex-grow pt-1">
+                    <div className="h-2 bg-emerald-50 border border-emerald-100 rounded" />
+                    <div className="h-2 bg-emerald-50 border border-emerald-100 rounded" />
+                    <div className="h-2 bg-emerald-50 border border-emerald-100 rounded" />
+                    <div className="h-2 bg-ink-50 border border-ink-100 rounded" />
+                    <div className="h-2 bg-ink-50 border border-ink-100 rounded" />
+                    <div className="h-2 bg-ink-50 border border-ink-100 rounded" />
+                  </div>
+                  <div className="flex items-center justify-between text-[7px] text-ink-400 font-bold border-t border-ink-100 pt-1 mt-1 font-sans">
+                    <span>XLSX SHEET</span>
+                    <span className="font-extrabold text-emerald-650 text-[6px]">EXCEL</span>
                   </div>
                 </div>
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center w-full h-full p-4">
-                <div className="w-12 h-12 rounded-xl bg-ink-100 border border-ink-200 flex items-center justify-center shadow-inner relative group-hover:scale-105 transition-transform">
-                  <Icon className="w-6 h-6 text-ink-650" />
-                  <div className="absolute -bottom-1 -right-1 bg-ink-800 border border-ink-700 rounded px-1 py-0.5 text-[7px] font-bold text-ink-0 uppercase">
-                    {asset.type === 'case_study' ? 'CASE STUDY' : asset.type === 'url' ? 'LINK' : 'FILE'}
+              <div className="flex flex-col items-center justify-center w-full h-full p-4 bg-ink-500/[0.03] hover:bg-ink-500/[0.06] transition-colors">
+                <div className="w-[105px] h-[135px] bg-ink-0 border border-ink-200 shadow-md rounded-lg flex flex-col justify-between p-3 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
+                  <div className="absolute top-0 right-0 left-0 bg-ink-700 text-ink-0 py-1 text-[8px] font-extrabold uppercase text-center tracking-wider font-sans">
+                    Resource File
+                  </div>
+                  <div className="flex-grow flex items-center justify-center pt-4">
+                    <File className="w-8 h-8 text-ink-400" />
+                  </div>
+                  <div className="flex items-center justify-between text-[7px] text-ink-400 font-bold border-t border-ink-100 pt-1 mt-1 font-sans">
+                    <span>BINARY</span>
+                    <span className="font-extrabold uppercase text-[6px]">{asset.type.split('/').pop() || 'FILE'}</span>
                   </div>
                 </div>
               </div>
diff --git a/Channel-Frontend/src/features/assets/components/AssetDetailsModal.tsx b/Channel-Frontend/src/features/assets/components/AssetDetailsModal.tsx
index 3fb6ebd..74004df 100644
--- a/Channel-Frontend/src/features/assets/components/AssetDetailsModal.tsx
+++ b/Channel-Frontend/src/features/assets/components/AssetDetailsModal.tsx
@@ -30,7 +30,7 @@ export const AssetDetailsModal: React.FC<AssetDetailsModalProps> = ({
       isOpen={isOpen && !!asset}
       onClose={onClose}
       title="Asset Details"
-      size="md"
+      size="2xl"
       footer={
         <Button
           onClick={onClose}
@@ -42,101 +42,107 @@ export const AssetDetailsModal: React.FC<AssetDetailsModalProps> = ({
       }
     >
       {asset && (
-        <div className="space-y-4 text-xs font-medium text-ink-900">
-          <div>
-            <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Title</h4>
-            <p className="text-sm font-extrabold text-ink-900 mt-1 font-sans">{asset.title}</p>
-          </div>
-
-          {asset.description && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 text-xs font-medium text-ink-900">
+          {/* Left Column */}
+          <div className="space-y-4">
             <div>
-              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Description</h4>
-              <p className="text-ink-700 mt-1 leading-relaxed font-sans">{asset.description}</p>
+              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Title</h4>
+              <p className="text-sm font-extrabold text-ink-900 mt-1 font-sans">{asset.title}</p>
             </div>
-          )}
 
-          {asset.type === 'case_study' && asset.thumbnailUrl && (
-            <div>
-              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans mb-1.5">Banner Image</h4>
-              <div className="w-full h-40 rounded-lg overflow-hidden border border-ink-200 shadow-sm bg-ink-50">
-                <img 
-                  src={asset.thumbnailUrl} 
-                  alt="Case Study Banner" 
-                  className="w-full h-full object-cover"
-                />
+            {asset.description && (
+              <div>
+                <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Description</h4>
+                <p className="text-ink-700 mt-1 leading-relaxed font-sans">{asset.description}</p>
+              </div>
+            )}
+
+            {(asset.type === 'case_study' || asset.thumbnailUrl) && asset.thumbnailUrl && (
+              <div>
+                <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans mb-1.5">Banner Image</h4>
+                <div className="w-full h-44 rounded-lg overflow-hidden border border-ink-200 shadow-sm bg-ink-50">
+                  <img 
+                    src={asset.thumbnailUrl} 
+                    alt="Asset Banner" 
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              </div>
+            )}
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Category</h4>
+                <p className="text-ink-900 mt-1 font-bold font-sans">{asset.categoryId || 'General'}</p>
+              </div>
+              <div>
+                <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Subcategory</h4>
+                <p className="text-ink-900 mt-1 font-bold font-sans">{asset.subcategory || '-'}</p>
               </div>
             </div>
-          )}
 
-          {asset.type === 'case_study' && asset.problemStatement && (
-            <div>
-              <h4 className="text-[10px] font-bold uppercase tracking-wider text-red-600 font-sans mb-1">Problem / Challenge</h4>
-              <p className="text-ink-700 leading-relaxed font-sans whitespace-pre-wrap text-xs bg-red-500/[0.02] border border-red-500/10 p-3 rounded-lg shadow-sm">
-                {asset.problemStatement}
-              </p>
-            </div>
-          )}
-
-          {asset.type === 'case_study' && asset.solution && (
-            <div>
-              <h4 className="text-[10px] font-bold uppercase tracking-wider text-emerald-650 font-sans mb-1">Suggested Solution</h4>
-              <p className="text-ink-700 leading-relaxed font-sans whitespace-pre-wrap text-xs bg-emerald-500/[0.02] border border-emerald-500/10 p-3 rounded-lg shadow-sm">
-                {asset.solution}
-              </p>
-            </div>
-          )}
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Category</h4>
-              <p className="text-ink-900 mt-1 font-bold font-sans">{asset.categoryId || 'General'}</p>
-            </div>
-            <div>
-              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Subcategory</h4>
-              <p className="text-ink-900 mt-1 font-bold font-sans">{asset.subcategory || '-'}</p>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">File Size</h4>
-              <p className="text-ink-900 mt-1 font-bold font-sans">{asset.type === 'url' ? 'N/A' : formatBytes(asset.size)}</p>
-            </div>
-            <div>
-              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">File Type</h4>
-              <p className="text-ink-900 mt-1 font-bold font-sans">{asset.type}</p>
-            </div>
-          </div>
-
-          {asset.tags.length > 0 && (
-            <div>
-              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Tags</h4>
-              <div className="flex flex-wrap gap-1.5 mt-1.5">
-                {asset.tags.map(tag => (
-                  <span key={tag} className="px-2 py-0.5 rounded bg-ink-50 border border-ink-200 text-[10px] font-bold text-ink-600 font-sans">
-                    {tag}
-                  </span>
-                ))}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">File Size</h4>
+                <p className="text-ink-900 mt-1 font-bold font-sans">{asset.type === 'url' ? 'N/A' : formatBytes(asset.size)}</p>
+              </div>
+              <div>
+                <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">File Type</h4>
+                <p className="text-ink-900 mt-1 font-bold font-sans">{asset.type}</p>
               </div>
             </div>
-          )}
+          </div>
 
-          {userRole === 'ADMIN' && asset.sharedWith && (
-            <div>
-              <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Shared With</h4>
-              <div className="flex flex-wrap gap-1.5 mt-1.5">
-                {asset.sharedWith.length === 0 ? (
-                  <span className="text-ink-500 font-semibold italic font-sans">Not shared with any organization</span>
-                ) : (
-                  asset.sharedWith.map(sw => (
-                    <span key={sw.userId ? `${sw.organizationId}-${sw.userId}` : sw.organizationId} className="px-2 py-0.5 rounded bg-ink-900 text-ink-0 text-[10px] font-bold font-sans">
-                      {sw.organization?.name || 'Unknown Organization'} {sw.user ? `(${sw.user.email})` : '(Entire Org)'}
+          {/* Right Column */}
+          <div className="space-y-4">
+            {asset.type === 'case_study' && asset.problemStatement && (
+              <div>
+                <h4 className="text-[10px] font-bold uppercase tracking-wider text-red-650 font-sans mb-1.5">Problem / Challenge</h4>
+                <p className="text-ink-700 leading-relaxed font-sans whitespace-pre-wrap text-xs bg-red-500/[0.02] border border-red-500/10 p-3 rounded-lg shadow-sm">
+                  {asset.problemStatement}
+                </p>
+              </div>
+            )}
+
+            {asset.type === 'case_study' && asset.solution && (
+              <div>
+                <h4 className="text-[10px] font-bold uppercase tracking-wider text-emerald-650 font-sans mb-1.5">Suggested Solution</h4>
+                <p className="text-ink-700 leading-relaxed font-sans whitespace-pre-wrap text-xs bg-emerald-500/[0.02] border border-emerald-500/10 p-3 rounded-lg shadow-sm">
+                  {asset.solution}
+                </p>
+              </div>
+            )}
+
+            {asset.tags.length > 0 && (
+              <div>
+                <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Tags</h4>
+                <div className="flex flex-wrap gap-1.5 mt-1.5">
+                  {asset.tags.map(tag => (
+                    <span key={tag} className="px-2 py-0.5 rounded bg-ink-50 border border-ink-200 text-[10px] font-bold text-ink-600 font-sans">
+                      {tag}
                     </span>
-                  ))
-                )}
+                  ))}
+                </div>
               </div>
-            </div>
-          )}
+            )}
+
+            {userRole === 'ADMIN' && asset.sharedWith && (
+              <div>
+                <h4 className="text-[10px] font-bold uppercase tracking-wider text-ink-500 font-sans">Shared With</h4>
+                <div className="flex flex-wrap gap-1.5 mt-1.5">
+                  {asset.sharedWith.length === 0 ? (
+                    <span className="text-ink-500 font-semibold italic font-sans">Not shared with any organization</span>
+                  ) : (
+                    asset.sharedWith.map(sw => (
+                      <span key={sw.userId ? `${sw.organizationId}-${sw.userId}` : sw.organizationId} className="px-2 py-0.5 rounded bg-ink-900 text-ink-0 text-[10px] font-bold font-sans">
+                        {sw.organization?.name || 'Unknown Organization'} {sw.user ? `(${sw.user.email})` : '(Entire Org)'}
+                      </span>
+                    ))
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
         </div>
       )}
     </Modal>
diff --git a/Channel-Frontend/src/features/assets/components/AssetViewerModal.tsx b/Channel-Frontend/src/features/assets/components/AssetViewerModal.tsx
index 3780f51..6a92f5d 100644
--- a/Channel-Frontend/src/features/assets/components/AssetViewerModal.tsx
+++ b/Channel-Frontend/src/features/assets/components/AssetViewerModal.tsx
@@ -229,6 +229,30 @@ export const AssetViewerModal: React.FC<AssetViewerModalProps> = ({
             Close Preview
           </Button>
           
+          {asset && (user?.role === 'ADMIN' || asset.isDownloadable || asset.downloadRequests?.[0]?.status === 'APPROVED') && (
+            <Button
+              onClick={() => {
+                const url = getFullAssetUrl(asset.url);
+                const isOffice = asset.type.includes('word') || asset.type.includes('presentation') || asset.type.includes('sheet') || 
+                                 asset.url.toLowerCase().endsWith('.docx') || asset.url.toLowerCase().endsWith('.doc') || 
+                                 asset.url.toLowerCase().endsWith('.pptx') || asset.url.toLowerCase().endsWith('.ppt') || 
+                                 asset.url.toLowerCase().endsWith('.xlsx') || asset.url.toLowerCase().endsWith('.xls');
+                
+                if (isOffice && !isLocalUrl(asset.url)) {
+                  window.open(`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`, '_blank');
+                } else {
+                  window.open(url, '_blank');
+                }
+              }}
+              variant="secondary"
+              size="sm"
+              className="flex items-center gap-2"
+            >
+              <ExternalLink className="w-4 h-4" />
+              <span>Open in New Tab</span>
+            </Button>
+          )}
+
           {asset && asset.type !== 'url' && (user?.role === 'ADMIN' || asset.isDownloadable || asset.downloadRequests?.[0]?.status === 'APPROVED') && (
             <Button
               onClick={() => onDownload(asset)}