Update frontend/src/pages/Repository.jsx

frontend/src/pages/Repository.jsx

@@ -114,6 +114,8 @@ export default function Repository() {
   const [pdfPages, setPdfPages] = useState(null);
   const [isLoadingPdf, setIsLoadingPdf] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [previewError, setPreviewError] = useState(null);
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false);
   const fileInputRef = useRef(null);
 
   const toggleProduct = (productId) => {
@@ -706,7 +708,7 @@ export default function Repository() {
                     <FolderOpen className="w-4 h-4" />
                     <span className="font-medium text-sm">All Assets</span>
                     <Badge variant="secondary" className="ml-auto text-xs">
-                      {mockAssets.length}
+                      {assets.length}
                     </Badge>
                   </button>
                   
@@ -849,6 +851,13 @@ export default function Repository() {
                                 e.stopPropagation();
                                 setPreviewAsset(asset);
                                 setPreviewDialogOpen(true);
+                                setPreviewError(null);
+                                setIsLoadingPreview(true);
+                                if (asset.type === 'document' && asset.name.toLowerCase().endsWith('.pdf')) {
+                                  loadPdfPages(String(asset.id)).finally(() => setIsLoadingPreview(false));
+                                } else {
+                                  setIsLoadingPreview(false);
+                                }
                               }}
                             >
                               <Eye className="w-4 h-4" />
@@ -890,12 +899,15 @@ export default function Repository() {
                               <DropdownMenuItem onClick={async () => {
                                 setPreviewAsset(asset);
                                 setPreviewDialogOpen(true);
+                                setPreviewError(null);
+                                setIsLoadingPreview(true);
                                 // Load PDF pages if it's a PDF
                                 if (asset.type === 'document' && asset.name.toLowerCase().endsWith('.pdf')) {
                                   await loadPdfPages(String(asset.id));
                                 } else {
                                   setPdfPages(null);
                                 }
+                                setIsLoadingPreview(false);
                               }}>
                                 <Eye className="w-4 h-4 mr-2" /> Preview
                               </DropdownMenuItem>
@@ -975,12 +987,15 @@ export default function Repository() {
                               <DropdownMenuItem onClick={async () => {
                                 setPreviewAsset(asset);
                                 setPreviewDialogOpen(true);
+                                setPreviewError(null);
+                                setIsLoadingPreview(true);
                                 // Load PDF pages if it's a PDF
                                 if (asset.type === 'document' && asset.name.toLowerCase().endsWith('.pdf')) {
                                   await loadPdfPages(String(asset.id));
                                 } else {
                                   setPdfPages(null);
                                 }
+                                setIsLoadingPreview(false);
                               }}>
                                 <Eye className="w-4 h-4 mr-2" /> Preview
                               </DropdownMenuItem>
@@ -1017,6 +1032,7 @@ export default function Repository() {
         if (!open) {
           setPreviewAsset(null);
           setPdfPages(null);
+          setPreviewError(null);
         }
       }}>
         <DialogContent className="max-w-6xl max-h-[90vh] flex flex-col">
@@ -1043,20 +1059,63 @@ export default function Repository() {
           <div className="mt-4 flex-1 overflow-auto">
             {previewAsset && (
               <div className="space-y-4">
-                {previewAsset.type === 'image' ? (
-                  <img 
-                    src={`/api/assets/${String(previewAsset.id)}/download`} 
-                    alt={previewAsset.name}
-                    className="max-w-full h-auto rounded-lg mx-auto"
-                  />
+                {previewError ? (
+                  <div className="flex flex-col items-center justify-center p-12 bg-red-50 rounded-lg border border-red-200">
+                    <FileText className="w-16 h-16 text-red-400 mb-4" />
+                    <p className="text-red-600 font-medium mb-2">Failed to load preview</p>
+                    <p className="text-red-500 text-sm mb-4 text-center max-w-md">{previewError}</p>
+                    <p className="text-slate-600 text-xs mb-4 text-center max-w-md">
+                      The file may not exist in the database or on disk. You can try downloading it instead.
+                    </p>
+                    <Button 
+                      onClick={() => window.open(`/api/assets/${String(previewAsset.id)}/download`, '_blank')}
+                      variant="outline"
+                      className="border-red-200 text-red-600 hover:bg-red-100"
+                    >
+                      <Download className="w-4 h-4 mr-2" />
+                      Download File
+                    </Button>
+                  </div>
+                ) : previewAsset.type === 'image' ? (
+                  <div className="relative">
+                    {isLoadingPreview && (
+                      <div className="absolute inset-0 flex items-center justify-center bg-slate-50 rounded-lg">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+                      </div>
+                    )}
+                    <img 
+                      src={`/api/assets/${String(previewAsset.id)}/download`} 
+                      alt={previewAsset.name}
+                      className="max-w-full h-auto rounded-lg mx-auto"
+                      onLoad={() => setIsLoadingPreview(false)}
+                      onError={(e) => {
+                        setIsLoadingPreview(false);
+                        setPreviewError('Failed to load image. The file may not exist or may have been deleted.');
+                        e.target.style.display = 'none';
+                      }}
+                    />
+                  </div>
                 ) : previewAsset.type === 'video' ? (
-                  <video 
-                    src={`/api/assets/${String(previewAsset.id)}/download`}
-                    controls
-                    className="max-w-full rounded-lg mx-auto"
-                  >
-                    Your browser does not support the video tag.
-                  </video>
+                  <div className="relative">
+                    {isLoadingPreview && (
+                      <div className="absolute inset-0 flex items-center justify-center bg-slate-50 rounded-lg">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+                      </div>
+                    )}
+                    <video 
+                      src={`/api/assets/${String(previewAsset.id)}/download`}
+                      controls
+                      className="max-w-full rounded-lg mx-auto"
+                      onLoadedData={() => setIsLoadingPreview(false)}
+                      onError={(e) => {
+                        setIsLoadingPreview(false);
+                        setPreviewError('Failed to load video. The file may not exist or may have been deleted.');
+                        e.target.style.display = 'none';
+                      }}
+                    >
+                      Your browser does not support the video tag.
+                    </video>
+                  </div>
                 ) : previewAsset.type === 'document' && previewAsset.name.toLowerCase().endsWith('.pdf') ? (
                   <div className="space-y-4">
                     {isLoadingPdf ? (