update

backend/app/main.py

@@ -430,6 +430,88 @@ async def get_assets(
             }
         ]
 
+@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"""
+    try:
+        from app.models import Asset
+        
+        # Try to get asset from database
+        try:
+            db_asset = db.query(Asset).filter(Asset.id == asset_id).first()
+        except Exception as orm_error:
+            # If ORM fails, use direct psycopg2
+            if "Could not determine version" in str(orm_error):
+                conn = get_direct_psycopg2_connection()
+                if conn:
+                    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 row:
+                            file_path = Path(row[2])
+                            if file_path.exists():
+                                return FileResponse(
+                                    path=str(file_path),
+                                    filename=row[1],
+                                    media_type="application/octet-stream"
+                                )
+                            else:
+                                raise HTTPException(status_code=404, detail="File not found on disk")
+                        else:
+                            raise HTTPException(status_code=404, detail="Asset not found")
+                    except Exception as psycopg2_error:
+                        if conn:
+                            conn.close()
+                        raise HTTPException(status_code=500, detail=str(psycopg2_error))
+            else:
+                raise HTTPException(status_code=500, detail=str(orm_error))
+        
+        if not db_asset:
+            raise HTTPException(status_code=404, detail="Asset not found")
+        
+        file_path = Path(db_asset.file_path)
+        if not file_path.exists():
+            raise HTTPException(status_code=404, detail="File not found on disk")
+        
+        # Determine media type
+        media_type = "application/octet-stream"
+        if db_asset.file_type == "image":
+            if file_path.suffix.lower() in [".jpg", ".jpeg"]:
+                media_type = "image/jpeg"
+            elif file_path.suffix.lower() == ".png":
+                media_type = "image/png"
+            elif file_path.suffix.lower() == ".gif":
+                media_type = "image/gif"
+            elif file_path.suffix.lower() == ".webp":
+                media_type = "image/webp"
+        elif db_asset.file_type == "video":
+            if file_path.suffix.lower() == ".mp4":
+                media_type = "video/mp4"
+            elif file_path.suffix.lower() == ".webm":
+                media_type = "video/webm"
+        elif db_asset.file_type == "document":
+            if file_path.suffix.lower() == ".pdf":
+                media_type = "application/pdf"
+            elif file_path.suffix.lower() in [".doc", ".docx"]:
+                media_type = "application/msword"
+        
+        return FileResponse(
+            path=str(file_path),
+            filename=db_asset.name,
+            media_type=media_type
+        )
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
 # ---- Post Management ----
 
 @app.post("/api/posts", response_model=PostResponse)

frontend/src/pages/Repository.jsx

@@ -106,6 +106,8 @@ export default function Repository() {
   const [isUploading, setIsUploading] = useState(false);
   const [assets, setAssets] = useState(mockAssets);
   const [isLoadingAssets, setIsLoadingAssets] = useState(false);
+  const [previewAsset, setPreviewAsset] = useState(null);
+  const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
   const fileInputRef = useRef(null);
 
   const toggleProduct = (productId) => {
@@ -566,10 +568,27 @@ export default function Repository() {
                         )}
                         <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                           <div className="flex gap-2">
-                            <Button size="icon" variant="secondary" className="h-9 w-9">
+                            <Button 
+                              size="icon" 
+                              variant="secondary" 
+                              className="h-9 w-9"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setPreviewAsset(asset);
+                                setPreviewDialogOpen(true);
+                              }}
+                            >
                               <Eye className="w-4 h-4" />
                             </Button>
-                            <Button size="icon" variant="secondary" className="h-9 w-9">
+                            <Button 
+                              size="icon" 
+                              variant="secondary" 
+                              className="h-9 w-9"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                window.open(`/api/assets/${asset.id}/download`, '_blank');
+                              }}
+                            >
                               <Download className="w-4 h-4" />
                             </Button>
                           </div>
@@ -595,10 +614,15 @@ export default function Repository() {
                               </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                              <DropdownMenuItem>
+                              <DropdownMenuItem onClick={() => {
+                                setPreviewAsset(asset);
+                                setPreviewDialogOpen(true);
+                              }}>
                                 <Eye className="w-4 h-4 mr-2" /> Preview
                               </DropdownMenuItem>
-                              <DropdownMenuItem>
+                              <DropdownMenuItem onClick={() => {
+                                window.open(`/api/assets/${asset.id}/download`, '_blank');
+                              }}>
                                 <Download className="w-4 h-4 mr-2" /> Download
                               </DropdownMenuItem>
                               <DropdownMenuItem className="text-red-600">
@@ -662,10 +686,15 @@ export default function Repository() {
                             </Button>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="end">
-                            <DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                              setPreviewAsset(asset);
+                              setPreviewDialogOpen(true);
+                            }}>
                               <Eye className="w-4 h-4 mr-2" /> Preview
                             </DropdownMenuItem>
-                            <DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                              window.open(`/api/assets/${asset.id}/download`, '_blank');
+                            }}>
                               <Download className="w-4 h-4 mr-2" /> Download
                             </DropdownMenuItem>
                             <DropdownMenuItem className="text-red-600">
@@ -682,6 +711,62 @@ export default function Repository() {
           </motion.div>
         </div>
       </div>
+
+      {/* Preview Dialog */}
+      <Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-auto">
+          <DialogHeader>
+            <DialogTitle>{previewAsset?.name || 'Preview'}</DialogTitle>
+          </DialogHeader>
+          <div className="mt-4">
+            {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"
+                  />
+                ) : previewAsset.type === 'video' ? (
+                  <video 
+                    src={`/api/assets/${previewAsset.id}/download`}
+                    controls
+                    className="max-w-full rounded-lg"
+                  >
+                    Your browser does not support the video tag.
+                  </video>
+                ) : (
+                  <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">Preview not available for this file type</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 className="flex items-center justify-between pt-4 border-t">
+                  <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>
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }