update

Dockerfile

@@ -10,6 +10,11 @@ RUN npm run build
 FROM python:3.11-slim
 WORKDIR /app
 
+# Install system dependencies for PDF processing
+RUN apt-get update && apt-get install -y \
+    poppler-utils \
+    && rm -rf /var/lib/apt/lists/*
+
 # Backend deps
 COPY backend/requirements.txt /app/backend/requirements.txt
 RUN pip install --no-cache-dir -r /app/backend/requirements.txt

README.md

@@ -84,6 +84,11 @@ cd backend
 pip install -r requirements.txt
 ```
 
+**Note for PDF Viewer**: The PDF viewer requires `poppler-utils` to be installed on your system:
+- **macOS**: `brew install poppler`
+- **Ubuntu/Debian**: `sudo apt-get install poppler-utils`
+- **Windows**: Download from [poppler-windows](https://github.com/oschwartz10612/poppler-windows/releases) and add to PATH
+
 3. **Run Frontend** (development mode):
 ```bash
 cd frontend

backend/app/main.py

@@ -598,6 +598,138 @@ async def get_assets(
             }
         ]
 
+@app.delete("/api/assets/{asset_id}")
+async def delete_asset(asset_id: int, db: Session = Depends(get_db)):
+    """Delete an asset from both filesystem and database"""
+    try:
+        from app.models import Asset
+        
+        # Get asset from database
+        conn = get_direct_psycopg2_connection()
+        if not conn:
+            raise HTTPException(status_code=500, detail="Database connection failed")
+        
+        try:
+            cursor = conn.cursor()
+            cursor.execute("""
+                SELECT id, name, file_path 
+                FROM assets 
+                WHERE id = %s
+            """, (asset_id,))
+            row = cursor.fetchone()
+            
+            if not row:
+                cursor.close()
+                conn.close()
+                raise HTTPException(status_code=404, detail="Asset not found")
+            
+            file_path = Path(row[2])
+            
+            # Delete file from filesystem
+            if file_path.exists():
+                try:
+                    file_path.unlink()
+                    print(f"✓ Deleted file: {file_path}")
+                except Exception as file_error:
+                    print(f"⚠ Could not delete file: {file_error}")
+                    # Continue with database deletion even if file deletion fails
+            
+            # Delete from database
+            cursor.execute("DELETE FROM assets WHERE id = %s", (asset_id,))
+            conn.commit()
+            cursor.close()
+            conn.close()
+            
+            return {
+                "success": True,
+                "message": f"Asset '{row[1]}' deleted successfully",
+                "asset_id": asset_id
+            }
+        except Exception as db_error:
+            if conn:
+                conn.close()
+            raise HTTPException(status_code=500, detail=f"Delete failed: {str(db_error)}")
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/api/assets/{asset_id}/pdf-pages")
+async def get_pdf_pages(asset_id: int, db: Session = Depends(get_db)):
+    """Convert PDF to images and return page URLs"""
+    try:
+        from app.models import Asset
+        try:
+            from pdf2image import convert_from_path
+        except ImportError:
+            raise HTTPException(
+                status_code=503, 
+                detail="PDF conversion not available. Please install pdf2image and poppler-utils."
+            )
+        import base64
+        from io import BytesIO
+        
+        # Get asset from database
+        conn = get_direct_psycopg2_connection()
+        if not conn:
+            raise HTTPException(status_code=500, detail="Database connection failed")
+        
+        try:
+            cursor = conn.cursor()
+            cursor.execute("""
+                SELECT id, name, file_path, file_type 
+                FROM assets 
+                WHERE id = %s
+            """, (asset_id,))
+            row = cursor.fetchone()
+            cursor.close()
+            conn.close()
+            
+            if not row:
+                raise HTTPException(status_code=404, detail="Asset not found")
+            
+            file_path = Path(row[2])
+            if not file_path.exists():
+                raise HTTPException(status_code=404, detail="File not found on disk")
+            
+            if row[3] != "document" or not str(file_path).lower().endswith('.pdf'):
+                raise HTTPException(status_code=400, detail="File is not a PDF")
+            
+            # Convert PDF pages to images
+            try:
+                # Convert PDF to images (one per page)
+                images = convert_from_path(str(file_path), dpi=150)
+                
+                # Convert images to base64
+                page_images = []
+                for i, image in enumerate(images):
+                    buffered = BytesIO()
+                    image.save(buffered, format="PNG")
+                    img_str = base64.b64encode(buffered.getvalue()).decode()
+                    page_images.append({
+                        "page_number": i + 1,
+                        "image_data": f"data:image/png;base64,{img_str}"
+                    })
+                
+                return {
+                    "asset_id": asset_id,
+                    "asset_name": row[1],
+                    "total_pages": len(page_images),
+                    "pages": page_images
+                }
+            except Exception as pdf_error:
+                raise HTTPException(status_code=500, detail=f"PDF conversion failed: {str(pdf_error)}")
+        except HTTPException:
+            raise
+        except Exception as db_error:
+            if conn:
+                conn.close()
+            raise HTTPException(status_code=500, detail=str(db_error))
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
 @app.get("/api/assets/{asset_id}/download")
 async def download_asset(asset_id: int, db: Session = Depends(get_db)):
     """Download or preview an asset file"""

backend/requirements.txt

@@ -11,4 +11,7 @@ passlib[bcrypt]
 sqlalchemy
 alembic
 psycopg2-binary
-sqlalchemy-cockroachdb
+sqlalchemy-cockroachdb
+pdf2image
+Pillow
+pypdf

frontend/src/pages/Repository.jsx

@@ -110,6 +110,9 @@ export default function Repository() {
   const [previewAsset, setPreviewAsset] = useState(null);
   const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
   const [uploadProgress, setUploadProgress] = useState({});
+  const [pdfPages, setPdfPages] = useState(null);
+  const [isLoadingPdf, setIsLoadingPdf] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
   const fileInputRef = useRef(null);
 
   const toggleProduct = (productId) => {
@@ -183,6 +186,60 @@ export default function Repository() {
     return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
   };
 
+  // Handle delete asset
+  const handleDeleteAsset = async (assetId) => {
+    setIsDeleting(true);
+    try {
+      const response = await fetch(`/api/assets/${assetId}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ detail: 'Delete failed' }));
+        throw new Error(errorData.detail || 'Delete failed');
+      }
+
+      const result = await response.json();
+      console.log('Delete result:', result);
+      
+      // Refresh assets list
+      await fetchAssets();
+      
+      // Close preview if deleted asset was being previewed
+      if (previewAsset && previewAsset.id === assetId) {
+        setPreviewDialogOpen(false);
+        setPreviewAsset(null);
+        setPdfPages(null);
+      }
+      
+      alert('Asset deleted successfully');
+    } catch (error) {
+      console.error('Delete error:', error);
+      alert(`Delete failed: ${error.message}`);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  // Load PDF pages when previewing a PDF
+  const loadPdfPages = async (assetId) => {
+    setIsLoadingPdf(true);
+    setPdfPages(null);
+    try {
+      const response = await fetch(`/api/assets/${assetId}/pdf-pages`);
+      if (response.ok) {
+        const data = await response.json();
+        setPdfPages(data);
+      } else {
+        console.error('Failed to load PDF pages');
+      }
+    } catch (error) {
+      console.error('Error loading PDF pages:', error);
+    } finally {
+      setIsLoadingPdf(false);
+    }
+  };
+
   // Fetch assets on component mount and when upload dialog closes
   useEffect(() => {
     fetchAssets();
@@ -764,9 +821,15 @@ export default function Repository() {
                               </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                              <DropdownMenuItem onClick={() => {
+                              <DropdownMenuItem onClick={async () => {
                                 setPreviewAsset(asset);
                                 setPreviewDialogOpen(true);
+                                // Load PDF pages if it's a PDF
+                                if (asset.type === 'document' && asset.name.toLowerCase().endsWith('.pdf')) {
+                                  await loadPdfPages(asset.id);
+                                } else {
+                                  setPdfPages(null);
+                                }
                               }}>
                                 <Eye className="w-4 h-4 mr-2" /> Preview
                               </DropdownMenuItem>
@@ -775,7 +838,14 @@ export default function Repository() {
                               }}>
                                 <Download className="w-4 h-4 mr-2" /> Download
                               </DropdownMenuItem>
-                              <DropdownMenuItem className="text-red-600">
+                              <DropdownMenuItem 
+                                className="text-red-600"
+                                onClick={async () => {
+                                  if (confirm(`Are you sure you want to delete "${asset.name}"?`)) {
+                                    await handleDeleteAsset(asset.id);
+                                  }
+                                }}
+                              >
                                 <Trash2 className="w-4 h-4 mr-2" /> Delete
                               </DropdownMenuItem>
                             </DropdownMenuContent>
@@ -836,9 +906,15 @@ export default function Repository() {
                             </Button>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="end">
-                            <DropdownMenuItem onClick={() => {
+                            <DropdownMenuItem onClick={async () => {
                               setPreviewAsset(asset);
                               setPreviewDialogOpen(true);
+                              // Load PDF pages if it's a PDF
+                              if (asset.type === 'document' && asset.name.toLowerCase().endsWith('.pdf')) {
+                                await loadPdfPages(asset.id);
+                              } else {
+                                setPdfPages(null);
+                              }
                             }}>
                               <Eye className="w-4 h-4 mr-2" /> Preview
                             </DropdownMenuItem>
@@ -847,7 +923,14 @@ export default function Repository() {
                             }}>
                               <Download className="w-4 h-4 mr-2" /> Download
                             </DropdownMenuItem>
-                            <DropdownMenuItem className="text-red-600">
+                            <DropdownMenuItem 
+                              className="text-red-600"
+                              onClick={async () => {
+                                if (confirm(`Are you sure you want to delete "${asset.name}"?`)) {
+                                  await handleDeleteAsset(asset.id);
+                                }
+                              }}
+                            >
                               <Trash2 className="w-4 h-4 mr-2" /> Delete
                             </DropdownMenuItem>
                           </DropdownMenuContent>
@@ -863,28 +946,93 @@ export default function Repository() {
       </div>
 
       {/* Preview Dialog */}
-      <Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>
-        <DialogContent className="max-w-4xl max-h-[90vh] overflow-auto">
+      <Dialog open={previewDialogOpen} onOpenChange={(open) => {
+        setPreviewDialogOpen(open);
+        if (!open) {
+          setPreviewAsset(null);
+          setPdfPages(null);
+        }
+      }}>
+        <DialogContent className="max-w-6xl max-h-[90vh] flex flex-col">
           <DialogHeader>
-            <DialogTitle>{previewAsset?.name || 'Preview'}</DialogTitle>
+            <DialogTitle className="flex items-center justify-between">
+              <span>{previewAsset?.name || 'Preview'}</span>
+              {previewAsset && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"
+                  onClick={async () => {
+                    if (confirm(`Are you sure you want to delete "${previewAsset.name}"?`)) {
+                      await handleDeleteAsset(previewAsset.id);
+                    }
+                  }}
+                  disabled={isDeleting}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </Button>
+              )}
+            </DialogTitle>
           </DialogHeader>
-          <div className="mt-4">
+          <div className="mt-4 flex-1 overflow-auto">
             {previewAsset && (
               <div className="space-y-4">
                 {previewAsset.type === 'image' ? (
                   <img 
                     src={`/api/assets/${previewAsset.id}/download`} 
                     alt={previewAsset.name}
-                    className="max-w-full h-auto rounded-lg"
+                    className="max-w-full h-auto rounded-lg mx-auto"
                   />
                 ) : previewAsset.type === 'video' ? (
                   <video 
                     src={`/api/assets/${previewAsset.id}/download`}
                     controls
-                    className="max-w-full rounded-lg"
+                    className="max-w-full rounded-lg mx-auto"
                   >
                     Your browser does not support the video tag.
                   </video>
+                ) : previewAsset.type === 'document' && previewAsset.name.toLowerCase().endsWith('.pdf') ? (
+                  <div className="space-y-4">
+                    {isLoadingPdf ? (
+                      <div className="flex flex-col items-center justify-center p-12 bg-slate-50 rounded-lg">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
+                        <p className="text-slate-600">Converting PDF pages to images...</p>
+                      </div>
+                    ) : pdfPages && pdfPages.pages ? (
+                      <div className="space-y-6">
+                        <div className="text-sm text-slate-600 bg-blue-50 p-3 rounded-lg">
+                          <strong>PDF Viewer:</strong> {pdfPages.total_pages} page{pdfPages.total_pages !== 1 ? 's' : ''}
+                        </div>
+                        <div className="space-y-4 max-h-[70vh] overflow-y-auto pr-2">
+                          {pdfPages.pages.map((page, index) => (
+                            <div key={index} className="border border-slate-200 rounded-lg p-4 bg-white shadow-sm">
+                              <div className="text-xs text-slate-500 mb-2 font-medium">
+                                Page {page.page_number} of {pdfPages.total_pages}
+                              </div>
+                              <img 
+                                src={page.image_data}
+                                alt={`Page ${page.page_number}`}
+                                className="max-w-full h-auto rounded border border-slate-100 shadow-sm"
+                                style={{ maxHeight: '800px' }}
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="flex flex-col items-center justify-center p-12 bg-slate-50 rounded-lg">
+                        <FileText className="w-16 h-16 text-slate-400 mb-4" />
+                        <p className="text-slate-600 mb-4">Failed to load PDF preview</p>
+                        <Button 
+                          onClick={() => window.open(`/api/assets/${previewAsset.id}/download`, '_blank')}
+                          variant="outline"
+                        >
+                          <Download className="w-4 h-4 mr-2" />
+                          Download to view
+                        </Button>
+                      </div>
+                    )}
+                  </div>
                 ) : (
                   <div className="flex flex-col items-center justify-center p-12 bg-slate-50 rounded-lg">
                     <FileText className="w-16 h-16 text-slate-400 mb-4" />
@@ -898,19 +1046,34 @@ export default function Repository() {
                     </Button>
                   </div>
                 )}
-                <div className="flex items-center justify-between pt-4 border-t">
+                <div className="flex items-center justify-between pt-4 border-t sticky bottom-0 bg-white">
                   <div className="text-sm text-slate-600">
                     <p><strong>Type:</strong> {previewAsset.type}</p>
                     <p><strong>Size:</strong> {previewAsset.size}</p>
                     <p><strong>Date:</strong> {previewAsset.date}</p>
                   </div>
-                  <Button 
-                    onClick={() => window.open(`/api/assets/${previewAsset.id}/download`, '_blank')}
-                    variant="outline"
-                  >
-                    <Download className="w-4 h-4 mr-2" />
-                    Download
-                  </Button>
+                  <div className="flex gap-2">
+                    <Button 
+                      onClick={() => window.open(`/api/assets/${previewAsset.id}/download`, '_blank')}
+                      variant="outline"
+                    >
+                      <Download className="w-4 h-4 mr-2" />
+                      Download
+                    </Button>
+                    <Button
+                      variant="outline"
+                      className="text-red-600 border-red-200 hover:bg-red-50"
+                      onClick={async () => {
+                        if (confirm(`Are you sure you want to delete "${previewAsset.name}"?`)) {
+                          await handleDeleteAsset(previewAsset.id);
+                        }
+                      }}
+                      disabled={isDeleting}
+                    >
+                      <Trash2 className="w-4 h-4 mr-2" />
+                      {isDeleting ? 'Deleting...' : 'Delete'}
+                    </Button>
+                  </div>
                 </div>
               </div>
             )}